SlideShare ist ein Scribd-Unternehmen logo
1 von 8
Downloaden Sie, um offline zu lesen
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

Weitere ähnliche Inhalte

Ă„hnlich wie What are wireframes?

J105 Web Design
J105 Web DesignJ105 Web Design
J105 Web DesignChris Snider
 
Designing accessible web experiences
Designing accessible web experiencesDesigning accessible web experiences
Designing accessible web experiencesUser Vision
 
Intro to UX Design
Intro to UX DesignIntro to UX Design
Intro to UX Designjayyearley
 
Web Designing training in Chandigarh.pptx
Web Designing training in Chandigarh.pptxWeb Designing training in Chandigarh.pptx
Web Designing training in Chandigarh.pptxasmeerana605
 
Professional ui for a website design
Professional ui for a website designProfessional ui for a website design
Professional ui for a website designRavi Bhadauria
 
Basics of Web Accessibility
Basics of Web AccessibilityBasics of Web Accessibility
Basics of Web AccessibilityMoin 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 WebTatiana 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.pptxasmeerana605
 
FUNDAMENTALS OF WEB DESIGNING
FUNDAMENTALS OF WEB DESIGNINGFUNDAMENTALS OF WEB DESIGNING
FUNDAMENTALS OF WEB DESIGNINGpriyadharshinihari
 
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 questionslearnstraightsap
 
Web design unit 1
Web design unit 1Web design unit 1
Web design unit 1AtchayaaM
 
Web design unit 1
Web design unit 1Web design unit 1
Web design unit 1AtchayaaM
 
Wireframes
WireframesWireframes
WireframesRobert Carr
 
Design for Accessibility
Design for AccessibilityDesign for Accessibility
Design for Accessibilityqixingz
 
The guide to wireframing
The guide to wireframingThe guide to wireframing
The guide to wireframingMarcelo Graciolli
 
The Guide To Wireframing
The Guide To WireframingThe Guide To Wireframing
The Guide To WireframingLewis Lin 🦊
 
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 CENTREgroversimrans
 

Ă„hnlich wie 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
 
FUNDAMENTALS OF WEB DESIGNING
FUNDAMENTALS OF WEB DESIGNINGFUNDAMENTALS OF WEB DESIGNING
FUNDAMENTALS OF WEB DESIGNING
 
WEB DESIGN
WEB DESIGNWEB DESIGN
WEB DESIGN
 
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
 

KĂĽrzlich hochgeladen

Bio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptxBio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptxnaveenithkrishnan
 
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdfLESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdfmchristianalwyn
 
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...APNIC
 
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024Jan Löffler
 
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDSTYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDSedrianrheine
 
Computer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a WebsiteComputer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a WebsiteMavein
 
Zero-day Vulnerabilities
Zero-day VulnerabilitiesZero-day Vulnerabilities
Zero-day Vulnerabilitiesalihassaah1994
 
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced HorizonsVision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced HorizonsRoxana Stingu
 
A_Z-1_0_4T_00A-EN_U-Po_w_erPoint_06.pptx
A_Z-1_0_4T_00A-EN_U-Po_w_erPoint_06.pptxA_Z-1_0_4T_00A-EN_U-Po_w_erPoint_06.pptx
A_Z-1_0_4T_00A-EN_U-Po_w_erPoint_06.pptxjayshuklatrainer
 
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASSLESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASSlesteraporado16
 
Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024Shubham Pant
 
Presentation2.pptx - JoyPress Wordpress
Presentation2.pptx -  JoyPress WordpressPresentation2.pptx -  JoyPress Wordpress
Presentation2.pptx - JoyPress Wordpressssuser166378
 
Niche Domination Prodigy Review Plus Bonus
Niche Domination Prodigy Review Plus BonusNiche Domination Prodigy Review Plus Bonus
Niche Domination Prodigy Review Plus BonusSkylark Nobin
 
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdfIntroduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdfShreedeep Rayamajhi
 
world Tuberculosis day ppt 25-3-2024.pptx
world Tuberculosis day ppt 25-3-2024.pptxworld Tuberculosis day ppt 25-3-2024.pptx
world Tuberculosis day ppt 25-3-2024.pptxnaveenithkrishnan
 

KĂĽrzlich hochgeladen (15)

Bio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptxBio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptx
 
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdfLESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
 
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
 
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
 
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDSTYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
 
Computer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a WebsiteComputer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a Website
 
Zero-day Vulnerabilities
Zero-day VulnerabilitiesZero-day Vulnerabilities
Zero-day Vulnerabilities
 
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced HorizonsVision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
 
A_Z-1_0_4T_00A-EN_U-Po_w_erPoint_06.pptx
A_Z-1_0_4T_00A-EN_U-Po_w_erPoint_06.pptxA_Z-1_0_4T_00A-EN_U-Po_w_erPoint_06.pptx
A_Z-1_0_4T_00A-EN_U-Po_w_erPoint_06.pptx
 
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASSLESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
 
Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024
 
Presentation2.pptx - JoyPress Wordpress
Presentation2.pptx -  JoyPress WordpressPresentation2.pptx -  JoyPress Wordpress
Presentation2.pptx - JoyPress Wordpress
 
Niche Domination Prodigy Review Plus Bonus
Niche Domination Prodigy Review Plus BonusNiche Domination Prodigy Review Plus Bonus
Niche Domination Prodigy Review Plus Bonus
 
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdfIntroduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdf
 
world Tuberculosis day ppt 25-3-2024.pptx
world Tuberculosis day ppt 25-3-2024.pptxworld Tuberculosis day ppt 25-3-2024.pptx
world Tuberculosis day ppt 25-3-2024.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