Slide 1

Slide 1 text

Design for User Experience UX London 2012 Dan Rubin / @danrubin

Slide 2

Slide 2 text

What we do is not unique.

Slide 3

Slide 3 text

Physical product design = virtual product design.

Slide 4

Slide 4 text

Assume similarities, not differences.

Slide 5

Slide 5 text

We can learn from problems that have been solved elsewhere.

Slide 6

Slide 6 text

Example Responsive Web Design

Slide 7

Slide 7 text

Responsive Architecture

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

It is easier to relate to existing concepts.

Slide 11

Slide 11 text

3 hours ≠ Enough Time

Slide 12

Slide 12 text

Richard Branson Me

Slide 13

Slide 13 text

Work differently in the context of design.

Slide 14

Slide 14 text

What are some of the distinct challenges you face today?

Slide 15

Slide 15 text

Academic vs. Practical

Slide 16

Slide 16 text

UX is often treated as an academic discipline.

Slide 17

Slide 17 text

Designers are often more practical.

Slide 18

Slide 18 text

Let’s resolve that dissonance.

Slide 19

Slide 19 text

Part I Think Like a Product Designer

Slide 20

Slide 20 text

What is your role?

Slide 21

Slide 21 text

For the next few hours, you are a Product Designer.

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

Affordance

Slide 24

Slide 24 text

...the term affordance refers to the perceived and actual properties of the thing, primarily those fundamental properties that determine just how the thing could possibly be used. Don Norman

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

Photo: Luiz Fernando Pilz (http:/ /www.sxc.hu/photo/249448)

Slide 27

Slide 27 text

Photo: Ivaylo Georgiev (http:/ /www.sxc.hu/photo/426359)

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

If your interface requires instructions, it needs to be redesigned.

Slide 34

Slide 34 text

Fit and Finish

Slide 35

Slide 35 text

Pixels, alignment, balance.

Slide 36

Slide 36 text

aka Build Quality

Slide 37

Slide 37 text

Exercise Thinking about the problem.

Slide 38

Slide 38 text

Step 1 Think in Features

Slide 39

Slide 39 text

Step 2 Usage and Experience

Slide 40

Slide 40 text

Step 3 Design How It Feels

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

Part II Practical Application

Slide 43

Slide 43 text

Understanding Designers

Slide 44

Slide 44 text

Designers see this:

Slide 45

Slide 45 text

http://www.flickr.com/photos/mckaysavage/2566331277/

Slide 46

Slide 46 text

And want to turn it into this:

Slide 47

Slide 47 text

http://www.flickr.com/photos/nicholas_t/281820290/

Slide 48

Slide 48 text

Margins and Spacing

Slide 49

Slide 49 text

Give your design breathing room.

Slide 50

Slide 50 text

Define reusable patterns.

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

(old) CNN.com margins, padding, borders: 6, 12, 18px

Slide 54

Slide 54 text

12px

Slide 55

Slide 55 text

12px 12px

Slide 56

Slide 56 text

6px 6px

Slide 57

Slide 57 text

18px

Slide 58

Slide 58 text

CNN’s article text size was 12px

Slide 59

Slide 59 text

Hierarchy communicates importance.

Slide 60

Slide 60 text

Big type stands out more than little type.

Slide 61

Slide 61 text

Large content areas are easier to see.

Slide 62

Slide 62 text

Size explains hierarchy.

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

No content

Slide 65

Slide 65 text

Why low-res wireframes help designers.

Slide 66

Slide 66 text

Visual designers need room to work, to breathe.

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

As nature abhors a vacuum...

Slide 71

Slide 71 text

...an ugly wireframe is the designer’s vacuum.

Slide 72

Slide 72 text

Discussion

Slide 73

Slide 73 text

Thank you! @danrubin / danrubin.is webgraph.com