• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
The Art of Wireframing
 

The Art of Wireframing

on

  • 2,286 views

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

Statistics

Views

Total Views
2,286
Views on SlideShare
2,286
Embed Views
0

Actions

Likes
3
Downloads
99
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    The Art of Wireframing The Art of Wireframing Presentation Transcript

    • 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 DESIGNERwatch out: Conversation STAKEHOLDERClients get boggeddown in detail.
    • POPULARWIREFRAMINGTOOLS
    • balsamiqadobe illustratoromnigrafflevisioaxureadobe fireworks
    • FIREWORKS MAKES ME HAPPY :)
    • Create & Share LibrariesCreate Non-destructive EffectsMultiple Pages in 1 DocumentCreate, Share, Reuse SymbolsBuild a Wireframe StencilPixel-accurate Rendering
    • 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 Grids Alpha Guides Canvas Pages Color Position Effects Properties Export Select Export Settings Size
    • DRUPALELEMENTSwhat did I miss...
    • DRUPALPAGE ELEMENTS
    • Block Titles & Block Styles“More” ButtonCommentsBread CrumbsPagination
    • DRUPALADMIN
    • Admin Tabs & Secondary TabsCollapsable Field SetsError Messages
    • THANK YOU