Coherent design and content without relying on a grid system to implement page relationships.

Type article complemented and framed by typography as page layout tool.

Pull quote to close off the open loop left by the letter 'A' tail.

Here I am trying to create a central focus of attention upon the article text without using any traditional grid structure. The article is about typography so the letters themselves have been used as a method of establishing links between design, content and page harmony. The centre of the large 'A' houses the text article which is the only space on the page that is enclosed by a shape. It is an island amongst the surrounding floating open shapes. The top left of the page is closed off as well but by the page border rather than a shape. This is meant to help the eye down into the 'A' and rest on the article. The background colour is more deeply saturated here to emphasise this is an area I want the viewer to look at.

There is some issue on the right of the image with the swirl of the 'A' tail creating an open space where the eye wanders. This may not work but I shaped the layout like this to give a place of rest amidst the chaotic swirl of letters. The colour here is also less saturated and a few shades lighter than the central more vibrant green. The area could be perceived as a distraction for the right eye being pulled so perhaps if this were placed on the right hand page this may aid reduce that. If it were placed on a left page then perhaps this would be more problematic so perhaps the space could be filled with an important pull quote or something central to the article to help with that. This can be seen in the second image, the typeface is not complementary here but it instead relates to the meaning of the quote.

I have broken out of any grid based layout and instead allowed the visuals to both complement the content in the sense they are both deeply connected (article on type, type frames the article) and also to act as a coherent container without relying on a grid to implement the page relationships.

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s