How to design a web site layout
This is a basic guide for beginners that can work with any advanced image editor - feel free to refer to it even if you're using Paint Shop Pro, GIMP, Macromedia Fireworks, Corel PhotoPaint, whatever... As far as I'm concerned, you may as well draw your layouts in MS Paint if you have the skill.
This tutorial does not explain a detailed procedure. It's a set of tips for those who are unsure in their work so far.
Choosing a theme
It's the essential step in design. You must start thinking of design as a way to get the message through. You want your website to send a message, so do your best at it — use images wisely, as they sometimes may not have anything to do with your website. Don't use images just because they're there to use, but because you can make something interesting with them.
One of the stupidest things to do is to get a celebrity or anime image, draw some borders for content and navigation, half-ass it in Dreamweaver and call it done. It's not. It's not even near. Good design takes time, even if it's simple. You will spend many hours thinking the design through, drawing it in image editor and coding it.
After having that said and discouraging you in the first place, if you're still reading this, there is hope you will get somewhere. Those who quitted after last paragraph will never learn simply because they don't want to.
As I was saying, you need a theme. The theme should be connected with your website. If it's a personal website, make sure it reflects your attitude. If it's a fansite, I suppose you will use an image of a celebrity/character in your design. If it's a free graphics site, keep it simple, let your content shine through, you don't need a wallpaper-sized header.
Designs can be made without a single photo. Actually, good designs don't need a lot of complex graphics since they will be pleasant to look at on their own. Remember this: less is more. I don't mean that you should have little content on your website, but sometimes empty spaces can help you to target the focus of your visitors where you want. If your site is cluttered with images and text, your visitors' eyes will easily get tired, they will not find your web site user-friendly and this will make them not want to come back.
Have you chosen the theme? Now it's time to get our hands busy.
Thinking the layout through
This issue of content and navigation should be considered before you start painting your layout. If you do the other way around, you will have to make the content fit the layout, instead of the correct way wich is to make a layout that will go well with the existing content. Content is what matters most, so make a design that will emphasize it, not make it inaccessible.
Getting it on paper
I have a hard time starting from scratch in Photoshop. My most creative designs were once a pencil sketch. Here are some examples of such:
Except the obvious reason to do this — to keep the reference in front of you while working on your computer, the benefit of paper is that you can use it anywhere, at any moment! You never know when to expect a strike of creativity, so when it happens make sure you put it on paper before you forget.
Digital design
Your favourite step so far, I suppose — but don't skip just right to it. I cannot take you by the hand here because every individual has to learn this on his/her own. I will just give you a glimpse of how I do it:
- Start with a 960x600 px canvas — this size will fit into 1024x768px resolution and above. If your design doesn't fit inside it, make it smaller — resist the urge to make the canvas bigger! The main point is to utilize images as much as possible, not to make them the only thing visible on first sight — don't let the header push content out of sight, and don't make the layout too wide for most common resolutions.
- Draw a grid for content and navigation space. These guides will help you
maintain content width while painting/image editing. For more advanced grid solution refer to the
960 grid system.
- Pick images and colors and play with them. Note what I mentioned about the "theme"
while doing it. I won't preach about appealing color schemes, because personal taste plays a big role in it. If you don't trust your own guidance, you can find a variety of color schemes on
COLOURlovers, even on
my own profile :)
Just make sure there is sufficient contrast between letters and the background. People
want to read your text after all! Here's an example I just did — it contains a warm shade of red,
but I think it's not too aggressive.
Using images
Before you use the image you want, first make sure you are allowed to use it. If it's from DeviantART or any other art/design community, you definitely may not use it without author's permission. The same goes for private galleries and portfolios. I don't support obtaining your images from manga/artbook scan galleries either, because they don't have the right to redistribute art without original artists' permission. Try deviantART stock gallery, Stock exchange or Morguefile instead.
Once you got the image, use it in an interesting way. Blend it with other images. Use my free Photoshop brushes, textures and patterns to make empty spaces more appealing.
Try your best not to use same things many people do: pixel-stretches, grid patterns, "scanlines", brushes made of swirly fonts etc. These are old and boring tricks for kids who just learned how to use Photoshop and are amateurish.
Using brushes, textures and patterns
Be careful not to overdo with those. Try using just a single pattern, and don't apply it oto all surfaces — it looks more interesting when a patterned surface is opposed to a plain one. Avoid eye-catching patterns on areas containing text, because it will be difficult to read.
The same goes with brushes and textures, but if they're subtle enough, you may use plenty of them. One of the possible ways to use them is to paste a texture/brush on a separate layer and change the blending mode so the image shows through.
Final tips
- When saving images for web, make sure all of them will load fast enough (see my tutorial on optimizing images for web), and preferably make the content load prior to images so your visitors have something to do while waiting until entire site loads. People are not willing to wait in front of a blank window over 3 seconds.
- Being inspired by other websites is acceptable. Plagiarism is not. After you see a certain website you may try a certain color scheme or theme yourself, but don't do everything exactly as seen. Try to figure out why you like that design in particular, and then try to accomplish the same feeling yourself. Copying other people's HTML and CSS is not allowed!
- Experimenting is a good thing. Don't restrain yourself just because you've never seen it before — even if you make a mistake, remember that you are constantly learning and improving with every such experiment.
- Never rush. If something looks a bit odd, figure out what it is and fix it. If you're too tired to do it today, have some rest and try again another day.
For details on image editing techniques, please refer to my other Photoshop tutorials.
Read more to learn how to code a tableless two-column layout.
