OUGD504 - A Brief History Of... Website - Scamps and Development

Over the past week or so I've been developing the look of my website before coding it. This has included a couple more scamps after the UXD session helped me identify more specifically what my website needed to do. 

The UXD session made clear to me that the navigation should be incredibly simple. The first scamp shown on the left really worked well with this idea. The banner that goes across the top would always be stationary and in front of the content of the blog. The content of the blog would be accessed by scrolling vertically, with there being space below the banner for a single blog post. The banner will contain links to switch between the blogs, which will change the content shown. The banner being static allows for the navigation to remain simple and consistent throughout the website. 

Because of this I decided to develop this sort of layout and concept further. Below shows my sketch of the wireframe with the dimensions of the site.

This then developed into a fairly complete mock up digitally, shown below in both 1024x768 and 1366x768 screen dimensions. Admittedly, the difference between the two is just an extra column of yellow on the left and white on the right, but I think this sort of stripy pattern works quite well with the idea of The Pancake Stall, as little stalls that sell food and drink are often branded with stripes.

I then built on this further by showing how the link to submit a something to the site would work in both sizes. Initially this form will appear.

After the user presses "Submit", the below screen will appear, which will than take them back to the main website.

I also decided on the various states for the links. The regular state will just be brown text. The hover-over state will turn the text yellow to make a clear and noticeable difference that isn't too extreme. The active link will be underlined.

The three photos below the text on each post will show similar posts. To make this more obvious, when the mouse is over one of the images, a little pop-up will appear showing what that will link you too.