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

A Philosophy of Restraint

Simon Collison
September 10, 2012

A Philosophy of Restraint

Variant of a talk given at An Event Apart (Seattle), ESAD (Porto), Webshaped (Helsinki), Refresh (Edinburgh), and Reasons Festival (Brighton) during 2012. Some slides of work in progress removed.

With a wealth of ideas and tools at our disposal, we often muddle our messages and complicate our code.

We appreciate that less is usually more, yet stuff our sites to bursting point, failing to be economical with what we have.

We must know when to stop, and when to throw things out. We should embrace simplicity and subtlety, and exploit the invisible.

Through timeless lessons and practical examples, learn how reduction and restraint can improve communication, emotion, and experience in our designs, with a philosophy applicable to every aspect of the systems we produce.

Simon Collison

September 10, 2012
Tweet

More Decks by Simon Collison

Other Decks in Design

Transcript

  1. Simon Collison
    Refresh Edinburgh | July 2012
    A philosophy of
    restraint

    View full-size slide

  2. Why call it
    a philosophy?

    View full-size slide

  3. Design is messy

    View full-size slide

  4. We design to communicate,
    and we seek emotive responses.

    View full-size slide

  5. To delight someone is to give them a
    small lesson in seeing the world as
    something good.
    Frank Chimero, designer

    View full-size slide

  6. A design aesthetic?

    View full-size slide

  7. Minimal, lots of white space...
    and clean. Right?

    View full-size slide

  8. www.foodsense.is

    View full-size slide

  9. www.guardian.co.uk

    View full-size slide

  10. www.webdesignerwall.com

    View full-size slide

  11. We don’t design web pages.
    We design systems.

    View full-size slide

  12. www.bbc.co.uk/gel

    View full-size slide

  13. www.bbc.co.uk/gel

    View full-size slide

  14. • Build a foundation for complexity
    • Devise a holistic approach for all projects
    • Devise a detailed project-specific system
    • Invest time in flexible pa ern libraries
    • Prepare for all eventualities

    View full-size slide

  15. Embrace
    constraints

    View full-size slide

  16. Having complete freedom is
    possibly the worst way to start
    any project.

    View full-size slide

  17. Constraint is key to understanding complexity.
    Increase constraint and you create an ordered
    system; do that inappropriately and you create
    the conditions for catastrophic failure; remove
    constraint and the system is chaotic.
    Dave Snowden, The 5 C’s of Complexity

    View full-size slide

  18. • Make sense of the constraints you’re given
    • Look for constraints you yourself can apply
    • Make constraints a feature or selling point

    View full-size slide

  19. Exercising
    restraint

    View full-size slide

  20. Responding to the problem in
    the simplest way possible.

    View full-size slide

  21. • Immerse yourself in the subject
    • Design responses first, not a website
    • Discover what can be put to one side
    • Avoid misplaced vernacular and cliché

    View full-size slide

  22. Simplicity
    and
    complexity

    View full-size slide

  23. Less is more. Simple is be er.
    Right?

    View full-size slide

  24. Unleash complexity in
    orchestrated phases, and
    increase power gradually.

    View full-size slide

  25. • Good systems bear the weight of complexity
    • Embrace new methods for organising data
    • Find simplicity in the data flows
    • Don’t be afraid of obvious approaches
    • Release power gradually

    View full-size slide

  26. Between the lines

    View full-size slide

  27. Don’t underestimate humans.
    They can fill in the blanks.

    View full-size slide

  28. Environment
    Experience
    Others
    Me
    Instruction
    Interaction

    View full-size slide

  29. The Arrival, by Shaun Tan

    View full-size slide

  30. • Anticipate mental models
    • Reveal only what is necessary
    • Let users find their own stories
    • Embrace serendipity
    • Trust users to make sense of things

    View full-size slide

  31. Affordance &
    typography

    View full-size slide

  32. An affordance is a quality of an
    object, or an environment, that
    allows an individual to perform
    an action.

    View full-size slide

  33. www.flightcardapp.com/

    View full-size slide

  34. www.typekit.com

    View full-size slide

  35. é
    é
    www.secondandpark.com/

    View full-size slide

  36. • Understand the power of a ractiveness
    • Create obvious opportunities for interaction
    • Avoid unnecessary fakery and over-texturing
    • Don’t “iCal” the skeuomorphics
    • Use web type responsibly

    View full-size slide

  37. www.bbc.co.uk

    View full-size slide

  38. www.icelandair.com/

    View full-size slide

  39. www.jetblue.com/

    View full-size slide

  40. • Use a clear hierarchy
    • Look for obvious clashes or fussy extras
    • Remove or lessen the impact of distractions
    • Avoid dozens of competing pa erns
    • Don’t disguise calls to action

    View full-size slide

  41. Focus & context

    View full-size slide

  42. Put the extraneous to one side.
    Focus on the task in hand, or add greater
    emphasis to stories.

    View full-size slide

  43. www.thebolditalic.com/ www.gregorywood.co.uk /

    View full-size slide

  44. • Design with context and tell the story
    • Allow users to focus
    • Split complex tasks into manageable chunks
    • Don’t compromise primary areas
    • Remove distractions at key times
    • Forms can always be simplified

    View full-size slide

  45. A timely audit can prevent
    catastrophic failures, and shine
    new light on what you’ve learned.

    View full-size slide

  46. • Add breathing space to your schedule
    • Make regular audits a part of your process
    • Be honest about shortcomings or failures
    • Never be afraid to rethink and rework

    View full-size slide

  47. A final pause

    View full-size slide

  48. Don’t launch. Instead, sit with
    your work, think about it. Sieve
    it down and give it space.

    View full-size slide

  49. www.colly.com/

    View full-size slide

  50. • Sit with your ‘finished’ work for some time
    • Stand back from it, find new perspectives
    • Seek valued opinion and feedback
    • Find things to throw away or reduce
    • Launch only when you are ready

    View full-size slide

  51. This is my
    philosophy

    View full-size slide

  52. delight / emotion / surprise
    systems / constraint / restraint
    simplicity / complexity / focus
    context / reduction

    View full-size slide

  53. Thanks
    Simon Collison
    @colly

    View full-size slide