1. 3/24/2010
ar
Sematimba Joseph
Margaret Trowell School of Industrial and fine Arts, Makerere University
Essential Three (4)
4. Lay-out
Margaret Trowell School of Industrial and fine Arts, Makerere University
1

2. 3/24/2010
Layout
• This is a way of guiding the viewer
throughout your composition.
• Successful layout is very clear about what
information has prominence over the other
(and in that chronological order)
• Usually referred to and achieved through
information hierarchy
Margaret Trowell School of Industrial and fine Arts, Makerere University
Margaret Trowell School of Industrial and fine Arts, Makerere University
2

3. 3/24/2010
Layout
Margaret Trowell School of Industrial and fine Arts, Makerere University
Elements of Clear Hierarchy
• The intentional difference between
elements of layout is crucial to successful
design layout
• Its what invites and guides a viewer in order
of decreasing importance
1. Visual Contrast:
– Achieved through size, value, weight, white
space, position, figure/ground, texture and
colour.
Margaret Trowell School of Industrial and fine Arts, Makerere University
3

4. 3/24/2010
Elements of Clear Hierarchy
2. Symmetrical & Asymmetrical balance
– Symmetrical layouts achieve balance through
mirrored arrangements and are ideal for calm
graphics
– Asymmetrical layouts achieve balance through
less predictable and more dynamic layout-here
relationship of size, weight, white space work to
create a “resolved unevenness.”
Margaret Trowell School of Industrial and fine Arts, Makerere University
Margaret Trowell School of Industrial and fine Arts, Makerere University
4

5. 3/24/2010
Margaret Trowell School of Industrial and fine Arts, Makerere University
Elements of Clear Hierarchy
3. Sequencing and visual rhythm
– Imagine a song with beats of the same duration –
how boring.
– World around us is interesting because of rhythm.
– VR or Sequencing is achieved through changes in
pace of design via:
• Setting up regular system of elements and then interrupting
that system
• Opting for a surprise change in scale
• Moving an element out of its expected position
• Eliminating an unexpected element
• Changing quantity of particular item eg. amount of type on a
page
Margaret Trowell School of Industrial and fine Arts, Makerere University
5

6. 3/24/2010
Margaret Trowell School of Industrial and fine Arts, Makerere University
Elements of Clear Hierarchy
4. Depth
– The implication of 3D depth on a 2d
surface.
– Achieved in three ways
• Scale
• Layering
• Foreground/background relationships
– Colour also plays a part in creating visual
depth (Gradation/contrasts)
Margaret Trowell School of Industrial and fine Arts, Makerere University
6

7. 3/24/2010
Elements of Clear Hierarchy
5. Implied space
– Think of this as an expression on an
actor’s face when he sees something
beyond the stage.
– Here the actual format is expanded by
implication (something beyond the format)
– Can be achieved by:
• Use of scale-image bleeds off the page
• Use of repetition – sequence off images/letters
marching off the edge of the page.
Margaret Trowell School of Industrial and fine Arts, Makerere University
Margaret Trowell School of Industrial and fine Arts, Makerere University
7

8. 3/24/2010
Margaret Trowell School of Industrial and fine Arts, Makerere University
What tools do I have to work with?
• When working with layout tools include:
– Type
– Photography
– Illustrations
– Background
– Graphic elements
Variation in body text create areas of dark and
light. Creating texture-referred to as colour of
type used to create subtle visual tensions in a
layout
White space provides areas of quiet on the
page – with limitless possibilities
Margaret Trowell School of Industrial and fine Arts, Makerere University
8

9. 3/24/2010
Exercise
• To inspire creative use of layout tools is to think of
opposites that are appropriate to your message and
then develop ways of “acting out” those contrasts
graphically.
• Think about:
– Perfect / imperfect
– Whole / cropped
– Steady / shaky
– Focused / blurred
– Staying / leaving
– Moving / still
– Primitive / contemporary
– Strict / formal
– Single / multiples
Margaret Trowell School of Industrial and fine Arts, Makerere University
Elements of Clear Hierarchy
• Sketching rules
As part of ideation phase sketching should
serve two purposes:
– Put on paper ideas already in your head
– Produce new ideas
– Sketching process should follow the following rules:
• Use very soft pencil with a thick lead – prevents you from treating
ideation sketches as final designs
• Do not fit your ideas in a structured format – just let the ideas flow
• Avoid sketching components of your design in the same way always
– monotonous. Try different approaches to ideas
• Change position and size of elements on the page – exploration
opens up new avenues for investigation
• Break up your sketch process – every time you return to the project
= fresh eye and energy for new ideas
• Never, never edit your self while sketching, if you think it, draw it –
there is nothing like a bad idea.
Margaret Trowell School of Industrial and fine Arts, Makerere University
9

10. 3/24/2010
Online design Considerations
• Much as many design principals apply to graphic design affect
online design, there are additional challenges designing in this
new environment like. (Web is not like Print)
– Site architecture (Linear VS Non-linear navigation)
– Browser compatibility (Browser settings and viewer’s computer)
– HTML (source code behind every page on the web)
– WYSIWYG Editors (Go live/Dreamweaver)
– On screen contrast and readability
– Sound and Motion
Margaret Trowell School of Industrial and fine Arts, Makerere University
10