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