As I have done my flow charts and researched more about my target audience, I now have a better idea of what I want to do.
Scamp 1
I start drawing ideas of how I want my website to look and how it will work. Here is my first idea, with the home page, and how it transitions to two links which will be the same across all links.
It will involve a lot of imagery of the hotel and a visual drop down menu which is quite unique. I want it to be contemporary and interesting so that it reflects the hotel which is why I've included a lot of smooth transitions between links and imagery to engage the user.
Here is a more accurate sketch:
Home Page
There is a full width image which takes up most of the page to engage users with what it looks like. The navigation bar is at the top, and I created the top into the rule of thirds grid, with the center being the larger area and nav bar. On the left is the logo, and on the right is the booking feature. This drops down to offer the user more options when it is hovered over.
Drop Down Menu
This is what it looks like when you click a link on the navigation bar - it slides down with imagery and titles of the links. It would also be 75% opacity so you could still see the background image underneath it.
Snow Chapel Page
When you click on one of the links, the content will slide down on another page. You could also scroll or click the other links to change the other pages.
Scamp 2
Home Page
This design has a side nav bar, and has a four column grid. There is a booking feature and small footer along the left as well, so everything is contained in the first column. There is also an image to fill the rest of the space, which could be a slider.
Drop Down Menu
When you click a link on the navigation bar, the 'drop down menu' folds out next to it to fill the second column. It is a visual menu, and I drew four different possible looks for the link here. You can also still see the picture from the home page in the 2nd half of the page.
Content
When you click on one of the links, the 2nd half of the page is filled with the content, which includes a heading, image and a description. I think this is a really easy to navigate site, which is what I wanted, although it could be too busy perhaps. I'd have to create a mock-up to see what it would look like on screen.
Scamp 3
Home Page
This is another design where I wanted to use lots of imagery at once rather than one big image, to show the user the variety of things that can be done here. Each image would have a half transparent box over the bottom with the name and an arrow link on it, but when you hover over one the box would enlarge to have a small description about it.
Scamp 4
Home Page
For this design I was thinking what other information I could include on the home page, as I didn't want to repeat things that you would find in the navigation bar. So I thought about the thing people wanted to go there most for - to see the Northern Lights. I then thought it would be a cool idea to have a 'Northern Lights Forecast' on the home page so people could see how likely it would be for them to be visible that day. It would be updated daily, with a 0-10 scale on it. This is in the top right corner.
It follows a rule of thirds grid, with logo and booking feature on the left, navigation and footer in the center, and forecast on the right. The rest of the page is covered with an image of the igloo hotel.
Drop Down Menu
When you click on a link in the navigation bar, the 'drop down menu' slides down with imagery and a title as links. It would be the same height as the header to keep consistency. I think its better to have a visual menu rather than just text because it lets the user have more of an insight about that page, especially when this is quite a unique hotel.
My favourite is Scamp 4 because of the forecast, and it seems to have better functionality and feel to it than the others. I'm now ready to show these to next weeks session for feedback.
No comments:
Post a Comment