Science of Design

A presentation at International PHP Conference 2013 in October 2013 in Munich, Germany by Denys Mishunov

Slide 1

Slide 1

SCIENCE of DESIGN Denys Mishunov • @mishunov

Slide 2

Slide 2

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

Slide 3

Slide 3

Geometry Psychology DESIGN Neuroscience

Slide 4

Slide 4

PROPORTION

Slide 5

Slide 5

… 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 Charles Seife undermine the entire philosophy that the brotherhood had struggled to build. For “Zero: The Biography of a Dangerous Idea” revealing that secret, the great Pythagoras himself sentenced Hippasus to death by drowning. To protect their number-philosophy, the cult would kill…

Slide 6

Slide 6

Arrr you kidding me? Ippaso di Metaponto, filosofo 2 √ 1 1

Slide 7

Slide 7

Pythagoras 6th century BC

Slide 8

Slide 8

Slide 9

Slide 9

http://www.invisiblecity.co.uk/

Slide 10

Slide 10

Slide 11

Slide 11

Perect Fifth

Slide 12

Slide 12

screenshot of iPhone

Slide 13

Slide 13

Slide 14

Slide 14

http://www.studioairport.nl/

Slide 15

Slide 15

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

Slide 16

Slide 16

Screens proportions HDTV, iMac, iPhone5 – 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 17

Slide 17

"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 … Robert Bringhurst "The Elements of Typographical Style"

Slide 18

Slide 18

… produce an antiphonal geometry. 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 19

Slide 19

Psychology Geometry DESIGN Neuroscience

Slide 20

Slide 20

  • Photo © Laszlo Bardos http://www.cutoutfoldup.com/ Max Wertheimer Zoetrope

Slide 21

Slide 21

GESTALT psychology

Slide 22

Slide 22

PROXIMITY

Slide 23

Slide 23

SIMILARITY in COLOR

Slide 24

Slide 24

SIMILARITY in SIZE

Slide 25

Slide 25

SIMILARITY in SHAPE

Slide 26

Slide 26

Photo from http://kristoff.web.elte.hu/ANG102/ANG102.htm

Slide 27

Slide 27

Slide 28

Slide 28

grabaperch.com

Slide 29

Slide 29

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

Slide 30

Slide 30

Geometry Psychology DESIGN Neuroscience

Slide 31

Slide 31

COLOR Eye Visual Cortex

Slide 32

Slide 32

CONTRAST

Slide 33

Slide 33

CONTRAST Similarity Direction Color more

Slide 34

Slide 34

arngren.net

Slide 35

Slide 35

Slide 36

Slide 36

mailchimp.com

Slide 37

Slide 37

"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" Yoshida Kenko 1330 – 1332

Slide 38

Slide 38

DON’T be afraid of new CHALLENGES

Slide 39

Slide 39

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

Slide 40

Slide 40

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