Part 4: Exercise - Hierarchy

Using Lorem Ipsum or some other dummy text, I have to design three different pages. The first one refers to interview with TV actor in listing magazine, second one should represent a review of a new piece of hardware or software in computer magazine, and third one should be a book review in newspaper weekend edition.

I started using UK listing magazine called Time Out and I came across the interview with the actor Martin Freeman regarding the new popular movie "The Hobbit". I am not sure about the exact typeface used for this interview headline but it is sans serif, grotesque, and legible font. Italic serif font for lead section is what creates visual dynamic but it is also blended very well with sans serif fonts. The copy text is also legible clean sans serif which is left justified, using same bolder typeface to emphasize what is important. As for the interview itself, there are clear difference between questions which are bolder and therefore distinctive and actor's answers which are in regular style of copy text. Every question and every answer is in a form of different paragraph which makes it clean and readable. However I decided to create three column layout with sans serif fonts for copy text and title and serif font for subheadings. It is simple design based on white, black and petrol blue. I also made one version with pink (mauve) title.

As for the new software review in computer magazine, I started with analizing popular local magazine called "Svet kompjutera".

They also used sans serif fonts but I was more attracted to F-Secure brochures  and their F-Secure sans font so I was determined to find something similar because I really like its modern and slightly technical look.

Basically any modern sans serif would be good option.I used sans serif fonts for all elements and combination of light and dark blue. It is also three column layout. Below is my page about new hardware review 

As for the book review in newspaper weekend edition I think that some classic legible serif font is very good choice. Typefaces which are in use when it comes to books and newspaper are mostly legible clean serif fonts, which have that timeless classic look. Good example is Times New Roman which has a history of use as one of the most famous and old typeface. I am going to search trough serif fonts hoping to make a good selection. I used sans serif for title, serif fonts for subheading and copy text and I interspersed page with red colour. I am concerned whether I chose the right font for copy text. When I looked it after a while, maybe it looks little archaic but on the other side the most newspapers cherish its print history and want to emphasize it trough design.

This exercise was very challenging but it provided me with some basic knowledge and experience. I started to look at typefaces more carefully and I am becoming aware how its visual appereance is powerful and how they communicate without reading content. I am introduced to some basic elements, there are a lot of work to do regarding typography.

Part 4: Research - Project Hierarchy

Hierarchy basically represents the organisation of the elements into level of importance. Good hierarchy is helpful when it comes to quick picking the information because importance of information on the document is immediately apparent to a reader.

Generally typographic hierarchy refers to different faces, weights and sizes of typefaces and how they structure documents by separating sections which together visually communicate in order to point on crucial information. When we look back at the history of typography we can see that European typographers developed typefaces in different sizes and scales and those are sizes we are familiar with even today. Six points through seventy two points type remained the same for over the hundred years, and those are default font sizes in many applications. So these default sizes remained the same for one reason: they are proven to be the most pleasing for the eyes. Nowadays when we use modern applications, we are allowed to set character heights which doesn’t have to be related to this default scale however it is more likely to loose a harmony.

Let’s get back to the basic hierarchy elements. If we have a text with no hierarchy, reader is forced to read the whole text in order to find wanted information. Probably the one small number of them will have a patience and will to read the whole text but I think the majority will simply skip it. The title or heading should be defined by using large text. An intro can be set in next largest text size as it provides the information which are found on that page. Subheadings are there to help us make a better selection and pick the relevant information quickly. They can use the same typeface as a copy text but be bolder, larger or in different colour or it can use the same font as heading. The Body or copy text represents the majority of text on a page.

I found this blog http://www.freddesign.co.uk/2011/05/archive/good-typography-an-introduction-to-hierarchy/ very useful so I am going to base it its content. Here are the images of text with and without hierarchy.

With evenly spread information reader’s eyes will follow this example above. They will start with the left corner and will continue with section 2 and work down to the section 3 and then will go back to right corner toward the section 4. This is a general simplified rule which doesn’t have to work in every case. Generally right hand page is usually the first one to be looked at.

Larger text size usually will be read first. It is important not to have too many text size because it can look disconnecting and messy.

Consistency is another important thing which affect readability and help picking the information. Consistency helps reader to identify elements such as subheadings or links.

Certain colours are considered more legible like red on white background or yellow on black background while yellow on a white background provides the less legibility.

Contrast also helps readers to focus on important elements so darker object will draw more attention so it can help to emphasize certain typographical elements.

Negative space also plays important role when it comes to focusing on particular elements because it draws eyes on small elements making it to stand out more.

Breaking the alignment with information can be a way to emphasize its importance. It is often seen in newspaper design.

http://www.markboulton.co.uk/journal/five-simple-steps-to-better-typography-part-4

http://www.freddesign.co.uk/2011/05/archive/good-typography-an-introduction-to-hierarchy/

Part 4: Exercise: Lorem Ipsum