Proposed Design: Desktop

This is my proposed design for my responsive website and proposed layout for it in the desktop state. 

The Basics

This design is reliant on mainly just the one page as I am aiming to have the bulk of the (simple) information on it. Within each 'section' on the page (identified by the change in colour and ribbon labelling) the user can receive a brief run down of each subject within it and are then able to click on links which will take them to other (internal) pages that explain that concept in further depth. The idea behind the super-long, continuous-scroll-inspired page was to provoke scrolling through interesting graphics and interactive content which makes the user want to stay on the page and discover more. Also, I wanted the site to be as simple and effort-less to use. Considering my target audience (16-18 year olds) I didn't want to create a site which required clicking 4 different buttons and navigating deep into it before any information was given and any real interaction started.

Logo

I decided to incorporated the logo into an fundamental aspect of the layout of the design - the ribbon that runs down the centre. By allowing me to centralise it and make it more so of a 'feature' on the page, it has improved the design and, I feel, the users enjoyment of the page. Initially I was looking into designing a standard horizontal navigation bar and then above that placing the logo, but considering how one of the aims of this project is to educate someone about a subject, I didn't feel it would be engaging and interesting enough - even though it's just a logo.

Navigation System

The idea is that the user can click on each chapter from the top navigation bar and they will be skipped to the matching 'section' on the page. I have seen this done on a lot of websites and it helps to avoid the user having to continuously scroll and scroll just to find what they need. This navigation bar will also (hopefully) be floating - wherever the user is on the page it will be there ('locked' to the top of the page), alongside the home button. Below is an example of how the navigation bar will appear at the top of the page no matter where you are on it.

This will also be applied to any internal pages, as well as the use of the buttons in it to skip to anywhere on the page too. Whilst I've done something like this before (using Dreamweaver...) using anchors etc, it's not something I know how to code and I've never created a navigation bar that is locked to a position, so I've been looking into it briefly to understand it and there's some good YouTube videos out there. The following demonstrates how to create a "sticky navigation bar" (at least now I know it's called 'sticky'!)