SlideShare a Scribd company logo
1 of 28
Download to read offline
Crash Course in Wireframing
        by Marcel Moreau
The Web Process
is usually something like this:
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
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
Wireframes are web site
blueprints, void of design.
Types of Wireframes


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




                                        FOOTER
Hi-Fidelity
Mimics final layout
complete with
content
Functionality check
Annotated deliverable
Analogy
Building a house


“Do whatever you want.”
http://flic.kr/p/b9XcTX
Analogy
Building a house


DIMENSIONS

NAVIGABILITY

FUNCTIONALITY

FLOW

REAL WORLD INFORMATION
http://flic.kr/p/8vunZ2
Same idea
Building a web site


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


HIERARCHY

NAVIGABILITY

FUNCTIONALITY

LABELING

REAL WORLD CONTENT
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
SOFTWARE                                WEB APPS
                                        Mockingbird
                                        Balsamiq
                                        Lumzy
OmniGraffle   Microsoft Visio   Axure
My Setup



               +   Konigi Stencil Set


 OmniGraffle
Thanks!

  @marcelmoreau

More Related Content

What's hot

Right Way to Wireframe
Right Way to WireframeRight Way to Wireframe
Right Way to Wireframe
William Evans
 
Lean prototyping for entrepreneurs
Lean prototyping for entrepreneursLean prototyping for entrepreneurs
Lean prototyping for entrepreneurs
Amir Khella
 
Modern UX, UI, and front-end tools
Modern UX, UI, and front-end toolsModern UX, UI, and front-end tools
Modern UX, UI, and front-end tools
Alan Roy
 

What's hot (20)

Training Webinar - Wireframing made easy
Training Webinar - Wireframing made easyTraining Webinar - Wireframing made easy
Training Webinar - Wireframing made easy
 
Wireframe and Mockup Templates by Creately
Wireframe and Mockup Templates by CreatelyWireframe and Mockup Templates by Creately
Wireframe and Mockup Templates by Creately
 
Storyboarding and Wireframe Tools Review
Storyboarding and Wireframe Tools ReviewStoryboarding and Wireframe Tools Review
Storyboarding and Wireframe Tools Review
 
Mockup, wireframe e visual: una breve introduzione
Mockup, wireframe e visual: una breve introduzioneMockup, wireframe e visual: una breve introduzione
Mockup, wireframe e visual: una breve introduzione
 
Wireframes - a brief overview
Wireframes - a brief overviewWireframes - a brief overview
Wireframes - a brief overview
 
Mock it till you Make it - a Wireframing Workshop
Mock it till you Make it - a Wireframing WorkshopMock it till you Make it - a Wireframing Workshop
Mock it till you Make it - a Wireframing Workshop
 
Right Way to Wireframe
Right Way to WireframeRight Way to Wireframe
Right Way to Wireframe
 
Workshop Mock-Ups
Workshop Mock-UpsWorkshop Mock-Ups
Workshop Mock-Ups
 
Lean Prototyping - A Practical Guide
Lean Prototyping - A Practical GuideLean Prototyping - A Practical Guide
Lean Prototyping - A Practical Guide
 
The guide to wireframing
The guide to wireframingThe guide to wireframing
The guide to wireframing
 
UX Pres MIni version!
UX Pres MIni version!UX Pres MIni version!
UX Pres MIni version!
 
Wine and Wireframes
Wine and WireframesWine and Wireframes
Wine and Wireframes
 
How To Design A Wireframe For Website
How To Design A Wireframe For WebsiteHow To Design A Wireframe For Website
How To Design A Wireframe For Website
 
Intro to Wireframing
Intro to WireframingIntro to Wireframing
Intro to Wireframing
 
UX Conceptual design - sketches, wireframes, mockups, prototypes
UX Conceptual design - sketches, wireframes, mockups, prototypesUX Conceptual design - sketches, wireframes, mockups, prototypes
UX Conceptual design - sketches, wireframes, mockups, prototypes
 
Lean prototyping for entrepreneurs
Lean prototyping for entrepreneursLean prototyping for entrepreneurs
Lean prototyping for entrepreneurs
 
Modern UX, UI, and front-end tools
Modern UX, UI, and front-end toolsModern UX, UI, and front-end tools
Modern UX, UI, and front-end tools
 
Design System - Fail, Learn, Build, Test
Design System - Fail, Learn, Build, TestDesign System - Fail, Learn, Build, Test
Design System - Fail, Learn, Build, Test
 
Prototyping invision vs axure
Prototyping invision vs axurePrototyping invision vs axure
Prototyping invision vs axure
 
Axure for dummies, that don't even know they are
Axure for dummies, that don't even know they areAxure for dummies, that don't even know they are
Axure for dummies, that don't even know they are
 

Viewers also liked

Viewers also liked (10)

What The Wireframe?
What The Wireframe?What The Wireframe?
What The Wireframe?
 
Website design workflow
Website design workflowWebsite design workflow
Website design workflow
 
Designers Guide To Wireframing
Designers Guide To WireframingDesigners Guide To Wireframing
Designers Guide To Wireframing
 
Workflow User Interfaces Patterns
Workflow User Interfaces PatternsWorkflow User Interfaces Patterns
Workflow User Interfaces Patterns
 
Planning and-wireframing
Planning and-wireframingPlanning and-wireframing
Planning and-wireframing
 
Wireframe that First: The Role of UX in Agencies
Wireframe that First: The Role of UX in AgenciesWireframe that First: The Role of UX in Agencies
Wireframe that First: The Role of UX in Agencies
 
The Guide To Wireframing
The Guide To WireframingThe Guide To Wireframing
The Guide To Wireframing
 
How to create a workflow
How to create a workflow How to create a workflow
How to create a workflow
 
Wireframing Fundamentals
Wireframing FundamentalsWireframing Fundamentals
Wireframing Fundamentals
 
Quick Tips to Wireframing & Prototyping
Quick Tips to Wireframing & PrototypingQuick Tips to Wireframing & Prototyping
Quick Tips to Wireframing & Prototyping
 

Similar to Crash Course in Wireframing

Class 4: Introduction to web technology entrepreneurship
Class 4: Introduction to web technology entrepreneurshipClass 4: Introduction to web technology entrepreneurship
Class 4: Introduction to web technology entrepreneurship
allanchao
 
How we Webflow at Webflow - No Code Conf 2019 Demo Theater
How we Webflow at Webflow - No Code Conf 2019 Demo TheaterHow we Webflow at Webflow - No Code Conf 2019 Demo Theater
How we Webflow at Webflow - No Code Conf 2019 Demo Theater
Webflow
 

Similar to Crash Course in Wireframing (20)

Tools of destruction - Efrim Bartosik
Tools of destruction  - Efrim BartosikTools of destruction  - Efrim Bartosik
Tools of destruction - Efrim Bartosik
 
MCA Society Project Seminar.pptx
MCA Society Project Seminar.pptxMCA Society Project Seminar.pptx
MCA Society Project Seminar.pptx
 
Class 4: Introduction to web technology entrepreneurship
Class 4: Introduction to web technology entrepreneurshipClass 4: Introduction to web technology entrepreneurship
Class 4: Introduction to web technology entrepreneurship
 
Jennifer Robbins: ARTIFACT Conference Keynote
Jennifer Robbins: ARTIFACT Conference KeynoteJennifer Robbins: ARTIFACT Conference Keynote
Jennifer Robbins: ARTIFACT Conference Keynote
 
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
 
Eric Weathers 14
Eric Weathers   14Eric Weathers   14
Eric Weathers 14
 
resume
resumeresume
resume
 
Université Laval - Analyste d'affaires - agence affaires électroniques - Alai...
Université Laval - Analyste d'affaires - agence affaires électroniques - Alai...Université Laval - Analyste d'affaires - agence affaires électroniques - Alai...
Université Laval - Analyste d'affaires - agence affaires électroniques - Alai...
 
A COMPREHENSIVE GUIDE TO WEB DEVELOPMENT 2.pptx
A COMPREHENSIVE GUIDE TO WEB DEVELOPMENT 2.pptxA COMPREHENSIVE GUIDE TO WEB DEVELOPMENT 2.pptx
A COMPREHENSIVE GUIDE TO WEB DEVELOPMENT 2.pptx
 
Summit Australia 2019 - PowerApp Portals - Andrew Ly & Lachlan Wright
Summit Australia 2019 - PowerApp Portals - Andrew Ly & Lachlan WrightSummit Australia 2019 - PowerApp Portals - Andrew Ly & Lachlan Wright
Summit Australia 2019 - PowerApp Portals - Andrew Ly & Lachlan Wright
 
PPT on web development & SEO
PPT on web development & SEOPPT on web development & SEO
PPT on web development & SEO
 
LATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptx
LATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptxLATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptx
LATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptx
 
The Spirit of Opensource - contribution as a strategy for growth and innova...
The Spirit of Opensource   - contribution as a strategy for growth and innova...The Spirit of Opensource   - contribution as a strategy for growth and innova...
The Spirit of Opensource - contribution as a strategy for growth and innova...
 
Adobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + FireworksAdobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + Fireworks
 
Audits and Inventories: How To Mise en Place Your University's Website Redesign
Audits and Inventories: How To Mise en Place Your University's Website RedesignAudits and Inventories: How To Mise en Place Your University's Website Redesign
Audits and Inventories: How To Mise en Place Your University's Website Redesign
 
Web development services
Web development servicesWeb development services
Web development services
 
So You Wanna Build A Website! - LMU mSchool
So You Wanna Build A Website! - LMU mSchoolSo You Wanna Build A Website! - LMU mSchool
So You Wanna Build A Website! - LMU mSchool
 
How we Webflow at Webflow - No Code Conf 2019 Demo Theater
How we Webflow at Webflow - No Code Conf 2019 Demo TheaterHow we Webflow at Webflow - No Code Conf 2019 Demo Theater
How we Webflow at Webflow - No Code Conf 2019 Demo Theater
 
BrowserArchitecture_ClientSide.pdf
BrowserArchitecture_ClientSide.pdfBrowserArchitecture_ClientSide.pdf
BrowserArchitecture_ClientSide.pdf
 
Wireframes and UI-Prototypes
Wireframes and UI-PrototypesWireframes and UI-Prototypes
Wireframes and UI-Prototypes
 

Recently uploaded

Recently uploaded (20)

EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Ransomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdfRansomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdf
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 

Crash Course in Wireframing