How to design a website
We had a work experience kid in the other week. He didn’t particularly want to be a web designer — he didn’t particularly want to do anything — but we had a spare desk and if you sent him to any other part of IT he’d probably die of boredom before the first day had ended.
His task for the week was to redesign his school’s website and I was assigned the task of encouraging him and pointing him in the right direction. This was more interesting than it sounds (for me if not for him). It allowed me to think about my own processes and how I get from the design brief to the finished website.
1. Discover your purpose
There is no design without purpose. Take a look at the great taglines of successful sites: they all knew exactly what they wanted to do when they first started. YouTube has “Broadcast Yourself”. Twitter has “What are you doing?” The webdesigner Jonathan Snook has the simple but descriptive “Tips tricks and bookmarks on web development.” You should be able to describe what you want your site to do with perfect economy. Without a sense of purpose, you are doomed to indecision and vagueness, neither of which sell well.
2. Determine what you need and what you want
Now that you have a sense of purpose, you will find it much easier to state exactly what you need on your site. Forget about what you want for the time being and just focus on what you absolutely need. By focusing your mind this way, you can ensure that your message gets across without distracting people with superfluous content.
For example, if you were setting up a webzine, you’d probably need:
- a content management system (cms) to make it easy to update;
- a list of recent updates;
- body text that is comfortable to read;
- a search box to help people find old articles;
- clear navigation to all the main sections, and,
- a prominent logo that conveys your brand.
You could build the site tomorrow with the above and it would work, however you’d might also want:
- a poll to gauge your readers’ opinions;
- a small text explaining what the webzine is about;
- a simple way for people to get in touch;
- an image rotator for the front page; and,
- a list of popular stories.
Dividing needs from wants helps clarify the success of a design at every stage.
3. Look for inspiration
Read design books, go to websites like Smashing Magazine and Design Meltdown, tag sites you like in Delicious, take screen grabs, visit galleries and sketch, go on a daytrip and take photos of interesting stuff . . . search for inspiration everywhere you go.
The more you see, the more you learn what you like and what you don’t like. If you see a site that has something you need to have on your site, then add it to the previous list.
4. Sketch layout ideas on the back of an envelope
Sketching layouts with paper and pencil is, for me at least, where the magic happens. You can now take all of the inspiration and thought from the previous three steps and distill it into a 3×2 inch rectangle. At this scale you can iterate quickly and there are no overheads for mistakes. By using such an imprecise tool, you also become divorced from your inspiration — reducing the temptation to borrow other people’s ideas too literally. It is also an organic process and a far better foundation than using sterile computer designs.
Once you have a few ideas that you think might work, draw them on an A4 piece of paper and discuss them. Show how you expect it to fit together and where you think the user’s focus should go. It is important to get client approval at this stage because it will save you a lot of headaches later on.
5. HTML Wireframes
In the past I used Axure, Fireworks, or Photoshop to create simple wireframes, thinking that it was much quicker. It was only after reading the 37Signals blog that I considered the possibility of going straight to html.
By eschewing another image program you get the foundations of the code sorted early on and the site will come alive before your eyes. By making HTML wireframes, you can also increase the chance that you receive the website content early on. The content should inform the design not just be tacked on at a later date. The resulting wireframes should show the basic functionality of the site, it doesn’t have to work exactly, but the client should be able to get a picture of how it all fits together.
At this stage, you should also countenance the idea of usability testing. The earlier you see functional problems to your site (“where’s the contact us button?”) the earlier you’ll be able to react to it. There are websites which offer simple usability tests complete with a written report for as little as $19.
6. Visual Mockup
Because you have been through the process of signing-off the wireframes, the discussions about the visual mockup should focus on the colour scheme, the visual imagery and the typography without worrying about the basic layout. Using photos from iStockphoto, experimenting with the logo, playing with typography. It is at this stage that the true beauty of the site will come through.
7. HTML
Now you can combine your wireframes with your visual mockup into a neat HTML, Converting this to a CMS template may also be appropriate at this stage. Although it may sometimes seem like it, the website isn’t finished yet!
8. Instruct User in how to operate the site
In order to aid the client and reduce the amount of maintenance, it is worth putting together a style guide, user instructions, and helpful hints. The style guide while ensure that the design remains consistent, the instructions will empower people to update the site regularly, and the helpful hints just make life easier for everyone.
9. Usability Testing
Choosing whether you do usability testing now or whether your users do it for you by getting frustrated when the site goes live, may prove the difference between a good launch and a damp squib. Go through the site with a fine tooth comb, remove any broken links, make sure that the site looks good in every modern browser, ask yourself whether your mother or another user persona could operate the site.
10. Optimization
Optimize the pages so that the design brings the best out of the content. Make sure that you have allotted time to give each page on the site some individuality. A good example of this can be seen at Huge Inc.
Have I missed anything? Is this too idealized a depiction of the web design process? Let me know below.