good design faster at design by fire 2010

55
October 12-13, 2010 Utrecht Design by Fire Design by Fire The Netherlands

Upload: peter-boersma

Post on 17-Aug-2014

12.611 views

Category:

Design


2 download

DESCRIPTION

Slides for Adaptive Path's Good Design Faster workshop, as given by Peter Boersma at Design by Fire 2010.

TRANSCRIPT

Page 1: Good Design Faster at Design by Fire 2010

October 12-13, 2010Utrecht

Design by FireDesign by Fire

The Netherlands

Page 2: Good Design Faster at Design by Fire 2010

The problem

Page 3: Good Design Faster at Design by Fire 2010

Clients want great experiences, and they want them faster.

Page 4: Good Design Faster at Design by Fire 2010

Wireframes (our tools of choice)don’t work for this

typical

Page 5: Good Design Faster at Design by Fire 2010

Wireframes (our tools of choice)don’t work for this

typical

Page 6: Good Design Faster at Design by Fire 2010

Wireframes (our tools of choice)don’t work for this

typical

Page 7: Good Design Faster at Design by Fire 2010

An approach inspired by the design studio...

http://www.flickr.com/photos/98736785@N00/1589941777/

Page 8: Good Design Faster at Design by Fire 2010

1. Sketch and explore ideas

Page 9: Good Design Faster at Design by Fire 2010

2. Bring lots of ideas together

Page 10: Good Design Faster at Design by Fire 2010

3. Share and iterate with the team

Page 11: Good Design Faster at Design by Fire 2010

15:30-16:00Bring lots of ideas together

What we’re going to do today

PEOPLE!

13:00-15:00Sketch and explore ideas

16:00-17:00 pmShare & iterate with the team

PEOPLE!

Page 12: Good Design Faster at Design by Fire 2010

What do you want to accomplish today?

Page 13: Good Design Faster at Design by Fire 2010

Activity #1: Tele-Pictionary

Create a“Stack of Stickies”(as many sheets as there are people at the table)

1 write expression2 pass to neighbor3 read expression4 place sheet at bottom5 draw expression6 pass to neighbor7 check drawing8 place sheet at bottom(9) repeat

Page 14: Good Design Faster at Design by Fire 2010

Sketching hacks

Page 15: Good Design Faster at Design by Fire 2010

Sketching with markers

Yellow marker

Fat

Regular

Small

Gray marker

Sharpie markers

Start here

More attention

Depth:Pop forward

Push back

Look at me!

Page 16: Good Design Faster at Design by Fire 2010

Tips for design sketching

Use markers and pens, not pencils;our goal is Fast, not perfect

If you mess up, keep going

If you really mess up, grab a new page

Page 17: Good Design Faster at Design by Fire 2010

ACTIVITY ONE:Trick #1: highlighting

Build-a-Bike

Courtesy of Rachel Glaves

Page 18: Good Design Faster at Design by Fire 2010

ACTIVITY ONE:Trick #2: line weight

Courtesy of Brandon Schauer

Page 19: Good Design Faster at Design by Fire 2010

ACTIVITY ONE:

Courtesy of Rachel Glaves

Trick #3: shading / warm gray

Page 20: Good Design Faster at Design by Fire 2010

ACTIVITY ONE:

1. Fill a page with overlapping rectangles

2. Hold the page up for the group to see

3. Pass it to your neighbor, then choose one rectangle and color it yellow

4. Pass it to your neighbor, then outline 3-4 rectangles with the fat sharpie

5. One more pass! Shade in 3-4 rectangles with the gray marker ... or add some shadows

INSTRUCTIONS

Activity #2: Sketching Boxes

Page 21: Good Design Faster at Design by Fire 2010

It’s not about HOW to sketch, but WHAT to sketch

Page 22: Good Design Faster at Design by Fire 2010

Exploratory sketches

Wildly varied

Meaningful only to you

Low fidelity

Unsubtle

Page 23: Good Design Faster at Design by Fire 2010

Refinement sketches

More realistic

Interpretable by others

Higher fidelity

Within a framework

Page 24: Good Design Faster at Design by Fire 2010

Tips for sketching screens: helpful patterns

Header

Tab

User Picture

Photo

Video

Filler text

Pop-upModule

ArrowsLarger ones can

communicate weight, or act as labels

Side-scrolling Module

Drop ShadowsCommunicate depth and

bring attention to callouts or popup boxes

Calendar

Page curl

Mouse CursorQuietly indicates a

rollover state

CalloutsCan show alerts, help, guidance or

sketch annotations

Page 25: Good Design Faster at Design by Fire 2010

Trick #4: 6-Up Template

HOW TO:

1. Draw the first things you think of

2. Then, think about opposites

3. Also, think about other goals of the experience

Page 26: Good Design Faster at Design by Fire 2010

Trick #5: 1-Up Template

HOW TO:

1. Use line weight

2. Use shading

3. Use highlights

3. Use labels

Page 27: Good Design Faster at Design by Fire 2010

Let’s try it out

Page 28: Good Design Faster at Design by Fire 2010

your personal SHOPPERNUTRITIONIST

CHEFFOODIE

Page 29: Good Design Faster at Design by Fire 2010

ACTIVITY ONE:

INSTRUCTIONS

Activity #3a: Exploratory Sketching

1. Using a 6-up template, sketch 6 new ideas for the same problem.

2. Put your first ideas down.

3. If you get stuck, think about opposites.Or, think about design principles.

Page 30: Good Design Faster at Design by Fire 2010

ACTIVITY ONE:

INSTRUCTIONS

Activity #3b: Refinement Sketching

1. Pick the most promising ideas from your 6 sketches. (Which one was it?)

2. Using the 1-up template, sketch a higher fidelity version that brings it all together.

3. Go back over your sketch with a sharpie and add line weight, shading, and labels to make it even clearer.

Page 31: Good Design Faster at Design by Fire 2010

BREAK(pauze)

BREAK

Page 32: Good Design Faster at Design by Fire 2010

“A new buzzword for a blatantly obvious technique” —danny.hope

Enter Sketchboards

Page 33: Good Design Faster at Design by Fire 2010

A healthy sketchboard has depth and breadth

Page 34: Good Design Faster at Design by Fire 2010

STEP ONE: get a large sheet of paper

Page 35: Good Design Faster at Design by Fire 2010

In this case, size matters

Page 36: Good Design Faster at Design by Fire 2010

STEP TWO: give it some structure

Page 37: Good Design Faster at Design by Fire 2010

The structure can change (Trick #6: use stickies to keep it flexible)

Page 38: Good Design Faster at Design by Fire 2010

STEP THREE: add inputs

Page 39: Good Design Faster at Design by Fire 2010

Include anything that drives your thinking

Page 40: Good Design Faster at Design by Fire 2010

STEP FOUR: fill it with sketches!

Page 41: Good Design Faster at Design by Fire 2010

Trick #7: The incredible drafting dot

Page 42: Good Design Faster at Design by Fire 2010

ACTIVITY ONE:

Working as a group, use sticky notes to structure your sketchboard. Tape up your inputs, and any sketches that you’ve done so far in each section.

INSTRUCTIONS

Activity #4: Assemble a Sketchboard

Page 43: Good Design Faster at Design by Fire 2010

Share with the team

Page 44: Good Design Faster at Design by Fire 2010

ACTIVITY ONE:

1. Discuss your sketches as a group.

2. Decide which sketches are the most viable direction (consider your inputs).

3. Do additional sketches as necessary to fill in holes and evolve the design.

INSTRUCTIONS

Activity #5: Review the Sketchboard

Page 45: Good Design Faster at Design by Fire 2010

Tips for getting good feedback

Page 46: Good Design Faster at Design by Fire 2010

ACTIVITY ONE:

1. Working quickly, add a stickie to the sketchboard for every question or concern that you have

2. As a group, talk through the stickies, and decide how to improve the design to address issues raised

3. Resketch as necessary

INSTRUCTIONS

Activity #6: Black Hat session

Page 47: Good Design Faster at Design by Fire 2010

Bringing it all together

Page 48: Good Design Faster at Design by Fire 2010

The 5-day sprint

Page 49: Good Design Faster at Design by Fire 2010

Sketchboards are just a jumping off point

Front Office

Back Office

Customer Action

Page 50: Good Design Faster at Design by Fire 2010

The 5-day sprint

Page 51: Good Design Faster at Design by Fire 2010

Tips for iterating sprints

Page 52: Good Design Faster at Design by Fire 2010

Your “Sprint Kit”

Page 53: Good Design Faster at Design by Fire 2010
Page 54: Good Design Faster at Design by Fire 2010

Sketchboards: Discover Better + Faster UX Solutionshttp://www.adaptivepath.com/ideas/essays/archives/000863.php

6-up and 1-up Templateshttp://www.ugleah.com/ux-team-of-one/

Peter [email protected]

Resources to get you started

Thanks toLeah BuleyBrandon SchauerRachel GlavesKate Rutter

Page 55: Good Design Faster at Design by Fire 2010

See you tomorrow,at the conference?See you tomorrow,at the conference?