When designing and coding the Northern Graft web site, their where a few key elements I wanted to contain in my website, I wanted to recreate an online bar atmosphere that puts the target audience right at home, keeping the content nice and friendly making it seem as though when the user is reading it, its like their talking to a friend in a bar, making the Northern Graft product look as though it is a physical object on the screen, the user could just pick it up.
I will break down into sections all the different areas of the Northern Graft web site, and explain in great detail exactly why I have chosen to design things the way they are.
For the layout of my site, I wanted it to look as though on the top where the navigation bar is located their is an image, and its as though your peering over the bar, and when you go down I set the outercontainer background image to a picture of some old wood, which is supposed to represent the front of the bar, and then when you get to the bottom its as though you have reached the floor, where you find some bottle caps which are icons and take you to the facebook, twitter, and instagram pages of Northern Graft. Again this is to create that bar feel to my website. The top image on each page changes in relation to what page you are one, this is something I discovered during my research into the other brewery pages.
Page 1: About Us – For the top image I used a picture of a beer shelf with tons of beer on, this idolises the beer and points out to the user of the sight straight away that this is the main focus point of the website, the beer. On the main body of the content their are two images that I have converted into buttons, these images allow the user to change between the about me’s of both individuals in the team. This gives the user great insight into the background of the company, and goes down to a personal level because it tells you about the team individualy. I also added in recomendations for their favorite beers and hops, this goes back to the target audience.
Page 2: Our Brews – The top image on the our brews page is a picture of some bottled beer that look as though they are ready to be distrubuted. On the main body, I have created a beer shelf for the beers, and placed the beers on the shelf. I wanted to make the beers look as though they are physical objects on the page, going back to my research a lot of the brewery pages I went on had images of beers that really stand out from the rest of the content, as though they are physical objects you can pick up and drink. When you hover over the beer on the page, they lift up as though you have picked them up. Underneath the beer shelf, there is a small information container, that tells you a little bit about the beer.
Page 3: The Process – The top image on the process page is a picture of some demijons with beer inside of them, this instantly links into the brewing process and will be easy for the user to realise what the page is about. The reason behind this page is because I couldent create an events page, because they are only a small brewery they dont go to events, so I wanted to make a page that really stands out and reaches out to the target audience, and really shows that they care for the buisness that they are in. For this page I created some icon on Adobe Illustrator, to illustrate each step of the brewing process, underneath each icon is a short brief paragraph of text that explains each step in the process.
Page 4: Contact – The top image on this page is a picture of the Humber Bridge which instantly links in with Hull where the brewery is based. On this page their are some links to the emails of both Ritchie & Keldy, once selected will go striaght to email. The design for the container containing the links I wanted to make it look as though it was a post it note up on the board.
The colour scheme across my site, are very dark. I used black for the body of the site, and black overlays ontop of the images. This goes back to creating a bar atmosphere, I wanted it to seem quite dark and dingey, like most bars are when you go in. Then I used a standard white for the text across my page, such as my headings, and my main bodys of text, this allows for the information to really stand out from the background.
All of the text on my page are in sans-serif, the reason behind my choice for sans-serif is because its easier to read off of a computer screen then a serif font, among paragraphs of text because their is no decoration on the font, confusing the user when reading the text.