Creating Concepts: Three Approaches to Web Design Mockups

There are two major camps in the web design business when it comes to mockups — one camp designs pixel-perfect comps in Photoshop that are intended to represent the final design as accurately as possible, and the other believes that doing a quick, simple wireframe on paper or in a tool like OmniGraffle and moving straight from there to the text editor is the way to go.

Then there’s a third camp that’s more recent with fewer adherents — using HTML and CSS to wireframe and iterating on that in the browser to create the design.

What’s the best way to go? What are the pros and cons of each method? These are questions that new designers — and even experienced ones considering changing their workflow — want answers for, but most reading represents the viewpoint of a staunch supporter of one method. Today, we look at all three so that you can decide what’s best for you.

Pixel-Perfect Mockups

Creating pixel-perfect mockups means using a static design tool, like Photoshop, to create your design as you want it to appear in the browser — down to the last pixel. Your margins should be consistent and exactly as wide as you want them to be. Your typography decisions need to be made at the outset and adhered to during the mockup process — you know what size, color and font ever heading tag is going to use. The list goes on, but in short, you’re going for consistency and final product-like perfection.

The 💜 of EU tech

The latest rumblings from the EU tech scene, a story from our wise ol' founder Boris, and some questionable AI art. It's free, every week, in your inbox. Sign up now!

Pros

• You solidify the look of the site in the project’s early stages.
• A pixel-perfect mockup is useful to the client — they know they’ll get what they see, not another version based on the mockup that may or may not look the same.
• PSD-to-HTML services and other developers don’t need extensive explanations — everything they need to know is in the PSD, and they can work faster and deliver the finished product sooner.
• Turning the design into a working website is faster because you don’t need to take the iterative approach as you decide what do with minor details in the design.

Cons

• Static mockups don’t clearly demonstrate the interactive nature of web design — you can’t see what happens when you hover or click on elements, nor can you see JavaScript effects. One could argue that these decisions are as much a part of the mockup process as making typography decisions, and this method precludes them to a later stage of the project.
• The mockup phase takes a lot longer. Whether that time is saved later in the project may depend on the individual and the client’s propensity for revisions.

Quick Wireframing

Designers who take this approach map out the site’s basic layout on paper or in a wireframing tool. These mockups tend to convey the information architecture of the site, but skip over the more artistic details, such as colors, typography and textures.

Once these basic wireframes are done, the designer heads straight over to the text editor where they map out the layout and then start making design decisions in a highly iterative process. This is the 37signals approach–“Design broadly. Iterate locally. Finalize specifically.”

Pros

• Gets you out of the conceptual phase and into the implementation phase very quickly.
• Allows more flexibility during the implementation phase, while continuing to provide some project guidance through the wireframe.
• Allows you to develop within the browser, making interactive events and JavaScript effects as much a part of the design process as static elements, not tacked on afterwards.
• You’re less likely to overcrowd a design with unnecessary touches when you begin from HTML and CSS.

Cons

• You’re probably going to have to go to Photoshop eventually to create buttons, textures and the like. With a Photoshop mockup you can rapidly trial different options without leaving the app.
• It can be harder to get a solid design vision for the project from the start, sometimes leading to inconsistent and meandering decisions.
• You won’t have much to show clients until you’re nearly done coding the site. If they don’t like what you’ve done and request a new concept, you’ll have spent longer on the concept than if you’d mocked up a few designs in Photoshop. This works for 37signals because they design for themselves, not clients.

Browser Mockups

Going directly to the browser is the smallest of the three camps, but it has some strong proponents. This process involves structuring your site in HTML first, moving to CSS to form the basic layout, and then styling the page’s elements. Anything that can’t be done with CSS at this stage is then done in Photoshop.

Pros

• You’ll likely end up with a less arbitrary layout when you start the process with the content structure in HTML. The site is more likely to suit its function, whereas starting with the layout can leave designers using standard layouts as crutches. The 24 Ways article linked above includes a relevant quote from Jeffrey Zeldman: “Content precedes design. Design in the absence of content is not design, it’s decoration.”
• You can make mathematically perfect changes very quickly–using standard mockups, you’ll have to do lots of measuring and resizing to change the sizes of columns and margins.
• Rapid iteration-based approaches that take place in HTML and CSS suit the refresh-and-test style of web design better.
• As with the last model, creating your mockups for the browser first means that interaction elements aren’t afterthoughts to the design process–they’re an essential part of it.

Cons

• It’s easier to trial various textures and design elements beyond the capabilities of CSS when you’re mocking up in Photoshop. Unless you code with ideas for adding depth to the design later in mind, you may end up with a pretty bland result.
• Replacing Photoshop features with CSS3 attributes is great, but when you’re trying to achieve consistency across browsers it’s generally faster to work from a Photoshop design and slice out the images you need than it is to try and replicate the results of that code in Photoshop.
• If you’re a stronger designer than coder, you might skip ideas beyond your immediate coding skillset, as opposed to implementing them in Photoshop and using Google to help you figure out how to code them later.

Remember that these are just the main ‘camps’ of the mockup debate–they don’t represent every viewpoint, and there are many shades in between. You might be somewhere between pixel-perfect mockups and quick wireframing–getting most of the design done in Photoshop but not ironing out the details until you hit the browser, for instance. And that’s fine. In any field, workflow is a matter of individual preference, and you should do what produces the best work for you.