How To Write a Web Application – Part 2

I wasn’t wrong. It has taken a couple of days to get my head around some of the design issues. I don’t have any graphic design training so I only make decisions based on what I like and what I can actually do. My personal rules go something like this:

  • A very simple layout (consistent with web 2.0) -not that anyone is precisely sure what web 2.0 is, but to me it means a step away from busy layouts with lots of flash animation and complex navigation.
  • Absolutely no drop-down menus – I have had it with contorted DHTML menus like those I typically use from OpenCube. Apart from them being quite expensive, clients tend to like them because they are pretty to look at. But they are pain to maintain. Make mental note to self: never use a DHTML menu system again. Oh that was so liberating . . .
  • A large text oriented logo.
  • Lots of bright colours. I am a girl and I also happen to like pink.

Starting with the free web 2.0 template from my previous post in this series, I notice that the background images span the entire width of the page no matter how wide you take it, and that they have shadows and contours. I also see that the page is broken up roughly into horizontal sections. I decide to ignore that vertical highlighted area – it looks too difficult to maintain. I will think of something else to pretty up the home page and give it a focal point.

Initial web page layoutMy next step was to draw out on paper the areas I would be designing, give them some names and then proceed to write the CSS and XHTML to create a simple block coloured working model, with a fixed width, centred content area. Here is the layout I initially devised.

This included a column version of the page, a horizontally sectioned version of the page, and a plain, no columns, no horizontal sections page too. The main menu would run as a series of plain links horizontally, and some menu constants would appear at the top and at the bottom.

The seamless repeating background would stretch the entire width of the page.

I created a basic prototype and which demonstrated the centralised layout and the stretch background, then used this to slowly build up the design by replacing each section one by one.

The prototype layout can be seen here for the top/bottom layout- it is designed to be viewed by screens of 1024×768 and bigger. I didn’t do a prototype for every type of page layout (e.g I don’t do one for the left/right column layout). The reason is that if the basic layout works, as all the others depend on it, and they will work too.