I often joke around that my job here at MU Web Communications is just to make things pretty. It’s somewhat true, but that’s only part of the job. There’s a lot more going on with a Web site design than pixels on a screen, so I thought I’d share my design process.
Here at Web Communications, the design process isn’t started until after the goals of the site have been established, a content inventory has been finished and a wireframe layout has been put together. Depending on the complexity of the site, some usability testing may also be completed with the wireframes before I start.
It’s important that I’m involved during these early steps. A successful design doesn’t just happen. I need to understand our goals, our audience, the content, and the technology being used. All these things have a direct impact on how I design the site. Once those important first steps are done, I can begin making things look pretty.
Research and sketches
First I review design annuals and other successful Web sites to find inspiration and to get ideas on how other people have solved design problems similar to my own. Then I do some rough sketches on paper to figure an appropriate color palette, page layout and visual style. This is also the time I plan, create and gather any photos or illustrations I may need for my design.
Time for Photoshop
The next step is opening Photoshop and creating mock-ups of how the site might look in a browser at actual size. Once I have a design mostly put together, I export it as a large image and drop it into a Web page so I can show it to the group for a critique. Then I go back and re-do it for another critique and repeat until it’s perfect or we get tired of arguing over it. ;-P
Time for Photo-chop
Next, I do a quick sketch on paper how I want to structure the div tags in the markup for the site. With that information, I know how I’ll need to chop up the graphics. I was careful to keep all the elements on their own layer when I created the mock-up so I can easily isolate them for export. Since I created everything at actual size in Photoshop, this step is quick and painless.
At this point, I begin coding the the XHTML according to my structure sketch. Once I have that done, I style it with CSS.
Validation
The last step is taking my finished template and testing it in multiple browsers, making sure the XHTML and CSS validates, and making sure it passes accessibility tests. Once that’s all done, the templates are passed on to the poor sap who has to build it in the content management system.
See? It ain’t easy making things pretty. There’s a whole process involved and I only briefly covered it here. If you have some specific questions about how I do things, post your question in the comments and I’ll do my best to answer it.
Leave a comment
Note: Comments are moderated. If published, comments may be edited for length, style and clarity.