Crash Course in Wireframing by Marcel Moreau
Crash Course in Wireframing
Nov 21, 2014
Understand what web site wireframes are and why they’re used.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Crash Course in Wireframingby Marcel Moreau
The Web Processis usually something like this:
The Web Processis usually something like this:
STRATEGY – research, competitive analysis, IA, wireframes
DESIGN – styleguide audit, moodboarding, design comps
DEVELOPMENT – code, integrate external systems
QA – browser testing, stress evaluations, performance
LAUNCH – site training, tying up any loose ends
The Web Processis usually something like this:
STRATEGY – research, competitive analysis, IA, wireframes
DESIGN – styleguide audit, moodboarding, design comps
DEVELOPMENT – code, integrate external systems
QA – browser testing, stress evaluations, performance
LAUNCH – site training, tying up any loose ends
Wireframes are web site blueprints, void of design.
Types of Wireframes
Lo-Fidelity Hi-Fidelity
BANNER
MAIN SIDEBAR
FOOTER
NAVAcme Meat Co.Lo-Fidelity
Great for brainstorms
Budget-friendly
Good flow tester
Hi-Fidelity
Mimics final layoutcomplete with content
Functionality check
Annotated deliverable
AnalogyBuilding a house
“Do whatever you want.”
AnalogyBuilding a house
DIMENSIONS
NAVIGABILITY
FUNCTIONALITY
REAL WORLD INFORMATION
FLOW
Same ideaBuilding a web site
“Do whatever you want.”
Same ideaBuilding a web site
HIERARCHY
NAVIGABILITY
FUNCTIONALITY
REAL WORLD CONTENT
LABELING
Benefits of Wireframing
EFFICIENCY
FOCUS
SPARK
THOUGHTFUL
TEAM HELPER
CONTENT
Example: Quaero Redesign
Redesign Goals
Generate more leads
Simplify complex messaging
Appear more like an agency
Be memorable
Tools to create wireframes
OmniGraffle
Mockingbird
SOFTWARE WEB APPS
Microsoft Visio
Balsamiq
AxureLumzy
My Setup
OmniGraffle
+ Konigi Stencil Set
Thanks!
@marcelmoreau
Related Documents
