SlideShare a Scribd company logo
1 of 7
Download to read offline
Wireframes:
What’s Their Deal?
Andrew Crawford, UX Designer
More Than Just a Blueprint
• Many people view wires as page layouts
• While layout is important it’s only one of the things that wireframes
address
• A more accurate description would be experience simulations
Wires & UX Design
• UX Design is built around the relationship between two things: Affordances
and Signifiers
• An affordance is an action a website or app allows users to do
• A signifier is what lets users know they can perform that action
Wires & UX Design
• In simplest terms, designing a user experience is the act of identifying
affordances and selecting appropriate signifiers
• After selecting signifiers, UX Designers put them together and document
them in wireframes
The Bigger Process
• Wires communicate the overall vision of what a project will be
• They do this by serving as a bridge between UX, Design, and
Content
The Bigger Process
• In addition to establishing the overall vision, wireframes allow us
to validate that vision
• They allow us to run user tests and catch issues before using
time and resources on development
Levels of Fidelity
• In most cases a “standard” wireframe at LB will have
• Designs for mobile, tablet and desktop
• Interactive mock ups of key features when appropriate
• In some instances we may need to create higher fidelity
prototypes, namely
• When we need something to run user tests on
• When a project includes complex functionality and interactions

More Related Content

Similar to What Are Wireframes?

Surah Drummer UX Portfolio
Surah Drummer UX PortfolioSurah Drummer UX Portfolio
Surah Drummer UX PortfolioSurah Drummer
 
Prototyping is the panacea
Prototyping is the panaceaPrototyping is the panacea
Prototyping is the panaceaMichael Meikson
 
Ui UX Design (Seminar) (1).pptx and useful for ui ux
Ui UX Design (Seminar) (1).pptx and useful for ui uxUi UX Design (Seminar) (1).pptx and useful for ui ux
Ui UX Design (Seminar) (1).pptx and useful for ui uxhiteshjena469
 
Ui UX Design (Seminar) (1).pptx and useful for ui ux
Ui UX Design (Seminar) (1).pptx and useful for ui uxUi UX Design (Seminar) (1).pptx and useful for ui ux
Ui UX Design (Seminar) (1).pptx and useful for ui uxhiteshjena469
 
UX Design&Agile Collaboration Models
UX Design&Agile Collaboration ModelsUX Design&Agile Collaboration Models
UX Design&Agile Collaboration ModelsTanya Zavialova
 
Few Words About User Experience Design
Few Words About User Experience DesignFew Words About User Experience Design
Few Words About User Experience DesignVlad Namașco
 
Designer vs Developer
Designer vs DeveloperDesigner vs Developer
Designer vs DeveloperBryan Gulley
 
Module 1st USER INTERFACE DESIGN (15CS832) - VTU
Module 1st USER INTERFACE DESIGN (15CS832) - VTU Module 1st USER INTERFACE DESIGN (15CS832) - VTU
Module 1st USER INTERFACE DESIGN (15CS832) - VTU Sachin Gowda
 
digital marketing[1].pdf
digital marketing[1].pdfdigital marketing[1].pdf
digital marketing[1].pdfTECHCENTRAL3
 
Social networking website
Social networking websiteSocial networking website
Social networking websitekamaljune
 
UX Sales Material January 2022
UX Sales Material January 2022UX Sales Material January 2022
UX Sales Material January 2022CaitlinB3
 
Rabbit Hole® – A User Experience Case StudyCx ux engage_2014_rabbit_hole
Rabbit Hole® – A User Experience Case StudyCx ux engage_2014_rabbit_holeRabbit Hole® – A User Experience Case StudyCx ux engage_2014_rabbit_hole
Rabbit Hole® – A User Experience Case StudyCx ux engage_2014_rabbit_holeAvtex
 
Designing Intuitive SharePoint Sites: The Science of "Easy to Use"
Designing Intuitive SharePoint Sites: The Science of "Easy to Use" Designing Intuitive SharePoint Sites: The Science of "Easy to Use"
Designing Intuitive SharePoint Sites: The Science of "Easy to Use" Marcy Kellar
 
PIGIN Impact Academy UX Glossary.pptx
PIGIN Impact Academy UX Glossary.pptxPIGIN Impact Academy UX Glossary.pptx
PIGIN Impact Academy UX Glossary.pptxEmployabilityClinic
 
User Centered Design
User Centered DesignUser Centered Design
User Centered DesignShawn Calvert
 

Similar to What Are Wireframes? (20)

Surah Drummer UX Portfolio
Surah Drummer UX PortfolioSurah Drummer UX Portfolio
Surah Drummer UX Portfolio
 
Prototyping is the panacea
Prototyping is the panaceaPrototyping is the panacea
Prototyping is the panacea
 
Ui UX Design (Seminar) (1).pptx and useful for ui ux
Ui UX Design (Seminar) (1).pptx and useful for ui uxUi UX Design (Seminar) (1).pptx and useful for ui ux
Ui UX Design (Seminar) (1).pptx and useful for ui ux
 
Ui UX Design (Seminar) (1).pptx and useful for ui ux
Ui UX Design (Seminar) (1).pptx and useful for ui uxUi UX Design (Seminar) (1).pptx and useful for ui ux
Ui UX Design (Seminar) (1).pptx and useful for ui ux
 
UX Design&Agile Collaboration Models
UX Design&Agile Collaboration ModelsUX Design&Agile Collaboration Models
UX Design&Agile Collaboration Models
 
Few Words About User Experience Design
Few Words About User Experience DesignFew Words About User Experience Design
Few Words About User Experience Design
 
What Design Means to Me
What Design Means to MeWhat Design Means to Me
What Design Means to Me
 
Designer vs Developer
Designer vs DeveloperDesigner vs Developer
Designer vs Developer
 
Module 1st USER INTERFACE DESIGN (15CS832) - VTU
Module 1st USER INTERFACE DESIGN (15CS832) - VTU Module 1st USER INTERFACE DESIGN (15CS832) - VTU
Module 1st USER INTERFACE DESIGN (15CS832) - VTU
 
digital marketing[1].pdf
digital marketing[1].pdfdigital marketing[1].pdf
digital marketing[1].pdf
 
Social networking website
Social networking websiteSocial networking website
Social networking website
 
UX Sales Material January 2022
UX Sales Material January 2022UX Sales Material January 2022
UX Sales Material January 2022
 
Design Project.pptx
Design Project.pptxDesign Project.pptx
Design Project.pptx
 
Design Project.pptx
Design Project.pptxDesign Project.pptx
Design Project.pptx
 
Rabbit Hole® – A User Experience Case StudyCx ux engage_2014_rabbit_hole
Rabbit Hole® – A User Experience Case StudyCx ux engage_2014_rabbit_holeRabbit Hole® – A User Experience Case StudyCx ux engage_2014_rabbit_hole
Rabbit Hole® – A User Experience Case StudyCx ux engage_2014_rabbit_hole
 
Designing Intuitive SharePoint Sites: The Science of "Easy to Use"
Designing Intuitive SharePoint Sites: The Science of "Easy to Use" Designing Intuitive SharePoint Sites: The Science of "Easy to Use"
Designing Intuitive SharePoint Sites: The Science of "Easy to Use"
 
How to achieve the ux goals
How to achieve the ux goalsHow to achieve the ux goals
How to achieve the ux goals
 
Interaction-design-basic.pptx
Interaction-design-basic.pptxInteraction-design-basic.pptx
Interaction-design-basic.pptx
 
PIGIN Impact Academy UX Glossary.pptx
PIGIN Impact Academy UX Glossary.pptxPIGIN Impact Academy UX Glossary.pptx
PIGIN Impact Academy UX Glossary.pptx
 
User Centered Design
User Centered DesignUser Centered Design
User Centered Design
 

Recently uploaded

Snapshot of Consumer Behaviors of March 2024-EOLiSurvey (EN).pdf
Snapshot of Consumer Behaviors of March 2024-EOLiSurvey (EN).pdfSnapshot of Consumer Behaviors of March 2024-EOLiSurvey (EN).pdf
Snapshot of Consumer Behaviors of March 2024-EOLiSurvey (EN).pdfEastern Online-iSURVEY
 
Social Samosa Guidebook for SAMMIES 2024.pdf
Social Samosa Guidebook for SAMMIES 2024.pdfSocial Samosa Guidebook for SAMMIES 2024.pdf
Social Samosa Guidebook for SAMMIES 2024.pdfSocial Samosa
 
Storyboards for my Final Major Project Video
Storyboards for my Final Major Project VideoStoryboards for my Final Major Project Video
Storyboards for my Final Major Project VideoSineadBidwell
 
pptx.marketing strategy of tanishq. pptx
pptx.marketing strategy of tanishq. pptxpptx.marketing strategy of tanishq. pptx
pptx.marketing strategy of tanishq. pptxarsathsahil
 
Jai Institute for Parenting Program Guide
Jai Institute for Parenting Program GuideJai Institute for Parenting Program Guide
Jai Institute for Parenting Program Guidekiva6
 
定制(ULV毕业证书)拉文大学毕业证成绩单原版一比一
定制(ULV毕业证书)拉文大学毕业证成绩单原版一比一定制(ULV毕业证书)拉文大学毕业证成绩单原版一比一
定制(ULV毕业证书)拉文大学毕业证成绩单原版一比一s SS
 
BrightonSEO - Addressing SEO & CX - CMDL - Apr 24 .pptx
BrightonSEO -  Addressing SEO & CX - CMDL - Apr 24 .pptxBrightonSEO -  Addressing SEO & CX - CMDL - Apr 24 .pptx
BrightonSEO - Addressing SEO & CX - CMDL - Apr 24 .pptxcollette15
 
Red bull marketing presentation pptxxxxx
Red bull marketing presentation pptxxxxxRed bull marketing presentation pptxxxxx
Red bull marketing presentation pptxxxxx216310017
 
McDonald's: A Journey Through Time (PPT)
McDonald's: A Journey Through Time (PPT)McDonald's: A Journey Through Time (PPT)
McDonald's: A Journey Through Time (PPT)DEVARAJV16
 
Content Marketing For A Travel Website On The Examples Of: Booking.com; TripA...
Content Marketing For A Travel Website On The Examples Of: Booking.com; TripA...Content Marketing For A Travel Website On The Examples Of: Booking.com; TripA...
Content Marketing For A Travel Website On The Examples Of: Booking.com; TripA...robertpresz7
 
Forecast of Content Marketing through AI
Forecast of Content Marketing through AIForecast of Content Marketing through AI
Forecast of Content Marketing through AIRinky
 
How videos can elevate your Google rankings and improve your EEAT - Benjamin ...
How videos can elevate your Google rankings and improve your EEAT - Benjamin ...How videos can elevate your Google rankings and improve your EEAT - Benjamin ...
How videos can elevate your Google rankings and improve your EEAT - Benjamin ...Benjamin Szturmaj
 
DIGITAL MARKETING STRATEGY_INFOGRAPHIC IMAGE.pdf
DIGITAL MARKETING STRATEGY_INFOGRAPHIC IMAGE.pdfDIGITAL MARKETING STRATEGY_INFOGRAPHIC IMAGE.pdf
DIGITAL MARKETING STRATEGY_INFOGRAPHIC IMAGE.pdfmayanksharma0441
 
DGR_Digital Advertising Strategies for a Cookieless World_Presentation.pdf
DGR_Digital Advertising Strategies for a Cookieless World_Presentation.pdfDGR_Digital Advertising Strategies for a Cookieless World_Presentation.pdf
DGR_Digital Advertising Strategies for a Cookieless World_Presentation.pdfDemandbase
 
Avoid the 2025 web accessibility rush: do not fear WCAG compliance
Avoid the 2025 web accessibility rush: do not fear WCAG complianceAvoid the 2025 web accessibility rush: do not fear WCAG compliance
Avoid the 2025 web accessibility rush: do not fear WCAG complianceDamien ROBERT
 
Best Persuasive selling skills presentation.pptx
Best Persuasive selling skills  presentation.pptxBest Persuasive selling skills  presentation.pptx
Best Persuasive selling skills presentation.pptxMasterPhil1
 
Common Culture: Paul Willis Symbolic Creativity
Common Culture: Paul Willis Symbolic CreativityCommon Culture: Paul Willis Symbolic Creativity
Common Culture: Paul Willis Symbolic CreativityMonishka Adhikari
 
Local SEO Domination: Put your business at the forefront of local searches!
Local SEO Domination:  Put your business at the forefront of local searches!Local SEO Domination:  Put your business at the forefront of local searches!
Local SEO Domination: Put your business at the forefront of local searches!dstvtechnician
 
The Pitfalls of Keyword Stuffing in SEO Copywriting
The Pitfalls of Keyword Stuffing in SEO CopywritingThe Pitfalls of Keyword Stuffing in SEO Copywriting
The Pitfalls of Keyword Stuffing in SEO CopywritingJuan Pineda
 
Word Count for Writers: Examples of Word Counts for Sample Genres
Word Count for Writers: Examples of Word Counts for Sample GenresWord Count for Writers: Examples of Word Counts for Sample Genres
Word Count for Writers: Examples of Word Counts for Sample GenresLisa M. Masiello
 

Recently uploaded (20)

Snapshot of Consumer Behaviors of March 2024-EOLiSurvey (EN).pdf
Snapshot of Consumer Behaviors of March 2024-EOLiSurvey (EN).pdfSnapshot of Consumer Behaviors of March 2024-EOLiSurvey (EN).pdf
Snapshot of Consumer Behaviors of March 2024-EOLiSurvey (EN).pdf
 
Social Samosa Guidebook for SAMMIES 2024.pdf
Social Samosa Guidebook for SAMMIES 2024.pdfSocial Samosa Guidebook for SAMMIES 2024.pdf
Social Samosa Guidebook for SAMMIES 2024.pdf
 
Storyboards for my Final Major Project Video
Storyboards for my Final Major Project VideoStoryboards for my Final Major Project Video
Storyboards for my Final Major Project Video
 
pptx.marketing strategy of tanishq. pptx
pptx.marketing strategy of tanishq. pptxpptx.marketing strategy of tanishq. pptx
pptx.marketing strategy of tanishq. pptx
 
Jai Institute for Parenting Program Guide
Jai Institute for Parenting Program GuideJai Institute for Parenting Program Guide
Jai Institute for Parenting Program Guide
 
定制(ULV毕业证书)拉文大学毕业证成绩单原版一比一
定制(ULV毕业证书)拉文大学毕业证成绩单原版一比一定制(ULV毕业证书)拉文大学毕业证成绩单原版一比一
定制(ULV毕业证书)拉文大学毕业证成绩单原版一比一
 
BrightonSEO - Addressing SEO & CX - CMDL - Apr 24 .pptx
BrightonSEO -  Addressing SEO & CX - CMDL - Apr 24 .pptxBrightonSEO -  Addressing SEO & CX - CMDL - Apr 24 .pptx
BrightonSEO - Addressing SEO & CX - CMDL - Apr 24 .pptx
 
Red bull marketing presentation pptxxxxx
Red bull marketing presentation pptxxxxxRed bull marketing presentation pptxxxxx
Red bull marketing presentation pptxxxxx
 
McDonald's: A Journey Through Time (PPT)
McDonald's: A Journey Through Time (PPT)McDonald's: A Journey Through Time (PPT)
McDonald's: A Journey Through Time (PPT)
 
Content Marketing For A Travel Website On The Examples Of: Booking.com; TripA...
Content Marketing For A Travel Website On The Examples Of: Booking.com; TripA...Content Marketing For A Travel Website On The Examples Of: Booking.com; TripA...
Content Marketing For A Travel Website On The Examples Of: Booking.com; TripA...
 
Forecast of Content Marketing through AI
Forecast of Content Marketing through AIForecast of Content Marketing through AI
Forecast of Content Marketing through AI
 
How videos can elevate your Google rankings and improve your EEAT - Benjamin ...
How videos can elevate your Google rankings and improve your EEAT - Benjamin ...How videos can elevate your Google rankings and improve your EEAT - Benjamin ...
How videos can elevate your Google rankings and improve your EEAT - Benjamin ...
 
DIGITAL MARKETING STRATEGY_INFOGRAPHIC IMAGE.pdf
DIGITAL MARKETING STRATEGY_INFOGRAPHIC IMAGE.pdfDIGITAL MARKETING STRATEGY_INFOGRAPHIC IMAGE.pdf
DIGITAL MARKETING STRATEGY_INFOGRAPHIC IMAGE.pdf
 
DGR_Digital Advertising Strategies for a Cookieless World_Presentation.pdf
DGR_Digital Advertising Strategies for a Cookieless World_Presentation.pdfDGR_Digital Advertising Strategies for a Cookieless World_Presentation.pdf
DGR_Digital Advertising Strategies for a Cookieless World_Presentation.pdf
 
Avoid the 2025 web accessibility rush: do not fear WCAG compliance
Avoid the 2025 web accessibility rush: do not fear WCAG complianceAvoid the 2025 web accessibility rush: do not fear WCAG compliance
Avoid the 2025 web accessibility rush: do not fear WCAG compliance
 
Best Persuasive selling skills presentation.pptx
Best Persuasive selling skills  presentation.pptxBest Persuasive selling skills  presentation.pptx
Best Persuasive selling skills presentation.pptx
 
Common Culture: Paul Willis Symbolic Creativity
Common Culture: Paul Willis Symbolic CreativityCommon Culture: Paul Willis Symbolic Creativity
Common Culture: Paul Willis Symbolic Creativity
 
Local SEO Domination: Put your business at the forefront of local searches!
Local SEO Domination:  Put your business at the forefront of local searches!Local SEO Domination:  Put your business at the forefront of local searches!
Local SEO Domination: Put your business at the forefront of local searches!
 
The Pitfalls of Keyword Stuffing in SEO Copywriting
The Pitfalls of Keyword Stuffing in SEO CopywritingThe Pitfalls of Keyword Stuffing in SEO Copywriting
The Pitfalls of Keyword Stuffing in SEO Copywriting
 
Word Count for Writers: Examples of Word Counts for Sample Genres
Word Count for Writers: Examples of Word Counts for Sample GenresWord Count for Writers: Examples of Word Counts for Sample Genres
Word Count for Writers: Examples of Word Counts for Sample Genres
 

What Are Wireframes?

  • 2. More Than Just a Blueprint • Many people view wires as page layouts • While layout is important it’s only one of the things that wireframes address • A more accurate description would be experience simulations
  • 3. Wires & UX Design • UX Design is built around the relationship between two things: Affordances and Signifiers • An affordance is an action a website or app allows users to do • A signifier is what lets users know they can perform that action
  • 4. Wires & UX Design • In simplest terms, designing a user experience is the act of identifying affordances and selecting appropriate signifiers • After selecting signifiers, UX Designers put them together and document them in wireframes
  • 5. The Bigger Process • Wires communicate the overall vision of what a project will be • They do this by serving as a bridge between UX, Design, and Content
  • 6. The Bigger Process • In addition to establishing the overall vision, wireframes allow us to validate that vision • They allow us to run user tests and catch issues before using time and resources on development
  • 7. Levels of Fidelity • In most cases a “standard” wireframe at LB will have • Designs for mobile, tablet and desktop • Interactive mock ups of key features when appropriate • In some instances we may need to create higher fidelity prototypes, namely • When we need something to run user tests on • When a project includes complex functionality and interactions