Build websites that suit the needs and abilities of users

Transcription

1

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. 2

3 Tools for indicating importance in the visual information hierarchy Conceptual grouping Location Whitespace Size Images Contrast Color 3

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

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

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

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

8 What meaning does this font have? 8

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

10 The human brain is always perceiving meaning (even when it is not intended) U Use color, typography, and design carefully to convey your intended meaning 10

11 Color

12 On the web, we mostly use RGB color. RGB Mixing amounts of Red, Green and Blue light 12

13 There are three perceptual dimensions of color 13

14 Every color is a point in the HSV space. 14

15 How would we find this color? 15

16 From Yellow, how do we get Brown? Saturation 16

17

18 Choosing colors! Start in grayscale, then keep the luminance values! Common schemes: analogous, split complement

19 Benefit from others! Adobe Color CC Fork popular schemes explore/most-popular 19

20 Cultural Differences in Color Interpretation

21 What cultural connections do these colors have?

22 Are color meaning arbitrary?

23 Are color meaning arbitrary? Color meanings are not absolute. U But at any time and place, they may mean something you don t intend.

24 Typography

25

26 Six Typographic Terms

27 } Point Six Typographic Terms size S S Gill Sans Calibri Calibri: 2005, Lucas de Groot for Microsoft,

28 Six Typographic Terms } Leading Six Typographic Terms

29 Six Typographic Terms } x-height Six Gill Sans Six Baskerville Low 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 Lucida Bright: 1993, Charles Bigelow & Kris Holmes Baskerville, 1757, John Baskerville

30 ascenders Six Typographic Terms descenders

31 Six Typographic Terms light regular bold weight

32 Weights and Styles

33 Six Typographic Terms: Serif Source: R. Williams The Non-Designers Design Book

34 Six Typographic Terms: Serif????? Source: R. Williams The Non-Designers Design Book

35 Six Typographic Terms: Serif Source: R. Williams The Non-Designers Design Book

36 Six Typographic Terms: Serif????? Source: R. Williams The Non-Designers Design Book

37 Six Typographic Terms: Serif????? Source: R. Williams The Non-Designers Design Book

38 Six Typographic Terms: Serif Source: R. Williams The Non-Designers Design Book

39 Six Typographic Terms: Sans Serif Source: R. Williams The Non-Designers Design Book

40 Small caps, lowercase 2002, Christian Schwartz, House Industries, An Ode to a Typeface,

41 Small caps, lowercase Numbers: Lowercase Uppercase , Christian Schwartz, House Industries, An Ode to a Typeface,

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.

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??

44 Legibility, in practice, amounts simply to what one is accustomed to Eric Gill, 1931

45 Combining Type: Concordant

46 Combining Type: Contrasting

47 Combining Type: Conflicting

48 Typefaces, like everything, build reputations Baskerville Optima POUR HOMME The Literary Magazine for Gifted Kids & Their Families AFTER SHAVE BALM BAUME APRES RASAGE Hoefler + Frere-Jones:

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

50 What pattern do you see here?

51 What pattern do you see here?

52 Proximity

53 Proximity

54 How is proximity used?

55 What pattern do you see here?

56 How is similarity used?

57 What pattern do you see here?

58 What pattern do you see here? How are proximity and similarity used?

59 Connectedness Connection overrules proximity and similarity

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

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

62 Symmetry Bilateral symmetry gives strong sense of figure

63 Which paths are easier to follow?

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

65 What is the literal difference between a and b?

66 What is the perceived difference between a and b?

67 Closure

68 Illusory contours

69 What do you see?

70 Figure/Ground Principle of Relative Size

71 Figure/Ground

72 Figure/Ground Principle of Surroundedness

73 8 Gestalt Principles 73

74 Summary

75 The human brain is always perceiving meaning (even when it is not intended) Color Font Gestalt 75

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