As you might have noticed, apart from our foray into Illustrator to smarten up the site map, we haven’t gone near a computer yet. This is good. A huge mistake for any designer to make, whether they be web or graphic, is to start working on a computer straight away.
The computer is a tool - nothing more - it’ll only do what you tell it to do; it won’t design for you. So you need to be prepared before diving in. I think we’re all probably guilty at one time or another of ‘doing a bit of premature computer’ - I know I am. When I have no real plan - just a vague notion in my mind’s eye - the resulting design takes five times longer to create, and it's not as fully rounded as if I’d spent an hour or so with a pencil and pad creating a basic theme and structure. It’s much easy to work from pre-designed guidelines than it is from a loose idea in your head.
And it’s not just about drawing a potential framework for the website itself - we have to consider all the potential ‘widgets’, info panels, forms and other bits and bobs that creep into a design once construction in under way. These are few ‘top of my head’ things to consider:
As with the site map, the design is bound to evolve as you proceed with the site build - but you have to invest some time in developing a solid starting point - otherwise a mess will ensue.
From a graphic designer’s point of view, the closest thing I can compare a website design to is an educational book design. I’ve worked for years with publishers designing and laying out book series for the educational market. One thing that every series has in common is that the initial design visuals had to take account of a whole bucket full of design devices, font styles, A-headings, B-headings, info panels, acknowledgement styles, footnote features and so on and so forth (figure 1a & 1b). The principles of hierarchy and formatting are not far removed from web design - it's just the restrictions of layout that force changes in presentation.
I remember listening to a Podcast by Stephen Fry about his first Photoshop experience. Stephen was very excited about it - at last he’d be able to create marvellous things on his Mac using the revolutionary new software. Except… he didn’t. Instead, he very quickly discovered that owning Photoshop didn’t suddenly endow him with a great artistic talent - it just sat there and did what he told it to do. Which wasn't much.
I’ve had similar experiences with 3D modelling and animation software. Convinced I’d beat Nick Park to the next animation Oscar, I threw myself into 3D Studio Max. But then realised that I didn’t know how to make very good 3D models - or animate them very well.
So website design is extremely similar. Every eventuality has to be accounted for if a measure of consistency and professionalism is to be maintained. And if done correctly, the result will be nicely designed, simple to follow and therefore effortless to use. If any element is forgotten in the planning stage, it invariably gets shoehorned in as a last minute addition - and it looks out of place as a result.
Looking at my site ‘scamps’ (figure 2), my plan was to create a three-column design with an horizontal menu bar running below the main header. The left column would have a list of hyperlinks that would act as a subcategory menu, drilling down into the main categories. The central column would have the text and images, and the right column would be reserved for info boxes which would act as informative tips, ‘side notes’ and related links to the main content. Instead of piling up the info boxes in the right column, one on top of another, it makes more sense to have the side notes only appear next to the text to which they relate.
I generally prefer websites to be fixed-width rather than ‘fluid’, or expandable (unless practicality demands a fluid layout). The main reason for this is that a fixed-width page gives me more control over the design and layout. There’s nothing worse than a page full of text expanding in a single measure all the way across a widescreen display. I’d much rather have a sensible width with margins either side - and that’s how this site has been created.
The website will be optimized for PCs running Internet Explorer on a 1024 pixel x 768 pixel display. This is because (at the time of writing*) the most commonly used browsers on the Internet are Internet Explorer and Firefox, on screen resolutions of 1024 x 768 or above.
The most commonly used operating system was (at the time of writing...) Windows XP - so when I build a site, I have a PC laptop next to me running Windows XP, IE8 and Firefox (as well as Safari and Chrome) so I know the site’s going to work for as many people as possible. On the Mac I test it on Safari, Firefox and Opera. I also have a very old, tired PC running XP and IE6 so I don't ignore the 3% of IE6 users... but I won't be doing this much longer.
Once I feel I’ve gone as far as I can with my thumbnails and site sketches, I move to Photoshop. Of course, you may prefer Gimp or Fireworks - the principals of design and layout are the same no matter what tools you choose.
And so on with the design…