Skin and Bones

posted by watts on April 3rd, 2007

Sometimes we designers get a little too caught up on how something looks – that is, we spend all our time in CSS Land prodding and poking our markup until things look perfect. Not that it’s necessarily a bad thing – it is part of our job after all. But I think we sometimes forget about the underlying structure of our applications – HTML.

Lately I’ve been asking myself this question whenever I am building a new page: What will this page look like unstyled? Will the page be usable without any CSS applied? Is it readable? Are the various sections in a logical order? Do the tags I am using make semantic sense? These questions have been shaping my design strategy recently and I think they have lead to more usable, more accessible, and cleaner web sites. In the good ol’ days, I’d always create a mock-up in Photoshop first, then figure out how it all goes together. But reworking that way is sort of like trying to build something in reverse.

Our approach to design involves getting the meat and bones in place before the skin. Our first step is to do a quick pencil sketch of how the page should be laid out, and what needs to go in it. This is meant to inform us how to create the layout and gives the developers a reference to work from. Working this way forces us to really look at the HTML we are creating and question ourselves about the mark-up we are writing. The result is clean and usable HTML, and we’re less likely to go about creating tons of spans and divs in order to get things looking right based on a visual design. HTML should inform our design, not the other way around.