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

▶
visual design
SMART_READER_LITE
LIVE PREVIEW

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

Aug 28, 2023 102 likes •456 views

Visual Design Visual Design Objectives Gestalt Principles Creating Organization and Structure Typography UI Visual Design Objectives What are the goals of an effective interface? Information communication 1. - enforce desired relationships

slide-1
SLIDE 1

Visual Design

Visual Design Objectives Gestalt Principles Creating Organization and Structure Typography

slide-2
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
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
SLIDE 4

4 Visual Design

slide-5
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
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
SLIDE 7

Proximity

Visual Design 7

  • Individual elements are associated more strongly with nearby

elements than with those further away

Make real separation!

slide-8
SLIDE 8

8 Visual Design

slide-9
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
SLIDE 10

10 Visual Design

slide-11
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
SLIDE 12

12 Visual Design

slide-13
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
SLIDE 14

14 Visual Design

slide-15
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
SLIDE 16

16 Visual Design

slide-17
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
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 19
slide-20
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
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
SLIDE 22

Balance (uses 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 often achieve balance
slide-23
SLIDE 23

23 Visual Design

slide-24
SLIDE 24

24 Visual Design

slide-25
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
SLIDE 26

What are the Essential Features?

Visual Design 28

slide-27
SLIDE 27

How to achieve simplicity?

Visual Design 29

  • Reduce, reduce, reduce
  • Reduce some more
  • Reduce until it hurts
slide-28
SLIDE 28

30 Visual Design

slide-29
SLIDE 29

Typography

31

  • The practice of arranging written content.
  • Difference between “Typeface” and “Font”

The quick brown fox

The quick brown fox

The quick brown fox

The quick brown fox

The quick brown fox

The quick brown fox

The quick brown fox

The quick brown fox

The quick brown fox

The quick brown fox

The quick brown fox

The quick brown fox

The quick brown

The quick brown fox

The quick brown fox

The quick brown fox

Visual Design

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

slide-30
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

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

face point size body

Visual Design

https://medium.com/nightingale/choosing-a-font-for-your- data-visualization-2ed37afea637

slide-31
SLIDE 31

Terminology

Visual Design 33

kerning

slide-32
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
SLIDE 33

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-34
SLIDE 34

Why Visual Design? Impact

Visual Design 38

  • Good visual design can reduce human processing time
  • Tullis redesigned logging information screens (1984)
  • 5.5 vs. 3.2 sec avg search times