How to be a `web' `designer'

[ Home page ]

There is an increasing amount of `web' `design' around at the moment, and you may well want to get involved in this exciting trend. Here's how:

Requirements

You will need:

  1. A computer -- preferably an Apple Macintosh, as it would never do to be using the same platform as the majority of your users (and anyway, the web is cross-platform, isn't it?).
  2. A copy of Adobe Photoshop -- preferably an early version which isn't very good at .gifs and .jpgs.
  3. An authoring package for some multimedia technology with a snappy name (let's call it, for the sake of argument, Wizzytech Treacle).
  4. An early edition of the book HTML for Stupid People.
  5. A limitless belief in your own abilities.

Publishing on the web

First, site layout

The first thing to do is to figure out the rough layout of your site. It doesn't matter if you don't know what the content or even the name of your site are going to be yet, as these can always be changed later to fit your work.

HTML is a great language for layout and graphic design (see your copy of HTML for Stupid People). The central concept in HTML is the image, represented by the <img ...> tag. To lay out your site, first sketch out the design on paper as you would with the design of an advertisement or a new airport or something.

Next, fire up Photoshop and create a new image. Obviously, you'll want to make it fill the monitor (why else buy a 21" model?). Draw out your web page as you want it to appear (you might even want to scan the sketch you made earlier, as this will allow you to play with your expensive scanner), but don't worry about any of the irritating techy bits at this stage. Common web browsers are good at understanding pictures. At this stage, you should ignore anyone who mentions things like `average screen size 800 by 600 pixels', `modem', `limited bandwidth', or `256-colour display'. These people are just ignorant techies stuck in the 1970s.

You should also remember that real graphic designers went to Graphic Design School to learn how to do this stuff, but you'll be able to do just as well as them if you follow these simple rules:

  1. Primary colours are good, especially if they clash slightly; you should aim to make your web pages look like an episode from a 1960s science-fiction television show (you can add flashing lights and Leonard Nimoy later).
  2. You don't really need to be able to draw to design, since you can always head down to your local branch of Software Warehouse and buy clip-art CDs. The ones to buy are the ones with titles like `4 million photographs on CD for a fiver'.
  3. The key concept in graphic design is the Photoshop alpha blend. If you ensure that every part of your design is alpha-blended into another part, then people will instantly recognise your site as being well-designed. (In case you've forgotten, alpha blends in Photoshop are applied using the layer transparency control.)

Content

The next thing to do is add the content. `Content' is the world-wide-web word for `text', and the simplest way to add content is using the Text tool in Photoshop.

Typically, you will want to get someone else to write the content for your web page, as this task is below you and your advanced Web Design skills. For example, if you are writing a web page to advertise a new piece of computer software called, say, MidgetWrite for Microsoft Windows 7.0, they will need to write something like

MidgetWrite for Microsoft Windows 7.0 is an exciting and innovative new product which allows corporations to leverage their core quality initiatives while maintaining a pro-active, forward-looking management process.

It is also important that they put below this

MidgetWrite for Microsoft Windows 7.0 has no major Y2K issues.

(Obviously if the product you're advertising isn't called MidgetWrite for Microsoft Windows 7.0, then they'll need to change that bit.)

It is very important that there isn't too much content, as otherwise you'd have to use a boring small font. You want to have small amounts of content so that you can use a big, exciting font (if you don't have any big, exciting fonts, head on down to Software Warehouse and buy `4 million top-quality fonts for a fiver', and ask a nearby technical person to install them for you). If possible, you should use a font which nobody else on the web uses, so that your page will stand out (this might be a good time to spend a day or two browsing the web looking at fonts).

However much effort you put in cutting down on the content, you might well find that there's more than one page of it. You should plan for this eventuality as follows:

  1. Make several copies of the image of the page (before you put in the content).
  2. Put different parts of the content on different copies of the image.
  3. Save the images you've just made, but use different filenames for each one.

Putting it on the web

Now you need to turn the images into web pages. Although this sounds complicated, it's actually really simple. The first thing to do is to save the images as `Compuserve Graphics Interchange Format' files. Photoshop will probably bitch about `indexed colour' and some other techy stuff, but just play around a bit until it looks OK. Now for the actual HTML bit:

  1. Find a programmer or other technical person who knows HTML. Make sure you're carrying your copy of HTML for Stupid People while you do this.
  2. Approach the technical person, holding HTML for Stupid People up high, and ask him if he's interested in participating in your exciting web design project.
  3. As soon as he notices your copy of HTML for Stupid People he'll recognise you as a member of the technological cognoscenti, and will greet you with a phrase such as, `Christ, you're not trying to learn HTML out of that thing, are you?'. This is just his little joke, and you should laugh along with it, maybe saying, `Ha, ha! No, of course not!'
  4. Once he's agreed to help you, show him your Apple Macintosh. He will know exactly how to turn your images into web pages, and can even put them on the web for you. (This is the sort of stuff they learn in Technical Person School, but it's not very interesting and certainly not the sort of thing a web designer like yourself would get involved in.)
  5. Once he's finished, make sure you ask him what the web address of the site is (if you call it a `URL', pronounced `earl', the technical person will be sure you are a fellow member of the cognoscenti, and will probably believe that you are higher ranking than he is; he may even bow down to you at this stage). You can now ring your friends and tell them this address so that they can drool over the site and marvel at your skill.

(If you notice the technical person muttering or if they seem to be holding back anger or irritation, this is probably because they're envious of your Apple Macintosh, which is certainly a much better computer than the lousy PC or Unix workstation they have to use. You'll win a lifelong friend if you let them play some of the many excellent Macintosh games you doubtless have squirreled away somewhere. From time to time the technical person may make apparently disparaging remarks about your work, for example `Where's the content?' or `This will take three weeks to download over a fifty-six K six modem.' This is just harmless banter, and you should respond in the spirit in which it is intended, for example by chuckling: `Ho ho ho!')

What happens next

At this stage, you need to show everyone you work with your site (make sure you kept a note of that web address from earlier!). They will be very impressed, and will probably even give you a pay rise. Now you'll be in an excellent position to go to some other company and say `Look at my fine website, by the way I earn £amount per year.' This company will immediately respond by saying `You're just the web designer we're looking for, here, have a permanent position at £amount×2 per year.'

However, at some point it's possible that a person in a managerial position will say something like `Our site isn't getting enough hits, you must do something about it!' At this point there are several courses of action you could take:

  1. Identify the technical person who gave this information to your manager, and let the air out of their car tyres, or steal their girlfriend or something.
  2. Call all your web designer friends again and get them to look at the site some more, so that the number of hits goes up.
  3. Actually do something about it.

Typically, you shouldn't go messing around with technical peoples' cars, since you'll need to ask another technical person how you go about letting the air out of car tyres at all, and that's not terribly subtle. Stealing their girlfriend is also a bit of a no-go, since most technical people don't have girlfriends. Inflating traffic by getting other web designers to look at your work often doesn't work very well either, since they may see this as an invitation to come and steal your job.

The only solution, alas, is to do some more work and increase the traffic on the site.

Increasing traffic

The major reason that certain sites don't get much traffic is because they don't contain enough animations. In the section above about site layout, we didn't put in any animation, and this is probably why the site traffic is so low (alternatively, the site might be getting lots of hits, but a technical person is envious of your Apple Macintosh and so is trying to get you fired so that he can use it).

There are three ways to put animation into a web page:

  1. Java or JavaScript or some bloody thing
  2. Animated .gifs
  3. Wizzytech Treacle

Of these three, the first two are really techy and complicated, so it's not really worth bothering with them. Treacle, by contrast, is just like Photoshop, but with larger toolbar buttons. You'll find it really easy to use, and it even has alpha blends to let you practice your graphic design skills with. Once you've figured out the animation tools (you might want to buy the book Wizzytech Treacle for Stupid People to help with this), make sure everything on the page is moving round really quickly to make everything look dynamic.

Once you've redone the content of the site with Treacle (a popular technique is to make the text move in from different directions, all at once) try it out on some people round the office to make sure you're making effective use of animation. If they say things like `Hey, come back! What did that text say?' then they're probably just slow readers, and your site design is OK.

Updating the site

Once you've done that, you need to go and find a technical person to put the new site on the web. You could even employ irony by getting the person who told your manager about the low traffic on the site to do it. Alternatively, you could go back to the first one you spoke to, who will recognise you and give you a traditional technical person greeting, such as `Oh God, not you again! What do you want now?' This more effusive greeting indicates that he's coming to accept your superiority over him, and would like to play with your Apple Macintosh again.

The end

If you've read through and understood all that, you're ready to go forth and design. Make sure that you use your skills only in the service of good (making yourself money) and never evil (evil can be identified easily from its web pages, which don't look like they've been designed in Photoshop and don't use Wizzytech Treacle).


(NB: If you're looking for some actual information about web design, then read everything in Philip and Alex's Guide to Web Publishing, also available as a for-real book. Only then should you get out your copy of Photoshop.)


Copyright (c) 1999 Chris Lightfoot. All rights reserved.