The document discusses wireframing as the initial step in the web development process. It defines wireframes as basic site blueprints that define hierarchy, navigation, functionality, and content without visual design elements. The document outlines the typical web development process and explains how wireframing fits in during the strategy phase. It provides examples of low and high-fidelity wireframes and notes the benefits of wireframing such as efficiency, focus on critical elements, and facilitating team collaboration.

1. Crash Course in Wireframing
by Marcel Moreau

2. The Web Process
is usually something like this:

3. The Web Process
is 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

4. The Web Process
is 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

5. Wireframes are web site
blueprints, void of design.

6. Types of Wireframes
Lo-Fidelity Hi-Fidelity

7. Acme Meat Co. NAV
Lo-Fidelity
BANNER
Great for brainstorms
Budget-friendly
Good flow tester
MAIN SIDEBAR
FOOTER

8. Hi-Fidelity
Mimics final layout
complete with
content
Functionality check
Annotated deliverable

9. Analogy
Building a house
“Do whatever you want.”

10. http://flic.kr/p/b9XcTX

11. Analogy
Building a house
DIMENSIONS
NAVIGABILITY
FUNCTIONALITY
FLOW
REAL WORLD INFORMATION

12. http://flic.kr/p/8vunZ2

13. Same idea
Building a web site
“Do whatever you want.”

15. Same idea
Building a web site
HIERARCHY
NAVIGABILITY
FUNCTIONALITY
LABELING
REAL WORLD CONTENT

17. Benefits of Wireframing
EFFICIENCY
FOCUS
SPARK
THOUGHTFUL
TEAM HELPER
CONTENT

18. Example: Quaero Redesign

20. Redesign Goals
Generate more leads
Simplify complex messaging
Appear more like an agency
Be memorable

26. Tools to create wireframes
SOFTWARE WEB APPS
Mockingbird
Balsamiq
Lumzy
OmniGraffle Microsoft Visio Axure

27. My Setup
+ Konigi Stencil Set
OmniGraffle

28. Thanks!
@marcelmoreau