good design faster at design by fire 2010

Download Good Design Faster at Design by Fire 2010

Post on 17-Aug-2014




2 download

Embed Size (px)


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


  • De sign by Fire Oc tober 12-13, 2010 Utrecht The Netherlands
  • The problem
  • Clients want great experiences, and they want them faster.
  • t y p ic a l Wireframes (our tools of choice) dont work for this
  • t y p ic a l Wireframes (our tools of choice) dont work for this
  • t y p ic a l Wireframes (our tools of choice) dont work for this
  • An approach inspired by the design studio...
  • 1. Sketch and explore ideas
  • 2. Bring lots of ideas together
  • 3. Share and iterate with the team
  • What were going to do today 13:00-15:00 15:30-16:00 16:00-17:00 pm Sketch and explore ideas Bring lots of ideas together Share & iterate with the team PEOPLE!
  • What do you want to accomplish today?
  • Activity #1: Tele-Pictionary 1 write expression Create a 2 pass to neighbor Stack of Stickies 3 read expression (as many sheets as 4 place sheet at bottom there are people at 5 draw expression the table) 6 pass to neighbor 7 check drawing 8 place sheet at bottom (9) repeat
  • Sketching hacks
  • Sketching with markers Yellow marker Look at me! Sharpie markers More attention Fat Regular Start here Small Gray marker Depth: Pop forward Push back
  • 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
  • ACTIVITY highlighting Trick #1: ONE: Build-a-Bike Courtesy of Rachel Glaves
  • ACTIVITY line weight Trick #2: ONE: Courtesy of Brandon Schauer
  • ACTIVITY shading / warm gray Trick #3: ONE: Courtesy of Rachel Glaves
  • ACTIVITY ONE: Activity #2: Sketching Boxes INSTRUCTIONS 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
  • Its not about HOW to sketch, but WHAT to sketch
  • Exploratory sketches Meaningful only to you Low fidelity Wildly varied Unsubtle
  • Renement sketches Interpretable by others Higher fidelity More realistic Within a framework
  • Tips for sketching screens: helpful patterns Callouts Header Can show alerts, Drop Shadows help, guidance or Communicate depth and sketch annotations bring attention to Tab callouts or popup boxes Filler text Pop-up Calendar Module User Picture Page curl Arrows Photo Larger ones can communicate weight, or act as labels Mouse Cursor Video Quietly indicates a rollover state Side-scrolling Module
  • 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
  • Trick #5: 1-Up Template HOW TO: 1. Use line weight 2. Use shading 3. Use highlights 3. Use labels
  • Lets try it out
  • ACTIVITY ONE: Activity #3a: Exploratory Sketching INSTRUCTIONS 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.
  • ACTIVITY ONE: Activity #3b: Renement Sketching INSTRUCTIONS 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.
  • B REAK (pauze)
  • Enter Sketchboards A new buzzword for a blatantly obvious technique danny.hope
  • A healthy sketchboard has depth and breadth
  • STEP ONE: get a large sheet of paper
  • In this case, size matters
  • STEP TWO: give it some structure
  • The structure can change (Trick #6: use stickies to keep it exible)
  • STEP THREE: add inputs
  • Include anything that drives your thinking
  • STEP FOUR: ll it with sketches!
  • Trick #7: The incredible drafting dot
  • ACTIVITY ONE: Activity #4: Assemble a Sketchboard INSTRUCTIONS Working as a group, use sticky notes to structure your sketchboard. Tape up your inputs, and any sketches that youve done so far in each section.
  • Share with the team
  • ACTIVITY ONE: Activity #5: Review the Sketchboard INSTRUCTIONS 1. Discuss your sketches as a group. 2. Decide which sketches are the most viable direction (consider your in