70
& Prototyping

Sketching & Prototyping

Embed Size (px)

DESCRIPTION

The role of sketching & prototyping tools in the UX/UI design process.

Citation preview

Page 1: Sketching & Prototyping

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

&

Prototyping

Page 2: Sketching & Prototyping

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

Today

GRAPEFRUIT | SKETCHING & PROTOTYPING 2

Page 3: Sketching & Prototyping

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

Foreplay

GRAPEFRUIT | SKETCHING & PROTOTYPING 3

Page 4: Sketching & Prototyping

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

Marius

GRAPEFRUIT | SKETCHING & PROTOTYPING 4

Page 5: Sketching & Prototyping

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

CS

GRAPEFRUIT | SKETCHING & PROTOTYPING 5

Page 6: Sketching & Prototyping

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

You

GRAPEFRUIT | SKETCHING & PROTOTYPING 6

Page 7: Sketching & Prototyping

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

Expectations

GRAPEFRUIT | SKETCHING & PROTOTYPING 7

Page 8: Sketching & Prototyping

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

Zee Germans

GRAPEFRUIT | SKETCHING & PROTOTYPING 8

Page 9: Sketching & Prototyping

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

GRAPEFRUIT | SKETCHING & PROTOTYPING 9

Page 10: Sketching & Prototyping

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

Page 11: Sketching & Prototyping

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

Sketching

GRAPEFRUIT | SKETCHING & PROTOTYPING 12

Page 12: Sketching & Prototyping

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

Why?

Page 13: Sketching & Prototyping

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

Incredibly simple

GRAPEFRUIT | SKETCHING & PROTOTYPING 13

Page 14: Sketching & Prototyping

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

Pen & paper

GRAPEFRUIT | SKETCHING & PROTOTYPING 14

Page 15: Sketching & Prototyping

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

Page 16: Sketching & Prototyping

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

Toolkit

GRAPEFRUIT | SKETCHING & PROTOTYPING 16

Page 17: Sketching & Prototyping

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

Lines

GRAPEFRUIT | SKETCHING & PROTOTYPING 17

Page 18: Sketching & Prototyping

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

Warm up

GRAPEFRUIT | SKETCHING & PROTOTYPING 18

Page 19: Sketching & Prototyping

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

Text

GRAPEFRUIT | SKETCHING & PROTOTYPING 19

Page 20: Sketching & Prototyping

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

Weight

GRAPEFRUIT | SKETCHING & PROTOTYPING 20

Page 21: Sketching & Prototyping

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

Depth

GRAPEFRUIT | SKETCHING & PROTOTYPING 22

Page 22: Sketching & Prototyping

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

Look here!!!

GRAPEFRUIT | SKETCHING & PROTOTYPING 24

Page 23: Sketching & Prototyping

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

Labelling

GRAPEFRUIT | SKETCHING & PROTOTYPING 26

Page 24: Sketching & Prototyping

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

Templates

GRAPEFRUIT | SKETCHING & PROTOTYPING 27

Page 25: Sketching & Prototyping

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

Focus

GRAPEFRUIT | SKETCHING & PROTOTYPING 28

Page 26: Sketching & Prototyping

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

Show, don’t tell

GRAPEFRUIT | SKETCHING & PROTOTYPING 29

Page 27: Sketching & Prototyping

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

not perfect

GRAPEFRUIT | SKETCHING & PROTOTYPING 30

Page 28: Sketching & Prototyping

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

What, not how

GRAPEFRUIT | SKETCHING & PROTOTYPING 32

Page 29: Sketching & Prototyping

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

Page 30: Sketching & Prototyping

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

Page 31: Sketching & Prototyping

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

Patterns

GRAPEFRUIT | SKETCHING & PROTOTYPING 35

Page 32: Sketching & Prototyping
Page 33: Sketching & Prototyping
Page 34: Sketching & Prototyping
Page 35: Sketching & Prototyping
Page 36: Sketching & Prototyping
Page 37: Sketching & Prototyping
Page 38: Sketching & Prototyping
Page 39: Sketching & Prototyping

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

Sketch Discuss Iterate

GRAPEFRUIT | SKETCHING & PROTOTYPING 36

Page 40: Sketching & Prototyping

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

The board

GRAPEFRUIT | SKETCHING & PROTOTYPING 37

Page 41: Sketching & Prototyping

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

Page 42: Sketching & Prototyping

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

Check the experts

GRAPEFRUIT | SKETCHING & PROTOTYPING 38

Page 43: Sketching & Prototyping

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

Play

GRAPEFRUIT | SKETCHING & PROTOTYPING 39

Page 44: Sketching & Prototyping

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

CFR.ro

GRAPEFRUIT | SKETCHING & PROTOTYPING 40

Page 45: Sketching & Prototyping

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

The story

GRAPEFRUIT | SKETCHING & PROTOTYPING 41

Page 46: Sketching & Prototyping

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

The app

GRAPEFRUIT | SKETCHING & PROTOTYPING 42

Page 47: Sketching & Prototyping

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

Testing

GRAPEFRUIT | SKETCHING & PROTOTYPING 43

Page 48: Sketching & Prototyping

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

Page 49: Sketching & Prototyping

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

Page 50: Sketching & Prototyping

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

GRAPEFRUIT | SKETCHING & PROTOTYPING 46

Page 51: Sketching & Prototyping

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

Play

GRAPEFRUIT | SKETCHING & PROTOTYPING 47

Page 52: Sketching & Prototyping

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

Prototyping

GRAPEFRUIT | SKETCHING & PROTOTYPING 48

Page 53: Sketching & Prototyping

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

GRAPEFRUIT | SKETCHING & PROTOTYPING 49

Page 54: Sketching & Prototyping

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

GRAPEFRUIT | SKETCHING & PROTOTYPING 50

Page 55: Sketching & Prototyping

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

GRAPEFRUIT | SKETCHING & PROTOTYPING 51

Page 56: Sketching & Prototyping

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

GRAPEFRUIT | SKETCHING & PROTOTYPING 52

Page 57: Sketching & Prototyping

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

Page 58: Sketching & Prototyping

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

GRAPEFRUIT | SKETCHING & PROTOTYPING 54

Page 59: Sketching & Prototyping

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

Page 60: Sketching & Prototyping

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

GRAPEFRUIT | SKETCHING & PROTOTYPING 56

Page 61: Sketching & Prototyping

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

Page 62: Sketching & Prototyping

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

GRAPEFRUIT | SKETCHING & PROTOTYPING 58

Page 63: Sketching & Prototyping

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

Page 64: Sketching & Prototyping

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

GRAPEFRUIT | SKETCHING & PROTOTYPING 60

Page 65: Sketching & Prototyping

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

Page 66: Sketching & Prototyping

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

GRAPEFRUIT | SKETCHING & PROTOTYPING 62

Page 67: Sketching & Prototyping

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

The 5 day sprint

GRAPEFRUIT | SKETCHING & PROTOTYPING 63

Page 68: Sketching & Prototyping

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

Agile process

GRAPEFRUIT | SKETCHING & PROTOTYPING 64

Page 69: Sketching & Prototyping

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

Present

GRAPEFRUIT | SKETCHING & PROTOTYPING 65

Page 70: Sketching & Prototyping

Copyright © 2013 Grapefruit SRL. All Rights Reserved.

Thank you!