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
The hero section consists of a large video background accompanied by the 80 days logo with the tag line of the business:
FOR THE PEOPLE OF HU5
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.
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.
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
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:
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.