Colour Science Typography Frontend Dev

Transcription

1 Colour Science Typography Frontend Dev

2 Name Kevin Eger Who am I? Why should you listen to anything I say? Summary

3 What the next hour of your life looks like Colour Science Typography Frontend Dev Human Vision What is colour? Emotion Perception Conservation How colour relates to more than design Brief history Digital type Core components Modern technologies Where/how easy it is to start You guys try and make me look like an idiot

4 Vision Rods Responsible for detecting overall brightness Cons Three types (RGB) that are sensitive to different frequencies of light Human Vision Optimized for detecting contrast or edges, not absolute brightness Crashiest of crash courses in vision

5 Peripheral Vision Cone cells are packed tightly in the center of our visual field and sparsely in the periphery of the retinal The distribution not only affects spatial resolution, but also color resolution. Easier to discriminate colours at the center of our visual fields ~120*10^6 rods ~6*10^6 cones Peripheral vision has two main functions: cues to where to look next and detecting motion.

6 What is Colour?

7 Describing Colour Hue: another word for colour Saturation (chroma): intensity or purity of a hue Lightness (value): relative degree of black or white in a hue

8 The Spectrum 3 cones for colours Red, green and blue

9 Colour blindness There is no actual blindness but there is a deficiency of color vision

10 Colour blindness Monochromacy Having only one type of cone cell Dichromacy One of the three colour mechanisms is absent Therefore they can match any color but are mixing two primary colours instead of the standard 3

11

12

13 Colour blindness facts Color blindness is more prevalent among males than females, because the most common form of color vision deficiency is encoded on the X sex chromosome. About 8% of all men are suffering from color blindness About 0.5% of all women are suffering from color blindness Dogs are not colourblind

14 Browser Statistics:

15

16 If we continue to develop for the 7% of losers on, we should develop for the 8% of males with colour blindness

17 separation

18 distance

19

20

21

22

23

24 Colour Schemes Monochromatic Varying saturation of one hue Complementary Hues on opposing sides of the colour wheel Analogous Adjacent hues on the colour wheel Triadic Three colours selected from equidistant location on the colour wheel

25 The importance of contrast

26 Conserving colour

27 Importance of colour themes...beyond design

28 Don t be a spaghetti coder And don t be a disgusting designer Takeaway from this lecture how to not pick absolutely terrible colour combinations You don t have to be a designer to make easy and reasonable colour choices Even if you don t care about design, the benefits of putting the extra 30 seconds into basic colour choices will be well worth it

29

30

31 Colour theming your IDE for programming Most studies show dark characters on a light background are superior to light characters on a dark background (when the refresh rate is high) Participants were 26% more accurate in reading text when they read it with dark characters on a light background Reference: Bauer, D., & Cavonius, C., R. (1980). Improving the legibility of visual display units through contrast reversal. In E. Grandjean, E. Vigliani (Eds.), Ergonomic Aspects of Visual Display Terminals (pp ). London: Taylor & Francis

32 Colour theming your IDE for programming Why does the colour theme matter? Focus White stimulates all three types of cones in nearly equal amounts causing the eye to focus by tightening the iris. Since the eye is focused, dark letter forms on light background are easier to read When using dark backgrounds with strong light letter forms, the iris opens to allow more light in but causes blur.

33 Typing express words and ideas visually

34 Johannes Gutenberg The father of typography Books needed to be writed by hand which was very time consuming and expensive Enters Blackletter Thick vertical lines and thin connecting horizontal lines Looked nice in writing, but dense and compressed with printing

35 Roman Type Created by Nicolas Jenson 15th century Based on straight lines with regular curves Much easier to read than Blackletter

36 Instant Success

37 italics next major innovation in typography

38 italics Slanted and stylized versions of Roman Type Created in the late 15th century to fit more letters on to a page and save money Italics are now used for emphasis Typing stayed the same until the 18th century

39 Sans Serif Caslon s son (Caslon IV) got sick of all the nibs on letters, chopped them off and coined the term Sans Serif Despite it being crazy popular (and almost standard) today, it didn t catch on immediately.

40 Arial Arial Helvetica

41 Digital Type

42 Steve Jobs Putting human beauty into the formerly cold, pixelized world of computing

43 Jobs and calligraphy Jobs took a calligraphy class which is largely responsible for his inspiration that shifted computing typefaces as we know them today Jobs wanted Palladino s (his calligraphy professor s) insight on Greek letters, telling his former instructor he was working on computers in his parents garage. He introduced me to the mouse. I had never seen one before, Palladion says

44 What Jobs actually did for typography First to give a choice of fonts Ability to express ourselves digitally Emotion Clarity Variety Before the Macintosh of 1984, most primitive word processors offered up one dull face Competitors copies and printers marketed on not only speed but their font variety

45 Frontend Development

46

47

48 Thank you! Kevin Eger