I have based this around around squares because they fit in well with the shape of the website / screen. From my research i found inspiration for the layout of this and finally designed the scamp which looks like this:
The squares in the middle are going to be the links to the different pages. When you first see the website it will look like this ^^. Every square is set as a rollover image, but only some of them have links to the website. The user will have to look around the site to find the right links which takes them to pages.
This idea works around the concept of the project and its sort of a game along the way too.
The pages coming from the homepage will look like this:
The information will be displayed within the the blue rectangle in the middle of the page. This will be the same colour as the background colour once done, this was just so you could see where it will be. If there is alot of text then i will increase the depth of the box until all the content will fit, this may encore a scrolling page, but this is fine.
Page Views:
Home screen of the website - no links are visible - the user has to find them.
As you hover over the squares some of them change to show the link, once clicked on it will take you to that page.
Along with the link, i included with a drop down menu - i went with this style because there was alot of links, so it looks better and functions better under a menu.
The campaign page - display information about the campaign. On these pages i also included a 'back' button which will take you straight back to the website - i did this because i found clicking into the menu to go to home every time on each page was quite annoying and time consuming, so this just makes it easier to use.
Help and advise page - displaying information for getting in touch with the company.
About page - who the company is.
Mind page - page dedicated to the Mind charity, informs the user what the charity is and what they do.
The campaign pack page - informs about each page available and would have the order pack link live on the actual website.
3 minute wander app page - information on the app and to download it.
facts and stats page - employee page
facts and stats - employer page
The above four images, show the stress related illnesses page. This page has alot more information on it , so it has become a scrolling page. This doesnt really make a difference to the design of the website. The information is kept short but informative.
The home screen in full safari window.
I am really happy with this website - i feel that i have come on along way with web design since the first website i created. This i think is much better designed and thought about the usability more, which has seemed to make a much better looking and more creative website. I think it fits in line with the project really well and the aesthetics of it all run in check with the rest of the project.
I have since added an extra element to the website:
On each page i have added the title in the navigation bar at the top - this was just to add to the ease of navigation throughout the website and to make sure the user is aware of the page they are on. It also looks aesthetically better with the addition in the navigation bar.
Presentation boards to show the website and present the development stages of the website. This shows the site map, scamp and wireframe also.
No comments:
Post a Comment