A presentation at Frontend Conference Zurich 2012 in in Zürich, Switzerland by Denys Mishunov
SCIENCE of DESIGN Denys Mishunov • fastname.no • @mishunov
“The best way to accomplish serious design … is to be totally and completely unqualified for the job” Paula Scher
WHY DESIGN?
by James Young The lack of a static design phase
DESIGN = communication
DESIGN = communication "We are designers, not artists; the main difference being that we produce things that solve problems." Paul Boag
DESIGN PRINCIPLES
PROPORTION a b
"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…
… 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"
… 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 “Zero: The Biography of a Dangerous Idea” 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…
WTF? Ippaso di Metaponto, filosofo 2 √ 1 1
Square root of 2 1:1.41
Babylonian clay tablet YBC 7289 with annotations (c. 1800–1600 BCE)
Divine Proportion 1:1.618 Photo © Christopher Fay
Golden Section C a b a=C b a
Pythagoras 6th century BC
Euclid 3rd century BC
Golden Rectangle a × 1.61803398 a
Golden Spiral
Leonardo of Pisa (Fibonacci) Liber Abaci (1202)
A long time ago in a galaxy far, far away....
Perect Fifth From Wikipedia. Created by Hyacinth using Sibelius 5
Rule of Thirds 2:3
3:4 Square root of 3 5:8 3:5 anything:anything
WHY?
NATURE
BRAIN
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]
SIMILARITY
COLOR
SIZE
SHAPE
WHY?
GESTALT psychology
“The good thing about science is that it's true whether or not you believe in it.” Neil deGrasse Tyson
“Physics is like Sex: sure it may have some practical results. But that's not why we do it.” Richard P.Feynman
DIRECTION
WHY?
BRAIN
Neuroscience Research Techniques @Facebook
CONTRAST
CONTRAST Similarity Direction Color more
WHY?
when building the imperial "In"Even everything, no matter what it palace, they always leave one place may be, uniformity is undesirable" unfinished." "Leaving something incomplete makes it interesting, and gives one the feeling that there is room for growth" Yoshida Kenko 1330 – 1332
BRAIN yes, again, again and again
Proportion Similarity Direction Contrast
RHYTHM COLOR
Matt Walford mattwalford.co.uk
Matt Walford mattwalford.co.uk
De Jong Attractor xn+1 = sin(a yn) - cos(b xn) yn+1 = sin(c xn) - cos(d yn) Show me more!
Lorenz Attractor dx/dt = σ(y-x), dy/dt = x(ρ-z) - y, dz/dt = xy - βz Show me more!
Don’t be afraid of new challenges
“If we want better sites, better work, and betterinformed clients, the need to educate begins with us.” Jeffery Zeldman
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 Philharmonic” (comp. John Williams) “The Way You Look Tonight” by Frank Sinatra @mishunov · http://mishunov.me · CodePen
for free. You
can too.