Good Design Faster at UX Sofia
Upcoming SlideShare
Loading in...5
×
 

Good Design Faster at UX Sofia

on

  • 7,122 views

 

Statistics

Views

Total Views
7,122
Views on SlideShare
6,593
Embed Views
529

Actions

Likes
39
Downloads
159
Comments
1

13 Embeds 529

http://www.digitalmonkeys.it 243
http://ifluxplus.blogspot.com 187
http://ifluxplus.blogspot.de 52
http://127.0.0.1 16
https://si0.twimg.com 13
https://twitter.com 4
http://paper.li 3
http://a0.twimg.com 3
http://ifluxplus.blogspot.tw 3
http://ifluxplus.blogspot.ch 2
https://twimg0-a.akamaihd.net 1
http://staging.slideshare.com 1
http://ifluxplus.blogspot.sg 1
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • very good i like!!!!
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Good Design Faster at UX Sofia Good Design Faster at UX Sofia Presentation Transcript

  • UX SofiaMay 26, 2011SofiaBulgaria
  • The problem
  • Clients want great experiences, and they wantthem faster. View slide
  • t y p ic a lWireframes (our tools of choice)don’t work for this View slide
  • t y p ic a lWireframes (our tools of choice)don’t work for this
  • t y p ic a lWireframes (our tools of choice)don’t work for this
  • An approach inspired by the design studio...http://www.flickr.com/photos/98736785@N00/1589941777/
  • 1. Sketch and explore ideas
  • 2. Bring lots of ideas together
  • 3. Share and iterate with the team
  • What we’re going to do today14:00-16:00 16:30-17:00 17:00-18:00 pmSketch 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 Create a Think of an expression “Stack of Stickies” 1. write the expression (as many sheets as 2. pass to neighbor there are people at 3. read expression the table) 4. place sheet at bottom 5 draw expression 6. pass to neighbor 7. check drawing 8. place sheet at bottom 9. GOTO 1
  • Sketchinghacks
  • 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 sketchingUse markers and pens, not pencils;our goal is Fast, not perfectIf you mess up, keep goingIf you really mess up, grab a new page
  • ACTIVITY highlighting Trick #1: ONE:Build-a-BikeCourtesy 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
  • It’s not about HOW to sketch, but WHAT to sketch
  • Exploratory sketches Meaningful only to you Low fidelity Wildly varied Unsubtle
  • Refinement 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 boxesFiller 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
  • Let’s try it out
  • your personal SHOPPER & NUTRITIONIST & CHEF & FOODIE.
  • 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: 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.
  • 30 minute B REAK (пауза)
  • 2. Bring lots of ideas together
  • Enter Sketchboards“A new buzzword for a blatantly obvioustechnique” —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 flexible)
  • STEP THREE: add inputs
  • Include anything that drives your thinking
  • STEP FOUR: fill 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 you’ve done so far in each section.
  • 3. Share and iterate with the team
  • Share with the team
  • How? X
  • Team Review
  • 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.
  • Tips for getting good feedback
  • 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
  • Bringing it all together
  • The 5-day sprint
  • Sketchboards are just a jumping off point Customer Action Front Office Back Office
  • The 5-day sprint
  • Tips for iterating sprints
  • Your “Sprint Kit”
  • Resources to get you started Peter Boersma peter.boersma@adaptivepath.com Sketchboards: Discover Better + Faster UX Solutions http://www.adaptivepath.com/ideas/essays/archives/000863.php 6-up and 1-up Templates http://www.ugleah.com/ux-team-of-one/ Thanks to Leah Buley Brandon Schauer Rachel Glaves Kate Rutter
  • Thank you!Yo u were awesome!