Graphic Design - PowerPoint PPT Presentation

About This Presentation
Title:

Graphic Design

Description:

Graphic design is the process of visual communication through the use of typography, photography, iconography and illustration. The field is considered a subset of visual communication and communication design. – PowerPoint PPT presentation

Number of Views:209
Slides: 110
Provided by: eymockups
Category:

less

Transcript and Presenter's Notes

Title: Graphic Design


1
Graphic Design
  • The look feel
  • The system of imagery

2
Graphic Design
  • It shares aspects of engineering, but with
    aesthetic, communicative aspects and consumer
    appeal.

3
Graphic Design
  • As a practice, it has been around for thousands
    of years.

4
Graphic Design
  • With the industrial revolution, art and design
    began to diverge.

5
Graphic Design
  • In the US, it grew into a profession after WWII.

6
Graphic Design
  • It relies on a BALANCE and integration of
  • feel

7
Graphic Design
  • Objective relies on quantitative studies, like
    usability and legibility measures. Does the look
    and feel work?

8
Graphic Design
  • Subjective look and feel relies on subjective
    judgement by experts, depends on contextual
    factors.

9
Graphic Design
  • Subjective look and feel Culture is learned,
    cultural meanings change, meanings can be
    multiple. Uniqueness is valued (not programmable).

10
Graphic Design
  • You cannot empirically measure its subjective
    aspects, but it is rigorous in its own
    epistemological realm (knowledge base).

11
Graphic Design
  • It is rigorous in its own epistemological realm.
  • 1. Graphic Design experts.
  • vs.
  • 2. Deploying graphic design principles (anybody).

12
Graphic Design
  • So what?
  • Deploying graphic design principles will
  • - enhance your ability to communicate
    w/designers
  • feel

13
Graphic Design
  • Deploying graphic design principles will
  • - enable you to create more user-friendly
    interfaces

14
Graphic Design
  • Deploying graphic design principles will
  • - enhance the knowledge base of HCI, which
    is increasingly necessary with millions of users

15
Agenda
  • The Role of Graphic Design
  • Principles of Graphic Design
  • Animation/Rollovers
  • Typography
  • Color
  • Icons

16
Role of Graphic Design
  • The look and feel portion of an interface
  • What someone initially encounters

17
Role of Graphic Design
  • The look and feel portion of an interface
  • What someone initially encounters
  • Sets a framework for understanding content
  • Conveys an impression, mood

18
Role of Graphic Design
  • The look and feel portion of an interface
  • What someone initially encounters
  • Sets a framework for understanding content

19
Role of Graphic Design
  • The look and feel portion of an interface
  • What someone initially encounters
  • Sets a framework for understanding content

20
Role of Graphic Design
  • The look and feel portion of an interface
  • What someone initially encounters
  • Sets a framework for understanding content

21
Role of Graphic Design
  • The look and feel portion of an interface
  • What someone initially encounters
  • Sets a framework for understanding content

22
Role of Graphic Design
  • The look and feel portion of an interface
  • What someone initially encounters
  • Sets a framework for understanding content

23
Role of Graphic Design
  • The look and feel portion of an interface
  • What someone initially encounters
  • Sets a framework for understanding content

24
Agenda
  • The Role of Graphic Design
  • Principles of Graphic Design
  • Animation/Rollovers
  • Typography
  • Color
  • Icons

25
Principles of Graphic Design
  • Concept/Metaphor
  • Hierarchy
  • Clarity
  • Consistency
  • Alignment
  • Proximity
  • Contrast

26
Principles Concept/Metaphor
  • Concept what is the overarching idea that every
    visual aspect of the interface relates to?
    (It MUST be relevant)
  • Metaphor (Means of explaining concept)
    If youre building an
    interface for a grocery application, maybe mimic
    a person walking through a store with a cart.

27
Principles Concept/Metaphor
  • Concept what is the overarching idea that every
    visual aspect of the interface relates to?
    (It MUST be relevant)
  • Apple accessible, fun, familiar for the rest
    of us
  • Metaphor (Means of explaining concept)
    If youre building an
    interface for a grocery application, maybe mimic
    a person walking through a store with a cart.
    desktop metaphor

28
Principles Hierarchy
  • What are the relative levels of importance?
  • What should the user see first? Second?

29
Principles Hierarchy
  • What are the relative levels of importance?

30
Principles Hierarchy
  • .

31
Principles Clarity
  • Every element in an interface should have a
    reason for being there
  • Make that reason clear!
  • Less is more

32
Principles Clarity
  • White space
  • Leads the eye
  • Provides symmetry and balance through its use
  • Strengthens impact of message
  • Allows eye to rest between elements of activity
    (increases legibility)
  • Used to promote simplicity, elegance, refinement

33
Principles Clarity
  • White space

34
Principles Clarity
35
Principles Clarity
  • White space

36
Principles Consistency
  • Be consistent in every aspect
  • In layout, color, images, icons, typography, text
  • Within screen, across screens
  • Stay within metaphor everywhere
  • Platform may have a style guide -- follow it!

37
Principles Alignment
  • Western world
  • Start from top left
  • Allows eye to parse display more easily

38
Principles Alignment
  • Grids
  • (Hidden) horizontal and vertical lines to help
    locate window components
  • Align related things
  • Group items logically
  • Minimize number of controls, reduce clutter

39
Principles Alignment
  • Grids - use them

40
Principles Alignment
  • Grids
  • (Hidden) horizontal and vertical lines to help
    locate window components
  • Align related things
  • Group items logically
  • Minimize number of controls, reduce clutter

41
Principles Alignment
  • Left, center, or right
  • Ragged right or justified
  • Choose one, use it everywhere
  • Novices often center things
  • Hard to read!
  • No definition, calm, very formal
  • Use only in small quantities

Here is somenew text
Here issomenew text
Here is somenew text
42
Principles Proximity
  • Items close together appear to have a
    relationship
  • Large distance implies -- no relationship

Time
43
Principles Proximity
  • Items close together appear to have a
    relationship
  • Large distance implies -- no relationship

Time
44
Principles Contrast
  • Pulls you in
  • Guides your eyes around the interface
  • Supports skimming
  • Take advantage of contrast to guide user through
    hierarchy of information add focus or to
    energize an interface with texture
  • Can be used to distinguish active control

45
Principles Contrast
  • Can be used to set off most important item
  • Allow it to dominate
  • Ask yourself what is the most important item in
    the interface, highlight it
  • Use geometry to help sequencing

46
Agenda
  • The Role of Graphic Design
  • Principles of Graphic Design
  • Animation/Rollovers
  • Typography
  • Color
  • Icons

47
Animation/Rollovers
  • Blinking
  • Good for grabbing attention, but easily becomes
    obnoxious use very sparingly
  • Reverse video, bold
  • Good for making something stand out

48
Agenda
  • The Role of Graphic Design
  • Principles of Graphic Design
  • Animation/Rollovers
  • Typography
  • Color
  • Icons

49
Typography White space
  • White space
  • Leads the eye
  • Provides symmetry and balance through its use
  • Strengthens impact of message
  • Allows eye to rest between elements of
  • activity (increases legibility)
  • Used to promote simplicity, elegance,
    refinement

50
Typography Hierarchy
  • How do you lead the user through visual
  • information (by visual means)?
  • Some traditional navigation devices
    (conventions)
  • Size
  • Color
  • Composition (where it is on the rectangle)
  • Page numbers
  • Type and Image emphases

51
Typography
  • Characters and symbols should be easily
    noticeable and distinguishable
  • AVOID HEAVY USE OF ALL UPPERCASE
  • Studies have found that
    mixed case promotes fastest reading
    and
    that 55 characters per line is optimal

52
Agenda
  • The Role of Graphic Design
  • Principles of Graphic Design
  • Animation/Rollovers
  • Typography
  • Color
  • Icons

53
Color Attributes
  • Hue
  • native color, pigment
  • Saturation
  • relative purity, brightness, or intensity of a
    color
  • Value
  • lightness or darkness of a color

54
Color
  • Use it for a purpose, not to just add some color
    in

55
Color Guidelines
  • Display color images on black background
  • Avoid brown and green as background colors
  • Be sure foreground colors contrast (in both
    brightness and hue) with background colors

56
Color Guidelines
  • Use color sparingly--Design in b/w then add color
    where appropriate
  • Use color to draw attention, communicate
    organization, to indicate status, to establish
    relationships
  • Avoid using color in non-task related ways
  • (experiment coming next)

57
How many small rectangles
58
How many small rectangles
59
How many small ovals
60
How many small ovals
61
Find the R
62
Find the...
C
V
M
G
R
T
D
P
Q
F
A
Z
W
J
63
Find the T
64
Find the...
C
V
M
G
R
T
D
P
Q
F
A
Z
W
J
65
Color Guidelines
  • Color is good for supporting search
  • Do not use color without another redundant cue
  • Color-blindness
  • Monochrome monitors
  • Redundant coding enhances performance
  • Be consistent with color associations from jobs
    and cultures

66
Color Guidelines
  • Limit coding to 8 distinct colors (4 better)
  • Avoid using saturated blues for text or small,
    thin lines
  • Use color on b/w or gray, or b/w on color
  • To express difference, use high contrast colors
    (and vice versa)
  • Make sure colors do not vibrate

67
Color Palette
  • Example of Color hierarchy

68
Color Associations
Culturally specific, contextually specific
  • Red
  • hot, warning,
  • aggression, love
  • Pink
  • female, cute, cotton candy
  • Orange
  • autumn, warm, Halloween, Cell phone
  • Yellow
  • happy, caution, joy
  • Brown
  • warm, fall, dirt, earth
  • Green
  • lush, pastoral, envy
  • Purple
  • royal, sophisticated, Barney

69
Color Palettes/Suites
  • Designers often pick a palette of 4 or 5 colors

Variations of 2 colors
Monochromatic (variations of 1 color)
Southwestern (culturally evocative)
70
Agenda
  • The Role of Graphic Design
  • Principles of Graphic Design
  • Animation/Rollovers
  • Typography
  • Color
  • Icons

71
Icon Design
  • Relies on drawing ability -- hire someone to do
    it
  • (here are standards and ways to critique icon
    design)
  • Avoid meaningless, gratuitous use of icons
  • Too many icons quickly become illegible

72
Icon Design
  • Represent object or action in a familiar and
    recognizable manner

73
Icon Design
  • Represent object or action in a familiar and
    recognizable manner

74
Icon Design
  • Represent object or action in a familiar and
    recognizable manner

75
Icon Legibility
  • Limit number of different icons
  • Make icon stand out from background
  • Ensure that a singly selected icon is clearly
    visible when surrounded by unselected ones

76
Icon Legibility Settlers III
77
Icon Legibility
  • Make each icon distinctive (legible)
  • but
  • Make icons harmonious members of icon family
  • Avoid excessive detail
  • Accompany with names
  • (though it shouldnt be necessary)

78
Icon Design
  • Is the symbolic aspect of the icon meaningful?

79
Icon Design
  • Is the symbolic aspect of the icon meaningful?

80
Icon Design
  • Is the symbolic aspect of the icon meaningful?

81
Icon Design
  • Meaning is ASCRIBED to icons -- they dont have
    an essential, measurable essence.

82
Role of Graphic Design in HCI
  • The look and feel portion of an interface
  • What someone initially encounters
  • Sets a framework for understanding content

83
Role of Graphic Design in HCI
  • The look and feel portion of an interface
  • What someone initially encounters
  • Sets a framework for understanding content

84
Role of Graphic Design in HCI
  • The look and feel portion of an interface
  • What someone initially encounters
  • Sets a framework for understanding content

85
Graphic Design
  • Like any design job, there must be a logic to the
    visual design
  • The logic drives
  • Color scheme
  • Materials choices
  • Lighting style
  • Fonts
  • etc.

86
Eacmples - WarCraft II
  • 2 Teams Orcs Humans
  • Each team has unique biology
  • Collection of Team physiques
  • Unique means of living
  • Unique culture

87
WarCraft II
  • Culture manifests itself
  • What they eat
  • How they work
  • How they live
  • How they kill
  • How they die
  • How they live
  • Choice of building materials
  • Choice of fighting styles

88
WarCraft II
  • How Orcs live eat
  • Hog farms
  • How humans
  • Grain farms

89
WarCraft II
  • Orcs do war with offensive spells
  • Humans have defensive spells

90
WarCraft II
  • Orc People
  • Green
  • Horns
  • Orc Buildings
  • Bone
  • Leather
  • Dark Cast Iron

91
WarCraft II
  • Human People
  • Flesh tone humans
  • Silver armor
  • Human buildings
  • Light wood
  • Light-colored metal (roofs, etc)

92
WarCraft II
  • Invading Orc Town

93
Examples
  • Invading human town

94
WarCraft II
95
WarCraft II
96
WarCraft II Problems
  • This stark contrast causes problems
  • Why are Orcs chopping wood?
  • Why is the Orc woodshed a big, hollow log?
  • Violates the Orc bone-and-leather look
  • On the sea, similar problems
  • These problems arise because of game play

97
Example Age of Empires/Kings
  • Logic Numerous historical civilizations do
    battle
  • Each civilization specializes
  • Special force elements
  • Special resource-gathering
  • Special Wonders-of-the-world

98
Age of Empires/Kings
  • Historical building style
  • Historical costume

99
Celts
100
Celts
101
Vikings
102
Vikings
103
China
104
China
105
Persia
106
Turks
107
Turks
108
Byzantium
109
Age of Kings
  • https//freebiesmockup.com
  • https//www.w3schools.com
  • https//designixo.com
  • https//codepen.io
  • https//codesandbox.io
  • https//freemockuppsd.com/
  • https//eymockup.com/
  • https//fontsinuse.com/
  • https//www.photoshopvideotutorial.com/
  • https//validator.w3.org/
  • https//www.photoshopvideotutorial.com
  • https//fontawesome.com/
  • https//tools.pingdom.com
  • https//www.99effect.com/
Write a Comment
User Comments (0)
About PowerShow.com