(Year 2) S:1 Interactive Communications: 4 Elements Exhibition Project – Introduction

For the first project in Interactive Communications year two we have been asked to create a temporary website to market an exhibition at a museum based on the four elements (Fire, Water, Air & Earth). We have been given the freedom to come up with what the exhibition is as long as it relates to the four elements.

The exhibition page must include the following elements:

At least one element of jQuery
Must include a basic CMS (Content management System)
Basic Log In Screen
Email Form for data Capture
photographic Gallery
Must include SEO (Search Optimization)
Implementing Appropriate Marketing Techniques

I have planned my work out, and created a time scale for myself so I can work to a target and keep up a sufficient flow of work. Below is my time scale:



Icon Artwork.

 Here is my Icon Artwork, first I drew them out on paper and then re-created them using illustrator. I based my icon artwork
I kept the designs fairly simplistic, using flat colours and the shape tool.
computerpic dogpic flowerpic framepic gerrycanpic lazycatpic wasppic bottleofbeerpic

Thematic Pinterest Research – Thematic Design

Because this is a thematic gallery website, I decided I would be a bit more artistic with the thematic design. I wanted to hand draw my background, and base it around the Icon Artwork in my gallery.

So I looked into hand drawn Icon designs to create a better understanding of how I should lay the design out, and what other Icon website’s use for there design.

Love the feel of these hand drawn icons.I liked this design because it shows all of the drawings of the icons together. This gave me an idea to maybe get other people to draw my icons as well, so I could merge them all together into a collage, so the harder you look into the website’s background you can spot a different drawing of the icon each time.

Free Download: Best of British papers featuring everything that makes Britain beautiful - cups of tea included!

The layout of this inspired a few ideas for the design of my website. I liked the way it is kind of like a pattern.

Office decoration? I think so.

I liked the way the icons where positioned in this one, It is really unique and individual. It And the fact you can see a different Icon in each separate bit of the design. Now I have gained an understanding, I decided to being creating the thematic element of my website.

Introduction: Thematic Dynamic Website

For this project I have been asked to create a website that is Dynamic. This website will draw content from a database, that uses a MYSQL table created by me.

For the thematic element of this website, all of the artwork has to be original and created by me. So I decided to create a website about ‘Icon Artwork’, because this is relative to what I do, and this website needs to be thematic around Icon Artwork as well. So I first looked at designs of icon artwork on pinterest, to create an idea about how I was going to theme this website.

Northern Graft: Evaluation

Northern Graft Web Site:


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.

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.

Page 4. – 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.


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


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.


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

Step 1. Mash

Step 2. Sparge


Step 3. Boil


Step 4. Cool


Step 5. Ferment


Step 6. Bottle