Successfully reported this slideshow.
Wireframing
                           Web Apps



Friday, 16 October 2009
Intros
Philosophy
                               not Process




Friday, 16 October 2009

Based on a day workshop, condensed into...
Discovery              Ideation            Prototyping                 Usability




Friday, 16 October 2009

Not set in s...
y                         Ideation            Prototyping




Friday, 16 October 2009

(We’re going to be working on the I...
Content
audit
                  Ethnographic
research
                                     Competitor
analysis
           ...
CONVERG
                          DIVE RGE                            E

   Discovery                        Ideation   Pr...
an ge
                                                                      f
 ch
                                        ...
Ideation           Prototyping

                    Paper
                                    ✓               ✓
          ...
The joy of paper




Friday, 16 October 2009
sketch
                          The joy of paper




Friday, 16 October 2009
“A process for innovation and
     creativity through iterations”
                                   Bill Moggridge




Fr...
sketching
is
most
u seful
during
ideation
                                 Ideation                    Prototyping

      ...
Sketching outcomes
                 •        Minimal, relevant detail
                 •        Appropriate degree of refi...
Sketch attributes
                     •    Rapid
                     •    Timely, convenient
                     •    C...
Examples




Friday, 16 October 2009

(communication, collaboration, think while you sketch)
Friday, 16 October 2009
Friday, 16 October 2009
Friday, 16 October 2009
Friday, 16 October 2009
Friday, 16 October 2009
Friday, 16 October 2009

Too precise
&
anti-patterns


                          Design patterns are
                             your friend




Friday, 16 Oc...
http://developer.yahoo.com/ypatterns/




Friday, 16 October 2009
http://designinginterfaces.com/




Friday, 16 October 2009
http://www.designingsocialinterfaces.com/




Friday, 16 October 2009
Bill Scott:
    Mind Mapping Design Patterns
    http://bit.ly/12jl3X




Friday, 16 October 2009
Ideation   Prototyping

                     Paper
                               ✓          ✓
           Interactive
    ...
DIVERGE

scovery                         Ideation   Prototyp
                          DIVERGE



Friday, 16 October 2009
Sketching tips
                   •      Do lots! Diverge don’t converge
                   •      Sketch as you talk & th...
Ideation   Prototyping

                     Paper
                               ✓          ✓
           Interactive
    ...
Friday, 16 October 2009

Paper prototyping is DRAWING whole pages
rather than sketching elements or patterns
Friday, 16 October 2009
Friday, 16 October 2009
Going Interactive




Friday, 16 October 2009

Design in the browser. Native medium. Clickable. High fidelity.
“It has to be realised that
                   experience is very badly
                understood by observation: the
   ...
“You can’t tell how well
                     something will work
                    until it’s sitting there in
        ...
“Wireframing AJAX is a bitch.”
                                    Jeffrey Zeldman
                          http://alista...
Ideation   Prototyping

                     Paper
                               ✓          ✓
           Interactive
    ...
“All the engineers need is a
                 picture and a conversation.”
                          Josh Damon Williams
 ...
Friday, 16 October 2009
Friday, 16 October 2009
Friday, 16 October 2009
Friday, 16 October 2009
Pe arson




Friday, 16 October 2009
Ideation   Prototyping

                     Paper
                               ✓          ✓
           Interactive
    ...
ElfCartel super best friends web
     Home             People         Groups


  Amidactio's profile                      ...
PolyPage
                 http://github.com/andykent/polypage/

                 <a
href="logout"
class="pp_logged_in">
Si...
Ideation                Prototyping

                     Paper
                                        ✓                 ...
Thanks!
                             rich@clearleft.com

               http://clearleft.com/does/teach/prototyping/




F...
Upcoming SlideShare
Loading in …5
×

Wireframing Web Apps

2,783 views

Published on

By Richard Rutter at the Launch48 2009 Conference

Published in: Technology, Design
  • Be the first to comment

Wireframing Web Apps

  1. 1. Wireframing Web Apps Friday, 16 October 2009 Intros
  2. 2. Philosophy not Process Friday, 16 October 2009 Based on a day workshop, condensed into 15 minutes! Intend to get over principles and approaches.
  3. 3. Discovery Ideation Prototyping Usability Friday, 16 October 2009 Not set in stone, but we have seen these four stages emerge during our working practice
  4. 4. y Ideation Prototyping Friday, 16 October 2009 (We’re going to be working on the Ideation/Prototyping phase) but what would happen prior to that?
  5. 5. Content
audit Ethnographic
research Competitor
analysis Contextual
enquiry Discovery Ideation Pro Persona
development Card
sorting User
journeys Site
mapping Friday, 16 October 2009 Some may be covered in planning this afternoon
  6. 6. CONVERG DIVE RGE E Discovery Ideation Prototyping Usability DIVERGE ERGE CONV Friday, 16 October 2009 Diverge to converge
  7. 7. an ge f
 ch o st 
o iv es c rn at lte of 
a n o.
 Discovery Ideation Prototyping Usability Friday, 16 October 2009
  8. 8. Ideation Prototyping Paper ✓ ✓ Interactive ✓ ✓ Friday, 16 October 2009 Breakdown of today. 2 mediums each with 2 uses.
  9. 9. The joy of paper Friday, 16 October 2009
  10. 10. sketch The joy of paper Friday, 16 October 2009
  11. 11. “A process for innovation and creativity through iterations” Bill Moggridge Friday, 16 October 2009 Definition of sketching. Iterations. Central to the notion of divergent design.
  12. 12. sketching
is
most
u seful
during
ideation Ideation Prototyping Paper ✓ ✓ Interactive ✓ ✓ Friday, 16 October 2009 Largely pen & paper but as we will demonstrate can be interactive as well
  13. 13. Sketching outcomes • Minimal, relevant detail • Appropriate degree of refinement • Suggest & explore, don’t confirm • Ambiguous Friday, 16 October 2009 The outcomes of which are these. Minimal, relevant detail: you only need to tackle those elements you’re sketching to resolve (grey box or outline everything else, crossed images, scribbles for copy etc.) Appropriate refinement: too much detail confuses the purpose. Ambiguity, open-endings, question marks are absolutely fine. Sketches should ask questions and have holes in which the answers can expand (Buxton’s Swiss cheese analogy).
  14. 14. Sketch attributes • Rapid • Timely, convenient • Cheap • Disposable • Plentiful • Clear vocabulary Friday, 16 October 2009 Timely, convenient: You can do this now with very little, if any, preparation. Disposable: essential for iterative (refinement). No loss. Plentiful: Many routes can be discussed. Clear vocab: the intent is clear. A sketch is typically unfinished which tells people (like clients) that this is work in progress. That they still have the opportunity to change, to feedback. Contrast this to the polished screen design which implies you have finished, does not invite ideas. By implication you are saying I don’t want or even value your ideas. Nobody will confuse the sketch with the final product (and ship it!)
  15. 15. Examples Friday, 16 October 2009 (communication, collaboration, think while you sketch)
  16. 16. Friday, 16 October 2009
  17. 17. Friday, 16 October 2009
  18. 18. Friday, 16 October 2009
  19. 19. Friday, 16 October 2009
  20. 20. Friday, 16 October 2009
  21. 21. Friday, 16 October 2009 Too precise
  22. 22. &
anti-patterns Design patterns are your friend Friday, 16 October 2009
  23. 23. http://developer.yahoo.com/ypatterns/ Friday, 16 October 2009
  24. 24. http://designinginterfaces.com/ Friday, 16 October 2009
  25. 25. http://www.designingsocialinterfaces.com/ Friday, 16 October 2009
  26. 26. Bill Scott: Mind Mapping Design Patterns http://bit.ly/12jl3X Friday, 16 October 2009
  27. 27. Ideation Prototyping Paper ✓ ✓ Interactive ✓ ✓ Friday, 16 October 2009
  28. 28. DIVERGE scovery Ideation Prototyp DIVERGE Friday, 16 October 2009
  29. 29. Sketching tips • Do lots! Diverge don’t converge • Sketch as you talk & think • Forget aesthetics (this is the wrong place for that) • Collaborate. Don’t be afraid to scrawl on your colleague’s sketches. Friday, 16 October 2009
  30. 30. Ideation Prototyping Paper ✓ ✓ Interactive ✓ ✓ Friday, 16 October 2009
  31. 31. Friday, 16 October 2009 Paper prototyping is DRAWING whole pages rather than sketching elements or patterns
  32. 32. Friday, 16 October 2009
  33. 33. Friday, 16 October 2009
  34. 34. Going Interactive Friday, 16 October 2009 Design in the browser. Native medium. Clickable. High fidelity.
  35. 35. “It has to be realised that experience is very badly understood by observation: the designer has to take part. Nothing is easier than believing we understand experiences we’ve never had.” Matt Webb schulzeandwebb.com/blog/2007/09/09/the-experience-stack-revisited/ Friday, 16 October 2009
  36. 36. “You can’t tell how well something will work until it’s sitting there in your sweaty palm.” Tom Hume tomhume.org/2006/02/interaction_des.html Friday, 16 October 2009
  37. 37. “Wireframing AJAX is a bitch.” Jeffrey Zeldman http://alistapart.com/articles/web3point0 Friday, 16 October 2009
  38. 38. Ideation Prototyping Paper ✓ ✓ Interactive ✓ ✓ Friday, 16 October 2009
  39. 39. “All the engineers need is a picture and a conversation.” Josh Damon Williams http://bit.ly/12XiNl Friday, 16 October 2009
  40. 40. Friday, 16 October 2009
  41. 41. Friday, 16 October 2009
  42. 42. Friday, 16 October 2009
  43. 43. Friday, 16 October 2009
  44. 44. Pe arson Friday, 16 October 2009
  45. 45. Ideation Prototyping Paper ✓ ✓ Interactive ✓ ✓ Friday, 16 October 2009
  46. 46. ElfCartel super best friends web Home People Groups Amidactio's profile Add to friends Me in a nutshell Friends Olenit iuscing consequis facinci dolut, ros irilla psustrud. Stincil Screen name lacus inciduipit mollis magniamet, dolortisl consenisim aliquisi friend status diamet ver illa quipsum illaor illam. Put veros dunt curae gait, Adactio veriusto accum patin. Conullandiam blamet pede, issectem super best friend dionsenit illam ridiculus acipisl lute, suscipit doloboreet b0xman coreraestrud. good friend Tellus tat lacinia, commodipis nulput veliquat volor venit enim, Clagnut fermentum eugiat nummy. Accumsandre si sustrud, tisi vulluptatum mere acquaintance ullaor eu, praesed euisl acilit sequat. Aliquip aute nostrud, lobor dolor nim vulputat, non curae bla etuerostrud. Nonsenibh endreet Oriental prince in a land veros alisi dipiscipit, niscidu dolent sagittis. Aliquis nonulla acipsus. of soup never met More about me Groups Interests Group name admin My favourite music Currysoc My favourite films We love Pie! My favourite books and authors Friday, 16 October 2009 Elf Cartel: http://elfcartel.clearleft.com/profile.php?slide=simpleajax © 2008 Clearleft Ltd · About · Help · Legal · Contact Make a fave / remove as fave toggle Star rating widget& - incredibly difficult to describe in words but easy to show. Would have Profile photo with thanks apologies to Jeremy Keith taken a while to build, but lifted from our production library so it's just plug and play. Fairly simple as the change to the is occuring where the initiating action (mouse click) took place so that’s where the user’s attention currently is, although we’re not wireframing a ‘waiting’ state. More examples: Edenbee - cancelling notices, adding a flight
  47. 47. PolyPage http://github.com/andykent/polypage/ <a
href="logout"
class="pp_logged_in">
Sign
out
</a> <a
href="login"
class="pp_not_logged_in">
Login
</a> Friday, 16 October 2009 PolyPage is a JQuery plugin for showing different views on the page. Just uses class names.
  48. 48. Ideation Prototyping Paper ✓ ✓ Interactive ✓ ✓ Friday, 16 October 2009 Diverge to Converge – DO IDEATION! Use paper for rapid iterations but don’t be afraid to move to to the browser when paper reaches its limitations. Interactive for behaviour. Don’t be intimated by code. It’s not as hard as you think. Interactive for usability testing. Remember all this as a design tool as much as a communication tool. You need the conversation to turn them in to conversation tools.
  49. 49. Thanks! rich@clearleft.com http://clearleft.com/does/teach/prototyping/ Friday, 16 October 2009 Our day long workshop is at http://clearleft.com/does/teach/prototyping/

×