Digital Design for Humans

72635a06781143410d1ef4a25bf164ae?s=47 Mattijs Bliek
September 14, 2015

Digital Design for Humans

Slides for my talk in Ghana

72635a06781143410d1ef4a25bf164ae?s=128

Mattijs Bliek

September 14, 2015
Tweet

Transcript

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

    Magyar
  2. Amsterdam, Netherlands

  3. None
  4. None
  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. None
  14. None
  15. None
  16. None
  17. None
  18. None
  19. None
  20. None
  21. None
  22. None
  23. None
  24. None
  25. None
  26. None
  27. We are a user centred creative agency

  28. We work for organisations we believe in

  29. Show me some work!

  30. None
  31. Melkweg

  32. None
  33. None
  34. None
  35. None
  36. None
  37. None
  38. None
  39. None
  40. CMD Amsterdam

  41. None
  42. None
  43. None
  44. None
  45. Filmhuis Den Haag

  46. None
  47. None
  48. None
  49. None
  50. None
  51. None
  52. None
  53. None
  54. None
  55. None
  56. None
  57. None
  58. None
  59. None
  60. None
  61. None
  62. None
  63. None
  64. None
  65. None
  66. None
  67. None
  68. None
  69. None
  70. None
  71. None
  72. None
  73. None
  74. None
  75. None
  76. None
  77. None
  78. None
  79. None
  80. None
  81. None
  82. None
  83. None
  84. None
  85. Why am I here today?

  86. 1. What is design?

  87. Design is the creation of a plan or convention for

    the construction of an object or a system https://en.wikipedia.org/wiki/Design
  88. (I don’t know what that means…)

  89. Design is coming up with a plan to achieve a

    certain goal
  90. None
  91. None
  92. But design can never live on it’s own. It has

    to serve a purpose.
  93. None
  94. So as a designer, you’re always collaborating

  95. None
  96. Why?

  97. If somebody tells you to build a bridge, ask them

    why they want a bridge?
  98. Knowing why allows you to make the best decision for

    this specific situation
  99. Asking questions may be hard, but it is also necessary

  100. Design is about solving problems

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

  102. Ask why. And ask it often.

  103. 2. Why is design important?

  104. Design is the glue that binds everything together

  105. None
  106. None
  107. None
  108. Design can help people understand things easier

  109. Design can turn this:

  110. None
  111. Into this:

  112. None
  113. But design can also completely destroy a product or service

  114. Design is not art

  115. For art it is ok to just be beautiful. Design

    can never just be beautiful, it has to have a function.
  116. Design is 95% science and 5% art

  117. Design is your main way of telling people something without

    writing it
  118. That’s a powerful thing

  119. 3. The evolution of digital design

  120. 1991

  121. 1993

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

    1996
  123. 1998

  124. None
  125. None
  126. None
  127. https://web.archive.org/web/20020831071812/http://www.tolerance.org/ 2002

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

  129. For a while, visual design and content were almost at

    war with each other
  130. In 2007 something happened which took the web into a

    new direction
  131. 2007

  132. The iPhone had no support for Flash

  133. HTML, CSS, JavaScript Open standards

  134. But open standards couldn’t do all that Flash could do.

    This meant they needed to evolve. Fast.
  135. 2008

  136. Responsive Web Design 2010

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

  138. Will apps rule the world?

  139. 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
  140. But apps also have a lot of downsides compared to

    the web
  141. 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
  142. So the web is still here today.

  143. It isn’t apps vs. web

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

    other
  145. 4. Democratisation of design

  146. Becoming a designer is easier today then it was ever

    before
  147. Lots of resources are available for free online. Use them.

  148. Twitter

  149. Dribbble

  150. Medium

  151. Designer News

  152. Access to experts is easy, even though they might be

    on the other side of the globe
  153. Read, read, read. Then read some more.

  154. All you really need is a computer, an internet connection,

    and being able to read and write English
  155. You don’t have to be the next Facebook. But you

    can definitely help solve some of Ghana’s problems.
  156. 5. Five rules I try to live by

  157. 1. Less is more

  158. ‘Everything is important!’

  159. It’s not. Really.

  160. Tell one story

  161. More visual examples

  162. None
  163. Estimated power plant electricity costs Value Axis 0 5 10

    15 20 One Two Three Four Five Six
  164. None
  165. None
  166. None
  167. None
  168. None
  169. None
  170. None
  171. In the digital world, space is free

  172. Simple is easy to understand, simple is good

  173. 2. Do one thing well

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

  175. But the one thing it does do, it needs to

    do extraordinarily well
  176. Unix philosophy

  177. None
  178. None
  179. None
  180. None
  181. None
  182. In the digital world, there is no room for seconds

  183. So keep your focus on the one thing you need

    to do well
  184. 3. Mobile first

  185. It’s a mobile world

  186. None
  187. None
  188. Scaling up is much easier than scaling down

  189. 4. Performance is king

  190. I believe the next few years are going to be

    all about performance
  191. Why does performance matter?

  192. Internet users in 2009 expected web pages to load twice

    as fast as they did in 2006
  193. More than 81 percent of all online video viewers click

    away if they encounter a video that's rebuffering
  194. Google: years of testing have shown that when speed (…)

    improves, usage, quite simply, goes up
  195. In A/B tests, Amazon tried delaying the page and found

    that even very small delays would result in substantial drops in revenue.
  196. So yeah, performance matters

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

  198. 1. Design for speed

  199. Maybe you don’t have to use five images, and one

    would be ok.
  200. If you have a form which contains an upload, maybe

    put it first so it can finish in the background
  201. Submit Photo

  202. Submit Photo

  203. 2. Increase perceived performance

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

    is
  205. Think of Facebook showing people they ‘liked’ something, without it

    being confirmed on the server
  206. 3. Communicate clearly when something is happening

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

  208. Twitter hashtag for developers: #perfmatters

  209. 5. Design an experience

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

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

  212. youtube.com/watch?v=Q8TXgCzxEnw

  213. None
  214. None
  215. None
  216. None
  217. 6. Tools

  218. None
  219. We’ve been making designs in these tools from start to

    finish for years
  220. None
  221. There is no rule saying you have to use just

    one program
  222. Some interesting tools you might want to check out

  223. Sketch

  224. None
  225. Invision

  226. None
  227. None
  228. Marvel app

  229. Invision

  230. Adobe After Effects

  231. None
  232. Pixate

  233. None
  234. None
  235. None
  236. FramerJS

  237. None
  238. Use each tool where it fits best

  239. Hope you’re still awake

  240. 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.
  241. None
  242. None
  243. None
  244. None
  245. Thanks for listening!

  246. https://goo.gl/hV9JBY (new version will be up later) Slides mattijs@grrr.nl @mattijsbliek

    Contact details
  247. 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