Graphic Design

Question 1

Guidelines of graphic design

Answer 1

Guidelines:
– Simplicity
– Contrast
– White space
– Balance
– Alignment

Question 2

Simplicity

Answer 2

Less is more
When in doubt leave it out

Simple designs can be immediately recognized
and understood with a minimum of conscious
effort.
* Anything that is not essential to the
communication task must be removed.
* Good design is simple, bold and direct. It
ensures that significant design elements will be
noticed by removing insignificant elements
whenever possible.

Question 3

Techniques for simplicity

Answer 3

Reduction
Regularity
Combining elements for maximum leverage

Question 4

Contrast
– Perceivable differences along a visual dimension
– Irregularities that highlight elements and convey information.
– Should be strong, but few in numbers
– Theory of visual variables – Jacques Bertin1983

Answer 4

Nothing

Question 5

Contrast

Answer 5

Contrast
– Perceivable differences along a visual dimension
– Irregularities that highlight elements and convey information.
– Should be strong, but few in numbers
– Theory of visual variables – Jacques Bertin1983

Question 6

Scale = possible kinds of comparisons

Answer 6

Nominal
Ordered
Quantitative

Question 7

Length = number of possible values on each dimension

Answer 7

Shape: long (infinite variety)
* Position: long (limited by display size and resolution) and
fine-grained
* Orientation: very short ( ~ 4 levels)
* Other variables ~10 levels

Question 8

Interaction among visual variables

Answer 8

Associative perception: can a variable be ignored
when looking at others?
* Size and value are dissociative (they dominate perception
and disrupt the processing of other correlated dimensions).
– It is difficult to determine the hue of a very small dot or thin line

– Selective perception: can a variable be picked out to
exclusion of others?
* Shape is not selective

Question 9

Techniques for contrast

Answer 9

Choose appropriate visual variables.
* Use as much length as possible (but minimize the
number of distinct values)
* Sharpen distinctions for easier perception
– Multiplicative scaling, not additive
– Redundant coding when needed
– Cartoonish exaggeration when need
* “Squint test”

Question 10

White space

Answer 10

• Use white space to group interface elements.
• Use margins around interface elements.
• Integrate figure and ground
  – Objects should be scaled proportionally to its
  background.
• Do not crowd controls together
  – Crowding creates spatial tension and inhibits scanning

Question 11

• Use white space to group interface elements.
• Use margins around interface elements.
• Integrate figure and ground
  – Objects should be scaled proportionally to its
  background.
• Do not crowd controls together
  – Crowding creates spatial tension and inhibits scanning

Answer 11

Nothing

Question 12

Purpose of white space

Answer 12

To separate
To structure
To highlight

Question 13

Gestalt principles

Answer 13

Explain group recognition

Question 14

Balance and simetry

Answer 14

– Choose an axis (usually vertical)
– Distribute elements equally around the axis

Question 15

Alignment

Answer 15

Align labels
* Left or right
– Align controls
* Left and right
– Align text
* baseline

Question 16

Guidelines for spacing

Answer 16

– Use whitespaces
* Always leave margins around text
– Be generous with leading (but not too much)
* 120% of font size
– Keep text paragraphs narrow
* 60-75 characters (12 points)!