Layout, Heirarchy and The Grid

Layout

Part of our word section of the course covers the key concepts for designing a piece of work. To begin with we looked at Layout; page layout deals with the visual element of the page to create an overall composition. Which shows a clear path for the eye. This is for the viewer to find the easiest route to look over the piece. There are different types of layout that can be used below are a few examples.

Typesetting

Within the layout of the piece, typesetting is an important part. Typesetting is the composition of text within the layout. The text itself is a ongoing sequence of words which are distinct from the headlines or captions. It is often referred to as the the “body”. When thinking about layout of the text it can be set out in many ways to achieve different results.

Centred type which is most often used is the simplest ways to set out text blocks. Lines are of uneven length, however it allows the designer to create elegant and organic shapes, by breaking the text up.

Justified can either to the left or right. By using justify text you can create a clean shape on the page. Most efficiently used in newspapers and books. However gaps can appear, as the text is forced to make lines of even space. This can be overcome by increasing the line length. Poorly done and you will create what looks like rivers running through the text block.

Flush left is where the left edge of the texts looks hard and the right edge is soft. It give the text an organic flow and avoid the uneven spacing the plagues justified type.

Flush right  text  gives the text hard edge to the right and soft left edges. Often used for captions and side bars .  As it is unusual it can distract from the  path for the eye.

When using any of the type layouts Rag is an important factor to be aware of. The Rag describes an uneven margin for a vertical column of type. A bad rag will create all sorts of weird shapes along the edge of your text. It spoils the overall look of the piece and can be a distraction if wanting to create an organic flowing layout.

Another part of typesetting is line spacing within a paragraph of text. This is the distance between the lines of type. It is also called leading. Designers play about with the leading to create distinctive layouts. It is also important to think about the kerning and tracking when creating a piece of text. As well as line length, as the eye and brain can only stay focused on a line of text for so long before the reader looses position and destroys the flow of the text. The optimum line length is generally set at about 39 – 45 letters. This is often referred to as ‘measure’.

Hierarchy

One of the most important aspects of communicating with type is to establish a strong typographic hierarchy. It is the styling and placement of all the elements both type and images that guide the viewer through the contents in order of importance. Hierarchy is important for creating a clear path for the eye. Making things that need to relevant stand out.

The Grid System

Using a grid when designing on the computer is a helpful tool to take advantage of. The grid is there as a base to your design. For instance when designing a magazine layout, you want the magazine to have a uniformed layout throughout, as to make it feel like its all part of the same thing. You basically set up your grid by using X amount of columns for each page. Within these columns you are able to play around with the layout more freely and know that it is not going to look too different on each page.

All these parts of design are important to creating a successful piece of work. To make them legible, and creating a clear path for the eye. However, thinking outside of the box will create some really interesting pieces of work. Something to explore in the future, but for now, I’ll be producing pieces of work using these tools of design.

 

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