Building User Interfaces

Visual Design
Professor Bilge Mutlu

© Building User Interfaces | Professor Mutlu | Week 03: Visual Design 1

What we will learn today?
» Elements and principles of design
» Color, type, and images

© Building User Interfaces | Professor Mutlu | Week 03: Visual Design 2

 TopHat Attendance

© Building User Interfaces | Professor Mutlu | Week 03: Visual Design 3

 TopHat Questions

© Building User Interfaces | Professor Mutlu | Week 03: Visual Design 4

 Elements of Design

© Building User Interfaces | Professor Mutlu | Week 03: Visual Design 5

Elements of Design
1. Space
2. Line
3. Shape
4. Size
5. Pattern
6. Texture
7. Value
© Building User Interfaces | Professor Mutlu | Week 03: Visual Design 6
Space

Definition: Space is the canvas on

which visual elements are placed.
» Space can be positive or negative

© Building User Interfaces | Professor Mutlu | Week 03: Visual Design 7

8
Line
Definition: The most primal design element that can divide
space, call attention to, organize, and make up other elements.

© Building User Interfaces | Professor Mutlu | Week 03: Visual Design 9

Shape

Definition: Space outlined by a

contour.
» Organic vs. inorganic shapes

© Building User Interfaces | Professor Mutlu | Week 03: Visual Design 10

© Building User Interfaces | Professor Mutlu | Week 03: Visual Design 11
Size

Definition: Size, or scale, is the

relative extent of the design
elements such as shapes and lines.

© Building User Interfaces | Professor Mutlu | Week 03: Visual Design 12

Pattern

Definition: Pattern, or repetition,

systematic duplication of other
design elements such as shapes and
lines.

© Building User Interfaces | Professor Mutlu | Week 03: Visual Design 13

Texture

Definition: Tactile and visual

quality of a shape or space made up
of different colors, materials, and
different structures.

© Building User Interfaces | Professor Mutlu | Week 03: Visual Design 14

Value

Definition: The intensity in which

a design elements is expressed.

© Building User Interfaces | Professor Mutlu | Week 03: Visual Design 15

 Questions about Design Elements?

© Building User Interfaces | Professor Mutlu | Week 03: Visual Design 16

 Principles of Design

© Building User Interfaces | Professor Mutlu | Week 03: Visual Design 17

Principles of Design
1. Focal Point
2. Contrast
3. Balance
4. Movement
5. Rhythm
6. Perspective
7. Unity
© Building User Interfaces | Professor Mutlu | Week 03: Visual Design 18
Focal Point

Definition: Focal point, or the area

of visual interest, is where the
design directs the attention of the
viewer first.

© Building User Interfaces | Professor Mutlu | Week 03: Visual Design 19

© Building User Interfaces | Professor Mutlu | Week 03: Visual Design 20
Contrast

Definition: Contrast, or emphasis,

is the juxtaposition of design
elements that strikingly differ from
each other to guide user attention
and action.

© Building User Interfaces | Professor Mutlu | Week 03: Visual Design 21

22
Balance

Definition: The organization of

design elements on a canvas to
provide a sense of visual balance or
imbalance.
Pro Tip: Balance can be achieved
through symmetry or asymmetry.

© Building User Interfaces | Professor Mutlu | Week 03: Visual Design 23

Movement

Definition: The organization of

design elements in a way that
suggests a particular flow on the
canvas to direct the user's
attention in a particular pattern.

© Building User Interfaces | Professor Mutlu | Week 03: Visual Design 24

Rhythm

Definition: Patterned use of design

elements in a way that
communicates movement or order.

© Building User Interfaces | Professor Mutlu | Week 03: Visual Design 25

Perspective

Definition: Creating a sense of

horizon and movement along the
depth axis of canvas.

© Building User Interfaces | Professor Mutlu | Week 03: Visual Design 26

© Building User Interfaces | Professor Mutlu | Week 03: Visual Design 27
Unity

Definition: Unity reflects the

holistic consistency in the use of
design elements.

© Building User Interfaces | Professor Mutlu | Week 03: Visual Design 28

© Building User Interfaces | Professor Mutlu | Week 03: Visual Design 29
 Questions about Design Principles?

© Building User Interfaces | Professor Mutlu | Week 03: Visual Design 30

 TopHat Quiz

© Building User Interfaces | Professor Mutlu | Week 03: Visual Design 31

 This all sounds good.
But how do we actually
use these?
© Building User Interfaces | Professor Mutlu | Week 03: Visual Design 32
Some Strategies
» Create cheat sheets, and checklists
» Analyze existing designs using these tools to build visual
analysis skills
» Practice designing using the principles
» Your canvas should have no elements that do not follow an
overall principle

© Building User Interfaces | Professor Mutlu | Week 03: Visual Design 33

In-class Design Exercise 1

Analyze an existing page using the

design elements and principles
» What elements, principles can
you see in use?
» What problems do you see that
can be addressed using design
principles?

© Building User Interfaces | Professor Mutlu | Week 03: Visual Design 34

35
In-class Design Exercise 2

Design a product page with the

following elements:
» Product photo
» Product description, reviews,
similar items
» Action buttons: choose color,
add to cart, add to wishlist
Place elements and annotate with
your decisions

© Building User Interfaces | Professor Mutlu | Week 03: Visual Design 36

37
© Building User Interfaces | Professor Mutlu | Week 03: Visual Design 38
39
 Key Components for
UX Design

© Building User Interfaces | Professor Mutlu | Week 03: Visual Design 40

Key Components for UX Design
We will focus on type, color, and images.

© Building User Interfaces | Professor Mutlu | Week 03: Visual Design 41

Type

Definition: Printed letters and

characters of language.

© Building User Interfaces | Professor Mutlu | Week 03: Visual Design 42

Associated Concepts
» A font is the style in which type is created.
» A typeface is a font family that includes fonds of different
variations that follow the same style.
» A glyph is a particular character.

© Building User Interfaces | Professor Mutlu | Week 03: Visual Design 43

Categories of Typefaces
1. Old style
2. Modern
3. Slab serif
4. Sans serif
5. Script
6. Decorative

© Building User Interfaces | Professor Mutlu | Week 03: Visual Design 44

Old-style fonts

Definition: Old-style fonts have

"serifs" at the tips of a glyph that
taper closer to the tip.

© Building User Interfaces | Professor Mutlu | Week 03: Visual Design 45

Modern & slab-serif fonts

Definition: Modern and slab-serif

fonts have very thin or very thick
serifs.

© Building User Interfaces | Professor Mutlu | Week 03: Visual Design 46

Sans-serif fonts

Definition: Sans-serif fonts lack

the serif at the tips of the glyphs,
and their strokes follow uniform
weight.

© Building User Interfaces | Professor Mutlu | Week 03: Visual Design 47

Script fonts

Definition: Script fonts simulate

cursive writing where glyphs
connect with each other at the
downstroke.

© Building User Interfaces | Professor Mutlu | Week 03: Visual Design 48

Decorative fonts

Definition: Decorative fonts are

designed specifically to convey a
particular context or elicit a
particular feeling, e.g., "gothic."

© Building User Interfaces | Professor Mutlu | Week 03: Visual Design 49

Font parameters

» Style variations: bold, italic,

oblique
» Caps: all caps, small caps
» Weight: extra light, light,
medium, bold

© Building User Interfaces | Professor Mutlu | Week 03: Visual Design 50

Pro tip: For good typography,
become familiar with leading,
tracking, kerning, widows, orphans,
rags, rivers.

© Building User Interfaces | Professor Mutlu | Week 03: Visual Design 51

 Questions about Type?

© Building User Interfaces | Professor Mutlu | Week 03: Visual Design 52

Color
Definition: Human visual
perception of light reflecting from
an object.
» Creates emphasis
» Organizes content
» Evokes emotion

© Building User Interfaces | Professor Mutlu | Week 03: Visual Design 53

54
55
The Color Wheel
» Primary, secondary, tertiary colors

» Tints, hue, shades

» Complementary colors

» Warm, cool colors

© Building User Interfaces | Professor Mutlu | Week 03: Visual Design 56

© Building User Interfaces | Professor Mutlu | Week 03: Visual Design 57
 Use Color with Purpose 143
Use Color with Purpose 139

Shades
Hue Hue
Tints

Low High
Saturation

Light Dark

Value
FIGURE 7.1. The three properties used to describe color: hue, saturation, and value.

FIGURE©7.3. The color

Building User wheel showing |the
Interfaces hues, tints,Mutlu
Professor and shades.
| Week 03: Visual Design 58
Color Palettes

1. Analogous
2. Complementary
3. Split Complementary
4. Triadic
5. Monochromatic
6. Achromatic

© Building User Interfaces | Professor Mutlu | Week 03: Visual Design 59

 ANALOGOUS
150 Visual Design Solutions
COMPLEMENTARY SPLIT-
Use Color with Purpose 149 COMPLEMENTARY

#1b75bb #00a9ac #8ccfb6

Use Color with Purpose 149

#adc5e6 #00888a #00888a

FIGURE 7.6. An analogous palette uses three adjacent colors.

#1b75bb #00a9ac #8ccfb6

#1b75bb #fcc69a #c06615 #004f8f #fcb94c #bb302d

#adc5e6 #00888a #00888a

#004f8f #1b75bb #f5821f #7da7d8 #ffd9a1 #f58d76

FIGURE
© Building User Interfaces | Professor Mutlu | Week 03: 7.7. A complementary palette and a split complementary.
Visual Design 60
 152 Visual Design Solutions

TRIADIC

#f5821f #5c2d91 #65c194

#f79447 #bbaed5 #009252

FIGURE 7.8. The colors in the triadic palette are equidistant from each other.
© Building User Interfaces | Professor Mutlu | Week 03: Visual Design 61
 MONOCHROMATIC ACHROMATIC

© Building User Interfaces | Professor Mutlu | Week 03: Visual Design 62

 1
Color Vision Deficiencies

» Affects 8% of males, 0.5% of

females
» Consider alternatives
- Intensity vs. hue for emphasis
- Size of colored elements
- Proximity of similar colors

» Use tools to check designs

1 
Dundas

© Building User Interfaces | Professor Mutlu | Week 03: Visual Design 63

 Questions about Color?

© Building User Interfaces | Professor Mutlu | Week 03: Visual Design 64

Images
Definition: Photographs,
illustrations, three-dimensional
art, silhouettes, icons, dingbats,
infographics, and simpler shapes
that convey rich information or
context.

© Building User Interfaces | Professor Mutlu | Week 03: Visual Design 65

 RASTER GRAPHICS VECTOR GRAPHICS

© Building User Interfaces | Professor Mutlu | Week 03: Visual Design 66

 More Realistic Less Realistic

FIGURE 5.11. A tree seen on the continuum from realistic to more abstract.

© Building User Interfaces | Professor Mutlu | Week 03: Visual Design 67

 Questions about Images?

© Building User Interfaces | Professor Mutlu | Week 03: Visual Design 68