web design by loftsites web design by loftsites

Web Design : Tim Aldiss

Analysis of a web site build

I have often wanted to document the process by which I design and build websites, but the thing stopping me is not that of plagiarism, but that the nature of the job means that the processes are constantly changing and any information may not be currently relevant. However, this gives me the excuse not to give any up to date tips and tricks away, so I will continue.

Having said that I'm sure many people out there will laugh at some of my methods, and many others will hopefully glean some useful information, as this is really what the web is all about, and copyright shouldn't be theft.

1. Web Design - Designing to a commission

The simplest way to fulfill a design brief is to get to know the client.

If this part of the job is omitted or hurried disaster can strike... and almost at any stage hereafter.

For instance. As part of a corporate job for a big client who will remain nameless, a design brief was roughly mapped out, and some initial agreements established between the client and the artwork designer. The fact that the client had seen and liked a well designed flash site as their inspiration for the functionality of their new site was overruled because it was also decided that adequate online promotion of the website would be an essential part of the job, and therefore Flash as a medium could not be used. Now anyone who has tried to recreate the functionality of Flash as HTML or even DHTML will know that it ain't the same thing. Even if just using embedded animations - there's no fluid transitions etc Anyway, back to the job... the final designs came as 3 options and eventually one was pushed through by the artwork designer - eager to get on and hand the job over to the web designer and get on with the next money earner. The web designer spends 16 hours of his usual quality hard graft to finish the job and puts it up for proofing on the dev server. It is at this point after over 40 hours of work has gone into the design and build that the client finally has had enough and it's obvious now that the whole idea needs to be stripped back to the initial design stage, and the final, completely different site design (in Flash!) is approved , developed and made live. To the great cost of the web design firm!

So, if there is any way to further your relationship and undesrtanding of the client do it. My usual course of action is to ask the client to point out some websites that they believe are well design/good resources/key rivals, and I also keep about 20 current screen shots of sites that I believe are well designed... there's a lot of them out there.

web design web design web design web design web design web design web design web design web design web design
I've been lucky with all my clients in that none of them have particularly avoided the idea of good design, and this is the next stage.

2. Web Design - Artwork approval

The client has to be made aware exactly of the nature of the interactivity of the site. This helps for 2 reasons:

Firstly, I always find that I am always let down by the stage when in all my excitement I finally reveal the first working draft of the site. Now from the clients point of view the last thing they will have seen from you is the signed off version of the artwork. But the problem with this is it is usually in the form of a flat jpeg or psd. When they see the first coded version it will hopefully look exactly the same as this. This can be frustrating as, despite the fact that they may now owe you upwards of a grand, the initial reaction from them can be disappointing;

Secondly, it is important at this stage to bash out any creative ideas for the level of interactivity the client wants, and any expectations they may have for things flying around on the site and the amount of extra time it may take to spice the finished work up if it is not enough for them. For instance DHTML is not going to recreate some of the things flash can do without extensive scripting knowledge.

What I find works, apart from initially getting the client to understand exactly what they are getting from the whole process of employing you as a web designer, is to give three different versions of the final web design. I like this stage. This is THE creative bit. This is where you sit down and let your inner experience infuse with your perception of what will and won't work, and the skill you should have in design if you are a web designer!
Here are three web designs for one client - T N Lawrence the Art Supplies Store. It's OK, you can visit their site - it will show you just how similar the finalised, approved design was to the end product! BTW the design shown is in it's most advanced stage, whereas the first two are first drafts. web design web design web design

3. Web Design - Artwork - The build

Photoshop. There's a tool. Never worked with anything else. In fact I'd use Photoshop if I was designing a Flash site. It's the easiest way of saving time when dealing with clients, and the more you go out of your way to put everyting on seperate layers and label everything the more money you will be saving yourself when they come back and ask you to change the keylines to pink! There's no point in me wasting space by giving away Photoshop tips - you live and learn, plus there are plenty of good sites out there offering free tutorials, and there is seemingly no end to the creativity of your output.

Having said that there is another tool that in my experience is as invaluable as Photoshop, and luckily it comes bundled as a package - Image Ready. This other Adobe product is the key to the other holy grail of the web build (the first being design) and that is download time. When I am ready to move over to Image Ready I know that the design stage ends with this process. It is important if one is billing different rates for the different skills involved in web design that the process of graphic optimisation is part of the design stage and billed accordingly. There is as much knowledge and as much of a good eye is needed at this stage as has come before.
Photoshop screenshot web design web design Image Ready screenshot

4. Web Design - Search engine optimisation

You may be surprised to see me mentioning search engine optimisation so early, and I will mention it again later on, but search engine optimisation is best considered here, and it is a good idea to have it buried in the back of the design mind too.

This is another exciting stage (is there no end to the enjoyment!) Some decisions should be made at this stage, and a lot of them have to do with one of my other specialist areas - search engine optimisation. If there is any way at this stage that a chunk of text can end up as text instead of graphic it would be wise to consider doing so. Content is king in the search engine world, and if this text is your brand name or has keywords in it that you would like to be found in search engines for it is important to consider this as a design compromise. This can often be a tricky process, but I believe that the best overall designed sites are the ones which take this into consideration and don't compromise the design. I like to think I successfully achieved this with the T N Lawrence website as the navigation could quite easily have been a graphic. The same could be said of Doctor Bannock (the headings being more important than the navigation), and Dion Salvador Lloyd.

There is of course the other reason - download time. Once again this isn't the place for a tutorial, but this can make the difference between a success and a failure. However, as a lover of good design even I find this compromise hard sometimes.
To see a graphical example of this point click here to see how I got round using graphics by using Image Ready to cut up the navigational tabs on this project. web design

5. Web design - The page build

I don't think it matters which tool you use these days, as long as you do use a WYSIWYG editor at some stage. Some people love them others hate them, but the undeniable truth is that once you get to know them they can save you an awful lot of time and therefore money. I'm firmly planted in the Adobe camp again on this one, and use GoLive. Although once upon a time this product seemed to cause more grief than assistance, if you use other tools alongside it to do more complex tasks (site wide special character find and replace as an example) I think it is a fantastic tool. I 'm not trying to sell it to you, but when I tell you that you can design your site in a graphical hierrachical version first and publish all your pages from this sitemap at the click of a mouse you should be somewhat impressed?!

I also find WYSIWYG editors are essential for complex table structures. Once upon a time I was told that nesting tables was a no-no. Nothing could be further from the truth. There are a lot more awful ways of over complicating a build, but this is not one of them. Fair enough it helps to allow the page to load in in manageable chunks, but as long as you don't wrap the whole of a hugely graphic based page inside one table you are alright.
Here's what my home page looks like in the layout mode of GoLive. It took me ages to get the layout fixed to work across Netscape/Explorer on Mac/PC platforms, but without a WYSIWYG editor I don't think I could have done it, even though I am a self taught hand coder. web design

6. Web design - Delivery

So you reckon you've finished the job hey? Well chances are that you haven't and I suggest either bartering for a little more time or just going over everything with a fine tooth comb. To be honest this part shouldn't really have to be up to you the web designer, but sometimes it is better not to ask the client to proof the site straight away. Got any mates? Get them to do it!

Next comes the arduous bit to do with tech guys. Don't get me wrong, some of my friends are tech guys, but they are a breed apart. I find it such a relief on those fairly simple projects when all you have to do is upload everything to a folder off the root and proof it live there, but there are inevitably more problems to do either with hosting or with overwriting an old site.

If you've got this far and the client is happy then you're onto a winner. If they're not then good luck to ya, because they should have made themselves clear about £400 ago! Either way I hope some of this information has helped in some way. Check back sometime, I may well have expanded on it, and don't forget, you can always get me to design that website for you!!

home | web design | photos | camper conversion | archie's page | kilimanjaro climb | thai travelog | contact

Osbourne & Little | Contemporary Wallpaper | Floral Wallpaper