THE ART OFWIREFRAMINGVISUALIZING THE USER EXPERIENCE
FLOOR VAHN LEAD DESIGNER
WHYWIREFRAME ?IN 1 MINUTE OR LESS...
!GAINUNDERSTANDING
HELPPROJECTWORKFLOW
?INFORMSTAKEHOLDERS
MAKE + DEVELOPERSDESIGNERSHAPPY
3 COMMONWIREFRAMETYPES
WIREFRAMESKETCHESQuick / experiment+ feedback
LOW FIDELITYWIREFRAMESBlock diagrams /testing flows
HIGH FIDELITYWIREFRAMESDetailed, includescomments
GREYBOXING
BUSINESSAS USUAL...
CONCEPT SELECTION        GREYBOXINGHIGH FIDELITYLOW FIDELITYIDEA GENERATION
Shows a lot of detail                close to built productAllows for detailsearly in the project                         ...
POPULARWIREFRAMINGTOOLS
balsamiqadobe illustratoromnigrafflevisioaxureadobe fireworks
FIREWORKS MAKES ME HAPPY :)
Create & Share LibrariesCreate Non-destructive EffectsMultiple Pages in 1 DocumentCreate, Share, Reuse SymbolsBuild a Wire...
A FEWEXAMPLES
MOODBOARDS
H1
H2
A    B
WIREFRAMING      GNINGISED
DESIGN...WHILE YOUWIREFRAME??
+
TECHNIQUE
CREATINGA GREYBOX MODEL
CREATE YOUR OWN    orDOWNLOAD  OURS
DOWNLOAD @www.chapterthree.com/greyboxing
ESSENTIALDRUPAL PAGES
SYMBOLS INDOCUMENTLIBRARY
SYMBOLEDITINGWINDOW
CREATEYOUROWNSTENCILS
SHAREWITHOTHERS
ALLYOURS!
SYMBOLS VSSTYLES
STYLES
SYMBOLS
TIPS...
960 GRIDwww.960.gs
970 GRID?
ORANGE COMMANDSWorkflow Automation for Fireworks                   orangecommands.com                   Align             G...
DRUPALELEMENTSwhat did I miss...
DRUPALPAGE ELEMENTS
Block Titles & Block Styles“More” ButtonCommentsBread CrumbsPagination
DRUPALADMIN
Admin Tabs & Secondary TabsCollapsable Field SetsError Messages
THANK YOU
The Art of Wireframing
The Art of Wireframing
The Art of Wireframing
The Art of Wireframing
The Art of Wireframing
The Art of Wireframing
The Art of Wireframing
The Art of Wireframing
The Art of Wireframing
The Art of Wireframing
The Art of Wireframing
The Art of Wireframing
The Art of Wireframing
The Art of Wireframing
The Art of Wireframing
The Art of Wireframing
The Art of Wireframing
The Art of Wireframing
The Art of Wireframing
The Art of Wireframing
The Art of Wireframing
The Art of Wireframing
The Art of Wireframing
Upcoming SlideShare
Loading in...5
×

The Art of Wireframing

2,333

Published on

Learn how to wireframe effectively for Drupal sites by using the Greybox Model.
Greyboxing is a great in-between solution in the wireframe-to-design workflow. This method also allows the actual design process to be more in touch with the initial wireframe.

Learn how to save time and increase productivity using a greybox model created in Adobe Fireworks. How to use pages, layers, grids, guides, smart guides, and component symbols to streamline your UX workflow.

Also covered in this session is how to design a Drupal-specific wireframe. Discover ways to set up and design a wireframe that ensures that you cover ALL the Drupal elements.

Read more on Chapter Three's Blog:
http://www.chapterthree.com/greyboxing

Published in: Design

The Art of Wireframing

  1. 1. THE ART OFWIREFRAMINGVISUALIZING THE USER EXPERIENCE
  2. 2. FLOOR VAHN LEAD DESIGNER
  3. 3. WHYWIREFRAME ?IN 1 MINUTE OR LESS...
  4. 4. !GAINUNDERSTANDING
  5. 5. HELPPROJECTWORKFLOW
  6. 6. ?INFORMSTAKEHOLDERS
  7. 7. MAKE + DEVELOPERSDESIGNERSHAPPY
  8. 8. 3 COMMONWIREFRAMETYPES
  9. 9. WIREFRAMESKETCHESQuick / experiment+ feedback
  10. 10. LOW FIDELITYWIREFRAMESBlock diagrams /testing flows
  11. 11. HIGH FIDELITYWIREFRAMESDetailed, includescomments
  12. 12. GREYBOXING
  13. 13. BUSINESSAS USUAL...
  14. 14. CONCEPT SELECTION GREYBOXINGHIGH FIDELITYLOW FIDELITYIDEA GENERATION
  15. 15. Shows a lot of detail close to built productAllows for detailsearly in the project DESIGNERwatch out: Conversation STAKEHOLDERClients get boggeddown in detail.
  16. 16. POPULARWIREFRAMINGTOOLS
  17. 17. balsamiqadobe illustratoromnigrafflevisioaxureadobe fireworks
  18. 18. FIREWORKS MAKES ME HAPPY :)
  19. 19. Create & Share LibrariesCreate Non-destructive EffectsMultiple Pages in 1 DocumentCreate, Share, Reuse SymbolsBuild a Wireframe StencilPixel-accurate Rendering
  20. 20. A FEWEXAMPLES
  21. 21. MOODBOARDS
  22. 22. H1
  23. 23. H2
  24. 24. A B
  25. 25. WIREFRAMING GNINGISED
  26. 26. DESIGN...WHILE YOUWIREFRAME??
  27. 27. +
  28. 28. TECHNIQUE
  29. 29. CREATINGA GREYBOX MODEL
  30. 30. CREATE YOUR OWN orDOWNLOAD OURS
  31. 31. DOWNLOAD @www.chapterthree.com/greyboxing
  32. 32. ESSENTIALDRUPAL PAGES
  33. 33. SYMBOLS INDOCUMENTLIBRARY
  34. 34. SYMBOLEDITINGWINDOW
  35. 35. CREATEYOUROWNSTENCILS
  36. 36. SHAREWITHOTHERS
  37. 37. ALLYOURS!
  38. 38. SYMBOLS VSSTYLES
  39. 39. STYLES
  40. 40. SYMBOLS
  41. 41. TIPS...
  42. 42. 960 GRIDwww.960.gs
  43. 43. 970 GRID?
  44. 44. ORANGE COMMANDSWorkflow Automation for Fireworks orangecommands.com Align Grids Alpha Guides Canvas Pages Color Position Effects Properties Export Select Export Settings Size
  45. 45. DRUPALELEMENTSwhat did I miss...
  46. 46. DRUPALPAGE ELEMENTS
  47. 47. Block Titles & Block Styles“More” ButtonCommentsBread CrumbsPagination
  48. 48. DRUPALADMIN
  49. 49. Admin Tabs & Secondary TabsCollapsable Field SetsError Messages
  50. 50. THANK YOU
  1. ¿Le ha llamado la atención una diapositiva en particular?

    Recortar diapositivas es una manera útil de recopilar información importante para consultarla más tarde.

×