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.

My 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.

A First Look at Look and Feel

It is time to write a new web application. I developed an application for my own use 2 years ago and now I am coding it up to offer to others in the same situation. It is basically a book-keeping application specifically tailored to the needs of consultants. Given that I am staring at a blank screen, what are the steps I am planning to take to get this application up and running?

Firstly, and very importantly, I recognise that I am web developer and not a graphic designer.

I want my new application to have a web 2.0 look and feel, but I don’t have the skills to achieve that on my own.

The first thing I do therefore is look around on the web for a free web 2.0 template. I look for a free one, because right now I don’t know enough about how the application will pan out to get involved with specifying what I want to a third party. I don’t really know what I want in any great detail.

If I get the application up an running, and if it starts to earn revenue, and when I learn what my design’s shortcomings are, then I would get the interface professionally re-designed.

But in the first instance I spent an hour looking around on the web and found some nice free web 2.0 templates at Template World.

I selected the one liked the best (see image above) and downloaded it, but when I had a look at the CSS and the way it had been put together on the page, I felt I could not use it. After all, it is free and only comes with the home page, so I would have to design some other versions of the page anyway. The colours are not the ones I want to use, plus, I think some of the layout is awkward. But the ‘worst’ part is that inside the template, the CSS and HTML are a little messy. I felt I could achieve a simpler CSS file with less code, and remove anything likely to cause major cross-browser complications along the way.

The original CSS also made ample use of absolute positioning which I prefer to avoid where possible. The main problem though was that it was clearly a mature CSS file – so it is hard to pick it up and run with it. When creating a new web site, you need to separate out the basic layout CSS from the decorative CSS, and in this file, it was all mixed in together as you would expect with various layout dependent modifications appearing all over the place.

At this point, I decided that I’d use the template for inspiration only. I figured I could just look at the the graphics and somehow come up with my own version, (simplified where necessary) by fiddling around in Photoshop for a couple of days.