goal 1 build websites that suit the needs and abilities of...
TRANSCRIPT
![Page 1: Goal 1 Build websites that suit the needs and abilities of ...coms4170.cs.columbia.edu/2018-spring/slides/coms4170-4-color-typ… · Lucida Bright: 1993, Charles Bigelow & Kris Holmes](https://reader034.vdocuments.us/reader034/viewer/2022050300/5f699e42a217b35b2e10b454/html5/thumbnails/1.jpg)
![Page 2: Goal 1 Build websites that suit the needs and abilities of ...coms4170.cs.columbia.edu/2018-spring/slides/coms4170-4-color-typ… · Lucida Bright: 1993, Charles Bigelow & Kris Holmes](https://reader034.vdocuments.us/reader034/viewer/2022050300/5f699e42a217b35b2e10b454/html5/thumbnails/2.jpg)
2
Goal1
Buildwebsitesthatsuittheneedsandabilitiesofusers
Themaingoalofmanywebsitesistodisplayinformationusersneed.
![Page 3: Goal 1 Build websites that suit the needs and abilities of ...coms4170.cs.columbia.edu/2018-spring/slides/coms4170-4-color-typ… · Lucida Bright: 1993, Charles Bigelow & Kris Holmes](https://reader034.vdocuments.us/reader034/viewer/2022050300/5f699e42a217b35b2e10b454/html5/thumbnails/3.jpg)
3
Tools for indicating importance in the visual information hierarchy
•Conceptual grouping•Location•Whitespace•Size•Images•Contrast•Color
![Page 4: Goal 1 Build websites that suit the needs and abilities of ...coms4170.cs.columbia.edu/2018-spring/slides/coms4170-4-color-typ… · Lucida Bright: 1993, Charles Bigelow & Kris Holmes](https://reader034.vdocuments.us/reader034/viewer/2022050300/5f699e42a217b35b2e10b454/html5/thumbnails/4.jpg)
4
In addition to indicating importance, the colors and fonts you pick will have meaning to users.
![Page 5: Goal 1 Build websites that suit the needs and abilities of ...coms4170.cs.columbia.edu/2018-spring/slides/coms4170-4-color-typ… · Lucida Bright: 1993, Charles Bigelow & Kris Holmes](https://reader034.vdocuments.us/reader034/viewer/2022050300/5f699e42a217b35b2e10b454/html5/thumbnails/5.jpg)
5
What meaning will these colors have to users? (in addition to importance)
![Page 6: Goal 1 Build websites that suit the needs and abilities of ...coms4170.cs.columbia.edu/2018-spring/slides/coms4170-4-color-typ… · Lucida Bright: 1993, Charles Bigelow & Kris Holmes](https://reader034.vdocuments.us/reader034/viewer/2022050300/5f699e42a217b35b2e10b454/html5/thumbnails/6.jpg)
6
What meaning will these fonts have to users? (in addition to importance)
![Page 7: Goal 1 Build websites that suit the needs and abilities of ...coms4170.cs.columbia.edu/2018-spring/slides/coms4170-4-color-typ… · Lucida Bright: 1993, Charles Bigelow & Kris Holmes](https://reader034.vdocuments.us/reader034/viewer/2022050300/5f699e42a217b35b2e10b454/html5/thumbnails/7.jpg)
7
What meaning will these fonts, colors and design have to users?
![Page 8: Goal 1 Build websites that suit the needs and abilities of ...coms4170.cs.columbia.edu/2018-spring/slides/coms4170-4-color-typ… · Lucida Bright: 1993, Charles Bigelow & Kris Holmes](https://reader034.vdocuments.us/reader034/viewer/2022050300/5f699e42a217b35b2e10b454/html5/thumbnails/8.jpg)
8
What meaning does this font have?
![Page 9: Goal 1 Build websites that suit the needs and abilities of ...coms4170.cs.columbia.edu/2018-spring/slides/coms4170-4-color-typ… · Lucida Bright: 1993, Charles Bigelow & Kris Holmes](https://reader034.vdocuments.us/reader034/viewer/2022050300/5f699e42a217b35b2e10b454/html5/thumbnails/9.jpg)
The human brain is always perceiving meaning (even when it is not intended)
9
![Page 10: Goal 1 Build websites that suit the needs and abilities of ...coms4170.cs.columbia.edu/2018-spring/slides/coms4170-4-color-typ… · Lucida Bright: 1993, Charles Bigelow & Kris Holmes](https://reader034.vdocuments.us/reader034/viewer/2022050300/5f699e42a217b35b2e10b454/html5/thumbnails/10.jpg)
The human brain is always perceiving meaning (even when it is not intended)
10
UUse color, typography, and design carefully
to convey your intended meaning
![Page 11: Goal 1 Build websites that suit the needs and abilities of ...coms4170.cs.columbia.edu/2018-spring/slides/coms4170-4-color-typ… · Lucida Bright: 1993, Charles Bigelow & Kris Holmes](https://reader034.vdocuments.us/reader034/viewer/2022050300/5f699e42a217b35b2e10b454/html5/thumbnails/11.jpg)
Color
![Page 12: Goal 1 Build websites that suit the needs and abilities of ...coms4170.cs.columbia.edu/2018-spring/slides/coms4170-4-color-typ… · Lucida Bright: 1993, Charles Bigelow & Kris Holmes](https://reader034.vdocuments.us/reader034/viewer/2022050300/5f699e42a217b35b2e10b454/html5/thumbnails/12.jpg)
On the web, we mostly use RGB color.
12
RGBMixing amounts of Red, Green and Blue light
![Page 13: Goal 1 Build websites that suit the needs and abilities of ...coms4170.cs.columbia.edu/2018-spring/slides/coms4170-4-color-typ… · Lucida Bright: 1993, Charles Bigelow & Kris Holmes](https://reader034.vdocuments.us/reader034/viewer/2022050300/5f699e42a217b35b2e10b454/html5/thumbnails/13.jpg)
There are three perceptual dimensions of color
13
![Page 14: Goal 1 Build websites that suit the needs and abilities of ...coms4170.cs.columbia.edu/2018-spring/slides/coms4170-4-color-typ… · Lucida Bright: 1993, Charles Bigelow & Kris Holmes](https://reader034.vdocuments.us/reader034/viewer/2022050300/5f699e42a217b35b2e10b454/html5/thumbnails/14.jpg)
Every color is a point in the HSV space.
14
![Page 15: Goal 1 Build websites that suit the needs and abilities of ...coms4170.cs.columbia.edu/2018-spring/slides/coms4170-4-color-typ… · Lucida Bright: 1993, Charles Bigelow & Kris Holmes](https://reader034.vdocuments.us/reader034/viewer/2022050300/5f699e42a217b35b2e10b454/html5/thumbnails/15.jpg)
How would we find this color?
15
![Page 16: Goal 1 Build websites that suit the needs and abilities of ...coms4170.cs.columbia.edu/2018-spring/slides/coms4170-4-color-typ… · Lucida Bright: 1993, Charles Bigelow & Kris Holmes](https://reader034.vdocuments.us/reader034/viewer/2022050300/5f699e42a217b35b2e10b454/html5/thumbnails/16.jpg)
From Yellow, how do we get Brown?
16
Saturation
![Page 17: Goal 1 Build websites that suit the needs and abilities of ...coms4170.cs.columbia.edu/2018-spring/slides/coms4170-4-color-typ… · Lucida Bright: 1993, Charles Bigelow & Kris Holmes](https://reader034.vdocuments.us/reader034/viewer/2022050300/5f699e42a217b35b2e10b454/html5/thumbnails/17.jpg)
![Page 18: Goal 1 Build websites that suit the needs and abilities of ...coms4170.cs.columbia.edu/2018-spring/slides/coms4170-4-color-typ… · Lucida Bright: 1993, Charles Bigelow & Kris Holmes](https://reader034.vdocuments.us/reader034/viewer/2022050300/5f699e42a217b35b2e10b454/html5/thumbnails/18.jpg)
Choosing colors! Start in grayscale, then keep the luminance values! Common schemes: analogous, split complement
![Page 19: Goal 1 Build websites that suit the needs and abilities of ...coms4170.cs.columbia.edu/2018-spring/slides/coms4170-4-color-typ… · Lucida Bright: 1993, Charles Bigelow & Kris Holmes](https://reader034.vdocuments.us/reader034/viewer/2022050300/5f699e42a217b35b2e10b454/html5/thumbnails/19.jpg)
Benefit from others ! Adobe Color CC http://color.adobe.com
! Fork popular schemes https://color.adobe.com/explore/most-popular
19
![Page 20: Goal 1 Build websites that suit the needs and abilities of ...coms4170.cs.columbia.edu/2018-spring/slides/coms4170-4-color-typ… · Lucida Bright: 1993, Charles Bigelow & Kris Holmes](https://reader034.vdocuments.us/reader034/viewer/2022050300/5f699e42a217b35b2e10b454/html5/thumbnails/20.jpg)
Cultural Differences in Color Interpretation
![Page 21: Goal 1 Build websites that suit the needs and abilities of ...coms4170.cs.columbia.edu/2018-spring/slides/coms4170-4-color-typ… · Lucida Bright: 1993, Charles Bigelow & Kris Holmes](https://reader034.vdocuments.us/reader034/viewer/2022050300/5f699e42a217b35b2e10b454/html5/thumbnails/21.jpg)
What cultural connections do these colors have?
![Page 22: Goal 1 Build websites that suit the needs and abilities of ...coms4170.cs.columbia.edu/2018-spring/slides/coms4170-4-color-typ… · Lucida Bright: 1993, Charles Bigelow & Kris Holmes](https://reader034.vdocuments.us/reader034/viewer/2022050300/5f699e42a217b35b2e10b454/html5/thumbnails/22.jpg)
Are color meaning arbitrary?
![Page 23: Goal 1 Build websites that suit the needs and abilities of ...coms4170.cs.columbia.edu/2018-spring/slides/coms4170-4-color-typ… · Lucida Bright: 1993, Charles Bigelow & Kris Holmes](https://reader034.vdocuments.us/reader034/viewer/2022050300/5f699e42a217b35b2e10b454/html5/thumbnails/23.jpg)
Are color meaning arbitrary?
U
Color meanings are not absolute.
But at any time and place, they may mean something you don’t intend.
![Page 24: Goal 1 Build websites that suit the needs and abilities of ...coms4170.cs.columbia.edu/2018-spring/slides/coms4170-4-color-typ… · Lucida Bright: 1993, Charles Bigelow & Kris Holmes](https://reader034.vdocuments.us/reader034/viewer/2022050300/5f699e42a217b35b2e10b454/html5/thumbnails/24.jpg)
Typography
![Page 25: Goal 1 Build websites that suit the needs and abilities of ...coms4170.cs.columbia.edu/2018-spring/slides/coms4170-4-color-typ… · Lucida Bright: 1993, Charles Bigelow & Kris Holmes](https://reader034.vdocuments.us/reader034/viewer/2022050300/5f699e42a217b35b2e10b454/html5/thumbnails/25.jpg)
![Page 26: Goal 1 Build websites that suit the needs and abilities of ...coms4170.cs.columbia.edu/2018-spring/slides/coms4170-4-color-typ… · Lucida Bright: 1993, Charles Bigelow & Kris Holmes](https://reader034.vdocuments.us/reader034/viewer/2022050300/5f699e42a217b35b2e10b454/html5/thumbnails/26.jpg)
Six Typographic Terms
![Page 27: Goal 1 Build websites that suit the needs and abilities of ...coms4170.cs.columbia.edu/2018-spring/slides/coms4170-4-color-typ… · Lucida Bright: 1993, Charles Bigelow & Kris Holmes](https://reader034.vdocuments.us/reader034/viewer/2022050300/5f699e42a217b35b2e10b454/html5/thumbnails/27.jpg)
Calibri: 2005, Lucas de Groot for Microsoft, www.microsoft.com/typography/fonts/family.aspx?FID=287
Six Typographic TermsPoint size}
S SGill Sans Calibri
![Page 28: Goal 1 Build websites that suit the needs and abilities of ...coms4170.cs.columbia.edu/2018-spring/slides/coms4170-4-color-typ… · Lucida Bright: 1993, Charles Bigelow & Kris Holmes](https://reader034.vdocuments.us/reader034/viewer/2022050300/5f699e42a217b35b2e10b454/html5/thumbnails/28.jpg)
Six Typographic TermsLeading}
Six Typographic Terms
![Page 29: Goal 1 Build websites that suit the needs and abilities of ...coms4170.cs.columbia.edu/2018-spring/slides/coms4170-4-color-typ… · Lucida Bright: 1993, Charles Bigelow & Kris Holmes](https://reader034.vdocuments.us/reader034/viewer/2022050300/5f699e42a217b35b2e10b454/html5/thumbnails/29.jpg)
Lucida Bright: 1993, Charles Bigelow & Kris Holmes · Baskerville, 1757, John Baskerville
Six Typographic Terms
SixGill Sans
SixBaskerville 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
![Page 30: Goal 1 Build websites that suit the needs and abilities of ...coms4170.cs.columbia.edu/2018-spring/slides/coms4170-4-color-typ… · Lucida Bright: 1993, Charles Bigelow & Kris Holmes](https://reader034.vdocuments.us/reader034/viewer/2022050300/5f699e42a217b35b2e10b454/html5/thumbnails/30.jpg)
Six Typographic Termsascenders
descenders
![Page 31: Goal 1 Build websites that suit the needs and abilities of ...coms4170.cs.columbia.edu/2018-spring/slides/coms4170-4-color-typ… · Lucida Bright: 1993, Charles Bigelow & Kris Holmes](https://reader034.vdocuments.us/reader034/viewer/2022050300/5f699e42a217b35b2e10b454/html5/thumbnails/31.jpg)
Six Typographic Termslight regular bold
weight
![Page 32: Goal 1 Build websites that suit the needs and abilities of ...coms4170.cs.columbia.edu/2018-spring/slides/coms4170-4-color-typ… · Lucida Bright: 1993, Charles Bigelow & Kris Holmes](https://reader034.vdocuments.us/reader034/viewer/2022050300/5f699e42a217b35b2e10b454/html5/thumbnails/32.jpg)
Weights and Styles
http://developer.android.com/design/style/typography.html
![Page 33: Goal 1 Build websites that suit the needs and abilities of ...coms4170.cs.columbia.edu/2018-spring/slides/coms4170-4-color-typ… · Lucida Bright: 1993, Charles Bigelow & Kris Holmes](https://reader034.vdocuments.us/reader034/viewer/2022050300/5f699e42a217b35b2e10b454/html5/thumbnails/33.jpg)
Six Typographic Terms: Serif
Source: R. WilliamsThe Non-Designers Design Book
![Page 34: Goal 1 Build websites that suit the needs and abilities of ...coms4170.cs.columbia.edu/2018-spring/slides/coms4170-4-color-typ… · Lucida Bright: 1993, Charles Bigelow & Kris Holmes](https://reader034.vdocuments.us/reader034/viewer/2022050300/5f699e42a217b35b2e10b454/html5/thumbnails/34.jpg)
Six Typographic Terms: Serif
Source: R. WilliamsThe Non-Designers Design Book
?????
![Page 35: Goal 1 Build websites that suit the needs and abilities of ...coms4170.cs.columbia.edu/2018-spring/slides/coms4170-4-color-typ… · Lucida Bright: 1993, Charles Bigelow & Kris Holmes](https://reader034.vdocuments.us/reader034/viewer/2022050300/5f699e42a217b35b2e10b454/html5/thumbnails/35.jpg)
Six Typographic Terms: Serif
Source: R. WilliamsThe Non-Designers Design Book
![Page 36: Goal 1 Build websites that suit the needs and abilities of ...coms4170.cs.columbia.edu/2018-spring/slides/coms4170-4-color-typ… · Lucida Bright: 1993, Charles Bigelow & Kris Holmes](https://reader034.vdocuments.us/reader034/viewer/2022050300/5f699e42a217b35b2e10b454/html5/thumbnails/36.jpg)
Six Typographic Terms: Serif
Source: R. WilliamsThe Non-Designers Design Book
?????
![Page 37: Goal 1 Build websites that suit the needs and abilities of ...coms4170.cs.columbia.edu/2018-spring/slides/coms4170-4-color-typ… · Lucida Bright: 1993, Charles Bigelow & Kris Holmes](https://reader034.vdocuments.us/reader034/viewer/2022050300/5f699e42a217b35b2e10b454/html5/thumbnails/37.jpg)
Six Typographic Terms: Serif
Source: R. WilliamsThe Non-Designers Design Book
?????
![Page 38: Goal 1 Build websites that suit the needs and abilities of ...coms4170.cs.columbia.edu/2018-spring/slides/coms4170-4-color-typ… · Lucida Bright: 1993, Charles Bigelow & Kris Holmes](https://reader034.vdocuments.us/reader034/viewer/2022050300/5f699e42a217b35b2e10b454/html5/thumbnails/38.jpg)
Six Typographic Terms: Serif
Source: R. WilliamsThe Non-Designers Design Book
![Page 39: Goal 1 Build websites that suit the needs and abilities of ...coms4170.cs.columbia.edu/2018-spring/slides/coms4170-4-color-typ… · Lucida Bright: 1993, Charles Bigelow & Kris Holmes](https://reader034.vdocuments.us/reader034/viewer/2022050300/5f699e42a217b35b2e10b454/html5/thumbnails/39.jpg)
Six Typographic Terms: Sans Serif
Source: R. WilliamsThe Non-Designers Design Book
![Page 40: Goal 1 Build websites that suit the needs and abilities of ...coms4170.cs.columbia.edu/2018-spring/slides/coms4170-4-color-typ… · Lucida Bright: 1993, Charles Bigelow & Kris Holmes](https://reader034.vdocuments.us/reader034/viewer/2022050300/5f699e42a217b35b2e10b454/html5/thumbnails/40.jpg)
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
![Page 41: Goal 1 Build websites that suit the needs and abilities of ...coms4170.cs.columbia.edu/2018-spring/slides/coms4170-4-color-typ… · Lucida Bright: 1993, Charles Bigelow & Kris Holmes](https://reader034.vdocuments.us/reader034/viewer/2022050300/5f699e42a217b35b2e10b454/html5/thumbnails/41.jpg)
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
![Page 42: Goal 1 Build websites that suit the needs and abilities of ...coms4170.cs.columbia.edu/2018-spring/slides/coms4170-4-color-typ… · Lucida Bright: 1993, Charles Bigelow & Kris Holmes](https://reader034.vdocuments.us/reader034/viewer/2022050300/5f699e42a217b35b2e10b454/html5/thumbnails/42.jpg)
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.
![Page 43: Goal 1 Build websites that suit the needs and abilities of ...coms4170.cs.columbia.edu/2018-spring/slides/coms4170-4-color-typ… · Lucida Bright: 1993, Charles Bigelow & Kris Holmes](https://reader034.vdocuments.us/reader034/viewer/2022050300/5f699e42a217b35b2e10b454/html5/thumbnails/43.jpg)
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?
…?
![Page 44: Goal 1 Build websites that suit the needs and abilities of ...coms4170.cs.columbia.edu/2018-spring/slides/coms4170-4-color-typ… · Lucida Bright: 1993, Charles Bigelow & Kris Holmes](https://reader034.vdocuments.us/reader034/viewer/2022050300/5f699e42a217b35b2e10b454/html5/thumbnails/44.jpg)
“Legibility, in practice, amounts simply to what one is accustomed to” — Eric Gill, 1931
![Page 45: Goal 1 Build websites that suit the needs and abilities of ...coms4170.cs.columbia.edu/2018-spring/slides/coms4170-4-color-typ… · Lucida Bright: 1993, Charles Bigelow & Kris Holmes](https://reader034.vdocuments.us/reader034/viewer/2022050300/5f699e42a217b35b2e10b454/html5/thumbnails/45.jpg)
Combining Type: Concordant
![Page 46: Goal 1 Build websites that suit the needs and abilities of ...coms4170.cs.columbia.edu/2018-spring/slides/coms4170-4-color-typ… · Lucida Bright: 1993, Charles Bigelow & Kris Holmes](https://reader034.vdocuments.us/reader034/viewer/2022050300/5f699e42a217b35b2e10b454/html5/thumbnails/46.jpg)
Combining Type: Contrasting
![Page 47: Goal 1 Build websites that suit the needs and abilities of ...coms4170.cs.columbia.edu/2018-spring/slides/coms4170-4-color-typ… · Lucida Bright: 1993, Charles Bigelow & Kris Holmes](https://reader034.vdocuments.us/reader034/viewer/2022050300/5f699e42a217b35b2e10b454/html5/thumbnails/47.jpg)
Combining Type: Conflicting
![Page 48: Goal 1 Build websites that suit the needs and abilities of ...coms4170.cs.columbia.edu/2018-spring/slides/coms4170-4-color-typ… · Lucida Bright: 1993, Charles Bigelow & Kris Holmes](https://reader034.vdocuments.us/reader034/viewer/2022050300/5f699e42a217b35b2e10b454/html5/thumbnails/48.jpg)
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
![Page 49: Goal 1 Build websites that suit the needs and abilities of ...coms4170.cs.columbia.edu/2018-spring/slides/coms4170-4-color-typ… · Lucida Bright: 1993, Charles Bigelow & Kris Holmes](https://reader034.vdocuments.us/reader034/viewer/2022050300/5f699e42a217b35b2e10b454/html5/thumbnails/49.jpg)
Gestaltnounan organized whole that is perceived as more than a sum of its parts
![Page 50: Goal 1 Build websites that suit the needs and abilities of ...coms4170.cs.columbia.edu/2018-spring/slides/coms4170-4-color-typ… · Lucida Bright: 1993, Charles Bigelow & Kris Holmes](https://reader034.vdocuments.us/reader034/viewer/2022050300/5f699e42a217b35b2e10b454/html5/thumbnails/50.jpg)
What pattern do you see here?
![Page 51: Goal 1 Build websites that suit the needs and abilities of ...coms4170.cs.columbia.edu/2018-spring/slides/coms4170-4-color-typ… · Lucida Bright: 1993, Charles Bigelow & Kris Holmes](https://reader034.vdocuments.us/reader034/viewer/2022050300/5f699e42a217b35b2e10b454/html5/thumbnails/51.jpg)
What pattern do you see here?
![Page 52: Goal 1 Build websites that suit the needs and abilities of ...coms4170.cs.columbia.edu/2018-spring/slides/coms4170-4-color-typ… · Lucida Bright: 1993, Charles Bigelow & Kris Holmes](https://reader034.vdocuments.us/reader034/viewer/2022050300/5f699e42a217b35b2e10b454/html5/thumbnails/52.jpg)
Proximity
![Page 53: Goal 1 Build websites that suit the needs and abilities of ...coms4170.cs.columbia.edu/2018-spring/slides/coms4170-4-color-typ… · Lucida Bright: 1993, Charles Bigelow & Kris Holmes](https://reader034.vdocuments.us/reader034/viewer/2022050300/5f699e42a217b35b2e10b454/html5/thumbnails/53.jpg)
Proximity
![Page 54: Goal 1 Build websites that suit the needs and abilities of ...coms4170.cs.columbia.edu/2018-spring/slides/coms4170-4-color-typ… · Lucida Bright: 1993, Charles Bigelow & Kris Holmes](https://reader034.vdocuments.us/reader034/viewer/2022050300/5f699e42a217b35b2e10b454/html5/thumbnails/54.jpg)
How is proximity used?
![Page 55: Goal 1 Build websites that suit the needs and abilities of ...coms4170.cs.columbia.edu/2018-spring/slides/coms4170-4-color-typ… · Lucida Bright: 1993, Charles Bigelow & Kris Holmes](https://reader034.vdocuments.us/reader034/viewer/2022050300/5f699e42a217b35b2e10b454/html5/thumbnails/55.jpg)
What pattern do you see here?
![Page 56: Goal 1 Build websites that suit the needs and abilities of ...coms4170.cs.columbia.edu/2018-spring/slides/coms4170-4-color-typ… · Lucida Bright: 1993, Charles Bigelow & Kris Holmes](https://reader034.vdocuments.us/reader034/viewer/2022050300/5f699e42a217b35b2e10b454/html5/thumbnails/56.jpg)
How is similarity used?
![Page 57: Goal 1 Build websites that suit the needs and abilities of ...coms4170.cs.columbia.edu/2018-spring/slides/coms4170-4-color-typ… · Lucida Bright: 1993, Charles Bigelow & Kris Holmes](https://reader034.vdocuments.us/reader034/viewer/2022050300/5f699e42a217b35b2e10b454/html5/thumbnails/57.jpg)
What pattern do you see here?
![Page 58: Goal 1 Build websites that suit the needs and abilities of ...coms4170.cs.columbia.edu/2018-spring/slides/coms4170-4-color-typ… · Lucida Bright: 1993, Charles Bigelow & Kris Holmes](https://reader034.vdocuments.us/reader034/viewer/2022050300/5f699e42a217b35b2e10b454/html5/thumbnails/58.jpg)
What pattern do you see here?
How are proximity and similarity used?
![Page 59: Goal 1 Build websites that suit the needs and abilities of ...coms4170.cs.columbia.edu/2018-spring/slides/coms4170-4-color-typ… · Lucida Bright: 1993, Charles Bigelow & Kris Holmes](https://reader034.vdocuments.us/reader034/viewer/2022050300/5f699e42a217b35b2e10b454/html5/thumbnails/59.jpg)
Connectedness
Connection overrules proximity and similarity
![Page 60: Goal 1 Build websites that suit the needs and abilities of ...coms4170.cs.columbia.edu/2018-spring/slides/coms4170-4-color-typ… · Lucida Bright: 1993, Charles Bigelow & Kris Holmes](https://reader034.vdocuments.us/reader034/viewer/2022050300/5f699e42a217b35b2e10b454/html5/thumbnails/60.jpg)
What literal difference do you see between A B and C?
A B C
![Page 61: Goal 1 Build websites that suit the needs and abilities of ...coms4170.cs.columbia.edu/2018-spring/slides/coms4170-4-color-typ… · Lucida Bright: 1993, Charles Bigelow & Kris Holmes](https://reader034.vdocuments.us/reader034/viewer/2022050300/5f699e42a217b35b2e10b454/html5/thumbnails/61.jpg)
What perceptual difference do you see between A B and C?
A B C
![Page 62: Goal 1 Build websites that suit the needs and abilities of ...coms4170.cs.columbia.edu/2018-spring/slides/coms4170-4-color-typ… · Lucida Bright: 1993, Charles Bigelow & Kris Holmes](https://reader034.vdocuments.us/reader034/viewer/2022050300/5f699e42a217b35b2e10b454/html5/thumbnails/62.jpg)
Symmetry
Bilateral symmetry gives strong sense of figure
![Page 63: Goal 1 Build websites that suit the needs and abilities of ...coms4170.cs.columbia.edu/2018-spring/slides/coms4170-4-color-typ… · Lucida Bright: 1993, Charles Bigelow & Kris Holmes](https://reader034.vdocuments.us/reader034/viewer/2022050300/5f699e42a217b35b2e10b454/html5/thumbnails/63.jpg)
Which paths are easier to follow?
![Page 64: Goal 1 Build websites that suit the needs and abilities of ...coms4170.cs.columbia.edu/2018-spring/slides/coms4170-4-color-typ… · Lucida Bright: 1993, Charles Bigelow & Kris Holmes](https://reader034.vdocuments.us/reader034/viewer/2022050300/5f699e42a217b35b2e10b454/html5/thumbnails/64.jpg)
Continuity
We prefer smooth not abrupt changesConnections are clearer with smooth contours
![Page 65: Goal 1 Build websites that suit the needs and abilities of ...coms4170.cs.columbia.edu/2018-spring/slides/coms4170-4-color-typ… · Lucida Bright: 1993, Charles Bigelow & Kris Holmes](https://reader034.vdocuments.us/reader034/viewer/2022050300/5f699e42a217b35b2e10b454/html5/thumbnails/65.jpg)
What is the literal difference between a and b?
![Page 66: Goal 1 Build websites that suit the needs and abilities of ...coms4170.cs.columbia.edu/2018-spring/slides/coms4170-4-color-typ… · Lucida Bright: 1993, Charles Bigelow & Kris Holmes](https://reader034.vdocuments.us/reader034/viewer/2022050300/5f699e42a217b35b2e10b454/html5/thumbnails/66.jpg)
What is the perceived difference between a and b?
![Page 67: Goal 1 Build websites that suit the needs and abilities of ...coms4170.cs.columbia.edu/2018-spring/slides/coms4170-4-color-typ… · Lucida Bright: 1993, Charles Bigelow & Kris Holmes](https://reader034.vdocuments.us/reader034/viewer/2022050300/5f699e42a217b35b2e10b454/html5/thumbnails/67.jpg)
Closure
![Page 68: Goal 1 Build websites that suit the needs and abilities of ...coms4170.cs.columbia.edu/2018-spring/slides/coms4170-4-color-typ… · Lucida Bright: 1993, Charles Bigelow & Kris Holmes](https://reader034.vdocuments.us/reader034/viewer/2022050300/5f699e42a217b35b2e10b454/html5/thumbnails/68.jpg)
Illusory contours
![Page 69: Goal 1 Build websites that suit the needs and abilities of ...coms4170.cs.columbia.edu/2018-spring/slides/coms4170-4-color-typ… · Lucida Bright: 1993, Charles Bigelow & Kris Holmes](https://reader034.vdocuments.us/reader034/viewer/2022050300/5f699e42a217b35b2e10b454/html5/thumbnails/69.jpg)
What do you see?
![Page 70: Goal 1 Build websites that suit the needs and abilities of ...coms4170.cs.columbia.edu/2018-spring/slides/coms4170-4-color-typ… · Lucida Bright: 1993, Charles Bigelow & Kris Holmes](https://reader034.vdocuments.us/reader034/viewer/2022050300/5f699e42a217b35b2e10b454/html5/thumbnails/70.jpg)
Figure/Ground
Principle of Relative Size
![Page 71: Goal 1 Build websites that suit the needs and abilities of ...coms4170.cs.columbia.edu/2018-spring/slides/coms4170-4-color-typ… · Lucida Bright: 1993, Charles Bigelow & Kris Holmes](https://reader034.vdocuments.us/reader034/viewer/2022050300/5f699e42a217b35b2e10b454/html5/thumbnails/71.jpg)
Figure/Ground
![Page 72: Goal 1 Build websites that suit the needs and abilities of ...coms4170.cs.columbia.edu/2018-spring/slides/coms4170-4-color-typ… · Lucida Bright: 1993, Charles Bigelow & Kris Holmes](https://reader034.vdocuments.us/reader034/viewer/2022050300/5f699e42a217b35b2e10b454/html5/thumbnails/72.jpg)
Figure/Ground
Principle of Surroundedness
![Page 73: Goal 1 Build websites that suit the needs and abilities of ...coms4170.cs.columbia.edu/2018-spring/slides/coms4170-4-color-typ… · Lucida Bright: 1993, Charles Bigelow & Kris Holmes](https://reader034.vdocuments.us/reader034/viewer/2022050300/5f699e42a217b35b2e10b454/html5/thumbnails/73.jpg)
8 Gestalt Principles
73
![Page 74: Goal 1 Build websites that suit the needs and abilities of ...coms4170.cs.columbia.edu/2018-spring/slides/coms4170-4-color-typ… · Lucida Bright: 1993, Charles Bigelow & Kris Holmes](https://reader034.vdocuments.us/reader034/viewer/2022050300/5f699e42a217b35b2e10b454/html5/thumbnails/74.jpg)
Summary
![Page 75: Goal 1 Build websites that suit the needs and abilities of ...coms4170.cs.columbia.edu/2018-spring/slides/coms4170-4-color-typ… · Lucida Bright: 1993, Charles Bigelow & Kris Holmes](https://reader034.vdocuments.us/reader034/viewer/2022050300/5f699e42a217b35b2e10b454/html5/thumbnails/75.jpg)
The human brain is always perceiving meaning (even when it is not intended)
75
Color Font Gestalt
![Page 76: Goal 1 Build websites that suit the needs and abilities of ...coms4170.cs.columbia.edu/2018-spring/slides/coms4170-4-color-typ… · Lucida Bright: 1993, Charles Bigelow & Kris Holmes](https://reader034.vdocuments.us/reader034/viewer/2022050300/5f699e42a217b35b2e10b454/html5/thumbnails/76.jpg)
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