Northern Graft: Evaluation

Northern Graft Web Site:
http://www.newmedia.artdesignhull.ac.uk/acrow/


Evaluation


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.

Design Layout
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.

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

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

Graphic Design: Evaluation

From my logo to my Letter Heads and business card, I have really tried to represent exactly what I do weather it be the design of my logo to the colours used in my designs.

Logo Design

buisnesscardback

Design
For my design I incorporated my initials into one logo using angle brackets which instantly can be recognised as a structure, which is self explanatory, my initials AC, made out of angle brackets, put into a structure, which tells the person looking at my logo that I make things with angle brackets.

Colour
The colour scheme of both my letter head design and logo is different tones of brown, because brown represents seriousness, down to earth, and support. Which I believe represents me and my work, I am serious about what I do, I am down to earth, and I will be willing to support my customer. In relation to my logo design, mixed together I think it makes me look professional and have a real care for my work.

Letter Head Design

letterhead

Design
The design aspect of my letter head, I have tried to keep things tight and bold. In the way most of the content on my letter head, is tight up against my logo, like my name in bold coming from behind my logo, the fact it says i am a web designer, using symbols that relate to web design, and the slogan I make things with Pixels. The reason behind the tightness around my Logo, is to make my logo iconic, when some one sees my letter head with my logo and the key points about my buisness surrounding the logo, they will recognise my logo and remember those bold letters AIDAN CROW, and notice instantly that this logo is mine, and that I am a web designer.

Business Card & Specialist Item

buisnesscard

buisnesscardback

Design

In the design of my business card, I wanted to make it clear for the person looking at my card that its from the same place as the letter head, and can be related to each other. Using the same colour scheme, and same sans-serif bold font and making sure the positioning of content on the card is tight, keeping things close to my logo.

Augmented Reality
For my specialist item, I decided I wanted on the back of my business card an augmented pocket designer. I thought it would be cool, and make me look quite impressive. I wanted to create something that stands out from others, and make me look professional.

Page 4. – Contact

Contact

On the Contact page the image changes to a picture of the Humber Bridge, which relates to where Northern Graft is based, the Humber Bridge is the biggest Northern land mark as well. The Contact page is the most simple out of the pages located on this site, the container which contains the contact information is designed to look like a post it note. The links in the contact container go straight to email once selected, on this page I made sure the outer container squashes down so the contact icons located on the footer are easy to access as well without scrolling all the way down the page.

Contact2

The contact icons at the bottom are located on each page, I wanted them to look as though they where bottle caps on the ground, here are my icons.

facebookicon twittericon instagramicon

Page 3. – The Process

theprocess

On The Process page the image changes to a picture of some demijohn’s that link straight into the brewing process, and tells the user as soon as they enter onto the page exactly what the content on this page will be about. This page is important for the target audience, like explained earlier my target audience want to know was much as they can about the brewery, and this page takes them through the brewing process of a Northern Graft beer, using icons to illustrate the steps of the process. This page is a replacement for the events pages on the other brewery sites, it shows the user how much they care for their work, and wants to show the user how they make their beer.

theprocess2

Bellow are the icons I have created that illustrate the brewing process.

Step 1. Mash
ngmash

Step 2. Sparge

ngremovemash

Step 3. Boil

ngboil

Step 4. Cool

ngcool

Step 5. Ferment

ngferment

Step 6. Bottle

ngfinished

Page 2. – Our Brews

ourbrewsng

On the Our Brews page the image the image changes, to a picture of bottled beers, like there ready for the user to order and drink. Once on this page the user will notice there is a selection of Northern Grafts beer on a shelf below the top image, once you hover over the beers they lift up, this is something that was inspired by the other brewery pages, the way they made their product look as though it was a physical object on the website that you could pick up and drink, it advertises the product really well, and again goes back to keeping that bar kind of feel to the site.

I was originally going to use Lightbox for this page, but I could not tweak the code to give the desired affect I wanted for my page. So I just used some simple css to create this affect, and I think it works really well. Underneath the shelf, their is a text box which tells the user a little bit more about the beer, that is designed to look as though its an old piece of paper stuck to the board.

ourbrews2

Solving My Coding Problems

During the coding process of my website, I came across a few problems. Such as my outer container containing all of my content hovering over to the left, putting my navigation bar half way down the page, and the footer bar hovering to the right and coming out of my outer container.


Navigation Bar & Outer Container Problem


problemng

As you can see on my Northern Graft website, the navigation bar is located on the bottom of the top image. This can cause confusion for the user when accessing my website, when clicking on the links they will expect the content to pop up straight away, and probably wouldn’t even think about scrolling down. This problem was fairly easy to resolve, all I did was place my navigation HTML code above the image, placing the navigation bar at the top of the image instead of at the bottom.

To fix my problem with the outer container hovering to the left, I located my outer container selector in my css style sheet and noticed I had written out two selectors for my outer container, that cancelled out the selector I was wanting to use. On the selector that was over riding my original selector, I had used the “Float: Left” element, this caused my outer container to move to the left, again a simple mistake and was easily resolved. Here is what the Northern Graft page looks like on the top now.

resolvedng


Footer Bar Problem


problemng3

During the coding process of my Northern Graft page I noticed that my footer bar was hovering to the right of my outer container. When looking through my HTML code, I noticed the closing div tag was located above the footer tag, meaning my footer bar was not located on the inside of my outer container. I resolved this, but the footer was still coming out of my container. I then noticed in my CSS instead of setting the margin for my icons located in the footer, I had put the margin-left into the actual footer selector, so I had pushed the footer out of the container, I resolved this. Now my footer bar is on the inside of my outer container, as you can see from this image below.

ngresolved

Finished Photographs


CONCEPT


The concept of my photographs is too prove that the rules of composition can be found anywhere even in the smallest of photographs. The whole purpose of this project is to inspire photographers to never miss the opportunity’s for a good photograph, they can be found anywhere even in your back garden, which is where mine are based. This portfolio of work consists of 15 of the best photographs, that I have chosen out of 223 other photographs.

My photographs start from my gate, and finish in my house looking through the back window, and in each one of these photographs I have tried to capture the Rules Of Composition. Its as though your walking into my house from the back, but instead of just walking passed everything you zoom into each individual aspect of the garden, to show the detail and the beauty that most of the time people would just walk straight passed and not take any notice of. After I took my photographs I put them into photo shop and edited a few aspects, to bring the most out of my photographs.


Photograph 1: “Welcome”


1introframe


Rules Of Composition Used:

– Framing

The idea behind this photograph was to welcome the viewer into my idea. My gate had the perfect frame, to capsulated the full base of my photographs in one picture. When editing this picture I increased the Vibrance and the Saturation of the colours, it creates the affect that the viewer has looked through the hole in my gate and discovered this amazing colourful garden. For me it was an exciting way to begin my photographs. To sum it up, its as though your walking into my subject.


Photograph 2: “The Garden”


2thegarden


Rules Of Composition Used:

– Rule Of Thirds

– View Point

This Photo shows the base of my photographs in a whole. I had the rule of thirds in mind when taking this photograph, aligning the line on the right with the fountain, and the line on the left with the gate. The rule of thirds make for a more interesting and dynamique photograph, I used a tripod when taking this photograph to make sure the camera was straight when taking the photo, I lowered the tripod also to get a lower perspective as though your low down, it just adds a nicer affect onto the photograph.


Photograph 3: “Getting In A Little Closer”


3theleaf


Rules Of Composition Used:

– Cropping

– View Point

This is the first example of macro photography, And where the idea behind my photographs really begins, getting into the detail that people miss when walking passed. Getting down to a good view point, and keeping your camera steady you can take a beautiful photograph like this, you can really focus in on the detail. I took this photo with my camera set to macro, with an aperture setting of f/2.0 this allowed me to get a much sharper shot, and focus in on the detail of the leaf, also reducing the depth of field on the photograph, blurring out the background.


Photograph 4: “Water Drip”


4waterdroplet


Rules Of Composition Used:

– Cropping

– View Point

– Golden Triangle

In this photograph, I capture some water dripping off of a leaf using Macro photography. Because I couldn’t capture any photographs of insects, I wanted to add some form of life to the subject so I used a watering can on the plant to capture the water. My camera was set to a wide aperture of f/2.0 to lower the depth of field, and focus in on the subject. I used a lower view point than the last photograph also. I attempted to use the Golden Triangle on this photograph, as you can see the leaf is captured in the top right triangle, I aligned the central line along the background.


Photograph 5: “Peppers”


5pepperhanging


Rules Of Composition Used:

– Cropping

– View Point

In this photograph I used a slow shutter speed to capture the reflection of the light on the pepper’s, just below this subject their is a pool of water the light on the pepper’s where flickering due to the reflection of light from the water, so I used a slower shutter speed of 1/60 of a second, to increase the reflection of light on the pepper. I raised the view point for this photograph, and then set the aperture to f/2.0 to focus in on the subject, and lower the depth of field on the photograph.

After taking this photo I increased the vibrancy and saturation to bring out the orange colouring of the subject.


Photograph 6: “Floating”


6pepperinfountain


Rules Of Composition Used:

– Framing

– Symmetry?

– Background

This is probably one of my favourite pictures out of the bunch. When taking this photograph, I had framing in mind, inspired by one of the first photograph examples of framing I have seen. For some reason I see something quite symmetrical about this photograph, at the back down between the two concrete barriers theirs a symetrical element, but then its broken up by the vibrant orange pepper located in the middle. The surroundings of the pepper have been cancelled out, which in this case is the water the pepper just stands right out from the water.


Photograph 7: “Sky Scraper”


7castroilplant


Rules Of Composition:

– View Point

– Background

– Leading Lines

This is my favourite photograph taken from the bunch. To me this photograph really does represent exactly what I was looking for in my first concept. I love the way from the view point I have taken it from, it looks larger than it actually is, like it would tower over the top of us. The blue sky background, really allows the viewer’s eyes to focus onto this sky scraper plant, and then follow the leading lines down the branches to the exploding ends, which almost look like fire works. When taking this photograph I had Stephen Studd’s work in mind.


Photogragh 8: “Sky Scraper Against The City”


8castroilplant


Rules Of Composition Used:

– Depth Of Field

– Background

– View Point

When taking this photograph I had depth of field in mind, I tried to create the affect that you was looking at a skyscraper with the city in the background, in the depth of field. Also the background like the last photograph, the blue sky allows the viewer to focus in on the subject. I changed the view point on this photograph to capture the depth of field, and took it from low down like you where looking at the sky scraper from the street.


Photograph 9: “The Leading Lines”


9branches


Rules Of Composition Used:

– Experimentation

– Leading Lines?

– Background

– View Point

– Depth Of Field

I was experimenting with this photograph, I had the idea that when taking this photograph that the blue sky background would make the twigs and branches look a little more prominent creating leading lines that take the viewers eyes all over the place, and makes you want to look deeper and find different aspects of the photograph. I took it from a low view point again like the previous photograph, to create the sky scraper look, I also think this photograph has an element of the depth of field. This photograph was taken purely on the basis to inspire photographers to experiment with the different elements of composition, to create a photograph that is unique.


Photograph 10: “On Top”


10ivymacro


Rules Of Composition Used:

– View Point

– Leading Lines

When I took this photograph I had the work of Heather Angel in mind, the photograph of the lady bug on top of the flower and its made to look as though its really high up. Using macro phtoography I took this picture, to create the affect that you’ve reached the peak of a plant and its a long way down, using a wide aperture I reduced the depth of field. Theirs a leading line on this photograph, that starts at the peak of the plant and makes the viewer follow it all the way down to the bottom as it gets more blured, I took this photograph from a high view point.


Photograph 11: “Another Perspective”


11window


Rules Of Composition Used:

– Depth Of Field

In this photograph I used a small Aperture to increase the depth of field so it blurs the subject closer to the lens, and allows for the increase of depth of field. This photograph gives the viewer a different perspective to the “On Top” photograph of the same subject, this time from the side.


Photograph 12: “Symmetrical Top”


12gemetrictable


Rules Of Compostion Used:

– Symmetry and Patterns

The sole purpose of this photograph was to showcase symmetry and patterns, I tried hard to find a natural subject like a leaf to showcase symmetry and patterns, but I settled with this table top instead, simply because it was a great example of symmetry and patterns, its like a mirror image you could split it down the middle and more or less it would be the same, apart from slight differences.


Photograph 13: “Bottle On The Wall”


13Messageinabottle


Rules Of Composition Used:

– Cropping

– Background

In this photograph I wanted to focus on the bottle, it was easy because of the dull background, it really makes the bottle the key focus point in the photograph. After taking the photograph I darkened the colours to give off the affect it was getting late. Another thing I notice about this photograph is that their is an element of depth of field and maybe framing?


Photograph 14: “Dark leafs”


14nightleaf


Rules Of Composition Used:

– Cropping

– View Point

In this photograph I wanted to give off the affect that after being out here all day, its getting late so I darkened the colours on photo shop. I wanted this photograph to be the night time version of photograph number 4. I focused in on the leaf using macro photograph, using a wide aperture to lower the depth of field, and again using a low view point.


Photograph 15: “Lets Go In”


15inside


Rules Of Composition Used:

– Symmetry

– Depth Of Field

– Background

– Cropping

In this photograph I mainly focused on symmetry, I took the photograph at a fast shutter speed. I wanted the main flame to be as straight as possible, with the two reflections of the flame either side so you could split them down the middle and it would be a complete reflection of each other. Also the black background, allows for the candle to be the main focus point. And their is depth of field because it goes right back to the buildings in the distance. This allows for a more interesting photograph.