Meet Northern Graft – Focus Group

Northern Graft – Focus Group Meeting

Keldy & Ritchie

I showed the current members of Northern Graft a few websites that I have come across during my research. These pages inspired my current idea that I have had for the Northern Graft page. I showed them the web sites and explained to them the aspects that I am going to draw from these pages, and explain exactly how these pages will attract the target audience Northern Graft is aiming to attract. And also explain the similarities of each page,  And let them point out a few aspects that they liked about the sites.

I also explained why I will not be adding the drop down menu’s that are found on the ‘Crew Republic’ and the ‘Brooklyn Brewery’ pages, because it causes trouble when trying to navigate the sites on mobile and tablet devices.

Five Points Brewing

First off I showed them the Five Points brewery page, here is a quick break down of what I liked about the page.


– The Design
Image changes in relation to the page you have selected, which represents the content on the individual page.

– Events Page
Shows professionalism and passion for the brewing industry.

– Information Represented in a friendly Manor
Makes the site fun, and also tends to be the manner in which you would find people speak in a bar. So it also represents the company in that way.

– Product Representation
The product is represented on this page what looks like beer taps what you would get at a bar, this presents the product really nicely.

Northern Graft’s Response To ‘Five Points Brewery’ Page.

Ritchie & Keldy Both Liked:
– The representation of the information

– Product Representation

– The Design

Ritchie & Keldy Did Not Like:
– Events Page

Ritchie: I love the way like you said the information is written very friendly, and the way they have represented there brews is really nice as well, I like the design, but something I would like on our page would be the image on the top? instead of engulfing the full background of each page. The events page is unnecessary for us, because where only a small independent brewery, there is only two of us. So we don’t travel around to different events, maybe in the future.

Keldy: I completely agree with everything Ritchie said. The events page is unnecessary. And I agree with what you said also about the friendly manner of the information on the page. And the design aspects and the product representation and content, is something I would like to be included on our page.

Crew Republic

 I then showed them the Crew Republic site, here is a quick breakdown of what I liked about the page.

ourbeers– About Us Page
Introduces each member of the team, and also recommends a beer to the user which focuses on the target audience, and also shows a passion for brewing.

– Presentation Of The Product
Makes the product look like a physical object you could grab off the screen and drink, which advertises the product well, and stands out among the rest of the content on the site, which makes the product the key focus point.

– Information Represented In a Friendly Manor
Like the Five Points site, this is something that is found across most brewery pages.

– Crew Finder Page
Allows the user to locate the brewery and know exactly where they can try their product.

Northern Graft’s Response to the ‘Crew Republic’ Page.

Ritchie & Keldy Liked

– About Us Page

– The Representation Of The Information

– Product Representation

Ritchie & Keldy Disliked

– Crew Finder Page

Ritchie: I love the “About Us Page”, I like the way it focuses on each person of the team, it makes them seem passionate about their job, and the way it shows you their favourite beer and hop, we’ll have that. I prefer the product representation on this page as oppose to the Five Points site, the way it is actually a beer on the page, like you said Aidan its as though you could grab and drink it. Like I said about the Five Points page, were not a big brewery so we don’t have our own bar, so a bar finder page would not be unnecessary.

Keldy: Yeah the “About Us Page” is really good, the presentation of the product is perfect as well, that’s something I would like you too include on the site. And I agree with Ritchie again, their would be no need for a bar finder page. Something I noticed about the page as well is that the content is presented on a wooden board, I thought it would be quite nice to include our content on a chalk board like you would find the beer menu is usually on a chalk board?

Brooklyn Brewery

I then showed them the Brooklyn Brewery page, here is a quick break down of what I liked about the page.

– Our Beer Page (Representation Of The Product)

Like the Crew Beer page the product is presented as though its a physical object on the page, which advertises the product nicely.

– Visit Page
This allows the user to know when they can visit the brewery, to see how they make the beer. This fits into the target audience.

– Events Page
Allows the user to know where they can try the product

Northern Graft’s Responce to the “Brooklyn Brewery” Page.

Ritchie & Keldy Liked
– Our Beer Page
– Visit Page
– Design

Ritchie & Keldy Disliked
– Events Page

Ritchie: Again I love the way the product is presented on the page, like the Crew Republic page. Probably one of my favorite designs out of all the sites, I like the way they have made the site look like a bar, that’s definitely something I would like on our site, It’s as though you’ve just walked into a little dingey bar in Brooklyn, which is great!

Keldy: I agree with Ritchie on the design aspect of the page, recreating the atmosphere of a bar would reach straight out to the target audience. The visit page has given me an idea, because were only a small brewery and we couldnt have people visit. What if we created a page that walked the user through the brewing process using logographic and short paragraphs of text? That is another thing that would reach out to the target audience.


Me: So explain to me the aspects you would like me to include from these sites?

Ritchie: Yeah, probably one of my favourite points that you have made about each of these sites is that the content is represented in quite a friendly fashion. This is something I would like you to include on our site, I had an idea of maybe using some northern slang on the page, like for the “Our Beer” page you could call it “Our Brews” or something like that, it represents where we are from. As for the layout, like you said the change in images that relate to the page your on, gives off quite a nice affect, but instead of it engulfing the full background, I think it would look quite nice on the top of each page. But then maybe making the rest of the site look as though it’s a bar or something?

Keldy: I love Ritchie’s idea of using Northern Slang, that represents us as a company and our origins. Which is always a very important aspect of a brewery, the representation of your origins whether it’s in your brew, or your brand. Also I like what you pointed out Aidan, about the our beer page, making our product stand out like that would be great, but instead of using the label of the brand I like the idea of actually making the product look like a physical object on the page that you could grab like the Brooklyn Brewery and Crew Republic pages. And also like I said, making a page that walks the user through the brewing process, that’s something that would show our passion for brewing.

I’ve just had another idea, because we do not attend events and so forth, maybe it would be a good idea to embed our twitter posts on the page, for now? because we are quite active on twitter and it would keep the user updated on the beers where working on at the minute, or if we ever do attend any events we can just post it up on their.

What I Have Taken From This Focus Group Meeting, And What I Am Going To Include On The Site

– Making sure I make the information on the page friendly and personal.

– Putting images on the top bar of the page, that change in relation to the page you are on.

– Creating an atmosphere on the page, as though it’s an actual bar you’ve just walked into.

– Making a page that walks the user through the brewing process, using logo graphics.

– Embedding they’re twitter updates.

– Presenting the product as though it’s a physical object on the page.

– On The “About Us” Page giving the back story of the brewery, and allowing the user to read about each individual of the team and give them recommendations of some of their personal favorite beers.

This meeting has clarified exactly what my sight is going to include. Next I will Brain storm my ideas and wire frame my site, and create a mock-up up and refer back to Ritchie And Keldy to see what they make of my ideas for the page.


Creating an Interactive Product for a Dyslexic

Dyslexia is something I struggle with myself, from a very young age I realised that I struggled with reading and writing, and Math. With my application being based upon the Battle Of The Atlantic, there is a lot of information to get across because it was the longest lasting battle during WW2. And compressing the story down, and tranforming it into something that is easily accesable and readable for a Dyslexic is something I really care about, and want to accomplish with my application.

In this post I will show case my research into how I can make this app Dyslexic friendly, and how I will create an application that is easy for a dyslexic to navigate and gain information from, here is the information I have found that I think will allow me to acheave this…

Type Faces

fontsOne of the main things that causes confusion for a Dyslexic when reading a chunk of text can be the type faces used. I myself when reading a large chunk of text, usualy find myself getting lost amung the text this is mainly down to the differentiation of the lettering. During my reasearch I came across some key points that highlight the different areas of text that make it hard for Dyslexics to read, and this is something I can relate to myself…

Good Acenders And Decenders Of Lower Case Lettering
Acenders and Decenders are the sections of a font that travel passed the mean line of the font, the acsender goes above and the decenders go below. This plays a great part in the differentiation between the lettering, allowing Dyslexics to recognise and determine between the different letters without muddeling them up when reading a sentence.

Acenders: b, d, f, h, k, l, t
Decenders: g, j, p, q, y


Distinguished Lettering, No Mirrored Image Letters
In most fonts some under case letters are mirrored images of each other, such as: “b,d” and “p,q”. The lettering has to be distinuished, there must be some form of individuality added to the letters that will allow a Dyslexic to determine which letter is which when scanning through a sentence.


Different Forms For Capital I, Lowercase i And The Number 1
Sometimes and not always just for Dyslexics, it can be hard to determine between the capital I the lower case i and the Number 1, this can confuse some one who is reading through the text and have a double take.


Kerning is the spacing between letters, this is very important because sometimes to a dyslexic some letters that are close together take for example “modern” the “rn” can some times come across as an “m” making a Dyslexic mistake the word for “modem”, this creates confusion.


Letter Shapes
Dyslexics often mistake the letter “a” for an “o”, Dyslexics tend to relate what their reading on screen to off screen, so usually dyslexics prefer some words to have a look as though they have been hand written, like the letter “g” which is easily recognisable incomparison to some other letters, this is all down to familiarity.


Thing To Consider When Using Type For A Dyslexic
It is also a rule to use a Sans-Serif font when writing for a Dyslexic it is much prefered incomparrison to a Serif font. Mainly down to Serif fonts have flicks at the end of each letter which obscures the shapes of lettering for a Dyslexic.

Scipt fonts are Dyslexic friendly in some ways because it is very similair to hand writing and Dyslexics find some familiarity allowing them to recognise the lettering alot easier. But script fonts create the same form of problem that bad Kerning creates, its easy to mistake combinations of letters for something else.

Their are some fonts that take these key points into consideration, and are designed for Dyslexic readers, I looked up some of these fonts and tested some of them myself to see which I found easiest to read. Here are my favorites that I came across…

Dyslexic Friendly Type Faces

Here I will talk about two of my favored type faces designed for people suffering with Dyslexia…

Read Regular
This is a Dyslexic friendly type face, created by Natascha Frensch in 2003. This type face is designed with an individual aproach to the shape of each letter. Like I explained earlier the shape of a letter is a very important ascpect when it comes to Dyslexic people, they can often be mistaken for other letters. Each letter is different from the rest, this allows a Dyslexic to determine instantly which letter is which when reading a sentence without getting mixed up with another.


Another thing is that each letter has been stripped down of any form of details and styling that is unecessary. Each letter works on its own and also works with the previous lettering. Another thing is that the letters with acsenders and decenders have been made longer, this allows for each letter to be recognised in an instant. The letters with openings as well such as the “e,y,u,a” have been made bigger this makes them alot more distinctive, and also allows them to be easily recognisable on black and white.

Lexia Readable
Lexia readable is based upon the famous Comic Sans type face. Lexia has taken the strong and claritable aspects from the Comic Sans type face, and removed any unecessary styling, keeping the strong font weight which for me isnt very good. Comic Sans works best in very short paragraphs of text, but the font weight for me creates the same problem negative kerning creates, it mixes makes it easier to muddle the words up. Lexia readable also includes the none symetrical “d” and “b” and handwritten forms for the “a” and “g”, making it easier for a Dyslexic to decipher between the letters.


I tested these types faces on myself, and had a much smoother read with Read Regular, I lost myself a few times using Lexia Readable, I would put that down to the heavy ness of the font weight, making it easier for myself to get mixed up.

Type Colours

Something I find that helps is the colour of text, preferably vibrant colours such as: Orange, Red, Green, Yellow. Using a dark background this makes the text stand out, it makes it a lot easier to read. It makes the text more promonent over the background, as though it has been cancelled out by the text allowing for the read to be a lot easier. And this isnt just for Dyslexics it works for everyone.

Icons & Infographics

Icons & Infographic are a good way of getting a message across a lot faster, without having to explain something in a paragraph of text. Infographics are a lot easier for a dyslexic to extract information from this is something a Dyslexic like myself would apreciate.

The information on my application will be accompanied by interactive buttons that will be clear as of what their purpose is on the page, and will give the user the option to watch a video or listen to a sound clip that will go into more detail about the certain subject that has been briefly described in the paragraph.

Infographics are a nice way of breaking up content, it gives the user a break from reading and for a Dyslexic its a breath of fresh air. You can create an infographic to explain something a lot faster creating something a lot more visual, and colourfull but informative. Take this for example…


Interactive & Interface Design: Module 1 – Introduction

Hello there, this is my introduction to my first module for my “Interactive & Interface Design” project, for the “Hull School Of Art And Design”. For my first project I have been given the freedom to build a web site on any subject of my choosing. I have chosen to build a website for a brewery “Northern Graft” mainly because I have a love for the different designs you can find on different types of international beers; the designs you can find on these different beers are out of this world and I find some of them absolutely astonishing.

I have great interest in the branding of independent brewery’s from different areas of the world, some of my favourites are “Flying-Dog Brewery” in the United States, to “Crew-Republic” from Germany. You can find some amazing bits of branding and typography just from being stood in a bar, and its something that really does interest me, I would love to know why some brewers choose these extraordinary designs. So this weekend for my first piece of research for my webpage I will be attending the brewers market at “Canal Mills” in Leeds, which will have some of the biggest brewers in the UK attending such as Brewdog and Magic Rock brewery, I will be looking around the different stalls and try and draw some inspiration from some of the designs.

I will hopefully also get a chance to speak with some of the different brewers, and also some of the public to see what they find most attractive about some of the designs on the beers. I will be posting updates on my research for this module, and also some of the designs I have created myself.

Five Inspirational Web Sites

In this post I will showcase some of the most amazing websites I have come across on the net. Not only are they an inspiration, but they really have set the bar when it comes to good design and creativity. They really do prove the fact that if you set your mind on something, no matter how impossible your ideas may seem, they can always be achieved with time and effort. And I think this first web page, really does prove just that. You can check out the chosen web pages by clicking on their titles above the images, and also you can have a look at the different web agency’s who designed them by clicking on their names above the images as well.

1. Werkstatt & BBDOI Remember I remember

I Remember – This page is not only visually beautiful, but the purpose of the page it self is just as beautiful. This website is a vast landscape of memory’s contributed by the user, the website only stays active if people keep logging on and posting, and if they don’t the page will vanish off the face of the web. The idea behind this page is that most of us are blessed with memory’s but some of us are not as fortunate, this website is a tribute to people suffering with Alzheimer’s.

I think the target audience for this page would be, people who want to show respect towards people suffering with Alzheimer’s. the whole idea of this page, is to represent the brain, in the way there’s a life time worth of memory’s stored into this page, and suddenly they will all disappear and be forgotten, just like some one who has developed Alzheimer’s. Visually this page is something extraordinary, and I feel happy that I was able to have a look around the “I Remember” world before it vanishes. Once you enter the site it comes up with the message…

“How lucky we are to be able to say, ‘I Remember’ let’s share are memories to fight Alzheimer’s” “This site will gradually disappear”

 And then as soon as the site opens, you can freeroam across what looks like the aftermath of a supernova, or even some form of galaxy, and duck down into the lights and read small contributions from different people, telling you some of their memories. For a website, this really does take it to the next level, an extraordinary immersive experience. I think the collaboration between the two agency’s “Werkstatt” and “BBDO” have created something very special, and I would love to see some more work from the both of them. Here is a short video clip taken from the Werkstatt YouTube channel, it shows you what the site looks like and also instructions on how to navigate around the page.



AQUATILIS EXPEDITION – Tobias Van Schneider is on of my favourite web developers, his designs are a force to be reckoned with. And this page “AQUATILIS” proves my point completely. I will be talking about this page in another post as well, I have drawn some inspiration for my WW2 application from this page.

I think the target audience for this page would be people who are interested in deep sea excavations, and would like to take part. AQUATILIS EXPEDITION, is a crew of deep-sea divers that go on underwater expeditions to discover new species of Gelata. This page is not only extremely beautiful, it’s so simple to navigate and catches your attention so easily because of the beautiful imagery of the deep-sea life and the whole concept of the navigation of the page. It’s as though you are on one of the expeditions yourself, you start off above the water, where there is a looped video of the ocean with its rolling waves. Just at the bottom of the page is a button that says “Inhale”, and once you click on it, you drop under the water. One of the main things i love about this page.

Once you hit the main page, it comes up with a message saying…

“At 300 feet beneath the surface, the ocean is dark. There are no landmarks around, you are suspended. Look hard enough and they appear: translucent creatures filled with colour. Some are as tiny as the nail on your finger, others are the size of a building. These are gelata-unstudied, mysterious and omnipresent. They are the ocean’s unseen backbone.”

This instantly caught my attention, it makes the Gelata just sound so mysterious and interesting and makes you want to learn more about this species of underwater life. Passed the main page as you sink deeper and deeper into the ocean, there is more and more information on the Gelata and the expedition. Another thing I really love about this page, is the background only a tinny detail but still so mesmorizing, there is some animation only small but still beautiful, its made to look as though there are smaller inferior forms of life, like tinny worms wriggling around in the distance and I cant help but think of that opening paragraph “Look hard enough and they appear”, because as you look further into the back ground of the page, you notice other moving life forms in the distance. Just a nice little touch on the page, I really like it.

Like I said I will be posting about this web page again, just to explain how this page has kicked off my imagination, and has filled my head with ideas for my WW2 application, so keep checking back for updates.

3. PONTOCOMMorada Cia Etilica


Morada Cia Etilica – I am not familiar with PONTOCOM’s work, but I came across this web page the other day scanning through the “Awwwards” archive on their site, the main thing that struck my interest in this page immediately was the fact it was about beer, baring in mind I am planning on building a web page for a brewery for my “Interactive & Interface Design” project.

I think the target audience for this page would be, people who are interested in beer in general, who like to brew beer, and also love to drink it. The first thing that caught my eye on the tab for this page was what looked like the head on a beer, when i clicked on the tab I was amazed to see what I had found. This page is so simple yet gorgeous to look at, another good thing is the navigation, like most modern web pages of today it is a long scrolley page. As you enter the site, the first thing you see is the title of the company, and a short video of the top of a beer glass whilst some one pours beer into it, and then the beer rises and it begins to froth over the top of the glass. Just from opening up the sight and that being the first thing that you see, it really does make you thirsty for a beer, which i can see is what the designer was going for when he built this page. And also I think it is a really good way of introducing you to the site. As you scroll down the page it showcases a selection of their beer, the bottles of the beer look as though they are three-dimensional and are coming out of the screen as though you could just grab one and drink it. The images of the beer are also animated and when scroll down the bottles float up, a really cool little gimmick. Overall there are a few aspects of this page I really like, it is colorful and beautiful to look at and very tasteful as well and also up to date with modern web design, and I will have to keep an eye out for PONTOCOMS future work.



ED Banger Room – This page takes you through the history of Ed Banger Records, from the day the record company first started to the present day. I have to say, this is one of the craziest and messiest pages I have ever been on, but amongst one of the most creative and stylish. I absolutely love it. The typography and the animation as you scroll down the endless time line, is absolutely out standing and very fun, bits and bobs of colorful artwork popping up and catching your eye in every corner, it is really interesting stuff.

As you scroll down you have no idea what you’re going to see next keeping you hooked to the page. The content on this page really does represent the music that Ed Banger produce, which is something I really like about it. Beleave it or not, this page has inspired me and has given me a few ideas in a way for my WW2 application, because I like the idea of scrolling down and not having a clue about whats going to pop out or what you’re going to see next, I find that aspect of this site really interesting. And is something I would love to include into my application.

This is not the only web page I have seen by Anonymous, they really are true pioneers of the web industry, and a real inspirations. Make sure you check out some more of their work, they are also famous for designing the “Pharell Williams – Happy” page, which is also very good.

5. OSK StudiosWhat Matters Most whatmattersmost

What Matters Most – This pages purpose is to showcase a selection of music videos created by independent film directors. I have never really seen much of OSK Studios work, but I was scanning through the web the other day and I came across this gorgeous simplistic gem of a website. In comparison to the last four web pages, this one is very simple, and hasn’t really got that much to it. I guess this really shows how much I love different styles of web design, the main thing I like about this page is the navigation bar at the top, there’s something about it that I find quite attractive and it is also very easy to use.