Lesson Five :

Introduction to Grids, Unity, Layout & Flow

As a web designer, one of your goals is to make information easy to read, understand and access. You need to encourage viewers to read what you produce. You need to draw them into your story regardless of the product, message or service you are working with. This is where your design skills can help achieve this.

It doesn't matter which medium you're designing for; magazines, web sites, vehicle signage, billboard advertising, broadcast TV or mobile device, they all benefit from a considered, thoughtful application of Design Principles.

A skilled designer uses a wide range of tools to make this happen.

One vital tool for layout is the grid system.
The Grid System or Grid Layout, uses a combination of design elements such as line, plane, alignment, rhythm and proximity.

Grids are invisible but you can still "see" them if the items on the page are in alignment with one.

Generally if you're looking at a designed layout there will be a grid supporting the placement of objects. Some grids are easy to see, others are not-so-easy.

The "Art-Party" layout (opposite) shows artwork sitting in space on the left with a corresponding caption on the right. By virtue of their position, alignment and size, the two objects "seem" to have an "association", they "seem" linked.

A grid makes it easy for the designer to suggest association. eg. a magazine designer would set the bodycopy in columns of equal width and alignment so they all have an equal emphasis, which in turn allows other objects in the layout to have a distinct level in the layout hierarchy. What's layout hierarchy ? ( link to an example using just type from Design Junction Blog).

The grid is invisible when printed but is made visible while designing the layout. Most modern design software applications support grids. If they don't, chances are you can make a grid by dragging guides from rulers onto your artwork.

If you have Photoshop, check out this extension from Cameron McEfee that adds a grid generator to Photoshop (mac & PC). There's also instructions there on how to "install" Photoshop extensions. It's not free. Here's a YouTube tutorial on how to use GG

Note: New for 2015 Photoshop CC is a grid generator. Go to View/ New Guide Layout to get this dialogue box (see opposite).

 

What's Unity and why is it important ?
Unity in Design happens when the items in a design share a common property, such as colour, scale, shape, position, similarity and texture . It could be achieved using a harmonious colour scheme, alignment of items or harmonious type combination (using a single type family for a layout for example is one way of achieving typographic harmony).

By using the elements in this way the designer is reducing the potential for distraction. It makes it easier to manage the hierarchy of information and nothing stands-out to the detriment of the design. Unless that is, the designer intends an item to dominate as part of the design solution.

Here's one explanation of Unity that may help your understanding : http://nwrain.net/~tersiisky/design/unity.html

Here's a short video that explains Unity in Design / Art, it's worth 18 miuntes of your time from "VirtualAddiction" on YouTube.

Unity is also achieved when a layout maintains a consistent appearance on a single page or across the entire publication.

Using the same typeface family is a good way to ensure unity, as is using the same palette across the layout. Using a grid is just as important as these two however.

How does a grid enable unity?
Aligning related items on a single page or across pages emphasises unity. It's often remarked that a Graphic Designer is the person who "lines stuff up".

3 magazine spreadsGrid lines aka column guides are used to help position objects on a layout eg. a 3 column grid offers guides to position 3 columns of text. In addition, the horizontal header & footer guides provide a reference that is carried through to the other pages.

The grid is used across all categories of design; from business card design to packaging, from web sites to broadcast graphics and even architecture.

Do all layouts use grids?
Just about; any media such as magazine/ web browser/ Broadcast/ mobile device implies a grid by virtue of its framal reference or ground. Already you have a reference for positioning elements. The top, bottom, left and right margins define a structure already.

For irregular shaped framal references such as DVDs, clothing, mobile signage on cars or trucks the grid is still deployed and just as vital.

Why are the columns that make up a grid the same width?
A regular width grid system across the page is vital to enable unity through rhythm; our eye "gets used" to seeing items regularly spaced apart. We form an association between these equal-width columns; they all adopt an equal emphasis, they all symbolise the same thing.

Even if a photo or artwork covers several columns the grid still provides cues as to how you position the photo or artwork.

Do I have to adhere to a grid for positioning elements?
No. Just like most design rules, you can break them if necessary. The Australian Newspaper swaps its grid on a single page from 9 to 5 then to 3 columns. Raygun magazine (see left) prefers not to be bound by convention in this regard. They still use other design principles however.

How can they get away with that?
Bigger publications with a lot of different forms of content may bend the rules by "de-limiting" the grid by using "flow-lines" or "cross-rules"; spaces that range horizontally across the page that isolate the structure enough to introduce a new grid layout. Ultimately however, the grid structure is returned to provide overall publication unity.

Note: Rotating the grid is a popular device to add "interest" and "motion". Try this next time you want to "spice-up" a traditional layout but don't rotate it to the point where it's hard to read.

 

Resources:
For a brilliant case-study of designing using a grid download UK Web Designer Mark Boulton's article on "Designing with grids" (.pdf 8.5MB). It introduces the "CSS Box Model" which we'll be using later on in the Web Publishing Module.

The article is a "walk-through" of the re-design of Yahoo's web site using a grid system based on a single iPod advert width.

For further reading on grids; "Ordering Disorder - Grid Principles for Web Design" by Khoi Vinh is definately worth a read (rrp $35AUS)

There's an abundance of resources for learning about designing with grids online.
Here's some recommended reading:

Smashing Magazine

Design by Grid

960 Grid System

Noupe on Grids (features an extensive list of links to tutorials and tools to help with designing layouts using grid design)

 

Learning Task: Grid Layouts (2-4 hrs)

Go to 960.gs and examine several webpages with and without the grid overlay (click the "show grid" button to see it ). See if you can identify where the grid columns might go then check it using the show grid button. Try this on a few examples until you're confident you can "see" the invisible grid on any layout.

Note: If there are some grids portrayed at 960.gs that seem to have too many column guides then they probably have.

Now try the task below:

Find two magazine layouts that appear to use a grid system.

Take a photo before you mark it with a pen.

Then with a felt-tip marker, indicate on it where you think the grid is. Use equal -width columns.

Hint: if an item seems to go over more than one grid column that doesn't mean the grid stops, just draw over it.

Now find two examples from any source (but not magazines) that adhere to a grid. Car signage, clothing, architecture; your choice.

 

Note: When drawing the grid use equal width columns. By doing this it makes the grid usable across pages.

 

Now find two new layouts (from any source) that don't appear to follow a grid.

Explain why you think they don't use a grid. Hint: Raygun Magazine or most designs by David Carson are less "grid-compliant".

Publish all six images (featuring the column guides you drew and their captions) to your blog and submit the URL via email for feedback.

Chris Adams 2017

Flow and the Gutenberg diagram

gutenburg diagram shows eye flowThe path that a reader's view follows across a layout is known as the "flow".

Edmund Arnold, (Wikipedia) a US typographer, described the most common flow (see diagram opposite, ) shown by the arrow, as the "Axis of Orientation".

Arnold proposed that the eye enters at the POA - (Primary Optical Area) and exits at the (Terminal Anchor).

Arnold also identified two dead spots as marked by the crosses. The finer arrows in an arc towards the middle right are considered to be backwards movements that the eye avoids.

This "flow" is universal (for Western Culture readers, the flow differs between cultures. Here's a study on cross-cultural differences in flow)

 

Reference: The Design Manual, David Whitbread, UNSW Press (2001) ISBN: 0868406589

Flow and web design
View this PowerPoint presentation (1.8MB) on layouts for web design; even though it's from 2005, the material it covers is timeless.

Learning Task: Gutenberg Flow

Now find an example in print or web that follows the Gutenberg diagram. No need to draw over it, simply take a photo or screenshot, edit it in Photoshop and indicate where you think the flow goes.

Submission Guide
Publish to your blog with a caption describing how you think it adheres to the Gutenberg flow then email your blog URL for feedback.

 

Summary

This lesson introduced design unity, the grid system and flow and how these principles and tools can be used to lay out a page for both print and web publishing.