OUGD503 - Responsive: Air Up & Withers Designing

I started sketching some ideas for the logo, which could be used both on the website banner and the EP cover:


Logo
Then I went onto Illustrator and started designing. I chose to do this style of typeface, because 'Air' reminds me of thin and uplifting, so I thought the thin aspect of the type works really well with this, and the thicker aspect suits the more serious tone of the music. 

This A is the first letter I did, and I added a curved shape onto it when connecting the thin stroke to the thicker stroke to make it more friendly.

I had a bit of trouble designing the ampersand in the same style as the letters

I made sure the two circles appear like that meet up and are the same height as each other to look more natural. I tried different serifs at the end to see what looks more natural. I think the third one looks the best as the curve seems more natural.

I also tried this style of letter on the R which I really like, but doesn't suit this typeface.

Here is the typeface so far:

I tried two different versions of the T, and I prefer the first one because the second seems too top heavy.

I also tried different versions of the H, and I think the third one seems too thick, the second one seems too lopsided and the first one matches the A. 

I also tried different types of S's which is also a hard letter to do.

I started working on the second part of the logo, and the W looked too big at first with the full letter, so I decided to take off the last stroke, so again it matches the A and the H. I think the only letter that looks out of place now is the S. 

I then made the final logos in all their positions and made sure the kerning was right.

Album Cover

For the album cover, the client said I had full creative control as he had no vision for it and liked what I had done with the logo.

The first cover I did was one that the client had said he would like - the logo in the middle of a white background.

I made the logo smaller, central and higher up than the previous attempt to make it look more attractive visually. I also added a line above the album name and made it left aligned. This is what the client wanted, but now I am going to try some different examples to see if he prefers any of them.

I then tried repeating the logo and was going to have each one in a different colour but I think the logo is too harsh and it's quite hard to look at.

I then tried another idea, with overlapping letters but I discarded it because it's not very readable.

I then started another idea I had sketched where I wanted trees to have a reflection, and have sky above them to represent the Air, and for the top of the trees to be pointing Up. I also looked at the definition of level, and one of them was a horizontal line, so I wanted the trees next to each other horizontally to represent this.

I started by creating a tree shape, and made it quite geometric to fit in with the contemporary and digital aspect of the album. I also adde a film grain to it which I quite liked as it added a bit of texture. I started drawing branches on the tree using the Pen Tool and then adjusting the shape of it by using the Width tool.

I only added the branches on a few of the trees because I think it would be too overpowering with them on all of them.

I added the logo and title in the top left corner, and used Helvetica Light as the font.

I then copied and reflected the trees underneath to make a reflection but I think it looks too busy with all the trees starting at different heights.

I added a background to imitate the sky, but I added a gradient so that it looked softer but I think it looks to plain going to white.

I levelled up all the trees so that they  looked neater, and changed the colour of the reflected trees to shades of blue for a bit of contrast which I think looks better.

I got rid of the gradient which I think looks better now as it's cleaner.

I also tried it without the reflection to see what that looked like, and I like that as well.

I changed the shade of the blues to make them more subdued which I think works better.

I then started trying a different idea which is completely typography based. I created the word Reflections with an elongated base and changed the opacity so that they overlap with each other. This means I can put white text over the top and it will stand out. I put the rest of the title in Helvetica Bold underneath, but I think it looks quite plain so I'm going to make it similar to Reflections. I added the logo in the bottom right corner which I think looks a bit out of place.

I changed the rest of the title to be similar to Reflections and I think this looks a lot better. I also made the logo central which I think works well. I also started changing the colours to see what looked best. I do like blue and green together, and think it lets the white letters stand out.

I also tried a bright red which looked pink and I think it stood out a lot but perhaps too much?

I also tried a burnt orange which I think works but reminds me of rust and builders, not quite the tone of voice I'm going for.

I also tried a red and I really like this combination as it lets the white stand out, but isn't too overpowering and the colours work well together.

After some feedback, a peer said that the N needs to be more obvious, so I changed it to have the gap in it again.

I tried changing the position of the letters to make them more readable.

I moved the I in front of the blue O so that it stood out more and made it more readable.

I moved 'On A Local Level' higher up so that it fit in more with the title and left a bigger gap between the title and the logo.

I made the letters more spread out to make it easier to read.

I tried changing the position of them so that it was easier to read.

I then added a background colour to the cover, and also changed the colour scheme to blue and red.

 I then reversed the colours but I think I prefer the previous one.

I then started trying some different colours. 

I think these are quite vibrant together and stand out a lot which I like.

I quite like these complimentary colours together because they are quite light due to the opacity change. I think they look quite old which is the kind of music the client likes.

I think this looks too christmassy and washed out.

I quite like the mint green here, but I think the colours are too similar and merge into each other.

I then tried some more colour combinations:

OUGD503 - Responsive: Air Up - Sketches

Here are initial drawings for album artwork.

OUGD503 - Responsive: Air Up & Withers Brief

A local hip hop artist contacted me and asked me to redo his logo, which I said I would do and he then mentioned he was releasing a new EP in January, so I offered to design that as well.

Here is his current website with logo and existing album artwork on. 

As he is releasing the EP in January, I gave myself a short deadline so that I could get it done in two days, plenty of time for him to use it before the release. Here is their soundcloud with most of the new EP songs on to listen to.

Brief Title
Air Up & Withers

The Brief
I have been asked to produce a logo and album artwork for the artist Air Up & Withers. The EP is called 'Reflections On A Local Level' and the artist name should be shortened to Air Up on this. As it is going to be released digitally, on the front cover of the artwork needs to be produced.

Considerations
The client has asked for the logo on the album artwork to appear as 'Air Up' as he is producing it without Withers. Therefore I must consider how the logo can be used on its own, as well as the full version. 
I must also consider how it looks on screen, as it will only be a digital file and not printed.
It must also fit on the dimensions for the website banner, so I must consider the sizing and design of it for this reason too. 

Concept/Proposition
I am going to produce a logo with custom typography on Illustrator which can be used in different forms for different placement and music. I will also produce three album artwork concepts and ask what the client prefers, changing one if necessary. 

Background
Formed in 2013, Air Up & Withers are a hip hop piece which focus on expressing views on subject matters such as religion, poverty, money and generosity. They started making a couple of tracks for fun, then realised it could be taken further than this. They want to make people think about what is being said and provoke a positive change to the listener.

Target Audience
People who listen to the music will be a relatively younger audience due to the music only being released digitally, and the artist suggested that the people who listen should be willing to think and question what he is saying - therefore suggesting a more intellectual and socially aware audience.

Mandatory Requirements

• A logo which can be used in different formats
• High quality digital files which the client can use
• A digital version of the EP before the release date

Tone of Voice
I would say the tone of voice should have a serious tone to it somewhere due to the subject of the songs, but also a more playful tone due to the genre of the music and its sound.

Deliverables 

• A digital version of an EP front cover
• A logo file
• A logo which will fit the banner of the website

OUGD504 - Design for Print and Web: Coding the Website

I decided to code the website even though I'm focussing on the printed material because I enjoy coding and wanted the practice. I also knew I could get it done quickly because it's pretty simple and I did a page jump in the Design for Web website. I aimed to get it done in a night, so I went straight onto the CSS filling everything out I knew from my Fireworks mock up - fonts, footer and background image.

I specified the measurements I wanted for the body, and I also set the margin to 0px so that the navigation and footer would reach the end of the page.

I specified all the typography at the top of the CSS file this time and did it properly, rather than my site for the Web project which was all over the place.

I also put the background image in the same folder as the web files, and put it in place as the background image.

Here is what that looked like:

Then I started doing the footer because I knew this would be easy and could get it out the way with. Basically by fixing the position of it, it will always be on the screen no matter how far the user has scrolled down. I also set how it would look by making it red (background: #A42D25) , centering the white text (text-align: center), getting rid of the styles on the link (text-decoration: none) and putting the links next to each other (display: inline).

This is what the footer then looked like, with the background image also working:

I then started on the navigation. I knew this would be a bit harder, cause I wanted to make the page jump on text and not image, as I had done previously.

The #top is the container for the logo and navigation.

I added the styles for the logo as well, floating it left and making sure the position is fixed.

I then started to concentrate more on the HTML, and I put in the list for the navigation, linking it to #a etc, as this is where the page will jump to in the document rather than a link to a page. I added two classes to the links - one with the page name which styles the text and the positioning of that, while the navbox is the red container around the text.

Here are the styles for one of the pages (they are all the same bar the margin-left)

These are the styles for the red box:

I did some adjusting of the red box in Inspect Element, to get the padding and margins in proportion.

Here is what it looks like with the navigation and logo. The About section is also shown here which I'll go through now.

In this section I added a wrapper, and a textbox for the text. This had all the padding measurements which creates space between the edge of the box and text which is so important.  At first I made the position fixed, but I realised later on this was wrong. I didn't set a height, because the end of the text plus the padding-bottom would do that for me. It's better this way because if I change the text, or it looks different on another browser it will always fit within the textbox. 

I then started doing the opening times part on the home page. I created a box for the information to go in, which you can't see but will contain it all and position it correctly. I also created a line simply by adding a border-bottom which I've used throughout the printed material too.

I did some adjusting on Inspect Element, and figured out the right margin-left.

At first the times was going underneath the heading, and I realised this was because the width of the heading was really long for some reason by default. To alter this I needed to change the width of the heading.

In the HTML I put everything within the timesbox, and added the text. I used two of my heading defaults but I needed to add one style to them each for the width, and I didn't want to create a new class in CSS so I just made an inline style. This means it pushed the times to the far right of the box.

This is what it looks like now, which is a lot better:

Then I changed the margin-top of it to put it in line with the bottom of the about box.

I altered the wrapper to make the content lower.

This is the home page done!

I then started to work on the book page which was actually the easiest.

I started in the HTML by adding the #b id, because this will make the page jump here.

I also made sure all the content would be going inside these two divs. The container is the height of the screen - 640px, as this will make sure when it jumps it goes to the right section of the page. The wrapper is for the content.

Here are the styles for the box - I used most of the same styles that I used for the textbox on the home page.

Here is what it looked like in the browser:

I inserted an image of the book slider rather than making it into a functioning one as that would be too hard.

At first when I inserted the image I realised it was a lot shorter than what I thought, and I could add another book easily on each side. I also decided to take away the black background as I figured it would be easier to add my own in CSS.

Once I had edited the image, it looked like this. And I actually decided that I prefer it without the black box behind it, so I left it like this!

The only style on the image I had was the margin-top to make it below the text box.

Here is what the content looked like in HTML:

Then I started working on the Menu page which took a lot longer. I added the page jump div and the container which sets the height for this page.

This is the container in CSS:

This means when I click on the navigation, it goes to the right section of the page.

I created a box for the menu, foodbox, and started adding the content for that in HTML. I also inserted an arrow image.

Here are the styles for the container, wrapper and box for the food menu.

Here is what it looks like so far in the browser:

I added the line div again, and the second arrow. I started adding more inline styles to change things like the margin and colour.

Here is what it looks like so far:

I then realised I wanted the headings in black.

I added all of the sandwiches in.

Here is all the HTML for the content:

These are the styles for the drink menu which are going to go next to the food menu. It is similar to the opening times box on the home page.

Here is the content, and I need to adjust the positioning of the prices.

I changed the width of the headings so that they are all in the right place.

Here is the HTML for the drinks menu:

For the Contact page, I again created a container and wrapper.

Here is what it looks like in HTML at the beginning.

I created a form first of all for the enquiry form.

It wasn't looking great to start off with, and I tried making it transparent but I don't think you can do that on default forms. The message box worked fine though. So I tried just making a transparent box with a border to see if that worked, which it did. So I've made the decision to get rid of the form in HTML (bar from the message box) and just make boxes instead.

I did this which looks a lot better. I also made sure the send button was in the right place.

Here is the CSS for the form.

I then started to add the box with the contact details in next to it.

I put the form into a container because with it not being at first, the details box wouldn't go to the left of it - just underneath. I needed the form to float left for the other box to sit next to it.

Here is the HTML for the form inside the form box.

I have now finished coding the website! I'm very happy with it as it is pretty much exactly like my design and I finished it quickly which is good practice as I want to code two websites for the Responsive brief.