Graphic Design Principles

1
Acknowledgement: Slides adopted from MIT opencourseware “User Interface Design and Implementation”
 Guidelines for Good Graphic
Design
o Simplicity
o Contrast
o White space
o Balance
o Alignment

2
 Simplicity
o “Perfection is achieved not when there is nothing more to
add, but when there is nothing left to take away. (Antoine de
St-Exupery)

o Simplicity does not mean the absence of any décor. It only

means that the decor should belong intimately to the design
proper, and that anything foreign to it should be taken away.
(Paul Jacques Grillo)

o Keep it simple, stupid. (KISS)

o Less is more.

o When in doubt, leave it out.

3
 Techniques for Simplicity:
Reduction
o Remove inessential elements

4
 Three ways to make a design simpler
o Reduction means that you eliminate whatever isn’t
necessary. This technique has three steps:

o Decide what essentially needs to be conveyed by the

design;

o Critically examine every element (label, control, color,

font, line weight) to decide whether it serves an essential
purpose;

o Remove it if it isn’t essential. Even if it seems essential,

try removing it anyway, to see if the design falls apart.

5
 The use of icon
o Icons demonstrate the principle of reduction
well.

6
 Techniques for simplicity: Regularity
o Use a regular pattern
o Limit inessential variation among elements

7
 Techniques for simplicity: Regularity
o For the essential elements that remain, consider how you can
minimize the unnecessary differences between them with
regularity.

o Use the same font, color, line width, dimensions, orientation for
multiple elements.

o Irregularities in your design will be magnified in the user’s eyes and

assigned meaning and significance.

o Conversely, if your design is mostly regular, the elements that you

do want to highlight will stand out better.

o PowerPoint’s Text Layouts menu shows both reduction (minimalist

icons representing each layout) and regularity. Titles and bullet lists
are shown the same way.
8
 Techniques for simplicity: Double Duty
o Combine elements for leverage
o Find a way for one element to play multiple roles

9
 Techniques for simplicity: Double Duty
o You can combine elements, making them serve
multiple roles in the design.

o The desktop interface has a number of good

examples of this kind of design.
o The “thumb” in a scroll bar actually serves three roles.
o affords dragging
o indicates the position of the scroll window relative to the
entire document, and
o Indicates the fraction of the document displayed in the scroll
window.

10
 Techniques for simplicity: Double Duty
o You can combine elements, making them serve
multiple roles in the design.

o The desktop interface has a number of good

examples of this kind of design.
o Similarly, a window’s title bar plays several roles:
o Label
o dragging handle
o window activation indicator, and
o location for window control buttons.

11
 Contrast and Visual Variables
o Contrast encodes information along visual dimensions

12
 Contrast and Visual Variables
o Contrast encodes information along visual dimensions

o Contrast refers to perceivable differences along a visual

dimension, such as size or color.

o Contrast is the irregularity in a design that communicates

information or makes elements stand out.

13
 Contrast and Visual Variables
o Contrast encodes information along visual dimensions

o Simplicity says we should eliminate unimportant

differences.

o Once we’ve decided that a difference is important,

however, we should choose the dimension and degree
of contrast in such a way that the difference is salient,
easily perceptible, and appropriate to the task.

14
 Contrast and Visual Variables
o Contrast encodes information along visual dimensions

o Crucial to this decision is an understanding of the

different visual dimensions.

o Jacques Bertin developed a theory of visual variables

that is particularly useful here (Bertin, Graphics and
Graphics Information Processing, 1989).

15
 Contrast and Visual Variables
The seven visual variables

16
 Contrast and Visual Variables
o Hue is described with the words
we normally think of as
describing color: red, purple,
blue, etc.
o Hue is more specifically
described by the dominant
wavelength in models such as
the CIE system.
o Hue is also a term which
describes a dimension of color
we readily experience when we
look at color. It will be the first of
three dimensions we use to
describe color.

The Hue, Saturation, Value (HSV) color model

17
 Contrast and Visual Variables
o The Hue, Saturation, Value (HSV) color model

18
 Characteristics of Visual Variables
o Scale = kinds of comparisons possible

o Nominal (=)
o All variables
o Ordered (<, >)
o Ordered: position, size, value, texture granularity
o Not ordered: orientation, hue, shape
o Quantitative (amount of difference)
o Quantitative: position, size
o Not quantitative: value, texture, orientation, hue, shape
o Length = number of distinguishable levels
o Shape is very long (infinite variety)
o Position is long and fine-grained
o Orientation is very short (~ 4 levels)
o Other variables are in between (~ 10 levels)

19
 Attention

http://en.wikipedia.org/wiki/Attention

20
 Selectivity
o Selective perception: can attention be focused on one value of the
variable, excluding other variables and values?

o Selective: position, size, orientation, hue, value, texture

o Not selective: shape

21
 Selectivity

Ask yourself these questions:

- find all the letters on the left
half of the page (position)
- find all the red letters (hue)
- find all the K’s (shape)
Which of these questions felt
easy to answer, and which
felt hard? The easy ones
were selective visual
variables.
22
 Associativity
o Associative perception: can variable be ignored
when looking at other variables?

o Associative:
o position, hue, value, texture, shape, orientation

o Not associative: size, value

o Small size and low value interfere with ability to

perceive hue, value, texture, and shape

23
Associativity

24
 Techniques for Contrast
o Choose appropriate visual variables
o Use as much length as possible
o Sharpen distinctions for easier perception
o Multiplicative scaling, not additive
o Redundant coding where needed
o Cartoonish exaggeration where needed
o Use the “squint test”

25
 Techniques for Contrast
o Choose the right visual variable

o For example, consider a text content hierarchy: title,

chapter, section, body text, footnote.

o The data requires an ordered visual variable; a purely

nominal variable like shape (e.g., font family) would not
by itself be able to communicate the hierarchy ordering.

26
 Techniques for Contrast
o Choose the right visual variable

o Choose variable values in such a way as to make sharp,

easily perceptible distinctions between them.

o Multiplicative scaling (e.g., size growing by a factor of 1.5

or 2 at each successive level) is makes sharper
distinctions than additive scaling (e.g., adding 5 pixels at
each successive level).

27
 Techniques for Contrast
o Choose the right visual variable

o You can also use redundant coding, in several visual variables, to

enhance important distinctions further.

o The title of a document is not only larger (size), but it’s also centered
(position), bold (value), and maybe a distinct color as well.

o Exaggerated differences can be useful, particularly when you’re

drawing icons: like a cartoonist, you have to give objects
exaggerated proportions to make them easily recognizable.

28
 Techniques for Contrast
o Choose the right visual variable

o The squint test is a technique that simulates early visual

processing, so you can see whether the contrasts you’ve tried to
establish are readily apparent.

o Close one eye and squint the other, to disrupt your focus.
o Whatever distinctions you can still make out will be visible “at a
glance.”

29
Choosing Visual Variable for Display

30
 Choosing Visual Variable for Display
o Spam flag: nominal, 2 levels (spam or not)
o Subject: nominal (but can be ordered alphabetically), infinite (but
maybe only ~100 are active)
o Sender: nominal (but can be ordered alphabetically), infinite (but
maybe ~100 people you know + everybody else are useful
simplifications)
o Unread flag: nominal, 2 levels (read or unread)
o Date: quantitative (but maybe ordered is all that matters), infinite
(but maybe only ~10 levels matter: today, this week, this month, this
year, older)

31
 Choosing Visual Variable for Display
o This information is redundantly coded into visual
variables in the display shown above, for better contrast.

o First, all the fields use position as a variable, since each

is assigned to a different column.
o In addition:
o Spam: shape, hue, value, size (big colorful icon vs. little dot)
o Subject: shape
o Sender: shape
o Unread: shape, hue, value, size (big green dot vs. little gray dot)
and value of entire line (boldface vs. non)
o Date: shape, size (today is shorter than earlier dates), position
(list is sorted by date)

32
Designing Information Display

33
 Designing Information Display
o Here’s another example showing how redundant encoding can
make an information display easier to scan and easier to use.

o Search engine results are basically just database records, but they
aren’t rendered in a simplistic caption/field display like the one
shown on top.

o Instead, they use rich visual variables – and no field labels! – to

enhance the contrast among the items.

o Page titles convey the most information, so they use size, hue, and
value (brightness), plus a little shape (the underline).
o The summary is in black for good readability, and the URL and size are
in green to bracket the summary.

34
 Designing Information Display
o Take a lesson from this: your program’s output displays do not have
to be arranged like input forms.

o When data is self-describing, like names and dates, let it describe

itself.

o And choose good visual variables to enhance the contrast of

information that the user needs to see at a glance.

35
 Simplicity vs Contrast
o A case where simplicity is taken too far, and contrast suffers.
o Simplicity and contrast seem to fight with each other.

36
 Contrast Problems
o .

37
 Contrast Problems
o An example of too little contrast.

o It’s important to distinguish captions from text fields, but in this

design, most of the visual variables are the same for both:
o - the position is very similar: the box around each caption and text
field begins at the same horizontal position.
o The text itself begins at different positions (left-justified vs.
o aligned), but it isn’t a strong distinction, and some of the captions fill
their column.
o - the size is the same: captions and text fields fill the same column
width
o - the background hue is slightly different (yellow vs. white), but not
easily differentiable

38
 Contrast Problems
o An example of too little contrast.

o by the squint test

o - the background value is the same (very bright)

o - the foreground hue and value are the same (black, plain font)
o - the orientation is the horizontal, because of course you have to read
it.
o The result is that it’s hard to scan this form. The form is also terribly
crowded, which leads us into our next topic…

39
 White Spaces
o Use white space for grouping, instead of lines

o Use margins to draw eye around design

o Integrate figure and ground

o Object should be scaled proportionally to its background

o Don’t crowd controls together

o Crowding creates spatial tension and inhibits scanning

40
 The Gestalt Principles of Grouping
o Gestalt principles explain how eye creates a whole
(gestalt) from parts

41
 The Gestalt Principles of Grouping
o The power of white space for grouping derives from the Gestalt
principle of proximity.
o These principles, discovered in the 1920’s by the Gestalt school of
psychologists, describe how early visual processing groups
elements in the visual field into larger wholes. Here are the six
principles identified by the Gestalt psychologists:

42
 The Gestalt Principles of Grouping
o Proximity. Elements that are closer to each other are more likely to
be grouped together. You see four vertical columns of circles,
because the circles are closer vertically than they are horizontally.

43
 The Gestalt Principles of Grouping
o Similarity. Elements with similar attributes are more likely to be
grouped. You see four rows of circles in the Similarity example,
because the circles are more alike horizontally than they are
vertically.

44
 The Gestalt Principles of Grouping
o Continuity. The eye expects to see a contour as a continuous
object. You primarily perceive the Continuity example above as two
crossing lines, rather than as four lines meeting at a point, or two
right angles sharing a vertex.

45
 The Gestalt Principles of Grouping

o Closure. The eye tends to perceive complete, closed figures, even

when lines are missing. We see a triangle in the center of the
Closure example, even though its edges aren’t complete.

46
 The Gestalt Principles of Grouping

o Area. When two elements overlap, the smaller one will be

interpreted as a figure in front of the larger ground. So we tend to
perceive the Area example as a small square in front of a large
square, rather than a large square with a hole cut in it.

47
 The Gestalt Principles of Grouping

o Symmetry. The eye prefers explanations with greater symmetry. So

the Symmetry example is perceived as two overlapping squares,
rather than three separate polygons.

48
White Space Avoid Visual Noise

49