The Art of Wireframing

2,759 views
2,599 views

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

×