Site Layout Ideas

As the homepage is the first thing that anybody sees when they will visit the site, it is important that it is designed well and is clear, simple and easy to understand.

In order to accomplish this, I have mocked up two basic design ideas in Photoshop that show how the homepage could look. In doing so, I also added an image of a van to show how images could be used to either emphasise a content box / link or to draw attention to the header or possibly even information written on the van.

Here are the two main layout ideas for the website's homepage:

First Design: Contains two side content boxes, one with an image link - possibly could be used for social networking?

Second design: Simpler single side content box layout. However, could be expanded to two or more dynamic boxes

These two designs are similar but contain different design elements. The main difference is the use of side boxes. In the first design, I chose to use two same-sized content boxes which could then be used for either consistent information (such as contact details) across all the site's pages, or for dynamic, changing information (such as the van button example used). In the second example I use one singular side box for the content - which again could either be static content across all the site's pages.

The main content box looks like it is a fixed height in the design - but I do not plan for it to be, I plan for it to be this height as a minimum and then can be expandable depending on how much content I put into it. However, I plan for the boxes at the side to be of a fixed number and height in order to keep a consistent layout across different pages of the site.

In the second design I used the image of the van to jump out of the header and break out of the layout slightly so that attention can be drawn towards it - thus making it a good idea for a button or for extra content etc.

However, I prefer the idea of having multiple content boxes - such as one static one for contact details and one that changes depending on the page. Because of this, I may yet tweak this basic design further and create a basic template for the entire site which contains multiple content boxes at the side and images that leap out of the header.

Finally, I have also used a basic grid layout which means that I can change this to suit different page ideas that I have. The site is split into 3 main columns, and I have used them as a ratio of 2:1 in order to manage my content. By doing this, I can develop the layout across other pages and possibly try some more ideas rather than the basic layout.

This basic layout is good for the homepage as it is clear and simple, and I will soon post up a final idea which contains both the multiple content boxes and the 'jumping out' header image combined with some colour scheme ideas for the website - as the colours used in the above images are not representative of any final design ideas. As I have this basic layout - I can either use it across all pages on the site, or choose to develop it and change how it looks depending on the page content.