Thursday, 31 October 2013

Typographic & Grid Systems

I found a book that has come in quite useful called typographic systems written by Kimberley Elam.
This book covers different rules for use with typography as well as how to interpret within grids that have been put together.
This book covers radial, axis, and random typography amongst other things.

I have attached some images that I feel will help inspire and develop my magazine in terms of the design.


The Grid is a system  of divisions on a page that help to create relationships between elements within the page. They are intended to create visual order.

They guide information through the page and keep a consistent layout throughout publications, websites etc.















This is a radial system that is examplified through a poster for the truman brewery. It shows the grid layout over the top of the design to show you the thought process in the design of the poster.











Truman Brewery Poster without the layout overlay.

Another example of radial typography that uses hierarchy to navigate the audience to the most important part of text. The way the white text bleeds into the white space adds visual interest, as well as the red highlighted text. In the design on the bottom right this hierarchy is created in a tonal overlay to bring your attention to the part of text which is the most important. The lower left deign is left a little bit confusing due to the signifiers of the hierarchy not being as clear.


This is a classic grid layout used by Massimo Vignelli.
It is a grid made up of 3 columns which are sub divided into 8 different visual fields.
This layout allows for flexibility in every issue as well as creating an orderly design with clear hierarchy throughout the grid layout.

 This is another good example in how you can create a consistent design throughout a publication.
This is for a website called Vibrato and is set out as a 5 column grid. The logo is always a constant that is in the same place, as well as the navigation which is in a bright colour and always a constant. Using these layouts the rest of the page navigates around this important information in an orderly fashion using different colour schemes.