Wednesday 25 March 2015

OUGD503 - Paugwe








Paugwe are an electronic Trip-Hop duo from Manchester. I began doing some work for them a while ago but the project was put on the back burner due to the band being busy touring. They recently got in touch and we started up again with the work. The band wanted a logo, business cards and a banner designing. I spoke to a band member about the brief. They wanted their logo to feature an eye and the banner to look ‘trippy.’ These were their only specifications they gave me so I had a lot of freedom with this brief.
From my research I had gathered that I wanted to either use a crest format or incorporate tapered lines into the design. I also decided that I wanted to use custom lettering as there were no existing typefaces that I could think of that suited the aesthetic I was aiming for. I designed the lettering on Illustrator. At first tracing from sketches, however the outcomes weren’t particularly uniform. I decided to use shapes and trace these to ensure the dimensions were all even.
Shown to the left is one of the outcomes that I discarded. This is just one of numerous designs that I decided against. I realised that the reason I didn’t like any of these designs was because they were all too complex. I was trying too hard to make the logo look psychedelic and thus over-complicating it. I decided to strip it back completely, I continued to use the tapered lines as it made the logo more fluid. I drew a simple eye and made one minor adjustment. I moved half of the outline of the eye up a few millimeters. This design feature was originally going to be part of a more complex design incorporating sheet music; I intended half of the logo to sit one line above the other half. However I really liked it as it was so decided to send it to the client and see if they had any feedback. I suggested some changes but they were happy with the logo as it stood.
Once I had the logo and the custom lettering, the rest of the project just fell into place. The logo worked perfectly as a pattern, lines of the icon slotted in with one another neatly and I decided I definitely wanted to use this on the business card design. I considered the use of spot varnishing and foil blocking but after consulting with the client I decided that embossing would look the best. I didn’t want the pattern to be too overpowering and having it embossed into black card was the best way of ensuring this.
The banner was difficult to design, I wanted the banner to be psychedelic but in the least stereotypical way possible. I wanted a slightly more modern aesthetic as the band play electronic music. I was originally going to use paint and marker to produce the banner but it was going to be printed at a huge size so needed to be a vector.
The band were pleased with all elements of the project and all of them have been used. 






OUGD503 - Stubborn Git

Stubborn Git is a company that distribute craft beers, they specialize in Belgian ales. The company has a wholesale side to it under a different name but Stubborn Git is for small orders to individuals. The client explained that he wanted the branding to be quite trendy and appeal to young professionals who have disposable income. He asked me not only to brand stubborn git but also propose a website design. Alongside the we design and the branding he wanted a series of illustrations. Although illustration isn’t a particularly strong skill of mine I decided to undertake the project anyway.


I began by putting together a mood board of imagery that was similar to the design style the client had asked for. This not only gave me ideas for the project but was an efficient way to communicate how I had understood the client's brief. 


One initial idea that the client requested was the use of a circular format logo that incorporated a bottle cap and buttons for the website that also incorporated bottle caps. I was dubious about this idea at first but pushed forward with it. I began by trying to illustrate the buttons both by hand and on screen but concluded that the best way to incorporate the bottle cap was by using it as a stamp (shown above.) 


Bottle cap buttons on initial web mock up.


Colour scheme taken from image of belgian beers.



I put together a rough style guide for the brand to see if I was on the right track. The client was happy with the type and the texture but asked for incorporation of illustration in the logo.

Type - After experimenting with various stencil and slab serif typefaces to try and achieve an industrial, prohibition era feel I decided on Futura. I feel this will be more attractive to the target audience and the simplicity suits the circular format.
 
Texture  -For the website background

I wanted to use a distressed texture to fit with the prohibition era style. I experimented with
a few colours but decided that using white and a light grey looked the best and was the least distracting. 



The top colour scheme is what I was originally working with. The client wanted to use a burnt orange so I made sure to incorporate this. I then used various shades of brown which I took from the colours of different types of beer. I discarded this colour scheme as I felt it wasn’t very harmonious and slightly dull.
I made a new colour scheme with two shades of orange and then 3 shades of grey. This was much more understated which I think suits the target audience better. 





As illustration isn't an area that I feel particularly comfortable in I asked for my friend to do some illustrations for me. 





The client didn't like the way that any if the illustrations looked in the logo. He wanted the stubborn git character to look snobby and debonair. I also thought it would be better if the illustrations were simpler.




Shown above are the web mock ups that I sent to the client. 





Due to time limitations I decided to try and illustrate the character myself. The client asked me to illustrate the character in various scenarios which would apply to various sections of the website.


Discarded page header designs 








I traced one of my illustrations on illustrator to make the logo symmetrical, clean and bold.



     

Logo Variations. Client is still undecided on the four designs directly above.









Shown to the right are some of the illustrations that I am producing for Stubborn Git. Although I have completed the branding and web design this project is ongoing. The illustrations are a work in progress. I will also be working with this client to design gift vouchers for Stubborn Git. Unfortunately I did not have enough time to complete everything the client wanted for the module deadline submission but I will continue to work with him and help to apply my branding to every element of the Stubborn Git corporation. 





OUGD503 - ICCYL Web Design


ICCYL, the company that I rebranded earlier in the year approached me and asked if I would be willing to design a website for them. Web design is an area I have had little experience in so at first I was dubious but I had some ideas and I wanted to ensure that my brand was applied correctly and effectively. As they say, If you want something doing right, do it yourself.









As web design is an area that I am inexperienced in I made sure to do a lot of research. I used Awwwards.com alongside various other blogs to see effective and current web design. I mainly focused on one page scrolling sites as this was a format that I wanted to utilise.

I also looked at the use of colour in web design as I wanted to incorporate ICCYL’s brand colour scheme heavily. 





I drew up some scamps, above are a couple that I liked the best. I wanted most of the information to be on a one page scrolling site but with clear separation between sections of the site. I wanted to use colour to separate the sections as I feel the colour scheme for the brand is really nice. The conferences are aimed at children and young teenagers so having a colourful site will appeal to this age group. For the same reason I wanted the site to be dynamic and responsive. I had ideas for responsive functionality but I have very little knowledge of css so I decided to enlist the help of a friend. 

There are a few ideas that I discarded such as using the logo shape for the menu buttons and also as tabs for the top of each section of the site. I didn't want to overuse this shape. I did however want to incorporate the curved edges of the logos into the site somehow. I decided to use this curve at the top of each section. This makes the site unique and gives it a less corporate feel.




I sent over a digital mock up of the site to the web programmer, outlining what I wanted and where. As you can see there is a few different pages on this mock up but with Patrik we spoke about ways of bringing the page numbers down; I wanted to keep the site as simple as possible.


We decided that rather than having a separate page for each conference, the information that would have been on these pages could expand underneath the logo as shown above. I decided to keep all the type central throughout the site, mimicking the logos. There are no particularly large bodies of text so legibility isn't really an issue and the centred justification works better with the arcs at the top of each section.






We did have some problems with these arcs when coding the site. Depending on the resolution of the screen and the size of the browser window the size of the arc could change drastically (as is shown in the above screen grabs.) With some hard work from Patrik we overcame this problem so the arc was uniform across all screen resolutions.


We decided to use OpenSans as the typeface for the body copy. This is similar to Gotham but is more legible with bodies of text, it is designed to work well on screen. Also the typeface is a webfont so we would not have to code the font in. We did experiment with a couple of serif typefaces but they didn't fit the aesthetic of the site and the sans serif is more appealing to young people, one of our key target areas. 



The menu bar was fully functioning and would take you to whichever page you needed. However as soon as you scroll past the about us section it was no longer visible. This was an issue, although you could always scroll back up the site, ease of use is a key factor in this web design working. I decided to keep the menu bar as a fixed element at the top of the page.



The clients were really pleased with the resolved website design. We are waiting for a few images from the conferences this year to complete it and then we can attach it to their URL. 







Click here to view the site in action.