Website Development

I realised I would need to develop my website idea much more before I could progress any further with the brief so I decided to experiment with some visual styles and approaches. This post deals with simple colour and composition experimentation whilst at the same time gaining an understanding of web layout and trying and testing which things work better than others.

The first thing I did was try and design the navigation bar which will sit at the top of every page on the site. I see this as the place to inject colour, so that's where I came up with the idea of using the six colours from the peacock logo as tab colours. The progression works really nicely and has almost a rainbow effect. Considering the information shown on the main part of the pages will be black and white and predominantly text I thought the brighter I make the top bare the more of an effect it will have.

Below are a few examples of what I am considering.

However as well as the navigation bar at the top of the screen there is also the need for a more discrete one at the bottom of the page. Here you will also find the more official aspects of the design with links to pages such as FAQ and nutritional information. Anyway this design need to be a lot more subtle than the one at the top. In fact it is something that most people don't even take in on their visits to web pages, but it is necessary. Below are a few discretionary designs that I have come up with as a solution to this problem.

Now onto the bulk of the web page design now I had the top and bottom navigation bars sorted. I knew that I wanted the background colour of the main screen to be white as it makes reading so much easier so this is what I did. However I was then faced with the problem of the page appearing too plain, so I added diagonal stripes to either side of the main compartment framing it almost and giving the whole layout more of a fun vibe. An image can be found below.

I then went to mocking up possible compositions for each individual page. I used simple grey boxes as placeholders for images and used a lorem ipsum generator to show how much text I was intending on using. Below is the perfect example of how I want one of my pages to appear, obviously with more content added at a later date.

Once I had mocked up layouts for each individual page I then thought it the appropriate time to start adding real content. Below is a quick screen shot of my final mock ups and basic layouts of the six pages.

It then simply became a process of trial and error. Finding the right images, putting them in the right place, getting the information as concise as possible and laying it out so that it is comprehensible and not overwhelming. Below are just a few screen shots that I captured at different stages in the process.