[PPT] - Visual Design Visual Design Objectives Gestalt Principles Creating PowerPoint Presentation

SLIDE 1

Visual Design

Visual Design Objectives Gestalt Principles Creating Organization and Structure Typography

SLIDE 2

UI Visual Design Objectives

Visual Design 2

What are the goals of an effective interface?

1.

Information communication

enforce desired relationships between UI elements
make all valid actions discoverable and clear
provide consistent, meaningful, timely feedback

2.

Aesthetics

well designed, complete, well ordered, professional, attractive
appealing and pleasant to use

3.

“Brand”

recognizable as being part of your organization

SLIDE 3

UI Visual Design Problem

Visual Design 3

§ Goal: present elements of your interface to your users § Those users need to know:

What can I do in this interface?
Where is ________ ?
How can I do ________ ?
What is related to what?

§ Want to impose as little thinking as possible on your users

Let them concentrate on their task, not the interface.
Ideally, they should unconsciously see patterns and relationships that help

them navigate the interface.

SLIDE 4 4 Visual Design

SLIDE 5

Organization and Structure

Visual Design 5

§ Structure doesn’t usually occur naturally, it must be designed § People will look for structure, even if none was intended § Use Gestalt principles to create the desired organization and structure

Impose your structure on users, instead of making them figure it out (or

worse, having them guess incorrectly)

SLIDE 6

Gestalt Principles

Visual Design 6

§ Theories of visual perception that

describe how people tend to organize visual elements into groups or unified wholes, when certain principles are applied.

§ Clues about how the brain groups raw

visual input.

§ By designing these principles, we can

build structures that align with people’s expectations – easier for them to work with. Proximity Similarity Continuity Closure Connectedness

(pronunciation: http://www.howjsay.com/index.php?word=gestalt)

SLIDE 7

Proximity

Visual Design 7

§ Individual elements are associated more strongly with nearby elements

than with those further away

SLIDE 8 8 Visual Design

SLIDE 9

Similarity

Visual Design 9

§ Elements associated more strongly when they share basic visual

characteristics, such as:

Shape, Size, Color, Texture, Orientation

colour > size > type

SLIDE 10 10 Visual Design

SLIDE 11

Continuity

Visual Design 11

§ Elements arranged in a straight line or a smooth curve are perceived as

being more related

bias to continuous forms rather than disconnected segments

SLIDE 12 12 Visual Design

SLIDE 13

Closure

Visual Design 13

§ The visual system perceives a set of individual elements as a single,

recognizable pattern, rather than individual elements.

SLIDE 14 14 Visual Design

SLIDE 15

Connectedness

Visual Design 15

§ Elements connected to one another by uniform visual properties are

perceived to be more related than elements that are not connected

§ Two typical strategies:

connecting lines
connecting regions

SLIDE 16 16 Visual Design

SLIDE 17

Creating Organization and Structure

Visual Design 17

We can define visual design principles that leverage these gestalt principles:

1.

Grouping

2.

Hierarchy

3.

Relationship

4.

Balance

5.

Simplicity

6.

Clarity

SLIDE 18

Grouping (uses Similarity, Closure, Connectedness)

Visual Design 18

§ Group elements into higher order units

e.g. Newspapers have paragraphs, columns, sections, pages

§ Use the Gestalt principles to create groups § Reserve powerful techniques such as similarity (e.g. colour) and

connectedness for explicitly telling the user something

SLIDE 19

SLIDE 20

Hierarchy (uses Proximity, Connectedness, Continuity)

Visual Design 20

§ Visual hierarchy guides and allows

information scanning

§ create the hierarchy to support

intended reading sequence

§ Useful techniques for creating

hierarchy:

Proximity (e.g. position, white

space)

Similiarity (e.g. size, spacing,

colour)

SLIDE 21

Relationship (uses Similarity, Proximity, Connectedness, Continuity)

Visual Design 21

§ Establish relationships between elements by using position, size, value

(colour, shape, etc.)

§ Use position, size, value (colour, shape, etc.) § Alignment and similarity effective for creating relationships

SLIDE 22

Balance (uses Similarity? Continuity?)

Visual Design 22

§ Try to create a stable composition by balancing elements

(similar to physical balance)

§ Stability achieved by manipulating properties such as:

Position, Size, Hue, Form

§ Symmetric layouts naturally achieve balance

SLIDE 23 23 Visual Design

SLIDE 24 24 Visual Design

SLIDE 25

Simplicity

Visual Design 26

§ Present the minimum amount of information to achieve maximum effect § Functions are quickly recognized and understood

Less information means less time to process
Can more quickly produce correct mental models

§ Simplicity also aids recall

Less to remember, easier to recall

SLIDE 26

What are the Essential Features?

Visual Design 28

SLIDE 27

How to achieve simplicity?

Visual Design 29

§ Reduce, reduce, reduce § Reduce some more § Reduce until it hurts

SLIDE 28 30 Visual Design

SLIDE 29

Clarity: Typography

31

§ The practice of arranging written subject matter. § Difference between “Typeface” and “Font”

The quick brown fox

The quick brown

The quick brown fox

Visual Design

https://www.aiga.org/theyre-not-fonts/

SLIDE 30

Type Styles and Anatomy

32

§ Style (Sans-Serif, Serif, Display, etc) § Weight (e.g. bold) § Emphasis (e.g. italic) § Point: 0.351mm = 1/72” (mostly)

original Mac was 72 DPI

A A A

http://en.wikipedia.org/wiki/Image:Metal_type.svg

face point size body

Visual Design

SLIDE 31

Terminology

Visual Design 33

kerning

SLIDE 32

Comic Sans

Visual Design 35

Comic Sans is weighted in a way that

looks uneven. Look at the knee of the letter n, compared to Helvetica.

It also skews characters, which makes

them look unbalanced.

Finally, kerning is

inconsistent.

https://designforhackers.com/blog/comic-sans-hate/

Comic Sans was developed by Microsoft in the 90s for informal, display text (meant to mimic speaking “bubbles” from comic strips). It’s universally hated. Why?!

SLIDE 33 36 Visual Design

Should you use Comic Sans? Will your document be viewed in public? Don’t use Comic Sans yes no

SLIDE 34

Rules of Thumb

37

§ Avoid using display typefaces in

print

§ Avoid comic sans § Don’t use many typefaces § Avoid underlining (use bold and

italics for emphasis)

§ Avoid fully justified text

Visual Design

SLIDE 35

Why Visual Design? Impact

Visual Design 38

§ Good visual design can reduce human processing time § Tullis redesigned lodging information screens (1984)

5.5 vs. 3.2 sec avg search times

SLIDE 36

Recommended Books

Visual Design 40

Kevin Mullet and Darrell Sano, Designing Visual Interfaces: Communication Oriented Techniques (1994)

dated examples but concepts hold true; out of print, used copies can be cheap

Beth Tondreau, Layout Essentials: 100 Design Principles for Using Grids (2011)

more print layout than interfaces, but excellent description of core layout and

typography concepts Robert Bringhurst, The Elements of Typographic Style (2004)

classic text on typography

William Lidwell, Kritina Holden, and Jill Butler, Universal Principles of Design (2010)

high level overview of visual design concepts