Build websites that suit the needs and abilities of users The main - - PowerPoint PPT Presentation

▶
build websites that suit the needs and abilities of users
SMART_READER_LITE
LIVE PREVIEW

Build websites that suit the needs and abilities of users The main - - PowerPoint PPT Presentation

Dec 16, 2022 34 likes •800 views

Goal 1 Build websites that suit the needs and abilities of users The main goal of many websites is to display information users need. 2 Tools for indicating importance in the visual information hierarchy Conceptual grouping Location

slide-1
SLIDE 1
slide-2
SLIDE 2

2

Goal 1

Build websites that suit the needs and abilities of users

The main goal of many websites is to display information users need.

slide-3
SLIDE 3

3

Tools for indicating importance in the visual information hierarchy

  • Conceptual grouping
  • Location
  • Whitespace
  • Size
  • Images
  • Contrast
  • Color
slide-4
SLIDE 4

4

In addition to indicating importance, the colors and fonts you pick will have meaning to users.

slide-5
SLIDE 5

5

What meaning will these colors have to users? (in addition to importance)

slide-6
SLIDE 6

6

What meaning will these fonts have to users? (in addition to importance)

slide-7
SLIDE 7

7

What meaning will these fonts, colors and design have to users?

slide-8
SLIDE 8

8

What meaning does this font have?

slide-9
SLIDE 9

The human brain is always perceiving meaning (even when it is not intended)

9

slide-10
SLIDE 10

The human brain is always perceiving meaning (even when it is not intended)

10

U

Use color, typography, and design carefully to convey your intended meaning

slide-11
SLIDE 11

Color

slide-12
SLIDE 12

On the web, we mostly use RGB color.

12

RGB

Mixing amounts of Red, Green and Blue light

slide-13
SLIDE 13

There are three perceptual dimensions of color

13

slide-14
SLIDE 14

Every color is a point in the HSV space.

14

slide-15
SLIDE 15

How would we find this color?

15

slide-16
SLIDE 16

From Yellow, how do we get Brown?

16

Saturation

slide-17
SLIDE 17
slide-18
SLIDE 18

Choosing colors

Start in grayscale, then keep the luminance values Common schemes: analogous, split complement

slide-19
SLIDE 19

Benefit from others

Adobe Color CC http://color.adobe.com Fork popular schemes https://color.adobe.com/

explore/most-popular

19

slide-20
SLIDE 20

Cultural Differences in Color Interpretation

slide-21
SLIDE 21

What cultural connections do these colors have?

slide-22
SLIDE 22

Are color meaning arbitrary?

slide-23
SLIDE 23

Are color meaning arbitrary?

U

Color meanings are not absolute. But at any time and place, they may mean something you don’t intend.

slide-24
SLIDE 24

Typography

slide-25
SLIDE 25
slide-26
SLIDE 26

Six Typographic Terms

slide-27
SLIDE 27

Calibri: 2005, Lucas de Groot for Microsoft, www.microsoft.com/typography/fonts/family.aspx?FID=287

Six Typographic Terms

Point size

}

S S

Gill Sans Calibri

slide-28
SLIDE 28

Six Typographic Terms

Leading

}

Six Typographic Terms

slide-29
SLIDE 29

Lucida Bright: 1993, Charles Bigelow & Kris Holmes · Baskerville, 1757, John Baskerville

Six Typographic Terms Six

Gill Sans

Six

Baskerville Low x-height

x-height

}

Typefaces with high x-height:
 easier to read at small point size Typefaces with low x-height: harder to read at small point size

slide-30
SLIDE 30

Six Typographic Terms

ascenders descenders

slide-31
SLIDE 31

Six Typographic Terms

light regular bold

weight

slide-32
SLIDE 32

Weights and Styles

http://developer.android.com/design/style/typography.html

slide-33
SLIDE 33

Six Typographic Terms: Serif

Source: R. Williams The Non-Designers Design Book

slide-34
SLIDE 34

Six Typographic Terms: Serif

Source: R. Williams The Non-Designers Design Book

?????

slide-35
SLIDE 35

Six Typographic Terms: Serif

Source: R. Williams The Non-Designers Design Book

slide-36
SLIDE 36

Six Typographic Terms: Serif

Source: R. Williams The Non-Designers Design Book

?????

slide-37
SLIDE 37

Six Typographic Terms: Serif

Source: R. Williams The Non-Designers Design Book

?????

slide-38
SLIDE 38

Six Typographic Terms: Serif

Source: R. Williams The Non-Designers Design Book

slide-39
SLIDE 39

Six Typographic Terms: Sans Serif

Source: R. Williams The Non-Designers Design Book

slide-40
SLIDE 40 2002, Christian Schwartz, House Industries, http://www.houseind.com/fonts/neutraface · An Ode to a Typeface, www.youtube.com/watch?v=xHCu28bfxSI

Small caps, lowercase

slide-41
SLIDE 41 2002, Christian Schwartz, House Industries, http://www.houseind.com/fonts/neutraface · An Ode to a Typeface, www.youtube.com/watch?v=xHCu28bfxSI

Small caps, lowercase 1234567890 1234567890

Numbers: Lowercase Uppercase

slide-42
SLIDE 42

The Serif Hypothesis

  • Serif typefaces are easier to read --

and thereby preferable for long stretches of text -- because the serifs provide anchors that guide the reader’s eye. Sans serif fonts lack these anchors and are therefore inappropriate for long stretches of text.

slide-43
SLIDE 43

Challenges

  • Individual differences dwarf manipulation effects
  • i.e., some people read faster than others. If there is an effect, it’s

very small

  • Confound: Reading requires familiarity
  • Dependent

Variable? Speed? Comprehension? …?

slide-44
SLIDE 44

“Legibility, in practice, amounts simply to what one is accustomed to” — Eric Gill, 1931

slide-45
SLIDE 45

Combining Type: Concordant

slide-46
SLIDE 46

Combining Type: Contrasting

slide-47
SLIDE 47

Combining Type: Conflicting

slide-48
SLIDE 48

Hoefler + Frere-Jones: http://typography.com/ask/showBlog.php?blogID=79

Typefaces, like everything, build reputations

Baskerville

The Literary Magazine for Gifted Kids & Their Families

Optima

POUR HOMME AFTER SHAVE BALM BAUME APRES RASAGE

slide-49
SLIDE 49

Gestalt

noun an organized whole that is perceived as more than a sum of its parts

slide-50
SLIDE 50

What pattern do you see here?

slide-51
SLIDE 51

What pattern do you see here?

slide-52
SLIDE 52

Proximity

slide-53
SLIDE 53

Proximity

slide-54
SLIDE 54

How is proximity used?

slide-55
SLIDE 55

What pattern do you see here?

slide-56
SLIDE 56

How is similarity used?

slide-57
SLIDE 57

What pattern do you see here?

slide-58
SLIDE 58

What pattern do you see here?

How are proximity and similarity used?

slide-59
SLIDE 59

Connectedness

Connection overrules proximity and similarity

slide-60
SLIDE 60

What literal difference do you see between A B and C?

A B C

slide-61
SLIDE 61

What perceptual difference do you see between A B and C?

A B C

slide-62
SLIDE 62

Symmetry

Bilateral symmetry gives strong sense of figure

slide-63
SLIDE 63

Which paths are easier to follow?

slide-64
SLIDE 64

Continuity

We prefer smooth not abrupt changes Connections are clearer with smooth contours

slide-65
SLIDE 65

What is the literal difference between a and b?

slide-66
SLIDE 66

What is the perceived difference between a and b?

slide-67
SLIDE 67

Closure

slide-68
SLIDE 68

Illusory contours

slide-69
SLIDE 69

What do you see?

slide-70
SLIDE 70

Figure/Ground

Principle of Relative Size

slide-71
SLIDE 71

Figure/Ground

slide-72
SLIDE 72

Figure/Ground

Principle of Surroundedness

slide-73
SLIDE 73

8 Gestalt Principles

73

slide-74
SLIDE 74

Summary

slide-75
SLIDE 75

The human brain is always perceiving meaning (even when it is not intended)

75

Color Font Gestalt

slide-76
SLIDE 76

As a designer, you have to know how these principles are represented by the system, and how they are interpreted by the user.

76

Color Font Gestalt