Selecting A Style

One of the first decisions that must be made when creating a web site is what style and layout to use. This is what gives a visitor their first impression of your business. There are an almost unlimited number of styles and layouts, so it may be helpful to narrow them down into choices.

Amazon.co.uk

The Amazon web site expands or contracts to fill the web browser window.

Fixed or Flexible?

Some sites have a fixed width whilst others will change size to fit the viewers browser window and screen size.

On the face of it, the flexible layout may seem best, but it has a couple of disadvantages. One is that you can never be sure how your site will look to the viewer. You may think you have great layout but when it is viewed on a tiny screen, all the elements will become rearranged to try and fit in the screen.

BBC News

The BBC News site is fixed. If the browser window is wider than 960 pixels then a border appears on the left and right.

Flexible layouts are also more difficult to code and need more testing. Another disadvantage with a flexible layout is that when viewed on a large screen the amount of informaton displayed can be overwhelming.

A fixed layout can be made to look good on most screen sizes and you can be sure exactly how it will look, so this is what is used on the majority of sites. This web site has a fixed layout with the content being 960 pixels wide.

YouTube

You Tube is a good example of a light website. There are so many links on the front page that a plain white background helps to make it look less cluttered.

Light or Dark?

There are an unlimited number of colour schemes, but the majority of web sites have a background that is primarily white, or pastel coloured with black or dark text. This make them appear similar to traditional printed materials such as magazines. This is a safe choice and most viewers will be comfortable with it. Dark text on a light background is also felt by many to be the easiest to read.

However, an alternative which can have a dramatic effect is to have a background that is dark coloured, or even black. On these sites, the text needs to be white or light coloured. These sites immediately stand out because they are very different from the majority and when done well can look very stylish.

JasonGraphix

This is a good example of a dark web site done well.

Unfortunately, when done badly, they can appear dull and foreboding and perhaps more difficult to read. These sites are more suitable when the viewer is only expected to stay on the site for a few minutes. If the site has long articles then the dark background can become tiresome. It should also remember that a 'dark' web site will not print well because the printer will have to cover almost all the printed page with ink. A solution to this is to use a different colour scheme for printing, but this will take additional coding and testing.

An alternative to the 'dark' style is to have a site that has a mainly light coloured background, but to have one or more dark blocks. A block of black background with white text can look quite striking and will draw the reader's eyes to it.

Ryanair

The Ryanair site is very striking and makes extensive use of bright blue and yellow blocks of colour.

Flashy or Classic?

Some sites use large blocks of bright primary colours to create a big impact. They are meant to give the impression of a modern fast moving business. These can be striking and memorable, but can become wearisome after a while.

Other sites - the majority - use more subdued classic colours. This is a safer option as it is unlikely to offend or put anybody off, but it is less memorable.

An alternative is to use something in between. Classic colours that are easy on the eye can be used alongside a few small splashes of brighter colours. The same principle is used with interior design where a room decorated in pastel shades may have ornaments and cushions in bright accent colours. Using small amounts of bright colour on an otherwise subdued site can lead the reader's eyes to where you want them to go.

Gadgets.co/uk

Just how many sections and links can you fit on one page?

Simple or Complex?

Some home pages and layouts aim to be very simple. They tend to have a lot of white space, large clear navigation buttons and large text. Others aim to cram as much information into as small a space as possible. There are good reasons for doing both depending on the nature and purpose of the web site.

The Amazon web site at the top right of this article is a good example of a complex home page. There is a long menu, a search bar, special deals and offers, links to other areas and a list of example products that you might wish to buy. This works because Amazon knows that the vast majority of people who visit it's site are return visitors who know exactly what to expect and want to get straight into the shopping experience.

Destination 
                    Dublin

This site is made to look like a couple of pieces of scrap paper with handwritten notes. Actually the layout is fairly conventional because there is a navigation menu at the top even though it is well disguised.

Conventional or Unconventional?

The vast majority of web sites have a fairly conventional layout that is immediately recognised by visitors. There will be some sort of identifying header with either a horizontal or vertical navigation menu for getting around. There will be some content in the middle of the page that may be organised into between one and three columns.

However, there are a few web sites where convention and caution have been thrown to the wind. On these sites the main aim appears to create a 'wow' factor. The home page is statement "We are different". These sites are not suitable for many organisations and they can make the web site more difficult to use. Nevertheless, in some cases, such as art galleries, graphic artists or niche sites they can be perfect for creating the right impression and atmosphere.

Back to top of page

Great Web Sites

Scale Model Guide

scalemodelguide.com

This niche site has a simple layout with a fairly plain style. It succeeds because it is simple to use and gives easy access to a lot of information. The addition of lots of graphics and colours would make it more difficult to use.


Duirwaigh Studios

Duirwaign Studios

We love the look of this site which is unusual and artistic. It is actually a fixed width layout but the background blends seamlessly with the content in the center so that it is difficult to know when one starts and the other ends.


Custom T-Shirts

Custom T-shirts

This is a great example of a site that is both simple and unconventional. The entire home page is a picture of a T-shirt and the normal navigation menu is replaced by the badges on the T-shirt.