MAY 2016

DESIGN PRINCIPLE

HIERARCHY including RULE OF THIRDS

The foundation of all good information design is a well-designed hierarchy

HIERARCHY means that all the components of a presentation are shown in order of importance. Giving dominance to the most important information - that is, making it the focal point - can be established by

POSITIONby being above (at the top) or on the left side because we read down the page and from the left. Another important position is in the centre.

SIZEby being BIGGER

COLOURby being warmer or brighter

TONE/VALUEby being lighter on a dark background or darker on a light background

WEIGHTby being 'heavier' (bolder)

An effective visual hierarchy means that information is organized to make the scanning and understanding of it easy and accurate

POSITION (ON TOP) AND SIZE (BIGGER) COLOUR

Here is an example that slowly builds complexity from the bare initial text by manipulatingthe text and introducing new visual elements. A clear understanding of HIERARCHY results in

a more beautiful, meaningful, and communicative design that better serves the audience.SOURCE WEBSITE

"We were given a page of text which we had to put into a four column layout demonstratinghierarchy to produce an interesting design. To create hierarchy I used different font sizes, colour

and pull out quotes. The top three designs I produced, the third being the design I presented at thefinal crit. I really like how the blue is balanced out equally on both sides of the design, as well as thebold black text. I also like how the body text is arranged neatly within the two central columns. Theimportance given to ‘David Jury’ to make it stand out received positive feedback. The lecturer alsosuggested that the pull out quote should maybe be a little smaller. After receiving the feedback and

suggestions I made some changes which resulted in the fourth design." SOURCE WEBSITE

Why is the cricketer in blue? Why is the cricket bat important in the design?

WELL ORGANISED IMAGES AND LOTS OF TEXTNet-a-Porter (specialising in on-line fashion) has nailed it with a visually compelling newsletterdesign that cleverly uses digital collages to make a beautiful product showcase for their e-mailadvertisement. In this example, the alternate text and photo arrangement is used to separate

different sections and accentuate each subtitle.

This bold poster design for the Female Artist Festival perfectly presents traditional scrapbookstyle put into modern-day design. The imperfectly-cut photo is overlayed with different hand-

drawn elements that build a compelling digital collage with an abstract feel.

Establishing HIERARHY requires giving dominance in your work to those components thatcommand attention first. Every design should have a primary area of interest or focal point

that serves as a way into the design.

Other information is given secondary and tertiary dominance.Dominance relies on contrast (see page 1), as without contrast everything would be the same.

The RULE OF THIRDSFollowing the rule of thirds is one way of creating a dynamic composition where your focalpoint is not predictably placed at the centre. Instead, this rule divides a layout into a grid

(three equally spaced horizontal lines and three vertical lines) and places the focal point eitheron one of the lines, or ideally, on one of the four points where the lines intersect.

In the example below, the silhouetted figure lies on a vertical line and an intersection point. Thetop and bottom third of the book cover are filled with text, while the middle section is reservedfor the most visually dynamic portion of the photo. Note the horizon line divides the page at the

bottom third, rather than through the centre.

OTHER RULE OF THIRDS EXAMPLES

The rule of thirds says that you should position the most important elements in your scene alongthese lines, or at the points where they intersect. Doing so will add balance and interest to your

photo. Some cameras even offer an option to superimpose a rule of thirds grid over the LCD screen,making it even easier to use. MORE INFO