SlideShare a Scribd company logo
C H A N C E B L I S S
V P , U S E R E X P E R I E N C E
WHAT ARE
WIREFRAMES?
“Wirefames are schematics,
similar to a blueprint or floor
plan, used to represent the
basic architecture of a
website.“
Wireframes can take many forms
from low to high fidelity
WHITEBOARD SKETCH INTERACTIVE PROTOTYPE
Wireframes are used to make
decisions about:
Content
What types of content will users access?
Structure
How the content be grouped and labeled?
Hierarchy
What is the most to least important content?
Relationship
What is the relationship between groups of
content?
Functionality
How can the user do with the content?
User Flow
How will the user access and navigation
through the content?
Wireframes are not User Interface
Designs
Visual Style
Branding, color, typography, photography, iconography and video
Screen Layout
Placement and sizing of content and functional elements
Animation Style
Movement, speed and timing
WIREFRAME USER INTERFACE
Questions to ask when reviewing
wireframes
1. Is anything important missing from the page?
2. Is the most important content the first thing you notice?
3. Is there anything on the page that shouldn't be there?
4. Which content is related and how?
5. Can you get to all of the major sections of the site?
6. Do all of the labels make sense?
7. Do you know what all of the elements on the page are?
THANK YOU
CHANCE BLISS
VP, User Experience
iMedia Inc.
973.224.5154
cbliss@imediainc.com
Imediainc.com

More Related Content

Similar to What are wireframes?

J105 Web Design
J105 Web DesignJ105 Web Design
J105 Web Design
Chris Snider
 
Designing accessible web experiences
Designing accessible web experiencesDesigning accessible web experiences
Designing accessible web experiences
User Vision
 
Intro to UX Design
Intro to UX DesignIntro to UX Design
Intro to UX Design
jayyearley
 
Web Designing training in Chandigarh.pptx
Web Designing training in Chandigarh.pptxWeb Designing training in Chandigarh.pptx
Web Designing training in Chandigarh.pptx
asmeerana605
 
Professional ui for a website design
Professional ui for a website designProfessional ui for a website design
Professional ui for a website design
Ravi Bhadauria
 
Basics of Web Accessibility
Basics of Web AccessibilityBasics of Web Accessibility
Basics of Web Accessibility
Moin Shaikh
 
UXify Eindhoven: Best practices on the Web
UXify Eindhoven: Best practices on the WebUXify Eindhoven: Best practices on the Web
UXify Eindhoven: Best practices on the Web
Tatiana Sidorenkova
 
Web Designing Course in Chandigarh Join Now.pptx
Web Designing Course in Chandigarh Join Now.pptxWeb Designing Course in Chandigarh Join Now.pptx
Web Designing Course in Chandigarh Join Now.pptx
asmeerana605
 
WEB DESIGN
WEB DESIGNWEB DESIGN
FUNDAMENTALS OF WEB DESIGNING
FUNDAMENTALS OF WEB DESIGNINGFUNDAMENTALS OF WEB DESIGNING
FUNDAMENTALS OF WEB DESIGNING
priyadharshinihari
 
Making Your Website Sing!
Making Your Website Sing!Making Your Website Sing!
Making Your Website Sing!
Embolden
 
Making Your Website Sing!
Making Your Website Sing!Making Your Website Sing!
Making Your Website Sing!
Embolden
 
Aria interview questions
Aria interview questionsAria interview questions
Aria interview questions
learnstraightsap
 
Web design unit 1
Web design unit 1Web design unit 1
Web design unit 1
AtchayaaM
 
Web design unit 1
Web design unit 1Web design unit 1
Web design unit 1
AtchayaaM
 
Wireframes
WireframesWireframes
Wireframes
Robert Carr
 
Design for Accessibility
Design for AccessibilityDesign for Accessibility
Design for Accessibility
qixingz
 
The Guide To Wireframing
The Guide To WireframingThe Guide To Wireframing
The Guide To Wireframing
Lewis Lin 🦊
 
The guide to wireframing
The guide to wireframingThe guide to wireframing
The guide to wireframing
Marcelo Graciolli
 
Web designing & web development! BATRA COMPUTER CENTRE
Web designing &  web development! BATRA COMPUTER CENTREWeb designing &  web development! BATRA COMPUTER CENTRE
Web designing & web development! BATRA COMPUTER CENTRE
groversimrans
 

Similar to What are wireframes? (20)

J105 Web Design
J105 Web DesignJ105 Web Design
J105 Web Design
 
Designing accessible web experiences
Designing accessible web experiencesDesigning accessible web experiences
Designing accessible web experiences
 
Intro to UX Design
Intro to UX DesignIntro to UX Design
Intro to UX Design
 
Web Designing training in Chandigarh.pptx
Web Designing training in Chandigarh.pptxWeb Designing training in Chandigarh.pptx
Web Designing training in Chandigarh.pptx
 
Professional ui for a website design
Professional ui for a website designProfessional ui for a website design
Professional ui for a website design
 
Basics of Web Accessibility
Basics of Web AccessibilityBasics of Web Accessibility
Basics of Web Accessibility
 
UXify Eindhoven: Best practices on the Web
UXify Eindhoven: Best practices on the WebUXify Eindhoven: Best practices on the Web
UXify Eindhoven: Best practices on the Web
 
Web Designing Course in Chandigarh Join Now.pptx
Web Designing Course in Chandigarh Join Now.pptxWeb Designing Course in Chandigarh Join Now.pptx
Web Designing Course in Chandigarh Join Now.pptx
 
WEB DESIGN
WEB DESIGNWEB DESIGN
WEB DESIGN
 
FUNDAMENTALS OF WEB DESIGNING
FUNDAMENTALS OF WEB DESIGNINGFUNDAMENTALS OF WEB DESIGNING
FUNDAMENTALS OF WEB DESIGNING
 
Making Your Website Sing!
Making Your Website Sing!Making Your Website Sing!
Making Your Website Sing!
 
Making Your Website Sing!
Making Your Website Sing!Making Your Website Sing!
Making Your Website Sing!
 
Aria interview questions
Aria interview questionsAria interview questions
Aria interview questions
 
Web design unit 1
Web design unit 1Web design unit 1
Web design unit 1
 
Web design unit 1
Web design unit 1Web design unit 1
Web design unit 1
 
Wireframes
WireframesWireframes
Wireframes
 
Design for Accessibility
Design for AccessibilityDesign for Accessibility
Design for Accessibility
 
The Guide To Wireframing
The Guide To WireframingThe Guide To Wireframing
The Guide To Wireframing
 
The guide to wireframing
The guide to wireframingThe guide to wireframing
The guide to wireframing
 
Web designing & web development! BATRA COMPUTER CENTRE
Web designing &  web development! BATRA COMPUTER CENTREWeb designing &  web development! BATRA COMPUTER CENTRE
Web designing & web development! BATRA COMPUTER CENTRE
 

Recently uploaded

How God led me to DTS? Through many different signs and connections that I c...
How God led me to DTS? Through many different signs and connections that  I c...How God led me to DTS? Through many different signs and connections that  I c...
How God led me to DTS? Through many different signs and connections that I c...
AshishMohan57
 
Girls Call Shimla 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Shimla 000XX00000 Provide Best And Top Girl Service And No1 in CityGirls Call Shimla 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Shimla 000XX00000 Provide Best And Top Girl Service And No1 in City
dilbaagsingh0898
 
Open Source TCP or Netflow Log Server Using Graylog
Open Source TCP or Netflow Log Server Using GraylogOpen Source TCP or Netflow Log Server Using Graylog
Open Source TCP or Netflow Log Server Using Graylog
Bangladesh Network Operators Group
 
Network Security version1.0 - Module 3.pptx
Network Security version1.0 - Module 3.pptxNetwork Security version1.0 - Module 3.pptx
Network Security version1.0 - Module 3.pptx
Infotainmentforall
 
Digital ethnography of the Polish darknet drug trade community
Digital ethnography of the Polish darknet drug trade communityDigital ethnography of the Polish darknet drug trade community
Digital ethnography of the Polish darknet drug trade community
Piotr Siuda
 
IPv6 Deployment Planning and Security Considerations
IPv6 Deployment Planning and Security ConsiderationsIPv6 Deployment Planning and Security Considerations
IPv6 Deployment Planning and Security Considerations
Bangladesh Network Operators Group
 
Best CSS Animation Libraries for Web Developers
Best CSS Animation Libraries for Web DevelopersBest CSS Animation Libraries for Web Developers
Best CSS Animation Libraries for Web Developers
Shrestha Raaz
 
Maximizing Network Efficiency with Large Language Models (LLM)
Maximizing Network Efficiency with Large Language Models (LLM)Maximizing Network Efficiency with Large Language Models (LLM)
Maximizing Network Efficiency with Large Language Models (LLM)
Bangladesh Network Operators Group
 
202254.com香蕉影视,沙丘2在线播放,沙丘2线上看,最新电影沙丘2在线,热门电影推荐,2024最新科幻片推荐。
202254.com香蕉影视,沙丘2在线播放,沙丘2线上看,最新电影沙丘2在线,热门电影推荐,2024最新科幻片推荐。202254.com香蕉影视,沙丘2在线播放,沙丘2线上看,最新电影沙丘2在线,热门电影推荐,2024最新科幻片推荐。
202254.com香蕉影视,沙丘2在线播放,沙丘2线上看,最新电影沙丘2在线,热门电影推荐,2024最新科幻片推荐。
yilin01100
 
Top 50 Telephone Conversation Sample Examples For IT Industries.pdf
Top 50 Telephone Conversation Sample Examples For IT Industries.pdfTop 50 Telephone Conversation Sample Examples For IT Industries.pdf
Top 50 Telephone Conversation Sample Examples For IT Industries.pdf
Krishna L
 
Portugal Dreamin 24 - How to easily use an API with Flows
Portugal Dreamin 24  - How to easily use an API with FlowsPortugal Dreamin 24  - How to easily use an API with Flows
Portugal Dreamin 24 - How to easily use an API with Flows
Thierry TROUIN ☁
 
Software Defined Networking, Concepts and Practical Implementations
Software Defined Networking, Concepts and Practical ImplementationsSoftware Defined Networking, Concepts and Practical Implementations
Software Defined Networking, Concepts and Practical Implementations
Bangladesh Network Operators Group
 
My President is bulletproof t shirts hoodie
My President is bulletproof t shirts hoodieMy President is bulletproof t shirts hoodie
My President is bulletproof t shirts hoodie
exgf28
 
Trump Assassination Shirt Trump Assassination Shirt
Trump Assassination Shirt Trump Assassination ShirtTrump Assassination Shirt Trump Assassination Shirt
Trump Assassination Shirt Trump Assassination Shirt
exgf28
 
Vip Girls Call ServiCe Chennai X00XXX00XX Tanisha Best High Class Chennai Ava...
Vip Girls Call ServiCe Chennai X00XXX00XX Tanisha Best High Class Chennai Ava...Vip Girls Call ServiCe Chennai X00XXX00XX Tanisha Best High Class Chennai Ava...
Vip Girls Call ServiCe Chennai X00XXX00XX Tanisha Best High Class Chennai Ava...
samyanvichadda
 
Team Cymru Community Services,Overview of all public services
Team Cymru Community Services,Overview of all public servicesTeam Cymru Community Services,Overview of all public services
Team Cymru Community Services,Overview of all public services
Bangladesh Network Operators Group
 
202254.com香蕉影视,在线观看《我才不要和你做朋友呢》在线观看最新电影,香蕉影视在线观看《我才不要和你做朋友呢》在线观看高清电影
202254.com香蕉影视,在线观看《我才不要和你做朋友呢》在线观看最新电影,香蕉影视在线观看《我才不要和你做朋友呢》在线观看高清电影202254.com香蕉影视,在线观看《我才不要和你做朋友呢》在线观看最新电影,香蕉影视在线观看《我才不要和你做朋友呢》在线观看高清电影
202254.com香蕉影视,在线观看《我才不要和你做朋友呢》在线观看最新电影,香蕉影视在线观看《我才不要和你做朋友呢》在线观看高清电影
ffg01100
 
Best Skills to Learn for Freelancing.pdf
Best Skills to Learn for Freelancing.pdfBest Skills to Learn for Freelancing.pdf
Best Skills to Learn for Freelancing.pdf
Million-$-Knowledge {Million Dollar Knowledge}
 
Saint Louis University diploma
Saint Louis University diplomaSaint Louis University diploma
Saint Louis University diploma
eufdev
 
Effective Tips for Creating the Best Rich Media Ads .pptx
Effective Tips for Creating the Best Rich Media Ads .pptxEffective Tips for Creating the Best Rich Media Ads .pptx
Effective Tips for Creating the Best Rich Media Ads .pptx
AirtoryInc
 

Recently uploaded (20)

How God led me to DTS? Through many different signs and connections that I c...
How God led me to DTS? Through many different signs and connections that  I c...How God led me to DTS? Through many different signs and connections that  I c...
How God led me to DTS? Through many different signs and connections that I c...
 
Girls Call Shimla 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Shimla 000XX00000 Provide Best And Top Girl Service And No1 in CityGirls Call Shimla 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Shimla 000XX00000 Provide Best And Top Girl Service And No1 in City
 
Open Source TCP or Netflow Log Server Using Graylog
Open Source TCP or Netflow Log Server Using GraylogOpen Source TCP or Netflow Log Server Using Graylog
Open Source TCP or Netflow Log Server Using Graylog
 
Network Security version1.0 - Module 3.pptx
Network Security version1.0 - Module 3.pptxNetwork Security version1.0 - Module 3.pptx
Network Security version1.0 - Module 3.pptx
 
Digital ethnography of the Polish darknet drug trade community
Digital ethnography of the Polish darknet drug trade communityDigital ethnography of the Polish darknet drug trade community
Digital ethnography of the Polish darknet drug trade community
 
IPv6 Deployment Planning and Security Considerations
IPv6 Deployment Planning and Security ConsiderationsIPv6 Deployment Planning and Security Considerations
IPv6 Deployment Planning and Security Considerations
 
Best CSS Animation Libraries for Web Developers
Best CSS Animation Libraries for Web DevelopersBest CSS Animation Libraries for Web Developers
Best CSS Animation Libraries for Web Developers
 
Maximizing Network Efficiency with Large Language Models (LLM)
Maximizing Network Efficiency with Large Language Models (LLM)Maximizing Network Efficiency with Large Language Models (LLM)
Maximizing Network Efficiency with Large Language Models (LLM)
 
202254.com香蕉影视,沙丘2在线播放,沙丘2线上看,最新电影沙丘2在线,热门电影推荐,2024最新科幻片推荐。
202254.com香蕉影视,沙丘2在线播放,沙丘2线上看,最新电影沙丘2在线,热门电影推荐,2024最新科幻片推荐。202254.com香蕉影视,沙丘2在线播放,沙丘2线上看,最新电影沙丘2在线,热门电影推荐,2024最新科幻片推荐。
202254.com香蕉影视,沙丘2在线播放,沙丘2线上看,最新电影沙丘2在线,热门电影推荐,2024最新科幻片推荐。
 
Top 50 Telephone Conversation Sample Examples For IT Industries.pdf
Top 50 Telephone Conversation Sample Examples For IT Industries.pdfTop 50 Telephone Conversation Sample Examples For IT Industries.pdf
Top 50 Telephone Conversation Sample Examples For IT Industries.pdf
 
Portugal Dreamin 24 - How to easily use an API with Flows
Portugal Dreamin 24  - How to easily use an API with FlowsPortugal Dreamin 24  - How to easily use an API with Flows
Portugal Dreamin 24 - How to easily use an API with Flows
 
Software Defined Networking, Concepts and Practical Implementations
Software Defined Networking, Concepts and Practical ImplementationsSoftware Defined Networking, Concepts and Practical Implementations
Software Defined Networking, Concepts and Practical Implementations
 
My President is bulletproof t shirts hoodie
My President is bulletproof t shirts hoodieMy President is bulletproof t shirts hoodie
My President is bulletproof t shirts hoodie
 
Trump Assassination Shirt Trump Assassination Shirt
Trump Assassination Shirt Trump Assassination ShirtTrump Assassination Shirt Trump Assassination Shirt
Trump Assassination Shirt Trump Assassination Shirt
 
Vip Girls Call ServiCe Chennai X00XXX00XX Tanisha Best High Class Chennai Ava...
Vip Girls Call ServiCe Chennai X00XXX00XX Tanisha Best High Class Chennai Ava...Vip Girls Call ServiCe Chennai X00XXX00XX Tanisha Best High Class Chennai Ava...
Vip Girls Call ServiCe Chennai X00XXX00XX Tanisha Best High Class Chennai Ava...
 
Team Cymru Community Services,Overview of all public services
Team Cymru Community Services,Overview of all public servicesTeam Cymru Community Services,Overview of all public services
Team Cymru Community Services,Overview of all public services
 
202254.com香蕉影视,在线观看《我才不要和你做朋友呢》在线观看最新电影,香蕉影视在线观看《我才不要和你做朋友呢》在线观看高清电影
202254.com香蕉影视,在线观看《我才不要和你做朋友呢》在线观看最新电影,香蕉影视在线观看《我才不要和你做朋友呢》在线观看高清电影202254.com香蕉影视,在线观看《我才不要和你做朋友呢》在线观看最新电影,香蕉影视在线观看《我才不要和你做朋友呢》在线观看高清电影
202254.com香蕉影视,在线观看《我才不要和你做朋友呢》在线观看最新电影,香蕉影视在线观看《我才不要和你做朋友呢》在线观看高清电影
 
Best Skills to Learn for Freelancing.pdf
Best Skills to Learn for Freelancing.pdfBest Skills to Learn for Freelancing.pdf
Best Skills to Learn for Freelancing.pdf
 
Saint Louis University diploma
Saint Louis University diplomaSaint Louis University diploma
Saint Louis University diploma
 
Effective Tips for Creating the Best Rich Media Ads .pptx
Effective Tips for Creating the Best Rich Media Ads .pptxEffective Tips for Creating the Best Rich Media Ads .pptx
Effective Tips for Creating the Best Rich Media Ads .pptx
 

What are wireframes?

  • 1. C H A N C E B L I S S V P , U S E R E X P E R I E N C E WHAT ARE WIREFRAMES?
  • 2. “Wirefames are schematics, similar to a blueprint or floor plan, used to represent the basic architecture of a website.“
  • 3. Wireframes can take many forms from low to high fidelity WHITEBOARD SKETCH INTERACTIVE PROTOTYPE
  • 4. Wireframes are used to make decisions about: Content What types of content will users access? Structure How the content be grouped and labeled? Hierarchy What is the most to least important content? Relationship What is the relationship between groups of content? Functionality How can the user do with the content? User Flow How will the user access and navigation through the content?
  • 5. Wireframes are not User Interface Designs Visual Style Branding, color, typography, photography, iconography and video Screen Layout Placement and sizing of content and functional elements Animation Style Movement, speed and timing
  • 7. Questions to ask when reviewing wireframes 1. Is anything important missing from the page? 2. Is the most important content the first thing you notice? 3. Is there anything on the page that shouldn't be there? 4. Which content is related and how? 5. Can you get to all of the major sections of the site? 6. Do all of the labels make sense? 7. Do you know what all of the elements on the page are?
  • 8. THANK YOU CHANCE BLISS VP, User Experience iMedia Inc. 973.224.5154 cbliss@imediainc.com Imediainc.com