View
117
Download
0
Category
Tags:
Preview:
DESCRIPTION
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
Citation preview
THE ART OF WIREFRAMINGVISUALIZING THE USER EXPERIENCE
FLOOR VAHNLEAD DESIGNER
WHY WIREFRAME ?IN 1 MINUTE OR LESS...
GAIN UNDERSTANDING
!
HELPPROJECT WORKFLOW
INFORM STAKEHOLDERS
?
MAKEDESIGNERS DEVELOPERSHAPPY
+
3 COMMONWIREFRAMETYPES
WIREFRAME SKETCHESQuick / experiment + feedback
LOW FIDELITY WIREFRAMESBlock diagrams / testing flows
HIGH FIDELITYWIREFRAMESDetailed, includes comments
GREYBOXING
BUSINESSAS USUAL...
IDE
A G
EN
ER
ATIO
N
LOW
FIDE
LITY
HIG
H FID
ELIT
Y
CO
NC
EP
T S
ELE
CT
ION
GREYBOXING
Shows a lot of detail close to built product
Allows for detailsearly in the project
ConversationDESIGNER
STAKEHOLDERClients get bogged down in detail.
watch out:
POPULARWIREFRAMINGTOOLS
balsamiq
adobe illustrator
omnigraffle
visio
axure
adobe fireworks
MAKES ME HAPPY :)
FIREWORKS
Multiple Pages in 1 Document
Create & Share Libraries
Create, Share, Reuse Symbols
Create Non-destructive Effects
Pixel-accurate Rendering
Build a Wireframe Stencil
A FEW EXAMPLES
MOODBOARDS
H1
H2
A
B
WIREFRAMING DESIGNING
DESIGN... WHILE YOUWIREFRAME??
+
TECHNIQUE
CREATINGA GREYBOX MODEL
CREATEYOUR OWN
OURSDOWNLOAD
or
DOWNLOAD @www.chapterthree.com/greyboxing
ESSENTIAL DRUPAL PAGES
SYMBOLS INDOCUMENT LIBRARY
SYMBOL EDITING WINDOW
CREATE YOUR OWN STENCILS
SHARE WITHOTHERS
ALLYOURS!
SYMBOLS VS STYLES
STYLES
SYMBOLS
TIPS...
960 GRIDwww.960.gs
970 GRID?
ORANGE COMMANDSWorkflow Automation for Fireworks
orangecommands.comAlignAlphaCanvasColorEffectsExportExport Settings
GridsGuidesPagesPositionPropertiesSelectSize
DRUPAL ELEMENTSwhat did I miss...
PAGE ELEMENTSDRUPAL
Block Titles & Block Styles
“More” Button
Comments
Bread Crumbs
Pagination
DRUPALADMIN
Admin Tabs & Secondary Tabs
Collapsable Field Sets
Error Messages
THANK YOU
Recommended