Frontend Conference Zurich, 6-7 September, 2012

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

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

3. WHY DESIGN?

4. by James Young
The lack of a static design phase

5. DESIGN
=
communication

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

7. DESIGN
PRINCIPLES

8. PROPORTION
a b

9. "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…

10. … 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"

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

12. WTF?
√ 2
1
Ippaso di Metaponto, filosofo
1

13. Square root of 2
1:1.41

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

16. Divine Proportion
1:1.618
Photo © Christopher Fay

17. Golden Section
C
a b
a=C
b a

18. Pythagoras
6th century BC

19. Euclid
3rd century BC

20. Golden Rectangle
a × 1.61803398
a

21. Golden Spiral

22. Leonardo
of Pisa
(Fibonacci)
Liber Abaci (1202)

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

25. Perect Fifth
From Wikipedia. Created by Hyacinth using Sibelius 5

26. Rule of Thirds
2:3

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

29. WHY?

30. NATURE

32. BRAIN

33. 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]

34. SIMILARITY

35. COLOR

36. SIZE

37. SHAPE

41. WHY?

42. GESTALT
psychology

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

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

45. DIRECTION

49. WHY?

50. BRAIN

51. Neuroscience Research Techniques @Facebook

52. CONTRAST

53. CONTRAST Similarity
Direction
Color
more

57. WHY?

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

59. BRAIN
yes, again,
again
and again

60. Proportion
Similarity
Direction
Contrast

61. RHYTHM
COLOR

62. Matt Walford
mattwalford.co.uk

63. Matt Walford
mattwalford.co.uk

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

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

67. Don’t be afraid of
new challenges

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

69. 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