Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Science of Design 2

Denys Mishunov
September 21, 2012

Science of Design 2

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

Denys Mishunov

September 21, 2012
Tweet

More Decks by Denys Mishunov

Other Decks in Design

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