Your SlideShare is downloading. ×
The Art of Wireframing
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

The Art of Wireframing

2,176
views

Published 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

Published in: Design

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,176
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
110
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