Digital Design for Humans

Slides for my talk in Ghana

Transcript

1. Digital Design for Humans @mattijsbliek designer & developer Photo: Adam Magyar
2. Amsterdam, Netherlands
27. We are a user centred creative agency
28. We work for organisations we believe in
29. Show me some work!
31. Melkweg
40. CMD Amsterdam
45. Filmhuis Den Haag
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
92. But design can never live on it’s own. It has to serve a purpose.
94. So as a designer, you’re always collaborating
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
108. Design can help people understand things easier
109. Design can turn this:
111. Into this:
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
122. 1996 Cascading Style Sheets, level 1 W3C Recommendation 17 Dec 1996
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
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.
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
163. Estimated power plant electricity costs Value Axis 0 5 10 15 20 One Two Three Four Five Six
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
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
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
217. 6. Tools
219. We’ve been making designs in these tools from start to finish for years
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
225. Invision
228. Marvel app
229. Invision
230. Adobe After Effects
232. Pixate
236. FramerJS
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.
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