CLIENT PROJECT: SITE LINK

WWW.80daysbierhaus.co.uk

Advertisements

CLIENT PROJECT: EVALUATION

Reflecting back on this project I believe I have managed to fulfil the brief and developed some new skills along the way, but at the same time it can be said that there have been some low points. As discussed previously in Future Developments there are a few new skills that I have developed that will help me along with my future endeavours within the industry, but not only have I developed new skills I have discovered new things about myself some good some bad.

The good things I have learnt about myself is that throughout this year there have been a few personal issues from home that in some ways have stunted this project but I have managed to overcome and fulfil the brief by the hand in time. The bad things that I have noticed about myself is that even though I fought through to get this project done on time despite the issues, I discovered that I need to get my time management together so I can improve on my research stages and development stages in good time before a deadline, which is something I am working on improving.

Overall though despite the problems I believe that the final product has come out okay which fits the brief and gets the clients approval.

 

 

CLIENT PROJECT: LEARNING CURVES

Within this section I will discuss the main things that I have learned and discovered throughout this process.

  • Working with a Client
    Even though I knew the client, I believe the process of carrying out this project was carried out in an extremely professional manner that allowed me to develop an understanding exactly how it is to work with a client.

 

  • A Greater Knowledge of Java Script
    Working on this project allowed me to develop a greater understanding of how to use Javascript, and Javascript animation such as AOS scroll animation. Understanding Javascript is the key to making websites a little more exciting and is definitely knowledge I will be implementing in my future website developments.

 

  • A Greater Understanding of How a Framework Works
    Using a framework is something I have used previously but never really had a good grasp on some of the elements that are incorporated within them, but after doing this project I have definitely developed a greater understanding of how they work by developing a fully responsive website.
  • Discovery Phase
    Whilst working on this project I really focused on learning as much as I could about the target audience of the project, this is something I really struggled with in this past but believe I have come a long way since my previous projects.

CLIENT PROJECT: FUTURE DEVELOPMENTS

Even though the website fits the brief using code that allows the website to be fully functional for the client and fits the client’s needs, in relation to marketing the business and the functionality of the website using CUSHY CMS that allows the client to edit and manipulate the content on the website to fit his needs but also markets his business using a completely unique web presence separate from the social networking platforms.

I believe that this website could be taken further to fit the needs of the client and the brief, here are a few things I will consider for future developments on the website:

  • Building a CMS Unique to The Business 

    My idea for the development of a unique CMS for 80 days would not only allow the clients to manipulate and change the content of their website, but would also include staff accounts, with features such as the rota to keep track of shifts, a section that allows members of staff and the client to add tabs to the CMS to keep tracked of customers tabs, a notice board for the staff to put up any important messages.

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

CLIENT PROJECT: AOS – Animate On Scroll

aosfade

 

Now we have two pieces of code up and running it was time to implement the animation on scroll, but before I jump into this I would like to mention that this is something I wanted to implement into my MAJOR PROJECT but couldn’t get working but managed to get it working for my client project.

AOS Scroll will allow for elements to animate in as the user scrolls down the website, this will add a nice effect to the website changing the static images into objects that move in and animate.

Before doing anything it is important to download and place the aos files within your websites file tree and then link the AOS CSS and Javascript to your html file.

HTML

With AOS Animate On Scroll there are many different effects you can add to a HTML element, allowing you to make an element transition in any way you see fit depending on your own ideas.

It works by placing HTML elements within a div and then attaching a data-aos to it, the data-aos allows you to implement an animation to the image or text you want to animate, there are many different options of animations in this case I want this image to fade-up.

aos123

Not only can you add animations to an element but you can also set a delay on the animation and make it appear just after another animation.

JAVASCRIPT

There are many set ups for the AOS scroll animation, you can set it so that all elements with a data-aos attribute attached all have the same settings and animation, but in this case I want to manually set the data-aos of each element so I will keep it at its default setting.

aoswoo