Just finished reading Other Flexible Media: balloons and tattoos, which fits right in with the thought process below. This always happens, I start on a train of thought and I find others writing in the same vein.
“good” design is to succinctly take a concept and translate it into a tangible form through color, shape, type, and image
Photoshop mockups have a place in print publication. The medium is static, and the expectation is that you will get exact color and positioning from the static mockup to the print piece.
That NEVER happens in web design, due to the technical differences inherent in the various browsers and an ever changing landscape of devices. It is counter-intuitive to use a tool that was developed as a digital photo darkroom tool to create web interfaces. I’m not saying the tool is not good, it is just not appropriate for developing interactive, responsive web interfaces where (in most cases) there is little to no image use for the architecture, and the typography cascade in the structure is important.
It’s not until you put that design in the browser that it becomes a “web design”, therefore the pursuit of “pixel perfection” in a medium that is not the intended environment is futile.
Web design is in the markup, that is where I start. It is easier to do web mockups and editing in markup. You can show clients working interfaces in the browser. When you are done tweaking you have your product. Rather than spend months in photoshop, then start the whole process over in markup.
Webkit, Firefox, Opera and even IE, all have their own web development tools and that’s the correct way of viewing real-time adjustments to CSS before deciding the final CSS needed for the layout. You can make sure of the correct font size and placements cross-browser. You can test the differences that specific design decisions will make to the site performance.
With CSS3 effects in the browsers, you do not even need photoshop for a color palette. Webkit web development tools include the color palette for each individual color value. And they show interaction states. And they are getting better as web design/development tools all the time.
There, I said it. And if you want to hear from some experts in this field:
From this article:
However you feel about the concept of designing in the browser, the reality is that more and more designers are adopting this as part of their workflow. Some, like Andy Clarke, treat it as the biggest part of the design process, allowing the client to see flexible layouts, type, and rendering engine treatments on the fly as a design comes together; others, like me or Mike Kus, use it as an extension of our Photoshop work: initial design is done offline and is completed by filling in the gaps while in the browser. It’s certainly not my intention to write about the merits and pitfalls of designing in the browser here, but the key point is that if you don’t know how to writeHTML and CSS, it’s an avenue that’s completely closed off to you. The design process can begin and end entirely in your graphics app, but because websites will not (and should not) look the same in every browser, the design will not actually be complete until it’s coded.