Graphic Design

1
Graphic Design
2
What is Graphic Design?

• Visual Communication
• The finished product will communicate the
  artists intentions to the audience
• (may be different than a fine artist)
• The marriage of images and words
• A cooperative message between all involved
• The design must suit both the message and the
  audience, and should be attention getting

3
The graphic design process

• Start with what currently exists
• What are the likes/dislikes
• Color Schemes?
• Font types?
• Consistent with existing promotion?
• Effect of significant change?

4
The graphic design process(cont)

• Who is the audience?
• What age? / Gender?
• Socio-economic status
• Where is the audience located?
• What is your objective?
• Promotion of a product
• Promotion of a social view
• Information/Explanation
• Entertainment
• Sell Product or Service

5
The processs (cont.)

• What is the message?
• What is the tone of the message and client
• formal/informal/friendly/serious
• What is the image you wish to project?

6
Web tools to convey messages

• Text
• Color
• Graphic Images
• Backgrounds
• bells and whistles

7
The Power of Text

• Text adds significantly to the look and feel of
  the web site

8
The Power of Text - the Fonts
9
The Power of Text - the fonts (cont)
10
Gestalt theories of perception

• Grouping
• Our mind tends to group objects involuntarily
• 6-7 chunks is our maximum processing
• Proximity
• We group objects together which are physically
  close

11
Gestalt theories (cont.)

• Similarity
• We group things according to similar shapes,
  sizes, colors and placements

12
Gestalt Theories (cont)

• Continuity
• visual elements in a continuous alignment or
  easily perceived by the eyes and brain.

13
Visual Ambiguity

• Is there a clear focus? Does the image draw you
  in to a focus?
• The rule of thirds
• Is there a consistency in layout/color/form?
• Balance
• Symmetry and Asymmetry
• Contrast
• Use of lines, diagonal/horizontal

14
Composition Work first on Black, Grey, White
patterns

• Squint at your design (or take off your glasses
  if you are nearsighted.
• Look at the space around the items
• Pay as much attention to the blank space as to
  the items in the space.
• Follow the direction the eye follows as it
  travels around the surface.
• Examples

15
A design in which the page is divided into 2
equal vertical sections
The purpose of this slide is to show you the
effect of a picture that leads your eye in from
the upper left hand corner of the page down to
the middle of the page where you then look at the
text in this box.
16
A design in which the page is divided into 3
equal columns
The purpose of this slide is to show you
where the eye travels when you put the picture
right smack in the middle.
Notice how your eye keeps returning to the
compelling image in the middle, and how static
that image is.
17
The purpose of this slide is to show you the
effect of text on the left and a picture that
leads your eye around and around. How easy is it
to read the text on the left without looking at
the image?
18
A design in which the page is divided 2/3 and 1/3
(Golden mean)
What dominates this image? How easy is it to
keep reading this text without glancing at the
image? What is the meaning of the image to you?
19
Notice how the slanted lines now bring the
eye down to the text column although your eye
wants to stay focused on the strong image.
20
Now notice how the eye struggles when you try
to not to look at the image that is dead center
on the page
Your eye has a hard time reading the
text because the image in the middle is so
compelling
21
GUI Design Heuristics

• The most important object, idea, should coincide
  with focal point of display -- the entire design
  should lead to it.
• In Western culture, eye usually begins at upper
  left
• Easiest place to put focal point the middle
• Make it the brightest color, with sharpest
  contrast to background
• Too many focal points mean eye cannot rest

22
When you design, pick the background first

• If you use a patterned background, make sure that
  text is visible on it
• If you use a colored background, make sure that
  text is visible on it
• Think of your audience and the types of colors
  they prefer
• Remember -- less is more, you want people to be
  able to look at your page
• color blind? Black and white? Several varieties
  in which individuals confuse certain colors
  (e.g., red and green)
• Building richer images by layering multiple
  images and words
• obscure meanings - valuable in art, but probably
  not in business

23
Language of Color

• Hue - tint ROYGBIV
• Saturation - intensity of color (greyed down)
• Lightness (value) - difference between light blue
  and dark blue

24
Psychology of Color

• Red - stimulating, aggressive, passion, success,
  impulse
• Orange - happy, festive
• Blue - dark blue relaxing and calming. Tradition,
  calm, orderly. Light blue - cleanliness and
  soothing

25
Psychology of Color(cont)

• Purple - daring, artistic, royalty
• Yellow - raises blood pressure, symbol of
  activity. With black can indicate danger.
  Optimism, health, well being. (food packaging)
• Green - nature, regeneration and
  self-preservation. Soothing and cool (mints, soft
  drinks, menthol, cleansers)

26
Psychology of Color(cont)

• White (in U.S.) purity, innocence
• Black (US) mourning, danger, sinister or sexy.
  Can signify elegance.

27
Dithering or Texture Mapping

• A type of optical illusion
• If you put 2 colors next to one another, the
  human eye automatically combines them into a 3rd
  color
• The way most color printing is done

28
Complementary colors

• Lie directly opposite each other on the standard
  color wheel
• Avoid--very difficult to look at for very long -
  flickers
• Red blue-green
• orange blue
• yellow blue-violet
• chartreuse violet
• green red-violet

29
Do the saturated colors below retain the same hue?
30
Same color looks light, then dark
31
Which enclosed square is larger?
32
Problem Flicker in complementary colors
33
Potential problems with color

• Complementary colors next to each other change
  each others hue
• Complementary colors flicker
• Contrasting colors create intense edges that draw
  your attention to edge of image
• Colored typeface does not stand out against
  background.

34
Tips on using color

• Keep in mind the intended audience and the image
  of the organization or business
• Color has psychological, cultural and
  environmental influences.
• Cool colors like blue, dark green and violet
  recede on a page
• Warm colors advance and are more prominent
• Red and Yellow can overwhelm is used in excess

35
Tips on using color (cont)

• Text color should contrast pleasingly with
  background colors
• All colors on a page should have unity

36
Example
Started with student picture
Chose blue background
Wanted to show students at work, but not distract
Lighten students more, add brochure header title
37
Example (cont)
Needed to add student quote
Feels unbalanced, added more description under
courses
Connection offered by red line
Reduced to Netscape 216