CLIENT PROJECT: WEBSITE WALKTHROUGH

 

icon-walkthrough

 

Within this section I will walk you through the most important pages and ideas behind them, and discuss elements such as design and functionality and why I chose to add them to the website.

PAGE 1 – Landing Page

Hero Section

Once the user enters onto the landing page/home page the first section is a large hero that engulfs the full screen, I discovered some code that allowed me to make the hero section full span of any device width using javascript and css.

The hero section consists of a large video background accompanied by the 80 days logo with the tag line of the business:

CRAFT BIER
FOR THE PEOPLE OF HU5

 

walk1.png

In the top left hand corner is the navigation, using off canvas and a burger icon that I chose to use for mobile and desktop in relation to previous research. this is what the off canvas navigation looks like once selected, a dark overlay engulfs the full screen and the menu slides from the left, I really wanted the title of the page to go over the top of the overlay to remind the user of what page they are currently on, which can be seen bellow.

walk2.png

Main Body

When the user scrolls down the next section gives the user a brief description of what the bar is and what they do, this section kicks in the AOS Scroll Animation Which animates the polaroid pictures of member of staff and the client into frame as though they have been thrown onto a table.

Under the ‘Who We Are’ description is a button that takes the user directly to the main about page which is the ‘Our Story’ page which will be discussed soon, and then bellow the who we are section is the what we do section which tells the user a little bit about ‘What We Do’ and why they pride themselves within the industry.

walk3.png

PAGE 2 – Our Menu

On the menu page I decided to break it down by using a technique that allows the user to narrow down the content. Instead of having a static menu page, I wanted to use some code that allowed me to change the content of the div by selecting a link, this allowed me to narrow down the development of other pages which in turn helps with loading time.

As you can see from the image bellow there are three different images that allow the user to filter through the bier menu, spirit menu, and soft drink menu to whittle down the content. Once the user hovers over one of these images it comes up with the title of the menu as seen in the screen shot bellow. Once the user has selected a particular menu, a selection of links appear to allow the user to decide on which style of bier they want to look at such as:

English – American – Belgian – Trappist – German – NUE BIER

 

walk5.png

Once the user has selected exactly what style of bier they want to look at the div bellow the menu select section changes to this:

walk6.png

Once the user has selected the exact style of bier they want to look at, the menu of that particular style of bier appears bellow, which high resolution imagery of each beer with a detailed description and titling which tells the user exactly where that brewery of beer is is from. This all fits into my research into the target audience allowing the the customer to have a good understanding of each beer is key for the target audience.

PAGE 3 – OUR STORY

The our story page consists of a time scale that starts from the top of the page all the way down to the bottom, and tells the user about 80 days bier haus from the start to the current day. Which again fits in with the target audience, allowing the user to know as much as they can about 80 days bier haus.

walk8.png

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s