The Art of Wireframing
-
Upload
floor-van-herreweghe -
Category
Design
-
view
117 -
download
0
description
Transcript of The Art of Wireframing
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