Science of Design 2

"Science of Design", the-treasure-of-frontend-island edition.
September 21, 2012, Bologna, IT

Transcript

1. SCIENCE
   of DESIGN
   Denys Mishunov • @mishunov
   

   View Slide

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

   View Slide

3. Geometry Psychology
   Neuroscience
   DESIGN
   

   View Slide

4. PROPORTION
   

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

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

   View Slide

7. Pythagoras
   6th century BC
   

   View Slide

8. View Slide

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

   View Slide

10. View Slide

11. Perect Fifth
    

    View Slide

12. screenshot of iPhone
    

    View Slide

13. View Slide

14. http://www.studioairport.nl/
    

    View Slide

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

    View Slide

16. 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]
    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]
    Screens proportions
    

    View 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"
    

    View 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"
    

    View Slide

19. Neuroscience
    Geometry
    Psychology
    DESIGN
    

    View Slide

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

    View Slide

21. GESTALT
    psychology
    

    View Slide

22. PROXIMITY
    

    View Slide

23. COLOR
    SIMILARITY
    in
    

    View Slide

24. SIZE
    SIMILARITY
    in
    

    View Slide

25. SHAPE
    SIMILARITY
    in
    

    View Slide

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

    View Slide

27. View Slide

28. grabaperch.com
    

    View Slide

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

    View Slide

30. Geometry
    Psychology
    Neuroscience
    DESIGN
    

    View Slide

31. Eye
    Visual Cortex
    COLOR
    

    View Slide

32. CONTRAST
    

    View Slide

33. Similarity
    Direction
    Color
    more
    CONTRAST
    

    View Slide

34. arngren.net
    

    View Slide

35. View Slide

36. mailchimp.com
    

    View 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
    

    View Slide

38. DON’T
    be
    afraid
    of new
    CHALLENGES
    

    View Slide

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

    View Slide

40. 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 Philarmonic” (comp. John Williams)
    Music
    @mishunov · http://mishunov.me · CodePen
    

    View Slide