OUGD501 - Theory Into Practice: Website Mockup/Breakdown

As I am only handing in a proposal of a website, I wanted to show a more visual way of how it works as I can't code it. To do this i I thought I would do a breakdown of the site which details each aspect of the site.

Site Breakdown

• Mockup on Laptop Screen
• Sitemap
• Navigation
• Buttons
• Iconography
• Colour
• Typeface
• Quotations
• Question/Result
• Forms
• Mobile

I also drew out how it would look - it would follow the same aesthetics as the site itself to keep it relevant and easy to understand.

As I wanted to show a professional finish, I decided to mock up the site on a mac screen.

Site Breakdown

I then started making a document that shows how the site works, seen as I can't code it.

The top banner looks like the rest of the website, but without the navigation and a different title.

I then started to show the navigation, and how the buttons look like when the user interacts with them. I tried a few different layouts for this.

I then added the typography styles that I used. I didn't include pt size, as this would change depending how big the users screen was.

I then started adding in the iconography, I put it in the same style as I had inputted illustrations throughout the site.

For the results section I wanted to show what the buttons looked like as well as what happens when the user chooses an answer.

For the forms I wanted to show what it looks like when you type into it.

I then started working on the mobile site for it.

I started applying the home page to a mockup. I know that it needed to be on three slides so I designed according to that.

Here is the final home page on mobile.

I then changed the background colour to the two greys that I have been using.

I applied it on to the slide, but I felt it would be better if everything was grey.

Website Breakdown

Here is the final website breakdown: