Pixel Perfect – Flat Design is Not How it Works
Ignoring any server logic or database connections, and whether it be JSPs, ASPs or pure HTML5, a web page consists of markup that contains content, styling for fonts or images, and of course the content itself. It is not a flat design and only exists in the form seen by a user when it renders in a browser.
So why are so many of us designing websites in a tool for manipulating photos?
Let’s get something straight, I am not anti-Photoshop. I have spent years working with possibly the most globally known tool in print, photography, advertising, and digital media — so I like to think I know how to use it quite well. But it is not a layout package, it is not a design package, it is an image editor.
Why would you use Photoshop for webpage design any more than you would use it for page layout in print. For print the tools of choice are Quark and InDesign, because they do the job more effectively and efficiently than anything else. So why do people insist on using the wrong tool for designing webpages?
Photoshop should be used for creating and modifying images or designing the furniture of a page, that is where its strengths lie.
As we very often must design complete pages, whether for client approval or to guide UI-dev, then we should be smart about HOW we do it.
There are more similarities to print than photography with web design, so I recommend firing up InDesign. It is faster for laying out your elements and page structures, and you can use common elements across pages or files. Using common elements means you can modify one component and all pages will use this updated file — no more copying an element across 30 PSDs. The iteration times tumble post client review or following a change request. You can output PDFs for clients more easily from this software than Photoshop as well.
All this makes for faster sign off and more time to focus on code delivery.
Also, by thinking of page layout not ‘design’, we are also able to start thinking at an ‘atomic’ level [more on this at another time] and can start to define brand experiences.