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

Digital Design for Humans

Mattijs Bliek
September 14, 2015

Digital Design for Humans

Slides for my talk in Ghana

Mattijs Bliek

September 14, 2015
Tweet

More Decks by Mattijs Bliek

Other Decks in Design

Transcript

  1. Digital Design for Humans
    @mattijsbliek
    designer & developer
    Photo: Adam Magyar

    View full-size slide

  2. Amsterdam, Netherlands

    View full-size slide

  3. We are a user centred
    creative agency

    View full-size slide

  4. We work for organisations
    we believe in

    View full-size slide

  5. Show me some work!

    View full-size slide

  6. CMD Amsterdam

    View full-size slide

  7. Filmhuis Den Haag

    View full-size slide

  8. Why am I here today?

    View full-size slide

  9. 1.
    What is design?

    View full-size slide

  10. Design is the creation of a
    plan or convention for the
    construction of an object or
    a system
    https://en.wikipedia.org/wiki/Design

    View full-size slide

  11. (I don’t know what that means…)

    View full-size slide

  12. Design is coming up with a
    plan to achieve a certain
    goal

    View full-size slide

  13. But design can never live
    on it’s own. It has to serve
    a purpose.

    View full-size slide

  14. So as a designer, you’re
    always collaborating

    View full-size slide

  15. If somebody tells you to
    build a bridge, ask them
    why they want a bridge?

    View full-size slide

  16. Knowing why allows you to
    make the best decision for
    this specific situation

    View full-size slide

  17. Asking questions
    may be hard, but it
    is also necessary

    View full-size slide

  18. Design is about solving
    problems

    View full-size slide

  19. To solve these
    problems, you have to
    know the variables

    View full-size slide

  20. Ask why.
    And ask it often.

    View full-size slide

  21. 2.
    Why is design
    important?

    View full-size slide

  22. Design is the glue that
    binds everything
    together

    View full-size slide

  23. Design can help people
    understand things
    easier

    View full-size slide

  24. Design can turn this:

    View full-size slide

  25. But design can also
    completely destroy a
    product or service

    View full-size slide

  26. Design is not art

    View full-size slide

  27. For art it is ok to just be
    beautiful. Design can never
    just be beautiful, it has to
    have a function.

    View full-size slide

  28. Design is 95% science
    and 5% art

    View full-size slide

  29. Design is your main way
    of telling people
    something without
    writing it

    View full-size slide

  30. That’s a powerful thing

    View full-size slide

  31. 3.
    The evolution of
    digital design

    View full-size slide

  32. 1996
    Cascading Style Sheets, level 1
    W3C Recommendation 17 Dec 1996

    View full-size slide

  33. https://web.archive.org/web/20020831071812/http://www.tolerance.org/
    2002

    View full-size slide

  34. http://216.139.218.247/sites/marines/
    2002

    View full-size slide

  35. For a while, visual design
    and content were almost at
    war with each other

    View full-size slide

  36. In 2007 something
    happened which took the
    web into a new direction

    View full-size slide

  37. The iPhone had no support
    for Flash

    View full-size slide

  38. HTML, CSS, JavaScript
    Open standards

    View full-size slide

  39. But open standards
    couldn’t do all that Flash
    could do. This meant they
    needed to evolve. Fast.

    View full-size slide

  40. Responsive Web Design
    2010

    View full-size slide

  41. This gave the web an
    advantage that apps didn’t
    have

    View full-size slide

  42. Will apps rule the world?

    View full-size slide

  43. Upsides to apps
    • Easy access from the homescreen
    • Push notifications
    • Can (partially) work offline
    • Complete control over the experience
    • Access to hardware of the device

    View full-size slide

  44. But apps also have a lot of
    downsides compared to
    the web

    View full-size slide

  45. Downsides to apps
    • Platform and device specific
    • Require installation
    • Harder to find
    • You cannot easily link to things outside the app
    • Users have to update manually
    • Updates required with each OS update

    View full-size slide

  46. So the web is still here
    today.

    View full-size slide

  47. It isn’t apps vs. web

    View full-size slide

  48. It is apps + web, and they
    learn from each other

    View full-size slide

  49. 4.
    Democratisation
    of design

    View full-size slide

  50. Becoming a designer is
    easier today then it was
    ever before

    View full-size slide

  51. Lots of resources are
    available for free online.
    Use them.

    View full-size slide

  52. Designer News

    View full-size slide

  53. Access to experts is easy,
    even though they might be
    on the other side of the
    globe

    View full-size slide

  54. Read, read, read.
    Then read some more.

    View full-size slide

  55. All you really need is a
    computer, an internet
    connection, and being able
    to read and write English

    View full-size slide

  56. You don’t have to be the
    next Facebook. But you can
    definitely help solve some
    of Ghana’s problems.

    View full-size slide

  57. 5.
    Five rules I try
    to live by

    View full-size slide

  58. 1.
    Less is more

    View full-size slide

  59. ‘Everything is important!’

    View full-size slide

  60. It’s not. Really.

    View full-size slide

  61. Tell one story

    View full-size slide

  62. More visual examples

    View full-size slide

  63. Estimated power plant
    electricity costs
    Value Axis
    0
    5
    10
    15
    20
    One Two Three Four Five Six

    View full-size slide

  64. In the digital world,
    space is free

    View full-size slide

  65. Simple is easy to
    understand, simple is
    good

    View full-size slide

  66. 2.
    Do one
    thing well

    View full-size slide

  67. Your app or website
    doesn’t have to do 5 things

    View full-size slide

  68. But the one thing it does
    do, it needs to do
    extraordinarily well

    View full-size slide

  69. Unix philosophy

    View full-size slide

  70. In the digital world, there is
    no room for seconds

    View full-size slide

  71. So keep your focus on the
    one thing you need to do
    well

    View full-size slide

  72. 3.
    Mobile first

    View full-size slide

  73. It’s a mobile world

    View full-size slide

  74. Scaling up is much easier
    than scaling down

    View full-size slide

  75. 4.
    Performance
    is king

    View full-size slide

  76. I believe the next few years
    are going to be all about
    performance

    View full-size slide

  77. Why does performance
    matter?

    View full-size slide

  78. Internet users in 2009
    expected web pages to
    load twice as fast as they
    did in 2006

    View full-size slide

  79. More than 81 percent of all
    online video viewers click
    away if they encounter a
    video that's rebuffering

    View full-size slide

  80. Google: years of testing
    have shown that when
    speed (…) improves, usage,
    quite simply, goes up

    View full-size slide

  81. In A/B tests, Amazon tried
    delaying the page and found
    that even very small delays
    would result in substantial
    drops in revenue.

    View full-size slide

  82. So yeah, performance
    matters

    View full-size slide

  83. But as a designer, what can
    I do about performance?

    View full-size slide

  84. 1. Design for speed

    View full-size slide

  85. Maybe you don’t have to
    use five images, and one
    would be ok.

    View full-size slide

  86. If you have a form which
    contains an upload, maybe
    put it first so it can finish in
    the background

    View full-size slide

  87. 2. Increase perceived
    performance

    View full-size slide

  88. Perceived performance is
    how fast the user thinks
    your site is

    View full-size slide

  89. Think of Facebook showing
    people they ‘liked’
    something, without it being
    confirmed on the server

    View full-size slide

  90. 3. Communicate clearly
    when something is
    happening

    View full-size slide

  91. If I submit a form,
    let me know.

    View full-size slide

  92. Twitter hashtag for
    developers:
    #perfmatters

    View full-size slide

  93. 5.
    Design an
    experience

    View full-size slide

  94. Design is also about
    emotion, making people
    feel something

    View full-size slide

  95. Fritz Heider and Marianne Simmel, 1944
    youtube.com/watch?v=VTNmLt7QX8E

    View full-size slide

  96. youtube.com/watch?v=Q8TXgCzxEnw

    View full-size slide

  97. We’ve been making designs
    in these tools from start to
    finish for years

    View full-size slide

  98. There is no rule saying you
    have to use just one
    program

    View full-size slide

  99. Some interesting tools you
    might want to check out

    View full-size slide

  100. Adobe After Effects

    View full-size slide

  101. Use each tool where
    it fits best

    View full-size slide

  102. Hope you’re still awake

    View full-size slide

  103. Main takeaways
    • Look at other designs, what makes them good?
    • Read. Follow inspiring people.
    • Caring about your user is key.
    • Simplify, get to the core. Less is more.
    • Make it fast. Then make it faster.
    • Try new tools, find your own path.

    View full-size slide

  104. Thanks for listening!

    View full-size slide

  105. https://goo.gl/hV9JBY
    (new version will be up later)
    Slides
    [email protected]
    @mattijsbliek
    Contact details

    View full-size slide

  106. Resources
    • Smashing Magazine
    • SiteInspire
    • Awwwards
    • TutsPlus.com
    • Designer News
    • Dribbble
    • Little Big Details
    • UserOnboard
    Design
    • Github
    • CSSTricks
    • HTML5Rocks
    • Hacker News
    • DevDocs
    • JS For All of Us
    • Code Academy
    Development
    • Feedly for following sites and blogs
    • Pinterest for visual inspiration
    • Twitter for following people
    • medium.com for reading articles
    Other

    View full-size slide