OUGD603: Brief 05 - No. 7 Antiques // Further Logo Development

In continuation from an earlier post, I'm tacking the 'Q', which previously looked quick out of place amongst the other serifs and and blocky typographic elements. Trying to add some size and some character, or at least, making the descender of the 'Q' fit into the rest of the typography. 

I began by demolishing the previous descended, which was built into the typography. 

Using the existing anchor points on the letterform, I mirrored them to create a perfectly symmetrical and fitting base to attach a new custom descender to the Q. 

Mirroring the weight of the serifs used across the rest of the logotype, I added a simple descender to the Q. Which looks better, much stronger than previous, which had a sort of taper to it. However, the length of the descender makes it look thinner in comparison to the rest of the blockier serifs. 

I also tried adding a serif to the base of the descender. Hoping to achieve the same blocky look as the rest of the serifs within the logotype. It just looks bad. 

I had a crack at rotating it, having it sit at 90 degrees to the descender, which is at 45 degrees. This works better, it look slightly more aesthetically pleasing, however, I'm still not a massive fan of it. It has to go!

Removing the serif and reducing the length of the descender. This allows the descender to appear wider and better fitting on the logotype. Similar to the original descender, but weightier and shorter, without a taper. Which looks much nicer, as it fits in with the structure of the logotype. 

OUGD603: Brief 9 - Coffee Culture II // Mobile Wireframe Sketches

OUGD603: Brief 11 - Coffee Culture II // Website Planning

I began to plan how the website will function as a whole. When mapping out how much content would be required, I determined that it would be best to have the website as a single page micro-site. Being one long page with all the required content on it. 

My thinking has been displayed above, and how the website might be laid out.

Only two elements will be linked, and these will be in the form of a overlaying content box. The drinks menu, and the food menu. As these will take up a large amount of space on the website, it makes sense to conceal them initially. A lot of websites do this, as my research has shown. 

In keeping with other web design themes, the imagery and content boxes will be in a parallax format. 

OUGD603: Brief 3 - SAC Ampleforth // Primal Gym Study

Whilst at the gym the other day, I spoke to a couple of members and one of them mentioned Primal Gym, Leeds Dock – I gave it a google to see what it was like in terms of facilities, only to find a pretty tidy website. 

Greeted with a full width splash image – the responsive web design assuring the entire screen from edge to edge is filled. Using a well framed photography to bring the page to life. A power scroll button, in the form of a down arrow. 

The website takes the form of a micro site, a single page scrolling website. So the top navigation is compact and acts as a power scroll to the relevant content. 

The about section, really simple responsive type, nothing complex. All the images on the website are presented in a parallax format, which adds a new dynamic perspective to the website – adding motion!

Full width images dominating the page throughout. 

Colour coded classes – similar to how SAC's classes are depicted. 

Membership plans presented in an interesting format, paying particular attention the main factor, the price – and all the T+Cs in smaller REM below. 

OUGD603: Brief 5 - No. 7 Antiques // Further Logo Development

Following sending the logo variations to the client, I presented the selected logo at a crit session, last week. (Participants were Sam, Jasper, Joe, Sean and Myself). Looking for feedback on the construction of the logo and how It could be further developed. 

Luckily, Joe is quite a type geek – he knows his stuff, so I knew I would benefit from his knowledge. To reiterate the feedback, it went as follows;

• Fix the Q, looks weird.
• Add some additional serifs to really develop the aged look.
• Remove the texture for now, it must work without it.

Added serifs to the E, which really puts the logo into a more traditional, aged light. It feel heavier, blockier – Which was the look we were going for. 

Also, upon review, I noticed the kerning was slightly off between the I and the Q. Adjusting the space, tightening it created a consistent spacing between all the letters. Which is important in a logo which is entirely typography.

Adding additional serifs to the T, to further create the blocky traditional look. It works, it's added to the logotype. It looks more vintage, rather than sleak modern type. 

I will be tackling the Q's descender at a later date. 

OUGD603: Brief 03 - SAC Ampleforth (Website) // UX – Expanding Information

I would like to add an extra sense of depth to the website, add an element which is active, which moves utilising dynamic properties. 

Above, from Codyhouse is an animation to show the different ways if displaying and hiding information on a page. I feel this could be implemented into SAC Ampleforth's Class section. 

OUGD603: Brief 4 - The Last Drop // Logo Development 01

I'm developing some initial ideas for the logotype/symbol for The Last Drop. Based on the research previously conducted and the 'old' logo, which wasn't really designed – it's just a warped typeface. Which worked as a place holder, however the crawl really needs something substantial and developed to represent it. 

Using the method I've adopted from Aaron Draplin, I began by writing logo down continuously in different formats. To see if anything jumps out, or if any ideas come at me from the type. 

Additional sketches, exploring how adding imager such as a banner might work to add to the look and feel of the logo. 

The first concept is based upon that of The Bridge 1859 – depicting what it name represents quite literally. In this case, The Last Drop Pub, in the heart of York. The final calling point of the crawl. 

It looks decent, it's a nice illustration, however, because of it's detail it wouldn't work on a smaller scale – something simpler would work better due it's diversity on a range of scales.  

OUGD603: Brief 01 - SAC Ampleforth (Identity) // Identity Guidelines

As part of visual identity of SAC Ampleforth, I've created identity guidelines. The guidelines are a set of guidelines which should be followed to create a consistent visual identity across all of the collateral within the brand.

SAC Ampleforth_Identity Guidelines

The guidelines cover the colour usage, typography usage and the logo guidelines. The core elements of the brand.

OUGD603: Brief 03 - SAC Ampleforth (Website) & Brief 09 Coffee Culture (Website) // UI Kit Research

As I've not done so in the past, I want to create UI Kit for this project.

UI Kits are files (usually PSDs) with a lot of useful components – User Interface Elements – for user interface design. They come with the possibility of a lot of color variations and they easily integrate with your own design since they actually are done for this propose. They can also include patterns, brushes and asl files, which make the integration process even easier, you can play with colors, create new components and just include them as smart objects in your own design If you want.

http://designmodo.com/ui-kit-use/ 

They would be beneficial on projects such as SAC Ampleforth and Coffee Culture, as there are many pages to be designed. Having buttons, sliders and switches ready made, which I can drag and implement into the web design. It's a really good tool to use to standardise the interface. An example of an UI Kit by Riki Tanone is pictured below. 

Riki Tanone's UI Kit above, which he distributed as a freebie on his dribble – has a consistent design style, which works well as a standardised set. Created for a blog, using similar colours, widths, heights, spacings and typefaces to create a set of UI elements which can be implemented into a web design project. 

 The EDGE UI Kit by Creativedash is another example of a UI Kit, containing a vast range of elements which cab be implemented into the web design project. 

An example of a more complex UI Kit, similar to identity guidelines is the UI Styleguide by Alex Sailer, part of Focus Lab. Displaying the colours, buttons, typefaces and icons which can be used in the web design process of his project. 

OUGD603: Brief 15 - YCN: Yorkshire Tea // Box Imagery Artworking

The boxes are to use a seamless panorama, to do so, we need to adjust the images so that they wrap around seamlessly. To the edge of the left side meets the edge of the right side, appearing to be one image. 

Original image, sourced from flickr – within the competition guidelines. 

Sampling the right side and mirroring it, then blending it with left side, for a seamless transition. 

Yorkshire Gold image, featuring heather and a rich and colourful landscape, also sourced from flickr. 

Creating a seamless pine tree, for a complete wrap around. 

OUGD603: Brief 4 - The Last Drop // Logo Initial Research

The logo needs to be developed – as it stands, the logotype is just a typeface. Not even kerned or anything. Thrown together as a placeholder, more than anything. The research within this post will inform the logotype design process. 

I've decided to look at designs for pub logotypes and symbols, trying to channel the aesthetics of the rustic pubs into the logo for the pub crawl. So when you look at the logotype, you'll be able to make that connection. Rather than it looking like a logo from an insurance company, which wouldn't be relevant.

The logotype and symbol for English Pub, uses a very gothic, traditional typeface – reflecting old England, accompanied by the lions, a symbol of British pride – and of course the beer, which has been topped with a crown to suggest the beer is almost royalty. Created in a one colour deep blue illustration, which highlights the orange of the pint. 

Examples of line illustrations, depicting contains typically used to drink out out. Using an orange to create the froth which can be found on pints. Really simple, really clean. 

A centrally alights logo, using two colours. The orange as the secondary, and the white to contrast and make it pop. Giving priority to those elements. 

The logo for The Bridge 1859, in Dublin. The logotype itself is very standard, some beautifully kerned typography, set out using heretical system – with an illustration of the landmark with gives the bar it's name sake. 

OUGD603: Brief 4 - The Last Drop // Existing Pub Crawl Maps

Initial research – looking at what's already out there in terms of pub crawl maps, and seeing what works, what doesn't work. Drawing upon them to develop the map for The Last Drop. 

The map pictured above is for numerous pub crawls around Leeds – all rolled into one. Reflecting the London Underground map design, by Harry Beck. This design works well for multiple pub crawls, as it allows for clear concise information to be communicated effectively. Unfortunately, this style of map doesn't really work for this brief – it calls for a modern-contempoary design, only featuring one pub crawl. It would look rather bare. 

The map above is for The Alfreso Amble – a crawl in York similar to The Last Drop. The map uses a flat design, using illustrations of York's streets, from a bird's eye view. Similar to the previous maps, although those are based on a satellite view. 

An example of another pub crawl, the route overlaid directly over a screenshot from Google Maps. The advantage of this is that the map will actually function as a map for the location, as well as displaying the route for the crawl. However – it looks very amateur, rather than professional. 

Above is a more illustrative map, create for the film 'The World's End'. Using a a 3D illustration works well for this instance, as the fictional town of Newton Haven is very small – and York is not. However, the type, using washed out and faded colours helps add some character to the illustrations and the map, giving it a used charm. 

OUGD603: Brief 4 - The Last Drop // Map Research

As part of the research process for The Last Drop, I'm looking at examples of other maps – paying close attention how they are composed, how they are laid out and what they include. 

The map above is a map for (somewhere in Japan). Showing points of interest. Using road lines of various weights to displaying the road's density – so footpaths will be very thin and motorways would be a heavier weight. Also using circles to show where the map's content is featured on a larger scale – the country. 

Also having a key at the bottom, so the audience can identity what the different icons on the map mean, saving space on the map itself, moving all the type to one place. 

Another example is this very illustrative map, the streets created using negative space by the abstract illustrations of the houses. 

A much more simple route map, using no waypoints to show where the route lies, and using a very simple stroke to show the route passing through the three points of interest. Not knowing the context, but the E would be a point of reference for the map. Also showing the compass in the top right. 

The way finding on the map above, uses flags to mark the points of interest. The cloth of the flag, can be used to number the way finding elements.

A map of London, created using the negative space to create the roads and the rivers. 

Some drop pins, using the space to label them – shadows are also used to add some depth to the map, almost like the drop pins are marking the location, and they're part of the landscape.

The trees are nice too