Now you're a storyteller...

I chose the band Twin Atlantic for this brief as they had a sound that I enjoyed above the other bands on the list and would take pleasure in researching them further. Having written a good few songs myself I began by looking into their lyrics and after listening/reading only a couple of their songs I was aware that repetition was a dominant feature in their writing.

After a few attempts I decided the clearest way of showing the repetition was by looking at each song individually and counting each line that included repetition of some sort and then comparing that number to the total number of lines in that song. I worked out that the average number of lines that use repetition per song to be 18. I wanted to show this visually and the result of that is the word ‘repetition’ being repeated 18 times in the background to emphasise just how much extreme that amount of repetition is. I made a decision to show this data I collected from the songs through a series of bars as it would be the clearest way to show all the information together.

The majority of Twin Atlantic’s album and single covers followed the same formula, with a simple hierarchy with only the essential objects on the page (all usually centrally justified), a very limited colour palette and a very clean typeface (often used in all caps). All these features suggest a modern look and feeling to me and I tried to communicate this in my own design.

The typeface chosen was Franklin Gothic Demi Condensed for the title as I felt this reflected the bands style the most. It’s bold and ‘stretched’ characteristics suggest the loudness of Twin Atlantic’s music. I used a variation of that typeface, Franklin Gothic Book, for the smaller text as it read better at a smaller point size. The band has two very different logos on their album covers so I attempted to put the best of both together and came up with my own logo, which I feel still conveys the feeling expressed in their current logos.

I have kept the hierarchy very straight forward just like in Twin Atlantic’s album covers, with only the essential objects in a well structured order which can compare to the song structure of Twin Atlantic, most of which follow the traditional verse/chorus layout.

The colours used help suggest the clean, modern feeling I identified the first time I heard their music. There are very little backing vocals with easily identifiable layers of guitar which gives their songs a sense of simplicity while still managing to create a feeling of depth which I have tried to communicate in my design.

How Did You Get There? (Update)

My journey to Uni is a very unexciting 10 minute walk in basically a straight line along Cowcaddens Road from my flat to the campus. So for this blog I decided to focus on one specific part of the journey, that being the cross roads near GCU. On an early 9am start this cross road is ridiculously busy with rush hour traffic and vehicles coming from every direction. I wanted to reflect this in my piece with the many text boxes overlapping to symbolise the "chaos" I experience on the walk into Uni. I chose a light blue as the background colour to represent the freshness of the morning air.

The original file I uploaded used the typeface Tahoma but this didn't communicate enough about the surroundings at the Cowcaddens Crossroads. Instead I chose to replace this with the typeface Georgia which I feel resembles the type used on street name signposts. This change ended up adding the desired character to the design that I was looking for, and actually made the design look busier which helps convey the concept a bit stronger.

"Lifecycle of Webpage", is set out in a very clear order making it easy to understand. All the information given on the page is relevant with the main message of how superior Stumbleupon is compared to other social network websites. There is a good mix of information presented in various ways keeping it interesting and engaging. It has a clear focus most of the time but sometimes there are a few too many comparisons to other websites making it slightly confusing or overwhelming. A few comparisons would have been sufficient enough and would have made the message more obvious straight away. However, the images don't give you all the information that is needed, so to fully understand what is being communicated you have to read the text as well.

Every fact on the infographic was new to me as I had only briefly heard of the existence of Stumbleupon. I found them interesting but surprising as I had previously assumed that facebook would be the most widely used social network when it is in fact Stumbleupon. The various graphs on the design make learning the facts very easy as the information is clear without the need to read the text.

We agreed that the most likely target user would be someone who was trying to promote a business of some sort via social networks. The infographic would encourage them to use Stumbleupon to get the most exposure. The user is engaged through colour change as orange is used to make their own stats stand out, drawing the attention of the user onto how ‘better’ Stumbleupon is.

The infographic is laid out in a long strip that guides the viewer’s eye from top to bottom without any complication and because of this the hierarchy is kept very straight forward. The title as you would assume is the most dominant thing on the page with a large point size, but after that the info is given to you one fact after another in order from start to finish making it very easy to follow. As a result there is little space in between the items on the page with one image after another creating a sort of list effect.

The text on the design is displayed in clear, short statements to keep the main focus on the images and to make the infographic flow quicker. The hierarchy is communicated through typography by using a small point size for the majority of the text, which again keeps your attention on the statistics/images. The sub-headings are distinguished through colour change, larger point size and are made to stand out with a black decorative border around each of them. All the text on the design is presented in all caps, which would usually only be used for headings, and is a sans serif typeface, which adds to the clean feeling given throughout. Also, the sans serif font doesn’t add too much personality to the design, which doesn’t distract the user from the content.

The imagery doesn’t really add meaning but rather backs it up. Each statistic would still make sense without the symbolic images which add character more than meaning. They are included to make the design more visual, perhaps more interactive as the user has to actually count the images, e.g. the baby bottles that symbolise how many American’s are born per minute. The images relate to the statistic as well, e.g. a bottle is associated with a newborn baby, a stopwatch is associated with time, etc. In the case of the stopwatch, the user knows immediately that this specific fact is going to be about time before even reading it.

Bright colours, in most cases orange, have been used to highlight Stumbleupon’s facts, which are the most important facts according to this infographic. The other features of the design are a less dominant colour of light blue helping the orange text to stand out more. This makes it clearer that the infographic is bragging about the success of Stumbleupon and pointing out how far ahead it is than its main competitors.

The research content has been made visual, e.g. put into graphs, and if the visuals are not clear enough a small piece of text has been added to help make it clearer. A perfect example of this in action is the baby bottles as mentioned before. Another example of how type and imagery work together is when the actual logos for the competitor websites have been used instead of typing out the names. This makes it immediately obvious to the user what’s going on.

The images have been simplified to keep the content as clear as possible and to help not to confuse the user or to over complicate the design. The style of the design resembles the work of Jason Munn and is perhaps a reference to his design style. For instance, the clean, simplified imagery, sans serif fonts, the clear, straight forward hierarchy, the colour scheme and the overall feeling all give the impression of his work in my opinion.

Design process:
• Sign up to all the websites and see how they work
• Research the facts about each site
• Narrow down the facts you have found to the most relevant ones
• Find the clearest way of showing the chosen facts
• Choose the colour scheme that compliments Stumbleupon and attracts the user
to the correct parts of the design.
• Work out the layout and the order you wish to show the information so it’s
not too cluttered or confusing
• Work out the information hierarchy from the most important data to the
least important
• Insert the data in appropriate order into the design

How Did You Get There?

My journey to Uni is a very unexciting 10 minute walk in basically a straight line along Cowcaddens Road from my flat to the campus. So for this blog I decided to focus on one specific part of the journey, that being the cross roads near GCU. On an early 9am start this cross road is ridiculously busy with rush hour traffic and vehicles coming from every direction. I wanted to reflect this in my piece with the many text boxes overlapping to symbolise the "chaos" I experience on the walk into Uni. I chose a light blue as the background colour to represent the freshness of the morning air.

Helvetica

This was my first time watching the film 'Helvetica' which shares a brief history of the typeface from when it was first designed in 1957 (the same year that Helvetica completely changed the look of adverts) to the present day where it is still the most widely used font in the world. In fact, before watching this film I never realised just how widely used it was and still is with almost every shop sign written in Helvetica. It was said in the film that Helvetica is designed so well that it invites open interpretation which is probably one of the main reasons that it is so popular, because it fits with almost every design possible.

However, all was not happy in the film. There were many examples of designers who disliked the typeface because of its overuse and rejected its use completely. I found these designers work to be much more visually exciting and much more inspiring. Among these were the works of Émigré, many examples of ‘grunge typography’ and the works of Paula Shcer who even went as far as to blame Helvetica for starting the Vietnam War which I found amusing. There were other amusing parts to the film such as the part when the designer (I didn’t catch his name) was talking about his experience designing wedding invites saying it was the most stressful job he has ever had because of dealing with a mother-in-law. Another part I found myself chuckling away to (mostly because of my immaturity) was when I noticed one of the phrases sliced into Stefan Sagmeister’s body read ‘style = fart’.

Throughout the film, the typeface was described as being neutral and efficient making it fit perfectly to the majority of designs. As mentioned before it was said that Helvetica invites open interpretation but doesn’t always have to be legible to communicate the desired mood or message, e.g. when the font ‘Dingbats’, which is made up of various different symbols, was used to communicate how boring and dull a passage of text was. Something which I didn’t know beforehand was that the design of Helvetica was based around the sliced off terminals in the letters, ‘e’, ‘c’, ‘g’, etc. This seems to be crucial in the way the typeface is designed.

I am not one hundred per cent whether I am pro-Helvetica or anti-Helvetica mostly because I am just properly discovering the extent to which Helvetica extends. The fact that this typeface fits almost every mood or feeling inspires me to include Helvetica in some of my designs. However, the ‘punk’ side of me wishes to avoid the font just because it is so widely used and so popular within everyday life, and perhaps look further into those designers (mentioned before) that inspired me from the film.

That Font Sure Is Saucy

Getting Around

Transport is the typeface that was designed specifically to be the main typeface used on British road signs. In this case, Transport Heavy has been used as the road sign uses dark text on a light background. Transport has been used on British road signs since 1964, the year when all road signs in the UK were redesigned. It is a clear, bold font that can be classified as being a humanist sans serif type face. The font does its job very well as it is very clear, distinctive and friendly but is also easy to read from a distance in a moving vehicle. Together, the phrase, the type face and the colour choice give the sign a warm and friendly feeling. As stated before, it was designed specifically for road signs making it the perfect font for the job.

The hierarchy of the road sign is very simple and effective. The green ring draws the viewers eyes to the number which is the most important thing in the sign. Then the viewer reads the phrase at the bottom which is less imoportant. The difference in scale and the placement of the number at the top of the sign help communicate the hierarchy.

The main users of the sign are obviously going to be drivers of any vehicle and they need to obey the speed limit which is clearly stated in an easy to read and easy to understand manner meaning the road sign fulfils its purpose very well. The sign is so well designed that there should not be a single user that cannot understand it. The sign's message could not be clearer therefore in my opinion, no changes to the sign's design would be needed.

Modular Grid

&&&&&&&&&&&& what?

The ampersand I have chosen is built around geometric forms which distinguishes it as a geometric sans serif. The 'E' is quite recognisable whereas, in my opinion, the 'T' is much less recognisable because of the fact that it could be mistaken for a cross. The 'E' has no stem but instead 2 curved bowls that join together but not with the 'T'. Each bowl is a continuous curve of equal thickness at all times with the lower bowl curving slightly more than the upper bowl. Overall though, I am not sure how clear it is to someone that doesn't know it is an ampersand.

The design is simple enough that this ampersand would probably work well at a really small size in amongst body text or at a very large size in a headline or something. Because of the use of shapes it makes the ampersand feel quite informal and if it were a person I would imagine them as the fun, playful type who doesn't take things too seriously.

Alignment

Inappropriate Fonts

The red text at the top of the van design is what I would guess to be Ye Olde English. This is a font that I associate with primary school kids that are just learning to use a computer and I am sure this will be the same for most of us. Ye Olde English is a font that I would expect to see in a cheesy, cheap novalty restaurant or in a parody of some sort and therefore, in my opinion, it gives the air conditioning van an unprofessional look. To me it suggests that the workers will be amateurs who don't fully know what they are doing. The van needs a more sophisticated and more professional looking font that should probably be a sans serif font to fit in with the rest of the design. A simple font like Gill Sans MT would be a good example of a font that would work well on the van.

Long Lists