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

MAJOR PROJECT: USER TESTING

 

usertest

 

Within section I will talk about user testing of my graphic novel, and what the user thought about the whole experience, from what they liked to what they didn’t and area’s they think need improvement. This will allow me to understand how the user reacts to my experience, and also will allow me to develop and understanding of exactly how I can improve on what I have created for future considerations.

 

My USER: REBECCA

 

usertest

 

After testing Rebecca had a few things that she really liked about the experience, and others she believe needed improvement. She really liked the overall idea of using an immersive platform to tell a story, using illustrations and sound she thought it was a much more exciting way of getting the story across and said she really felt that by using this platform you get really immersed in the overall feel and idea of the story through the music and drawing style.

There are a few issues though that Rebecca believe would improve this experience overall, such as implementing interactive sections that allow the user to click on an element and it would either make a sound or animate, or even allow you to take a closer look. Also she pointed out that a good idea would be to implement a mute button for the sound. She also added that it would be better if their was more animation implemented into the experience, saying that it would improve the immersive aspect of the experience.

What She Liked:

  • The Overall Experience
  • An Interesting Idea

Further Improvements:

  • Add Mute Button
  • Animations/Sound When Clicking on Elements to Improve Interactivity
  • More Animations

 

 

 

MAJOR PROJECT: AOS SCROLL ANIMATION

 

aosfade

 

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

GRAPHIC NOVEL: MARKETING ND MONETISING THE NOVEL

 

marketing

 

Within this section I will discuss how I plan to market and create profit from this project. For the moment BYRO is solely web based allowing the user to go online and view the graphic novel, but I really want to turn this into a story that is solely for tablet and accessible from the app store.

 

MARKETING MY IDEA

 

kindle

 

The idea is inspired from the use of amazon kindles and how they allow users to download their favourite books from an app store and using them on a device that can store all of their books in one place rather than carrying five different books around with them.

Because this is the way books are going they are all becoming a more virtual experience in the form of an e book or app that are downloaded from and app store, and will eventually be totally virtual which will make actual books irrelevant eventually. this same process can also be seen with music and film such as:

 

FILM

netflix

Netflix and other sources have removed the need to go to a retailer and buy movies or rent them, it has taken over entirely, because now films and series are now all online on Netflix and other entertainment services.

 

MUSIC

 

spotify

And as well Spotify, apple music, Tidal have all taken over the music front. These platforms contain virtually any music that you want to hear for free, or if you want to remove the adverts you have to buy an account.

 

tableticon

 

The point I am trying to get across is that all entertainment is now transferred  into a virtual format removing the need of using their physical form, such as going to buy a movie or album from HMV and possessing its physical form, the needs of society now want everything in one place.

This made me think about how it would be possible to make money from these interactive graphic novels, because their are examples online but these are free experiences that could be making money by utilising a similar marketing technique.

So I decided that this product could be developed solely for tablet use, using the same techniques as the kindle and implementing the graphic novel as an app that can be bought from the app store.

And each chapter will be sold separately so when the user has finished the first chapter they can then go onto buying the second one, which in turn will generate a profit.

MAJOR PROJECT: BYRO Walk Through

icon-walkthrough

 

Within this section I will walk through each section of the BYRO Graphic novel, there is no need to do a user journey because it is pretty much a linear experience only allowing the user to scroll through each section of the experience with no other links or routs for them to take, but this section will allow me the highlight each section of the novel to allow others to have a greater understanding of how it works.

 

byro.png

 

STAGE 1 – TITLE SEQUENCE

Once the user enters BYRO the first section they will arrive at is the title sequence, Obviously the first port of call take for example the boat was to implement the titles in large with my name underneath, and also I wanted to instantly add some animated elements so I decided the best thing to do would be to add rolling clouds because it starts above the city.

stage1.png

This section was solely inspired by The Boat, I loved the way on the title sequence the name of the graphic novel is in large and then underneath are some animated elements this is something I really wanted to bring out in my novel. Example:

theboat.png

STAGE 2 – THE CITY UPPER LEVEL

As the user scrolls further down the page I really wanted to immerse them with the sound and visuals to try and make it look as though they really are descending into a city with the use of sound and the scroll fade audio I wanted the sound of the rolling clouds to slowly transition into the sound of a busy city, this adds a feeling of depth for the user making the project seem as though it is alive.

stage2.png

STAGE 3 – THE CITY LOWER LEVEL

Stage three brings in the lower level of the city, this is where things really start to come to life, bringing in more animations with my drawings of cars that drive across the screen again adding a little more depth to the experience. Also after scrolling from the top the sound transitions into the sound of vehicles driving from one side to the other, and the main theme starts to play to really get out that gritty horror feel that i want the user to feel when experiencing the graphic novel.

stage3.png

STAGE 4 – CHAPTER INTRODUCTION

After the user scrolls down further after the lower level of the city, they then enter under the bridge where the 1st chapter is introduced with the chapter title. Within this section you see the two main characters:

Officer Billy Brunel (Left) and George Kranz (Right).

Also in this section the sound effects of the city fade out and allow the music that I have made to become more prominent so the user can really appreciate the sounds that I have created for the project.

stage4.png

STAGE 5 – GRAPHIC NOVEL FORMAT

After the chapter is introduced the story kicks in, when the user scrolls down it kicks into a normal graphic novel format introducing the start of the story with the sin city style text that is hand drawn by me and implemented over the top of the darker imagery to allow the story to stand out against the illustrations.

Also the scroll animation kicks in on this section, improving the the experience allowing the scroll animations the represent and emphasise the emotion of each section.

stage5.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