Digital Design for Humans

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Amsterdam, Netherlands

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

We are a user centred creative agency

Slide 28

Slide 28 text

We work for organisations we believe in

Slide 29

Slide 29 text

Show me some work!

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

Melkweg

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

CMD Amsterdam

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

Filmhuis Den Haag

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

No content

Slide 65

Slide 65 text

No content

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

No content

Slide 68

Slide 68 text

No content

Slide 69

Slide 69 text

No content

Slide 70

Slide 70 text

No content

Slide 71

Slide 71 text

No content

Slide 72

Slide 72 text

No content

Slide 73

Slide 73 text

No content

Slide 74

Slide 74 text

No content

Slide 75

Slide 75 text

No content

Slide 76

Slide 76 text

No content

Slide 77

Slide 77 text

No content

Slide 78

Slide 78 text

No content

Slide 79

Slide 79 text

No content

Slide 80

Slide 80 text

No content

Slide 81

Slide 81 text

No content

Slide 82

Slide 82 text

No content

Slide 83

Slide 83 text

No content

Slide 84

Slide 84 text

No content

Slide 85

Slide 85 text

Why am I here today?

Slide 86

Slide 86 text

1. What is design?

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

(I don’t know what that means…)

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

No content

Slide 91

Slide 91 text

No content

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

No content

Slide 94

Slide 94 text

So as a designer, you’re always collaborating

Slide 95

Slide 95 text

No content

Slide 96

Slide 96 text

Why?

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

Knowing why allows you to make the best decision for this speciﬁc situation

Slide 99

Slide 99 text

Asking questions may be hard, but it is also necessary

Slide 100

Slide 100 text

Design is about solving problems

Slide 101

Slide 101 text

To solve these problems, you have to know the variables

Slide 102

Slide 102 text

Ask why. And ask it often.

Slide 103

Slide 103 text

2. Why is design important?

Slide 104

Slide 104 text

Design is the glue that binds everything together

Slide 105

Slide 105 text

No content

Slide 106

Slide 106 text

No content

Slide 107

Slide 107 text

No content

Slide 108

Slide 108 text

Design can help people understand things easier

Slide 109

Slide 109 text

Design can turn this:

Slide 110

Slide 110 text

No content

Slide 111

Slide 111 text

Into this:

Slide 112

Slide 112 text

No content

Slide 113

Slide 113 text

But design can also completely destroy a product or service

Slide 114

Slide 114 text

Design is not art

Slide 115

Slide 115 text

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

Slide 116

Slide 116 text

Design is 95% science and 5% art

Slide 117

Slide 117 text

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

Slide 118

Slide 118 text

That’s a powerful thing

Slide 119

Slide 119 text

3. The evolution of digital design

Slide 120

Slide 120 text

1991

Slide 121

Slide 121 text

1993

Slide 122

Slide 122 text

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

Slide 123

Slide 123 text

1998

Slide 124

Slide 124 text

No content

Slide 125

Slide 125 text

No content

Slide 126

Slide 126 text

No content

Slide 127

Slide 127 text

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

Slide 128

Slide 128 text

http://216.139.218.247/sites/marines/ 2002

Slide 129

Slide 129 text

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

Slide 130

Slide 130 text

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

Slide 131

Slide 131 text

2007

Slide 132

Slide 132 text

The iPhone had no support for Flash

Slide 133

Slide 133 text

HTML, CSS, JavaScript Open standards

Slide 134

Slide 134 text

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

Slide 135

Slide 135 text

2008

Slide 136

Slide 136 text

Responsive Web Design 2010

Slide 137

Slide 137 text

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

Slide 138

Slide 138 text

Will apps rule the world?

Slide 139

Slide 139 text

Upsides to apps • Easy access from the homescreen • Push notiﬁcations • Can (partially) work oﬄine • Complete control over the experience • Access to hardware of the device

Slide 140

Slide 140 text

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

Slide 141

Slide 141 text

Downsides to apps • Platform and device speciﬁc • Require installation • Harder to ﬁnd • You cannot easily link to things outside the app • Users have to update manually • Updates required with each OS update

Slide 142

Slide 142 text

So the web is still here today.

Slide 143

Slide 143 text

It isn’t apps vs. web

Slide 144

Slide 144 text

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

Slide 145

Slide 145 text

4. Democratisation of design

Slide 146

Slide 146 text

Becoming a designer is easier today then it was ever before

Slide 147

Slide 147 text

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

Slide 148

Slide 148 text

Twitter

Slide 149

Slide 149 text

Dribbble

Slide 150

Slide 150 text

Medium

Slide 151

Slide 151 text

Designer News

Slide 152

Slide 152 text

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

Slide 153

Slide 153 text

Read, read, read. Then read some more.

Slide 154

Slide 154 text

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

Slide 155

Slide 155 text

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

Slide 156

Slide 156 text

5. Five rules I try to live by

Slide 157

Slide 157 text

1. Less is more

Slide 158

Slide 158 text

‘Everything is important!’

Slide 159

Slide 159 text

It’s not. Really.

Slide 160

Slide 160 text

Tell one story

Slide 161

Slide 161 text

More visual examples

Slide 162

Slide 162 text

No content

Slide 163

Slide 163 text

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

Slide 164

Slide 164 text

No content

Slide 165

Slide 165 text

No content

Slide 166

Slide 166 text

No content

Slide 167

Slide 167 text

No content

Slide 168

Slide 168 text

No content

Slide 169

Slide 169 text

No content

Slide 170

Slide 170 text

No content

Slide 171

Slide 171 text

In the digital world, space is free

Slide 172

Slide 172 text

Simple is easy to understand, simple is good

Slide 173

Slide 173 text

2. Do one thing well

Slide 174

Slide 174 text

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

Slide 175

Slide 175 text

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

Slide 176

Slide 176 text

Unix philosophy

Slide 177

Slide 177 text

No content

Slide 178

Slide 178 text

No content

Slide 179

Slide 179 text

No content

Slide 180

Slide 180 text

No content

Slide 181

Slide 181 text

No content

Slide 182

Slide 182 text

In the digital world, there is no room for seconds

Slide 183

Slide 183 text

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

Slide 184

Slide 184 text

3. Mobile ﬁrst

Slide 185

Slide 185 text

It’s a mobile world

Slide 186

Slide 186 text

No content

Slide 187

Slide 187 text

No content

Slide 188

Slide 188 text

Scaling up is much easier than scaling down

Slide 189

Slide 189 text

4. Performance is king

Slide 190

Slide 190 text

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

Slide 191

Slide 191 text

Why does performance matter?

Slide 192

Slide 192 text

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

Slide 193

Slide 193 text

More than 81 percent of all online video viewers click away if they encounter a video that's rebuﬀering

Slide 194

Slide 194 text

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

Slide 195

Slide 195 text

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

Slide 196

Slide 196 text

So yeah, performance matters

Slide 197

Slide 197 text

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

Slide 198

Slide 198 text

1. Design for speed

Slide 199

Slide 199 text

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

Slide 200

Slide 200 text

If you have a form which contains an upload, maybe put it ﬁrst so it can ﬁnish in the background

Slide 201

Slide 201 text

Submit Photo

Slide 202

Slide 202 text

Submit Photo

Slide 203

Slide 203 text

2. Increase perceived performance

Slide 204

Slide 204 text

Perceived performance is how fast the user thinks your site is

Slide 205

Slide 205 text

Think of Facebook showing people they ‘liked’ something, without it being conﬁrmed on the server

Slide 206

Slide 206 text

3. Communicate clearly when something is happening

Slide 207

Slide 207 text

If I submit a form, let me know.

Slide 208

Slide 208 text

Twitter hashtag for developers: #perfmatters

Slide 209

Slide 209 text

5. Design an experience

Slide 210

Slide 210 text

Design is also about emotion, making people feel something

Slide 211

Slide 211 text

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

Slide 212

Slide 212 text

youtube.com/watch?v=Q8TXgCzxEnw

Slide 213

Slide 213 text

No content

Slide 214

Slide 214 text

No content

Slide 215

Slide 215 text

No content

Slide 216

Slide 216 text

No content

Slide 217

Slide 217 text

6. Tools

Slide 218

Slide 218 text

No content

Slide 219

Slide 219 text

We’ve been making designs in these tools from start to ﬁnish for years

Slide 220

Slide 220 text

No content

Slide 221

Slide 221 text

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

Slide 222

Slide 222 text

Some interesting tools you might want to check out

Slide 223

Slide 223 text

Sketch

Slide 224

Slide 224 text

No content

Slide 225

Slide 225 text

Invision

Slide 226

Slide 226 text

No content

Slide 227

Slide 227 text

No content

Slide 228

Slide 228 text

Marvel app

Slide 229

Slide 229 text

Invision

Slide 230

Slide 230 text

Adobe After Eﬀects

Slide 231

Slide 231 text

No content

Slide 232

Slide 232 text

Pixate

Slide 233

Slide 233 text

No content

Slide 234

Slide 234 text

No content

Slide 235

Slide 235 text

No content

Slide 236

Slide 236 text

FramerJS

Slide 237

Slide 237 text

No content

Slide 238

Slide 238 text

Use each tool where it ﬁts best

Slide 239

Slide 239 text

Hope you’re still awake

Slide 240

Slide 240 text

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, ﬁnd your own path.

Slide 241

Slide 241 text

No content

Slide 242

Slide 242 text

No content

Slide 243

Slide 243 text

No content

Slide 244

Slide 244 text

No content

Slide 245

Slide 245 text

Thanks for listening!

Slide 246

Slide 246 text

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

Slide 247

Slide 247 text

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