Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Good Design Faster at Design by Fire 2010

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to comment

Good Design Faster at Design by Fire 2010

  1. De sign by Fire Oc tober 12-13, 2010 Utrecht The Netherlands
  2. The problem
  3. Clients want great experiences, and they want them faster.
  4. t y p ic a l Wireframes (our tools of choice) don’t work for this
  5. t y p ic a l Wireframes (our tools of choice) don’t work for this
  6. t y p ic a l Wireframes (our tools of choice) don’t work for this
  7. An approach inspired by the design studio...
  8. 1. Sketch and explore ideas
  9. 2. Bring lots of ideas together
  10. 3. Share and iterate with the team
  11. What we’re 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!
  12. What do you want to accomplish today?
  13. 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
  14. Sketching hacks
  15. Sketching with markers Yellow marker Look at me! Sharpie markers More attention Fat Regular Start here Small Gray marker Depth: Pop forward Push back
  16. 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
  17. ACTIVITY highlighting Trick #1: ONE: Build-a-Bike Courtesy of Rachel Glaves
  18. ACTIVITY line weight Trick #2: ONE: Courtesy of Brandon Schauer
  19. ACTIVITY shading / warm gray Trick #3: ONE: Courtesy of Rachel Glaves
  20. 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
  21. It’s not about HOW to sketch, but WHAT to sketch
  22. Exploratory sketches Meaningful only to you Low fidelity Wildly varied Unsubtle
  23. Refinement sketches Interpretable by others Higher fidelity More realistic Within a framework
  24. 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
  25. 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
  26. Trick #5: 1-Up Template HOW TO: 1. Use line weight 2. Use shading 3. Use highlights 3. Use labels
  27. Let’s try it out
  29. 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.
  30. ACTIVITY ONE: Activity #3b: Refinement 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.
  31. B REAK (pauze)
  32. Enter Sketchboards “A new buzzword for a blatantly obvious technique” —danny.hope
  33. A healthy sketchboard has depth and breadth
  34. STEP ONE: get a large sheet of paper
  35. In this case, size matters
  36. STEP TWO: give it some structure
  37. The structure can change (Trick #6: use stickies to keep it flexible)
  38. STEP THREE: add inputs
  39. Include anything that drives your thinking
  40. STEP FOUR: fill it with sketches!
  41. Trick #7: The incredible drafting dot
  42. 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 you’ve done so far in each section.
  43. Share with the team
  44. 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 inputs). 3. Do additional sketches as necessary to fill in holes and evolve the design.
  45. Tips for getting good feedback
  46. ACTIVITY ONE: Activity #6: Black Hat session INSTRUCTIONS 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
  47. Bringing it all together
  48. The 5-day sprint
  49. Sketchboards are just a jumping off point Customer Action Front Office Back Office
  50. The 5-day sprint
  51. Tips for iterating sprints
  52. Your “Sprint Kit”
  53. Resources to get you started Peter Boersma Sketchboards: Discover Better + Faster UX Solutions 6-up and 1-up Templates Thanks to Leah Buley Brandon Schauer Rachel Glaves Kate Rutter
  54. Se e you tomorrow, at the conference?

    Be the first to comment

    Login to see the comments

  • danjgreene

    Nov. 17, 2011
  • sharonbowman

    Nov. 21, 2011
  • BartomiejMatoga

    Dec. 3, 2011
  • sjors

    Feb. 20, 2012
  • tasyjean

    Feb. 22, 2012
  • rveronez

    Apr. 25, 2012
  • PaRaP

    Sep. 13, 2012
  • beemsterman

    Jan. 11, 2013
  • MrWolfish

    Jan. 25, 2013
  • swnj

    Oct. 30, 2013
  • Skybluemizu

    Jan. 3, 2014
  • hemba

    Apr. 11, 2014
  • IzharKurniawan

    Apr. 11, 2014
  • kendroid

    May. 8, 2014
  • armai0413

    Jul. 26, 2015
  • mmeadowsla

    Nov. 23, 2016
  • oakpachiogu

    Dec. 4, 2016
  • PhongTrn76

    Jan. 9, 2018
  • GlendaAspee

    Feb. 22, 2019
  • AnthonyRenwick

    Oct. 18, 2019

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


Total views


On Slideshare


From embeds


Number of embeds