SlideShare una empresa de Scribd logo
1 de 73
Descargar para leer sin conexión
THE ART OF
WIREFRAMING
VISUALIZING THE USER EXPERIENCE
FLOOR VAHN
 LEAD DESIGNER
WHY
WIREFRAME ?
IN 1 MINUTE OR LESS...
!
GAIN
UNDERSTANDING
HELP
PROJECT
WORKFLOW
?


INFORM
STAKEHOLDERS
MAKE + DEVELOPERS
DESIGNERS
HAPPY
3 COMMON
WIREFRAME
TYPES
WIREFRAME
SKETCHES
Quick / experiment
+ feedback
LOW FIDELITY
WIREFRAMES
Block diagrams /
testing flows
HIGH FIDELITY
WIREFRAMES
Detailed, includes
comments
GREYBOXING
BUSINESS
AS USUAL...
CONCEPT SELECTION
        GREYBOXING


HIGH FIDELITY
LOW FIDELITY
IDEA GENERATION
Shows a lot of detail
                close to built product

Allows for details
early in the project
                          DESIGNER

watch out:               Conversation
                        STAKEHOLDER
Clients get bogged
down in detail.
POPULAR
WIREFRAMING
TOOLS
balsamiq
adobe illustrator
omnigraffle
visio
axure
adobe fireworks
FIREWORKS
 MAKES ME HAPPY :)
Create & Share Libraries
Create Non-destructive Effects
Multiple Pages in 1 Document
Create, Share, Reuse Symbols
Build a Wireframe Stencil
Pixel-accurate Rendering
A FEW
EXAMPLES
The Art of Wireframing
The Art of Wireframing
The Art of Wireframing
MOODBOARDS
The Art of Wireframing
The Art of Wireframing
The Art of Wireframing
The Art of Wireframing
H1
H2
The Art of Wireframing
A

    B
WIREFRAMING
      GNINGISED
DESIGN...
WHILE YOU
WIREFRAME??
The Art of Wireframing
+
The Art of Wireframing
TECHNIQUE
CREATING
A GREYBOX MODEL
CREATE
 YOUR OWN
    or
DOWNLOAD
  OURS
DOWNLOAD @
www.chapterthree.com/greyboxing
ESSENTIAL
DRUPAL PAGES
The Art of Wireframing
The Art of Wireframing
The Art of Wireframing
The Art of Wireframing
The Art of Wireframing
The Art of Wireframing
The Art of Wireframing
SYMBOLS IN
DOCUMENT
LIBRARY
The Art of Wireframing
The Art of Wireframing
SYMBOL
EDITING
WINDOW
The Art of Wireframing
CREATE
YOUR
OWN
STENCILS
SHARE
WITH
OTHERS
ALL
YOURS!
SYMBOLS VS
STYLES
STYLES
SYMBOLS
TIPS...
960 GRID
www.960.gs
The Art of Wireframing
The Art of Wireframing
970 GRID?
ORANGE COMMANDS
Workflow Automation for Fireworks




                   orangecommands.com
                   Align             Grids
                   Alpha             Guides
                   Canvas            Pages
                   Color             Position
                   Effects           Properties
                   Export            Select
                   Export Settings   Size
DRUPAL
ELEMENTS
what did I miss...
DRUPAL
PAGE ELEMENTS
Block Titles & Block Styles
“More” Button
Comments
Bread Crumbs
Pagination
DRUPAL
ADMIN
Admin Tabs & Secondary Tabs
Collapsable Field Sets
Error Messages
The Art of Wireframing
THANK YOU

Más contenido relacionado

La actualidad más candente

Power point essentials
Power point essentialsPower point essentials
Power point essentialsnuttela_pants
 
Building Blocks For Your Modules Ui
Building Blocks For Your Modules UiBuilding Blocks For Your Modules Ui
Building Blocks For Your Modules UiRoy Scholten
 
I didn't know PowerPoint could do that
I didn't know PowerPoint could do thatI didn't know PowerPoint could do that
I didn't know PowerPoint could do thatAmey Holden
 
Drupal Gardens Tutorial 2 of 4
Drupal Gardens Tutorial 2 of 4Drupal Gardens Tutorial 2 of 4
Drupal Gardens Tutorial 2 of 4Kevin Duggan
 
Design Concepts and Web Design
Design Concepts and Web DesignDesign Concepts and Web Design
Design Concepts and Web DesignMindy McAdams
 

La actualidad más candente (6)

Power point essentials
Power point essentialsPower point essentials
Power point essentials
 
Building Blocks For Your Modules Ui
Building Blocks For Your Modules UiBuilding Blocks For Your Modules Ui
Building Blocks For Your Modules Ui
 
I didn't know PowerPoint could do that
I didn't know PowerPoint could do thatI didn't know PowerPoint could do that
I didn't know PowerPoint could do that
 
alvaradoAmauri_Resume
alvaradoAmauri_ResumealvaradoAmauri_Resume
alvaradoAmauri_Resume
 
Drupal Gardens Tutorial 2 of 4
Drupal Gardens Tutorial 2 of 4Drupal Gardens Tutorial 2 of 4
Drupal Gardens Tutorial 2 of 4
 
Design Concepts and Web Design
Design Concepts and Web DesignDesign Concepts and Web Design
Design Concepts and Web Design
 

Similar a The Art of Wireframing

The Features of Highly Effective Forms [An Event Apart Nashville 2016]
The Features of Highly Effective Forms [An Event Apart Nashville 2016]The Features of Highly Effective Forms [An Event Apart Nashville 2016]
The Features of Highly Effective Forms [An Event Apart Nashville 2016]Aaron Gustafson
 
Design Before Code - Global Accessibility Awareness Day Edition
Design Before Code - Global Accessibility Awareness Day EditionDesign Before Code - Global Accessibility Awareness Day Edition
Design Before Code - Global Accessibility Awareness Day EditionCaitlin Geier
 
Early prevention of accessibility issues with mockup & wireframe reviews
Early prevention of accessibility issues with mockup & wireframe reviewsEarly prevention of accessibility issues with mockup & wireframe reviews
Early prevention of accessibility issues with mockup & wireframe reviewsAidan Tierney
 
Unify Design & Deliverables
Unify Design & DeliverablesUnify Design & Deliverables
Unify Design & Deliverablesnathanacurtis
 
From Flash to Canvas - a penchant for black holes
From Flash to Canvas - a penchant for black holesFrom Flash to Canvas - a penchant for black holes
From Flash to Canvas - a penchant for black holesPatric Lanhed
 
Software Tools of Experience Design
Software Tools of Experience DesignSoftware Tools of Experience Design
Software Tools of Experience DesignDana Giuliana
 
Style Guides Are The New Photoshop (Smashing Conference 2012)
Style Guides Are The New Photoshop (Smashing Conference 2012)Style Guides Are The New Photoshop (Smashing Conference 2012)
Style Guides Are The New Photoshop (Smashing Conference 2012)Stephen Hay
 
Engcomp1 dasilvanathalia
Engcomp1 dasilvanathaliaEngcomp1 dasilvanathalia
Engcomp1 dasilvanathalianathalia0910
 
Better Design Built Faster: Using New UI Technologies to Speed Development
Better Design Built Faster: Using New UI Technologies to Speed DevelopmentBetter Design Built Faster: Using New UI Technologies to Speed Development
Better Design Built Faster: Using New UI Technologies to Speed Developmentgoodfriday
 
Protean-The collaboration suite
Protean-The collaboration suiteProtean-The collaboration suite
Protean-The collaboration suiteguestb99fe9a
 
Designing better user interfaces
Designing better user interfacesDesigning better user interfaces
Designing better user interfacesJohan Ronsse
 
Design Before Code: Thinking About Accessibility from the Ground Up
Design Before Code: Thinking About Accessibility from the Ground UpDesign Before Code: Thinking About Accessibility from the Ground Up
Design Before Code: Thinking About Accessibility from the Ground UpCaitlin Geier
 
Rich User Interaction with SVG
Rich User Interaction with SVGRich User Interaction with SVG
Rich User Interaction with SVGstsire
 
CSS3 and a brief introduction to Google Maps API v3
CSS3 and a brief introduction to Google Maps API v3 CSS3 and a brief introduction to Google Maps API v3
CSS3 and a brief introduction to Google Maps API v3 Jeffrey Barke
 
How to create the best wireframes
How to create the best wireframesHow to create the best wireframes
How to create the best wireframesLior Yair
 
Design Systems at Scale
Design Systems at ScaleDesign Systems at Scale
Design Systems at ScaleSarah Federman
 

Similar a The Art of Wireframing (20)

Media queries
Media queriesMedia queries
Media queries
 
Demystifying DITA to PDF Publishing
Demystifying DITA to PDF PublishingDemystifying DITA to PDF Publishing
Demystifying DITA to PDF Publishing
 
The Features of Highly Effective Forms [An Event Apart Nashville 2016]
The Features of Highly Effective Forms [An Event Apart Nashville 2016]The Features of Highly Effective Forms [An Event Apart Nashville 2016]
The Features of Highly Effective Forms [An Event Apart Nashville 2016]
 
Design Before Code - Global Accessibility Awareness Day Edition
Design Before Code - Global Accessibility Awareness Day EditionDesign Before Code - Global Accessibility Awareness Day Edition
Design Before Code - Global Accessibility Awareness Day Edition
 
Early prevention of accessibility issues with mockup & wireframe reviews
Early prevention of accessibility issues with mockup & wireframe reviewsEarly prevention of accessibility issues with mockup & wireframe reviews
Early prevention of accessibility issues with mockup & wireframe reviews
 
HTML5 for the Flash Developer
HTML5 for the Flash DeveloperHTML5 for the Flash Developer
HTML5 for the Flash Developer
 
Unify Design & Deliverables
Unify Design & DeliverablesUnify Design & Deliverables
Unify Design & Deliverables
 
From Flash to Canvas - a penchant for black holes
From Flash to Canvas - a penchant for black holesFrom Flash to Canvas - a penchant for black holes
From Flash to Canvas - a penchant for black holes
 
Software Tools of Experience Design
Software Tools of Experience DesignSoftware Tools of Experience Design
Software Tools of Experience Design
 
Tools of the Trade
Tools of the TradeTools of the Trade
Tools of the Trade
 
Style Guides Are The New Photoshop (Smashing Conference 2012)
Style Guides Are The New Photoshop (Smashing Conference 2012)Style Guides Are The New Photoshop (Smashing Conference 2012)
Style Guides Are The New Photoshop (Smashing Conference 2012)
 
Engcomp1 dasilvanathalia
Engcomp1 dasilvanathaliaEngcomp1 dasilvanathalia
Engcomp1 dasilvanathalia
 
Better Design Built Faster: Using New UI Technologies to Speed Development
Better Design Built Faster: Using New UI Technologies to Speed DevelopmentBetter Design Built Faster: Using New UI Technologies to Speed Development
Better Design Built Faster: Using New UI Technologies to Speed Development
 
Protean-The collaboration suite
Protean-The collaboration suiteProtean-The collaboration suite
Protean-The collaboration suite
 
Designing better user interfaces
Designing better user interfacesDesigning better user interfaces
Designing better user interfaces
 
Design Before Code: Thinking About Accessibility from the Ground Up
Design Before Code: Thinking About Accessibility from the Ground UpDesign Before Code: Thinking About Accessibility from the Ground Up
Design Before Code: Thinking About Accessibility from the Ground Up
 
Rich User Interaction with SVG
Rich User Interaction with SVGRich User Interaction with SVG
Rich User Interaction with SVG
 
CSS3 and a brief introduction to Google Maps API v3
CSS3 and a brief introduction to Google Maps API v3 CSS3 and a brief introduction to Google Maps API v3
CSS3 and a brief introduction to Google Maps API v3
 
How to create the best wireframes
How to create the best wireframesHow to create the best wireframes
How to create the best wireframes
 
Design Systems at Scale
Design Systems at ScaleDesign Systems at Scale
Design Systems at Scale
 

Último

The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
INTRODUCTION TO UI/UX DESIGN BEGINNERS.pdf
INTRODUCTION TO UI/UX DESIGN BEGINNERS.pdfINTRODUCTION TO UI/UX DESIGN BEGINNERS.pdf
INTRODUCTION TO UI/UX DESIGN BEGINNERS.pdfphriedaoyigada
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
Materi dasar prototype dan figma .pdf
Materi dasar prototype dan figma    .pdfMateri dasar prototype dan figma    .pdf
Materi dasar prototype dan figma .pdfardanaadam1
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Central-Visayas-1.pdf reporting purposes
Central-Visayas-1.pdf reporting purposesCentral-Visayas-1.pdf reporting purposes
Central-Visayas-1.pdf reporting purposesmilalabial
 
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...Pranav Subramanian
 
Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...
Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...
Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...Yantram Animation Studio Corporation
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 

Último (20)

The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
INTRODUCTION TO UI/UX DESIGN BEGINNERS.pdf
INTRODUCTION TO UI/UX DESIGN BEGINNERS.pdfINTRODUCTION TO UI/UX DESIGN BEGINNERS.pdf
INTRODUCTION TO UI/UX DESIGN BEGINNERS.pdf
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
Materi dasar prototype dan figma .pdf
Materi dasar prototype dan figma    .pdfMateri dasar prototype dan figma    .pdf
Materi dasar prototype dan figma .pdf
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Central-Visayas-1.pdf reporting purposes
Central-Visayas-1.pdf reporting purposesCentral-Visayas-1.pdf reporting purposes
Central-Visayas-1.pdf reporting purposes
 
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
 
Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...
Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...
Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 

The Art of Wireframing