Science of Design - Speaker Deck

Slide 1

Slide 1 text

SCIENCE of DESIGN Denys Mishunov • fastname.no • @mishunov

Slide 2

Slide 2 text

“The best way to accomplish serious design … is to be totally and completely unqualified for the job” Paula Scher

Slide 3

Slide 3 text

WHY DESIGN?

Slide 4

Slide 4 text

The lack of a static design phase by James Young

Slide 5

Slide 5 text

DESIGN = communication

Slide 6

Slide 6 text

DESIGN = communication "We are designers, not artists; the main difference being that we produce things that solve problems." Paul Boag

Slide 7

Slide 7 text

DESIGN PRINCIPLES

Slide 8

Slide 8 text

PROPORTION a b

Slide 9

Slide 9 text

"The page is a piece of paper. It is also a visible and tangible proportion, silently sounding the thoroughbass of the book. On it lies the textblock, which must answer to the page… The two together – page and textblock – produce an antiphonal geometry…

Slide 10

Slide 10 text

… That geometry alone can bond the reader to the book. Or conversely, it can put the reader to sleep, or put the reader’s nerves on edge, or drive the reader away." Robert Bringhurst "The Elements of Typographical Style"

Slide 11

Slide 11 text

… Hippasus of Metapontum stood on the deck preparing to die. Around him stood the members of a cult, a secret brotherhood that he had betrayed. Hippasus had revealed a secret that was deadly to the Greek way of thinking, a secret that threatened to undermine the entire philosophy that the brotherhood had struggled to build. For revealing that secret, the great Pythagoras himself sentenced Hippasus to death by drowning. To protect their number-philosophy, the cult would kill… Charles Seife “Zero: The Biography of a Dangerous Idea”

Slide 12

Slide 12 text

WTF? Ippaso di Metaponto, filosofo 1 1 √2

Slide 13

Slide 13 text

Square root of 2 1:1.41

Slide 14

Slide 14 text

Babylonian clay tablet YBC 7289 with annotations (c. 1800–1600 BCE)

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

Divine Proportion 1:1.618 Photo © Christopher Fay

Slide 17

Slide 17 text

Golden Section a b C a b C a =

Slide 18

Slide 18 text

Pythagoras 6th century BC

Slide 19

Slide 19 text

Euclid 3rd century BC

Slide 20

Slide 20 text

Golden Rectangle a a 1.61803398 ×

Slide 21

Slide 21 text

Golden Spiral

Slide 22

Slide 22 text

Leonardo of Pisa (Fibonacci) Liber Abaci (1202)

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

A long time ago in a galaxy far, far away....

Slide 25

Slide 25 text

Perect Fifth From Wikipedia. Created by Hyacinth using Sibelius 5

Slide 26

Slide 26 text

Rule of Thirds 2:3

Slide 27

Slide 27 text

3:4 Square root of 3 5:8 3:5 anything:anything

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

WHY?

Slide 30

Slide 30 text

NATURE

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

BRAIN

Slide 33

Slide 33 text

Screens proportions HDTV, iMac – 16:9 [0.56] Google Nexus One, Nexus S – 3:5 [0.6] MacBook Pro – 5:8 [0.625] iPhone – 2:3 [0.66] iPad, Kindle – 3:4 [0.75] HDTV, iMac – 16:9 [0.56] Google Nexus One, Nexus S – 3:5 [0.6] MacBook Pro – 5:8 [0.625] iPhone – 2:3 [0.66] iPad, Kindle – 3:4 [0.75]

Slide 34

Slide 34 text

SIMILARITY

Slide 35

Slide 35 text

COLOR

Slide 36

Slide 36 text

SIZE

Slide 37

Slide 37 text

SHAPE

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

WHY?

Slide 42

Slide 42 text

GESTALT psychology

Slide 43

Slide 43 text

“The good thing about science is that it's true whether or not you believe in it.” Neil deGrasse Tyson “The good thing about science is that it's true whether or not you believe in it.”

Slide 44

Slide 44 text

“Physics is like Sex: sure it may have some practical results. But that's not why we do it.” Richard P.Feynman “Physics is like Sex: sure it may have some practical results. But that's not why we do it.”

Slide 45

Slide 45 text

DIRECTION

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

WHY?

Slide 50

Slide 50 text

BRAIN

Slide 51

Slide 51 text

Neuroscience Research Techniques @Facebook

Slide 52

Slide 52 text

CONTRAST

Slide 53

Slide 53 text

Similarity Direction Color more CONTRAST

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

WHY?

Slide 58

Slide 58 text

"In everything, no matter what it may be, uniformity is undesirable" "Leaving something incomplete makes it interesting, and gives one the feeling that there is room for growth" "Even when building the imperial palace, they always leave one place unfinished." Yoshida Kenko 1330 – 1332

Slide 59

Slide 59 text

BRAIN yes, again, again and again

Slide 60

Slide 60 text

Proportion Similarity Direction Contrast

Slide 61

Slide 61 text

RHYTHM COLOR

Slide 62

Slide 62 text

Matt Walford mattwalford.co.uk

Slide 63

Slide 63 text

Matt Walford mattwalford.co.uk

Slide 64

Slide 64 text

No content

Slide 65

Slide 65 text

xn+1 = sin(a yn ) - cos(b xn ) yn+1 = sin(c xn ) - cos(d yn ) De Jong Attractor Show me more!

Slide 66

Slide 66 text

Lorenz Attractor dx /dt = σ(y-x), dy /dt = x(ρ-z) - y, dz /dt = xy - βz Show me more!

Slide 67

Slide 67 text

Don’t be afraid of new challenges

Slide 68

Slide 68 text

“If we want better sites, better work, and better- informed clients, the need to educate begins with us.” Jeffery Zeldman

Slide 69

Slide 69 text

THANK YOU “Give Me Glory” by Kimberly Geswein “Sketch Rockwell” by Lukas Bischoff Typefaces “A Necessary End” by Saltillo “Star Wars: A New Hope (Main Theme)” by “City of Prague Philharmonic” (comp. John Williams) “The Way You Look Tonight” by Frank Sinatra Music @mishunov · http://mishunov.me · CodePen