Have you noticed that most website homepages follow a very similar theme? They all follow the same basic web design layout, masthead at the top, navigation underneath or along the left side, main content in the centre and footer at the bottom.

It is used like this because it works so well, it presents the main areas users need to find easily, which presents a logical order that people can follow to read and interact with the website, the trouble is that although you need all these elements and you know generally where to place them, it’s all the little adjustments that are hard to get perfect, the margins, padding, fonts, shapes and colours. You really need a process which you can rely on to ensure that you meet your clients needs and expectations for the perfect web site design that ensures the best internet marketing objectives.

1. Website Objective

Web Design is not so much and art as I feel it is a science, its the process of arranging elements to achive an objective, for most websites that objective is usually to sell a product or service. Doesn’t have to have a litteral meaning of selling something with a dollar value but it could also be to sell people on something else such as to subscribe to a newsletter, fill out a form or even to read more on a subject.

2. Figure out the most important elements

Once you have figured out your websites objective it is much easier to figure out what you want to make more important, ideally you want to rank all the elements on the page in order of a hierachy, where you want people to click first, what you want people to read first. Elements which are not appealing to the website objective should not be a dominant design element on the page. For example if you website objective is to sell people roof repairs, ideally you will want to gain new jobs as a goal, but firstly I would suggest you want people to get a quote. So upsell this by offering “free quotes” and have a form that is ease for the user to fill out to get a call back in regards to free quote on roof repair. Using smart online marketing stratgies such as these.

3. Give your homepage a hierarchical structure

So as soon as a user lands on the website, firstly you will want to tell the user what your website is about, then explain why you are the best then get then apply for a free quote. So logically you want the design to follow this structure having:

1. Large image which shows your roofing service
2. Pull quote explaining why you are the best at roofing / testimonial from past customers
3. Large visable form on the homepage for a free quote
4. Large colourful (with alternate colour from the website) submit button / call to action button for the form
5. Other main navigation points (for example 2 icons with links to other services &  contact details)
6. Main Navigation (if they want to go elsewhere on the website)
7. Logo (To reinforce branding)
8. Footer / Copyright Info

4. Arrange the page elements

I recommend using the grid system for placement of elements and I would recommend reading “Designing with Grid based approach” by Smashing Magazine, which is a very detailed article about designing with the grid system in mind. Remember your list try and keep this heiarchy in mind with placement and size. Start playing with various arrangement of elements while wireframing you can find a selection of 15 desktop and online wireframing tools here I would recommend making many different versions of the homepage and then selecting the best one here are a few techniques to keep in mind when designing:

Images
Images are fantastic features of a website to grab attention, and the use of high quality imagery can turn an average website into an amazing website, but this also works in reverse, you can have the most amazing website design in the world, add horrible imagery to this and you degrade the design. If you use figure, have them looking or pointing at the important areas of the page as people eyes will follow the characters directive, I would recommend a hero image and a few supplementary images which follow the same theme.

Typography

This is often an overlooked element of website design, and I feel its one of the most important, great typography makes great websites! Its not just the process of choosing a typeface, its the way in which the type is displayed, how many words on each line, the width between characters, lines, paragraphs and words. I would highly recommend reading up on 55 Examples of Huge Typography in Web Design which shows you some fantastic examples of great typography in website design.

Colours

Colour is one of the most important elements when it comes to directing users attention, colours differentiate various elements of the website and can change if one element stands out from the rest, if you have a black and white website, then introduce a green into one element, all the focus for that page will be on the one single green element, and remember that focus is diluted once more elements with the one colour is added. Make sure you select colours that match using various different colour theories that exist.

Natural reading flow

For an English based website your target audience will read from top to bottom left to right, this is called the F-shape scan, so remember this when placing elements, have the least important information at the bottom left, but it isn’t a hard and fast rule, just something to remember, as you can draw attention to any area of the page using a variety of other methods.

White space

Don’t be afraid to use white space.. it breaks up the page, it makes pages easier to read, if can give elements more importance  by having more space around them.

Now you should have great homepage which is taking into account the purpose of the website and forfills a marketing objective, it isn’t just there to look fantastic.