Science of Design

Frontend Conference Zurich, 6-7 September, 2012

Transcript

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

   View Slide

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

   View Slide

3. WHY DESIGN?
   

   View Slide

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

   View Slide

5. DESIGN
   =
   communication
   

   View Slide

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

   View Slide

7. DESIGN
   PRINCIPLES
   

   View Slide

8. PROPORTION
   a b
   

   View Slide

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…
   

   View Slide

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"
    

    View Slide

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
    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”
    

    View Slide

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

    View Slide

13. Square root of 2
    1:1.41
    

    View Slide

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

    View Slide

15. View Slide

16. Divine Proportion
    1:1.618
    Photo © Christopher Fay
    

    View Slide

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

    View Slide

18. Pythagoras
    6th century BC
    

    View Slide

19. Euclid
    3rd century BC
    

    View Slide

20. Golden Rectangle
    a
    a 1.61803398
    ×
    

    View Slide

21. Golden Spiral
    

    View Slide

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

    View Slide

23. View Slide

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

    View Slide

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

    View Slide

26. Rule of Thirds
    2:3
    

    View Slide

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

    View Slide

28. View Slide

29. WHY?
    

    View Slide

30. NATURE
    

    View Slide

31. View Slide

32. BRAIN
    

    View Slide

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

    View Slide

34. SIMILARITY
    

    View Slide

35. COLOR
    

    View Slide

36. SIZE
    

    View Slide

37. SHAPE
    

    View Slide

38. View Slide

39. View Slide

40. View Slide

41. WHY?
    

    View Slide

42. GESTALT
    psychology
    

    View Slide

43. “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.”
    

    View Slide

44. “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.”
    

    View Slide

45. DIRECTION
    

    View Slide

46. View Slide

47. View Slide

48. View Slide

49. WHY?
    

    View Slide

50. BRAIN
    

    View Slide

51. Neuroscience Research Techniques @Facebook
    

    View Slide

52. CONTRAST
    

    View Slide

53. Similarity
    Direction
    Color
    more
    CONTRAST
    

    View Slide

54. View Slide

55. View Slide

56. View Slide

57. WHY?
    

    View Slide

58. "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
    

    View Slide

59. BRAIN
    yes, again,
    again
    and again
    

    View Slide

60. Proportion
    Similarity
    Direction
    Contrast
    

    View Slide

61. RHYTHM
    COLOR
    

    View Slide

62. Matt Walford
    mattwalford.co.uk
    

    View Slide

63. Matt Walford
    mattwalford.co.uk
    

    View Slide

64. View Slide

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

    View Slide

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

    View Slide

67. Don’t be afraid of
    new challenges
    

    View Slide

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

    View Slide

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

    View Slide