Designing a Website Layout

The next step in creating a website is to draw up a quick sketch of how it's supposed to look like when finished. Later you will have to worry about how to realify your image but now let your artist sense roam free. If you have more than one idea go ahead and sketch them all, it's always good to have a backup plan. For designing the website you can use any simple painting program, it doesn't have to look good, remember, this is just so you know how your layout will have to be written. You could even use our trusty friend old pencil and paper.

So I've gone ahead and done 2 quick sketches in bitmap:

remember this sketch is designed for me by me (which means it's encoded in maniacode) but I'm going to explain it to you anyway. The bblahblah part is the text the user is viewing, this can be a game too or pictures. The scribble to the right of it is supposed to be a scroll bar (don't laugh). The title (at the top) is the title of the document the user is viewing. The red scribble in the top left corner is my company logo (it signalizes uniqueness and creativity). The curvy blue/purple/light-blue lines are going to look shiny and clear like plasma/water tentacles. The menu is the black scribbles below my great company logo.

Here's my second sketch:

I'm not going to explain this one, it's readable by average maniacs so yeah...

When drawing your sketches put yourself in your viewers shoes. Would you find it accessible? Interesting on first sight? Neat? Ugly? Too Pretty? Too Colorized? Too Bland? Take special care that he finds what he's searching for quickly without any hassle.

The next post will be about splitting up your image into boxes as those are easier to represent in CSS/HTML,

Until Then... Bye