My Website Mock Up

After presenting my pitch to the group, I then moved on to develop my mock up idea further and in more detail.


Navigation


I decided that I wanted a horizontal and a vertical navigation bar. From looking at examples of one page websites I found that on quite a few of them I needed to scroll all the way back to the top of the page to find the navigation, whereas on some of the ones that I found they had both sorts of navigation and the vertical one came down the page as you scrolled. 

Horizontal Navigation

This is how I would like the horizontal navigation bar to look. I decided that I wanted each link to be in its own box and for the boxes to separate and each with a different colour. When I originally made my mock up I used the font 'Helvetica' for the text but since pitching to the group I decided to change it to a font called 'Happy Monkey', which I think looks more effective and in a way more appealing.  

This is what my navigation looked like when I had the 'Helvetica', when you compare the two the 'Happy Monkey' font looks a lot more appealing.

This is how I want the vertical navigation to look. 

The idea of this is pretty much the same as the horizontal. I decided to keep the colours in the same order, which will hopefully make it easier for people looking and using the site. I also think that it would messy in a way if I decided to use different colours for each section.

Title

This is what my title looked like when I presented my pitch to the group.

I used the fonts; Cooper Black, American Typewriter, Chalkboard and Helvetica. From the comments that I received about my choices, I knew that I needed to go on to develop and experiment with other fonts and see what visually works the best. I went to have a look some different fonts and I came with this design:

I prefer this style to my original one. The fonts that I have used are; Happy Monkey, American Typewriter, Poplar Std Black and Braggadocio. I think these are a much better choice as they visually look better and at the same time are still clear and easy to read.

The inspiration for how I wanted my title came from the website www.flintboutique.co.za and above you can see on the right their title design and my interpretation on the left. I liked the idea of having lines above and below the words, so I decided to try it out on my title. I opted to use an orange colour, I thought that the colour worked well with the colours that I had used for the words and also with the colour that I wanted for the background. 

Content Box

After coming up with a design for my navigation and title, I then moved on to come up with an idea for somewhere to put my content. I quite liked the idea of having rounded edges and having a low opacity on the fill of the box.

Like with the title I liked the idea of having lines above and below. I decided to experiment with this idea for my content box. I chose to have the lines in a yellow colour, I thought that it worked well with the rest of the colours that I had already picked and stood out effectively on the page without being distracting. 

This is what my content box looks like with the yellow lines above and below it. This will be the layout for all of my content boxes. I am also thinking of having the title for each section on an angle going across the top left hand corner of the box. 

Above is how I would like to have my titles for each section. I am not sure just yet as to what font that I want to use, but in this example I have used Cooper Black, which I think looks and works well. I think that I will stick to the colour pink as it stands out and is clear to read.