(Photo by Andrés Nieto Porras/Flickr)
Treehouse students will often ask me which mockup tool I use to prototype websites, and my response is almost always the same: pencil and paper.
I feel like when I give this answer, there’s a small sigh of disappointment. I think it’s because people are hoping for a better way to simplify the complexities of creative problem-solving.
Even though my answer might not be very flashy, building a website with a prototype is often much faster than skipping the prototype phase. Even for a very simple website, a five-minute sketch could save hours of trial and error in the late stages. The cheaper the prototype the better because prototypes involve more iterations and refinement that can be costly.
Free trial on Treehouse: Do you want to learn more about website prototyping and design? Click here to try a free trial on Treehouse.
Start with a Pencil and Paper
It’s tempting to open Photoshop or begin coding right away because these digital tools put a cap on the level of naivety and ignorance we can display. Taking this example to the extreme, it’s arguably more intimidating to draw a house with a pencil and paper than it is to build it with LEGO blocks. However, there are several advantages to drawing websites before jumping into more concrete tools.
In this image, I’ve used a pen to draw some small thumbnail sketches of a todo list app.
First, I think it’s important to mock up sites starting with the cheapest tool and moving toward more expensive time investments, and there’s nothing cheaper than drawing.
When I say “cheap,” I’m describing the level of time and emotional investment — not necessarily monetary expenses. Dozens of quick thumbnail sketches can be scratched out in a few minutes. The less time I spend on an idea, the less attached I’ll be; this is good in the early phases because I don’t want to settle too soon. Now is the time to explore all the possibilities.
Second, drawing allows for maximum flexibility. Some might argue that a more robust digital mockup tool can serve the same purpose, but I disagree. Drawings are great because the level of abstraction can change wildly in a matter of seconds. One moment I might be blocking out the major columns, and the next I might be deciding on the order of navigation elements.
Intentionally or not, digital mockups tend to lock in a specific level of detail fairly early on. Paper drawings should be loose without any attention given to fonts, colors, small interface elements, and so on. At this point, I’m just marking down the big ideas.
I should note here that any drawing tool will work fine, such as a whiteboard drawing or a drawing app for a tablet device. Just as long as it allows for quick sketches, it should serve the need.
Then Move onto a Digital Mockup
Once I have a paper mockup I’m happy with, only then will I use a digital mockup tool to wireframe my ideas. I like to use Balsamiq Mockups, but another popular choice is OmniGraffle. I like Balsamiq in particular because it has some commonly used web widgets, such as video players and embedded maps. I also like that the lines aren’t perfect because it helps others understand that the lines do not represent a final result.
This mockup was creating using Balsamiq Mockups. Digital mockups should focus on getting spacing and the flow of screens right.
Digital mockups are helpful because they can be shared easily. They’re also more comprehensible than quick paper sketches. Stakeholders (which might include team members, customers, clients, managers, and so on) can be sent a digital mockup for review, which is key to the prototyping process. If they want to see some small changes, it’s easy to make them. If they don’t like the idea at all and want a completely new direction, then it’s easy to do a few more paper mockups and then convert them to another digital mockup.
Each level of rapid prototyping should escalate the level of detail. At this phase, I pay attention to proportions, spacing, and alignment because it can be hard to get these elements right on paper. Often, a paper mockup will not translate well to a web framework because the proportions in your mind’s eye don’t always line up with reality. That said, I’m still not concerned with fonts and colors right now. The aesthetic here should just be a simple wireframe without any coloration or shading.
Skip Photoshop (If You Can)
When I say “skip Photoshop” I mean Photoshop, Illustrator, GIMP, Pixelmator, and similar high-fidelity tools. These digital tools sit at a different tier of abstraction typically intended to provide maximum detail. This is usually bad because the pixels will almost never line up the same way in a web browser, especially when it comes to responsive design and cross-browser inconsistencies. Also, I personally feel like I’m more efficient using a web framework than I am with these heavy digital tools.
High-fidelity mockups can be powerful but time-consuming. Avoid them if you can.
These are just guidelines though, and often, I’ll still find myself in Illustrator creating more detailed imagery. However, some website designs demand to be free from the bounds of conventional text, images, and columns. They also allow for key points of collaboration on medium and large teams. A detailed mockup might take a designer some time to put together, but it could also save massive amounts of development time.
For example, at Treehouse we have about 70 employees, and we use Illustrator mockups to help us design new features before spending more resources on the code. We’ll often even use a tool like InVision to create interactive mockups to get a feel for the flow of interaction. When interaction is added, a static “mockup” makes the leap into being a “prototype” because it’s more representative of the final product.
Pushing pixels without limits has an undeniable allure of power, but it should be used responsibly. Before just opening up an image-editing program, really think about whether or not you need it. Skip Photoshop, if you can.
Use a Framework to Prototype
The last step in my rapid prototyping process is the most expensive (but usually cheaper than Photoshop). After a digital mockup, I’ll use a framework like Bootstrap or Foundation to create an interactive prototype that works in a web browser. Beyond creating paper mockups, this is the most important step because a browser is the environment that the website will be viewed in.
When using a framework, I start with placeholder elements. Foundation has several examples of what these types of prototypes might look like before adding in things like images, videos, fonts, and colors. At this point, I spend more time refining the spacing and proportions that were started in the previous digital mockup phases.
Once I’m happy with these elements, I’ll then add in as much real data as I can. This is a key step and it’s best to add data as soon as possible. (In fact, I will often add real data in the wireframing step.)
Adding in real data (and language) rather than using placeholder “lorem ipsum” text could inform design decisions. Titles that are longer than expected or paragraphs that are too short could spark some necessary iteration.
Finish Up
The wonderful thing about prototyping with a framework is that the prototype often just becomes the real site because the structure and styling are already in place. There’s no need to recreate the site from scratch if it’s going to use the same framework. It’s a good idea to discuss technology decisions with collaborators before entering this step because it would be a tremendous waste of time to mock up a site in Foundation if it’s actually Bootstrap the team wants to use.
I’ve talked about mockups in the past, but I’m so often asked this question that I thought it merited some additional explanation. This is just the process that I like to use, but if there’s a technique that makes you more efficient than most, I’d love to hear from you in the comments.