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.
January Review
January is coming to an end and I have somehow managed to remain sober, do my stretches, floss my teeth, write here, and post to my foto blog every single day. I have written an article for the New Escapologist, performed at OMG, and finished a couple of websites. I have watched Fritz Lang’s fantastic M and read lots of Shakespeare, including The Comedy of Errors and The Two Noble Kinsmen, both of which I greatly enjoyed. Overall, it has been a pretty good month.
However, the biggest revelation I’ve had has come from limiting myself to checking my (personal) email once a day. Previously I would check email (or read a feed or check the football news or whatever) every time that I reached a knot in my thought. It was compulsive. Since giving it up, I realise that what this did was to make me lose my thread entirely so that I would have to work my way back to the aforementioned knot. By allowing yourself to do things uninterruptedly, you avoid procrastination and usually find that there wasn’t even a knot in the first place.
My method for overcoming the compulsion has been ultra-simple: I make an agreement with myself not to check my email until I get home. What I like about this quite severe information diet is that it impels you to answer emails straight away because you know you won’t get another opportunity for 24 hours.
February lies ahead and a part of me wants to surrender myself to debauchery, but I probably won’t. The Jerry Seinfeld Productivity Secret of building up a chain of actions that become a chain of habits, makes the chain difficult to break.
Of course, this may just be hubris and I could be face down in a ditch come Sunday. We shall see.
John Updike
With the exponential increase in the number of celebrities, death is now no longer much of an event. If by some miracle civilization persists in its current phase for the next fifty year there will statistically be a celebrity death three times a day, as the massed ranks of ephemeral pop stars, actors, and television presenters wait in line to become a brief item on 24-hour rolling news.
This ubiquity, combined with the commodification of emotion, deadens the heart to any pangs of authentic sadness. Indeed, when I heard this morning that John Updike, one of my favourite novelists, had died my first thought was to compare the reaction to the news of Tony Hart’s death. In death, and our reaction to it, we get a sense of a cultural figure’s historical worth. If we talked for ten minutes about Hart, surely we should talk for ten hours about Updike — so much greater is the latter’s contribution.
People often complain that Updike was too profligate with his talents, knocking out a book a year with unerring regularity. Some wish that he had curbed his obsessions and focused on producing a neat and tidy oeuvre rather than the actual mess of poetry, criticism, novels (series and individual), and short stories, but his genius was to capture life’s epiphanic moments better than anybody else and perhaps these couldn’t be condensed into a universal masterwork.
The best things written about Updike are those by writers who influenced by him. Nicholson Baker’s anxiety of influence in U and I, produces sparks of inspiration when exercising his memory of Updike’s limpid phrases. Martin Amis’s essays in The Moronic Inferno, Visiting Mrs Nabokov, and The War Against Cliche reveal the oddities of Updike, those things that make him unlike anyone else: his lack of embarrassment, his breadth of knowledge, and his linguistic genius.
Of the 28 books of his I’ve read, my are the Rabbit books, the Bech books, Of the Farm, A Month of Sundays, Toward the End of Time, and his bountiful collections of criticism. They are the most surprising, the most beautiful, and the most characteristically Updikean books.
I remember thinking when reading Rabbit at Rest that Updike was a bit young (he was just 59, I think) to be thinking so much about death, but death was the spur that gave late-Updike all its vitality. For one who enjoyed life so much, the frailties and disappointments of ageing were a challenge that he met head on. He will be much missed.
Heavenly Interviews
In Bill and Ted’s Bogus Journey there is a depiction of heaven that rather appeals to me. It is like a big, white, eighteenth century coffee shop, where great minds get together to debate matters of principle in a gentlemanly manner. Einstein chats with other scientific greats like Newton, Aristotle, and Station; and you can easily imagine Dr. Johnson being witty with Dickens, Beckett, and Chaucer or Quentin Crisp holding court with Byron, Elagabalus, and Lao Tzu.
Alas, all the available evidence suggests that heaven does not exist, so we will have to content ourselves with fancies. Lately, my own fancies have been much embroidered by listening to some curious old interviews that I found archived on the internet.
Bob Claster’s comedy talk show features Peter Cook, Quentin Crisp, Douglas Adams, John Cleese, and Tom Lehrer amongst others. In the Cook and Crisp interviews he also includes plenty of the original material, far more than you are supposedly allowed, which makes it even more poignant.
Don Swaim’s interviews on Wired for Books were made around the same time, but feature literary authors rather than comic writers. They are slightly less well-informed, but equally enjoyable.
What I like most about these interviews is not what the interviewees say, but the gaps between what they say. In those gaps, you can infer the thought processes containing the years of accumulated struggle that has gone into making them the kind of people that earnest Americans want to interview. Cleese and Cook berate themselves for being lazy. Tom Lehrer’s eyebrows arch as he calmly states that he hasn’t got anything left to say. Brian Boyd smiles as he states his ardour for Nabokov’s works. John Updike stutters as he talks about male witches. It is endlessly intriguing listening. Best of all, I don’t find it at all distracting as I do with most music, it is just a pleasant counterpoint to my web design work.
Leaving Shawfield
The company I work for recently announced that we would be moving to new premises. It had been expected, the rumours had been flying around for months, but I still got a shiver of anticipation at the thought of leaving Shawfield.
Two years in Shawfield — a grimey, ill-kempt place near the East End of Glasgow — is long enough. And yet, as Samuel Johnson said in his final Idler essay “There are few things not purely evil, of which we can say, without some emotion of uneasiness, this is the last.”
Although we aren’t leaving until April, my daily commute is tinged with quiet melancholy: no longer will I be able to walk through Glasgow Green, no longer will I see the glum cyclist who never acknowledges my friendly nods; the Strathclyde distillery, the Templeton carpet factory, the dog track — all of these sights, that I have take for granted, will no longer be part of my routine.
According to Google Maps, the walk from my flat to the current office takes 39 minutes, whereas it takes 38 minutes to walk to the new offices. That is a victory of sorts: an extra minute in bed could be the difference between consummating an act of erotic passion in my dream and feeling dissatisfied for the rest of the day.
Anyhow, I thought it might be an opportune moment to document my daily walk/cycle:
