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 likeOmniGraffleand 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.
Pros
Calling all Scaleup founders! Join the Soonicorn Summit on November 28 in Amsterdam.
Meet with the leaders of Picnic, Miro, Carbon Equity and more during this exclusive event dedicated to Scaleup Founders!
Cons
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
Cons
Browser Mockups
Going directly to the browser is the smallest of the three camps, but it has somestrongproponents. 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
Cons
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.
Story byJoel Falconer
Joel Falconer is the Features Editor at TNW. He lives on the Gold Coast, Australia with his wife and three kids and can sometimes be found g(show all)Joel Falconeris the Features Editor at TNW. He lives on the Gold Coast, Australia with his wife and three kids and can sometimes be foundgamingorconsulting. Follow Joel onTwitter.
Get the TNW newsletter
Get the most important tech news in your inbox each week.
