Document

Report
Learning to See
Visual
Communication
Techniques
for Web
and Print
Developed by:
Seeta Nyary, OISE/UT, 2003.
Revised edition of
The Low-Down on Layout
for Your Visual Communications, 2001, 2002.
F
A
Focal Points
Alignments
Consistency
C
Tie-Ins
T
S
Space
Visual Principles
Focal Points
F
ocal Points

Always have a “prime” focal point

Focals:





are a way of including emphasis
get noticed first and are different from the rest
highlight the main message, idea, title, theme
allow the reader to quickly understand
the main idea
allow you (the designer) to choose where the
eye will be drawn first (by the reader)

Do not emphasize everything

Use the principle of contrast for focals

contrast = high impact
F
ocal Points

Contrast includes:
DARKLIGHT

THICKTHIN
images, shapes, lines, words, numbers...
Think in combinations of opposites
–

small
Use any element
–

Large
bright/dull, sharp/soft, open/enclosed, front/back,
solid/subdued, smooth/rough, direct/impression
When you do it - DO IT, don’t be a wimp!
F
ocal Points
Catch the readers eye:
pointers
Interruption
of the
rhythm
CC
Against the grid
at an angle
Intersection
Direct Impression
CC
Background
Foreground
Intensity
Colour
Brightness
C
Thickness
Texture
Enclosed or open ?
F
ocal Points
Yale Style Guide, 2001
F
ocal Points
F
ocal Points
Tricks:
sub-messages = sub-focals
–
–
they should be smaller elements of contrast
remember: if it’s bigger it’s more important
If you don’t have a strong theme or image?
–
–
–
pull out key words from text, make a word LARGE,
fill it with a light tone, place it as your page focal,
or integrate it with your heading(s)
Light &
Large
enlarge words, letters, numbers…
enhance with lines, filled shapes, symbols…
Alignments
A
lignments

Everything should line up with something
on the page
–

Alignments create relationships:
–
–

square things off (Plot)
with other visual elements on the page
with content on the page (even if it is further away)
Alignments work with tie-ins
–
–
they tie the page together with implied proximity
the reader can pick up even subtle differences
A
lignments

Find or create one strong alignment and use it
– Can it relate to the theme?
– Can it relate to the image, graphic element,
or the title?
– Can it relate to a graphic treatment of a title?
– Can it be integrated into the title?

Find one sub-alignment
– Can it highlight a secondary message or
subheading on the page?

Create “a grid” to aid with layout, and stick
with it, unless contrast is purposefully used
A
lignments
A
lignments
A
lignments
A
lignments
A
lignments
Yale Style Guide, 2001
A
lignments
Yale Style Guide, 2001
A
lignments
A
lignments

Left-aligned or ragged right is still easier to read
–

Force justified text is harder to read
–
–

the space between the words are irregular
better used with wider columns
Centering is over-used by lay persons
–

use this for any long excerpts of narrative
avoid this alignment initially
Right-aligned in under-used
–
try this alignment beside imagery or graphic
elements used within the design (ties-ins).
A
lignments
Consistency
C
onsistency

Repetition is key - less is more
–
–
it’s the overall framework that organizes information
it’s the carpet, the ground cover, the matrix

Repeat headline fonts and editorial typefaces

Repeat characteristics for any element used
–

lines, shapes, sizes, fonts, spacing, columns, colour
Use one to three variations of graphic treatment
–
–
–
–
two to four colours (and their shades)
placement of graphic elements beside sub-titles
spacing - words, graphics and page
elements used as emphasis
C
onsistency

Elements that establish hierarchy
should be consistent

Alignments (prime) that establish relationships
should be consistent

Grids that establish the basic layout of design
should be consistent

Don’t change half way through unless you are
creating emphasis through contrast
C
onsistency
C
onsistency
C
onsistency

Repetition can create rhythm or pattern
–

can this help your design?
Regular rhythm = repeated elements at regular
intervals, which are smooth and calming
Is this rhythm, pattern or texture?

Irregular rhythm = repeated elements with
abrupt change, which are lively or exciting
C
onsistency
Robin Williams, 1994
Tie-Ins
T
ie-Ins
Think and Divide
THINK and DIVIDE:
 Group content that is similar
– place it close together on the page
– group by function, message, content, task...

Cluster visual elements that relate
– place them close to the related content/headings

Separate things that are not similar
–
–
–
use extra paragraph spacing or extra white space
use lines, boxes (enclosures) to divide
use contrast principles if you want to draw the eye
T
ie-Ins
Think and Divide
T
ie-Ins
Think and Divide
Example:
Typical front page information
includes a title, sub-title, author, date and an image
–
Cluster the title and sub-title
(one group of similar info - more related)
–
Cluster the author and date
(one group of similar info - more related)
–
Cluster the image with the title
(the image should relate to the title or theme in this case)
–
Place related items close together!!!
Aside: Even if a component of sub-grouped related
information is at the top of the page and the remainder
is at the bottom, they can be connected by alignment!
T
ie-Ins
Think and Divide

Deliberately break the content and visuals
into related chunks

Group and place related elements and
words close together

What does this do?
– the reader can associate the messages of
those separate elements easier
– the reader can see the prime messages easier
– the reader can have the messages reinforced

You get…
– more innovative ideas for layout with the rest of
the FACTS principles
T
ie-Ins
Think and Divide
T
ie-Ins
Think and Divide
T
ie-Ins
Think and Divide
T
ie-Ins
Think and Divide
T
ie-Ins
Think and Divide
T
ie-Ins
Think and Divide
T
ie-Ins
Think and Divide
T
ie-Ins
Think and Divide
T
ie-Ins
Think and Divide


If you have a catchy phrase, be careful how you
break it up, group it:
–
The flavour will turn you upside down with joy, and
you don’t have to clean up.
–
(The flavour) (will turn you)
(upside down) (with joy),
and (you don’t have to clean up).
When you break up headings and by-lines,
think about each phrase as a chunk
–
–
because, here we read line by line
so, what does each chunk mean?
Space
S
pace

Leave enough breathing space - no clutter
–
–

More space forces a simplicity to the design and
a certain degree of elegance
–

try for 30-40% breathing room on a page… unless
your theme requires more “stuff”,i.e. a newsletter
even pages that look noisier, which are well
designed, have about 15-20% white space
lots of space and wide margins imply luxury
Space enhances the contrast which you create
S
pace

Space makes it easier to read

Don’t trap space - let it flow to the edges


Edit the copy - don’t squeeze
Use your line and paragraph spacing to adjust
text spacing in the main copy

Set wide margins and thinner columns
–
–
web - set percent tables to 80%, not 100%
web - set fixed tables at 535 pixels wide for 640x480
S
pace
Imagery
Editorial
Typeface
Colour
A Few Extra Tips
Imagery

Use appropriate imagery for the message/theme

Don’t use imagery, if you don’t have the
appropriate visuals, examples:
–
–
–

enlarged photographs out of resolution (pixilated)
clipart that that everyone has
INSTEAD, use a creative treatment of words,
shapes and lines.
Build a digital library
–
go to clipart sources, buy relevant stock art, create
your own if you have the in-house skill
If you don’t think it looks good, it doesn’t!
Imagery
Editorial

Avoid long headings - max 3 lines

Avoid centering more than 2 lines

Avoid capital letters - it’s harder to read

Avoid too much italic treatment

Divide the text into:
–
–
–

editorial copy (main text)
3-4 heading hierarchies
(and associated graphic treatment)
graphic headline (part of the title/theme/message)
Note: a large headline in a small space will look
cramped and the effect is lost.
Typeface

No more than 3 fonts

Don’t use a fancy font for the whole document
–
–
–

Serif (Times) and Sans Serif (Arial)
–
–

use them for headings, headlines and graphics
match the fancy font to your message and theme
if you don’t have the right font, use a generic font
web or monitor - sans for copy
print - serif for copy
Keep a copy of your fancy fonts, they are
computer specific
Typeface
Typeface
Colour

Limit your colours (3, 5 max)

One colour works fine if you use the entire
spectrum of its shade
–
–
–

black and 256 shades of grays + white
blue and the tints of blue + white
reversed text is effective for emphasis.
white text in solid
background
Pick colours to match emotions and theme
–
happy, sad, lively, earthy, childish

Colours and symbolism vary with culture

Red always stands out first (see next)
Colour
Colour

CMYK - pigment model (print)
–
–

RGB - light model (screen)
–
–

Cyan, Magenta, Yellow and Black
all mixed together = mud
C
M
Y
K
R
Red, Green, Blue
all mixed together = white
G
B
Colour Safe for the web = 216 colours
–
–
these colours will not change or dither at the
256 colour monitor display for any system
values are calculated in RGB or the hexadecimal
system, which can be coordinated between apps
MUD!
WHITE
Colour
Review
Don’t Do’s
Some Sites
Power Point in the Classroom
http://www.actden.com/pp/
National Geographic
http://www.nationalgeographic.com/xpeditions/
FLW
http://www.pbs.org/flw/
http://www.pbs.org/flw/buildings/index.html
Harley
http://www.harley-davidson.com/en/home.asp?bmLocale=en_CA
Clever Design
http://www.cleverdesign.com/clever/html/indexh.htm
TD
http://www.tdcanadatrust.com/index.jsp
Bridgeman Art Library
http://www.bridgeman.co.uk/
Any Questions?
It’s a wrap!

similar documents