Uncategorized

Good typography – An introduction to Hierarchy

Design can be a very complex exercise be it web or print. Its a bit like a puzzle. You have lots of information and you need to decide how to best fit it all on the page. Generally the best and most popular practice is to divide it into blocks of information, but thought also needs to be given as to the order these are read and the prominence they have on the page. That’s where Hierarchy comes in.

Hierarchy, essentially is the organisation of elements into levels of importance. Why is it important? because it helps to communicate, which is what design is really all about. We are all very good at picking up information, we do it all the time. A good hierarchy, helps us do this. It allows us to scan a document and pick up the visual clues that help us distinguish what is important.

When someone first reads a page, they often have very immediate questions in their mind. Is this what I am looking for? What is this page about? How do I get what I need? By creating hierarchy, a designer or typographer can help the reader get this information more quickly.

Below is a quick example of a page with hierarchy. The first page, has virtually no hierarchy at all, the text is just flowed in. In this case the reader would have no choice but to read all the text in order to find what they are looking for.

hierarchy-1

Now lets have a look at a page with a better sense of hierarchy. The reader can clearly see what the page is about. The title is defined by using much larger text. Secondly, they can spot the intro in the next largest sized text and read instantly what they will find on this page. Lastly, the highlighted headings make it easier to scan the page and pick out the information they require.

hierarchy-2

In the example above, hierarchy is defined mainly using size. But now lets take a look at layout and the positioning on a page.

page

In a page which contains information spread evenly, a readers eye will usually follow this example. They start in the top left hand corner (section 1) and work down to the section 2 and then section 3. Finally, they will move back up to the top right hand corner towards section 4. Of course this is quite a simplistic view and a bold headline or powerful image is always capable of taking the attention immediately. Take the example below for example; Although the image is full bleed and much bigger, the type pulls the attention up towards the right hand corner, typically an area not looked at first.

page2

The point is that every page needs an entry point. And this is one of the things the designer must consider. Thought must be given to the readers journey, where they start and where they should finish. This is often what drop caps are for – they introduce entry points to the reader.

In magazines and other printed booklets the reader usually looks at the right hand page first as when flicking through or turning a page, this is the first one we see. This is why advertising is usually more expensive on the right hand side and why certain publications reserve this space for quality editorial.

To finish this article, here are a few things to consider when planning your page hierarchy.

Size:
Size is one of the most obvious ways of dividing information. Put simply, larger text will usually be read before smaller text. This is not always the case of course, as sometimes smaller text can be viewed as a block and therefore not read at all, where as larger text can encourage skim reading. Usually though large text will be read first. Something to remember with size however is to not have too many contrasting sizes, which will make your layout appear messy and reader won’t know where to begin, which brings us to our next point…

Consistency:
Consistency is a less obvious thing to think about with hierarchy. But the main goal when planning hierarchy is to organise your elements of information. Consistency helps us do this. By maintaining consistency across all sub headings for example, the reader knows that these are all of similar importance. A good example of consistency is in web design. It is good practice to have all links consistent so that the viewer will always recognise them. This consistency helps them find the information they are looking for quicker.

Colour:
Strong colours can always attract the attention first. Certain colours are more legible then others and considered stronger. On a white background red is often very powerful where yellow often struggles with legibility. On a black background however, yellow supposedly offers the heaviest contrast.

Contrast:
Contrast helps you define importance. Usually a reader will look to the darker objects first and place more importance on these. This can be utilised in typography to emphasise certain words or sentences. Often a heavier grey than normal for body text can be a elegant way of emphasising something.

Negative space:
Negative space is a sure way to place emphasis on other objects. A perfect example is the think small mini adverts. Though the picture of the mini is not particuarly large, the white space draws the eye straight to it, enforcing its importance.

hierarchy-2-212x300 mini

Alignment:
Alignment again helps to keep a page organised and make it easier for the reader to navigate. Again this can help define importance by grouping elements together. Likewise, other information can be emphasised by breaking alignment. This is often the case in newspaper design with pull out quotes.

newspaper

Well that’s it from us about hierarchy, so hopefully it gives you some things to think about. Our intention with this article is, to encourage typographers to think about the information on the page before laying it out. Too often it is the case where pages are designed without all the content being read by the designer. This should never be the case – it is only when you know and understand the information that you can start to think about which is the most useful or engaging.

Have you anything else to add? What elements do you use to address hierarchy?

Happy designing.

So why an apple? The history of the apple logo

Apple, always seems like a strange name for a computer company and certainly an original one. It is safe to say, its origins in a logo or brand are among the most talked about and speculated. In this blog I have attempted to do a  bit of reading for you and sum up the many stories, rumours and truths surrounding the famous mark and indeed the name itself.

 

Apple_first_logo

So to start with, lets look at the original apple logo from 1976. It featured a hand drawn image of  Isaac Newton under the tree where the apple fell and was designed by co-founder Ronald Wayne. It also featured the copy: ‘A Mind Forever Voyaging Through Strange Seas of Thought – Alone’. Perfectly sums up apple right? – especially at the time as lots of what they were doing was so pioneering. The logo did however look a little, shall we say classic, rather than contemporary though. And also the practicality of this being produced on computers was questioned, leading to Steve Jobs deciding a redesign was needed almost immediately.

But lets pause here for a minute. So why the name apple? Obviously looking at the first logo, it would be easy to tie its influence to Isaac Newton, but there a lots of other stories too. Firstly, Steve Jobs liked the Beatles so much that he named it after their record label. I have also heard that Jek Rakin, thought that apples was the perfect fruit and without another name he liked went with that. I also read somewhere that having worked for Atari, he wanted a name that would appear near the top of alphabetical lists. Other ideas suggest apple being the fruit of knowledge, based on the adam and eve story.

One of the most interesting stories I read was that the original rainbow apple logo was a tribute to Alan Turing, an English mathematician, logician, cryptanalyst and computer scientist, whose concepts played a considerable part in the development of the modern computer system. Turing was homosexual and heavily persecuted for this which was, at the time, illegal in the UK. In 1954 he committed suicide, by cyanide poising. A half eaten apple was found with his body, which was thought to have contained the cyanide. Hence forth a half eaten apple was a symbol for Alan Turing and his life’s work; and thus the apple logo, with a bite out of it was a reference to this. Seemingly the rainbow stripes could also relate to this, being an iconic gay symbol. However, both the company and at the designer however state that there is no real truth in this, as poetic as it is.

Despite the interesting stories, from what I can gather is the truth is much simpler. Apparently it results from Steve Jobs having worked in apple orchards in Oregon and stuck for another name decided to name it after his favourite brand of apples, McIntosh apples. It is spelt differently to the way Apple spell Macintosh for whatever reason, but this seems to be recognized as the most likely origins. Steve Wozniak describes the naming process as a simple one and that “anything that sounded interesting was valid”. So there really was nothing more to it I guess.

rainbow

So, moving back towards the logo designs, we come nicely to the iconic rainbow logo, designed by Rob Jannoff, which defined the core (no pun intended) shape of what is still used today. There are many questions as to the bite out of the apple with Janoff himself saying that the bite of the apple was added to ensure it resembled an apple and not a cherry. The bite also symbolised knowledge and was a reference to the computer term byte. The coloured stripes were apparently to make the logo more accessible and emphasise the modern nature of the application of colour on computer screens for the first time. When Jean Louis Gassée (former apple executive) was asked about his thoughts on the Apple logo he answered: “One of the deep mysteries to me is our logo, the symbol of lust and knowledge, bitten into, all crossed with the colors of the rainbow in the wrong order. You couldn’t dream of a more appropriate logo: lust, knowledge, hope, and anarchy.”

page35-3_7

There are countless other stories as to the relevance of the bite, but Janoff describes the process himself as a straight forward one, “when I explain the real reason why I did the bite it’s kind of a let down. But I’ll tell you. I designed it with a bite for scale, so people get that it was an apple not a cherry. Also it was kind of iconic about taking a bite out of an apple. Something that everyone can experience”. He also suggested the striped colours were also about accessibility, “So it represents color bars on the screen. Also, it was an attempt to make the logo very accessible to everyone, especially to young people so that Steve could get them into schools”.

I still love the rainbow logo. For me it evolved apple into such a stylish company and the introduction of the first imacs still followed on from this with the multicoloured backs. I was in art college at the time and look back on this as the time that macs popularity started to gain momentum.

The rainbow logo stuck around for 22 years until Steve Jobs returned to the company in 1997. One of the main reasons for moving into a somewhat simpler form was apparently the production costs. Producing a coloured logo was much more expensive, especially on the computers themselves. Michael M. Scott of Apple has called the logo “the most expensive bloody logo ever designed”. There was also the style consideration as well however, of the logo looking dated, and a simpler form needed. Since then it has been used in an aqua format and also a glass style. Jobs had the sense however to keep the silhouette and just simplify it in accordance with the more industrial led product design.

blue_aqua_apple_logo

apple_chrome_logo_small

apple-logo-2

Apple wrote in a updated corporate identity guideline−document following the exclusion of the rainbow logo the following: “Like our products and our customers, the Apple brand continues to evolve. To reflect this, we’ve made some important changes to the Apple logo and how we use it, and how we expect our channel to use it, too. Don’t worry: We haven’t replaced the logo, just updated it. We’ll continue to reflect who we are and what we stand for as a company in the same timeless symbol: an apple with a bite taken out of it. We’ve reduced some of the clutter in the original design, however, and updated the way we use color and light. In other words, we’ve taken the same standards of style and innovation that make our products and our design unmistakable and applied them to the company logo. Instead of rainbow stripes, solid colors. Instead of just one solid color, a palette of logo colors to suit a variety of uses. Solid colors emphasize the timeless shape of the Apple logo”.

Now, apple has gone even more minimal with the simplistic mono logo which is usually used. It is sometimes used on other products in various other flat colours as well. It goes to show the importance of simplicity in logo design as the same form has been reinvented with such success over so many years. Apple has changed its image and the apple, with such a strong basic shape has been able to work alongside this. So to end this blog I will leave you with some advice from Rob Janoff with regards to logo design: “The main thing is to make it simple, because designers especially young designers tend to over-design or clients want too many things in there. I think people who tried to work a logo too hard, having too much meaning, wind up with something that’s too complex. Logos usually have to be interpreted from very-very small to very-very large and that’s not always easy. So, I think simplicity and readability is key.”

Hope you enjoyed this blog!

Other good references:

http://creativebits.org/interview/interview_rob_janoff_designer_apple_logo

http://www.webdesignerdepot.com/2009/01/the-evolution-of-apple-design-between-1977-2008/

http://creativebits.org/interview/interview_rob_janoff_designer_apple_logo