The Art of Wireframing

  • 2,113 views
Uploaded on

Learn how to wireframe effectively for Drupal sites by using the Greybox Model. …

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

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,113
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
107
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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