SlideShare a Scribd company logo
1 of 12
S3 Web Development
Wireframe Design
What are wireframes?
Quick sketches / outlines of page layouts
o Show navigation and content elements
Used in the early stages of the design phase of
website development
Often done using
pencil & paper
Why are wireframes used?
Careful design and planning is done to ensure
finished sites meet user / client needs
Wireframes allow agreement on best page
designs before any significant time is spent on
building pages
Aim is to build the pages and site correctly
first time, with no need for changes
o No wasted time, effort or resources
Wireframe Content
Shows where the main content and navigation
elements could appear
o Company logo o Search bar
o Page titles o Breadcrumbs
o Page content o Navigation menu
o Header / Footer / Sidebar o Hyperlinks
Wireframes do not use –
o Chosen fonts or colours
o Actual text or images
Good Wireframes
Should include enough detail for someone else
to fully understand the ideas shown
o The ideas shown in wireframes may be “tested” with clients or
users / personas before further development work is done
o Development team will discuss and refine wireframes
Should be quick
o Developers should be prepared to change
or replace their wireframes if clients or
team don’t agree with plans
o Easier to throw away work that did not take
a lot of time
Wireframe Elements - Page
An outline representing the browser
window should be added
Give the page name in the title
bar
Wireframe Elements - Text
• Areas of text should be drawn with borders
• Sometimes, general headings and dummy text are used for illustration
• Section headings and descriptions help to understand the page layout
Wireframe Elements - Media
• For images, use a box with a cross through it
• Name the image to be used
• Identify the graphics file format to be used
• For video, use a plain box
• Name the file to be used
• Identify the video file format to be used
• Represent the media window controls
• For audio, show media controls
• Name the audio file
• Identify the file format
Wireframe Elements - Navigation
• Hyperlinks should be shown with
underlining
• Naming links helps show site structure
• If breadcrumbs are used, show the page name & path
• Row of boxes for navigation bar options
Wireframe Elements - Input
• Form inputs on wireframes should look like the elements to be used
• Show labels that will be used for elements
Text input
boxes
Checkbo
x
Radio
buttons
S3 wireframe diagrams
S3 wireframe diagrams

More Related Content

Similar to S3 wireframe diagrams

Chapter 17: Responsive Web Design
Chapter 17: Responsive Web DesignChapter 17: Responsive Web Design
Chapter 17: Responsive Web DesignSteve Guinan
 
Basics of Web Design: A primer of what you need to know to design for the web
Basics of Web Design: A primer of what you need to know to design for the webBasics of Web Design: A primer of what you need to know to design for the web
Basics of Web Design: A primer of what you need to know to design for the webJoe Arcuri
 
Unit 5 application layer
Unit 5 application layerUnit 5 application layer
Unit 5 application layerKritika Purohit
 
The Living Style Guide: How CustomInk created a their new ux lead style guide
The Living Style Guide: How CustomInk created a their new ux lead style guideThe Living Style Guide: How CustomInk created a their new ux lead style guide
The Living Style Guide: How CustomInk created a their new ux lead style guideDara Pressley
 
Keeping Your Website Accessible
Keeping Your Website AccessibleKeeping Your Website Accessible
Keeping Your Website AccessibleKelli Wise
 
Chapter 4 Web design tech in formation technology msc class .pdf
Chapter 4 Web design tech in formation technology  msc class .pdfChapter 4 Web design tech in formation technology  msc class .pdf
Chapter 4 Web design tech in formation technology msc class .pdfwondimagegndesta
 
Website usability ideas for business growth
Website usability ideas for business growthWebsite usability ideas for business growth
Website usability ideas for business growthJames Smith
 
Online platform for ict content development
 Online platform for ict content development Online platform for ict content development
Online platform for ict content developmentImmaeviorge
 
Web development | Derin Dolen
Web development | Derin Dolen Web development | Derin Dolen
Web development | Derin Dolen Derin Dolen
 
Library as publisher handout 4-ojs design-brief
Library as publisher handout 4-ojs design-briefLibrary as publisher handout 4-ojs design-brief
Library as publisher handout 4-ojs design-briefNASIG
 
Html & CSS - Best practices 2-hour-workshop
Html & CSS - Best practices 2-hour-workshopHtml & CSS - Best practices 2-hour-workshop
Html & CSS - Best practices 2-hour-workshopVero Rebagliatte
 
Promote Education Web Design Things To Consider When Designing A Website
Promote Education Web Design Things To Consider When Designing A WebsitePromote Education Web Design Things To Consider When Designing A Website
Promote Education Web Design Things To Consider When Designing A WebsiteZoaib Mirza
 

Similar to S3 wireframe diagrams (20)

Web Design Norms
Web Design NormsWeb Design Norms
Web Design Norms
 
Chapter 1.pdf
Chapter 1.pdfChapter 1.pdf
Chapter 1.pdf
 
Chapter 17: Responsive Web Design
Chapter 17: Responsive Web DesignChapter 17: Responsive Web Design
Chapter 17: Responsive Web Design
 
Basics of Web Design: A primer of what you need to know to design for the web
Basics of Web Design: A primer of what you need to know to design for the webBasics of Web Design: A primer of what you need to know to design for the web
Basics of Web Design: A primer of what you need to know to design for the web
 
LO3 - Lesson 19 - Template & CSS
LO3 - Lesson 19 - Template & CSSLO3 - Lesson 19 - Template & CSS
LO3 - Lesson 19 - Template & CSS
 
Html
HtmlHtml
Html
 
Website
WebsiteWebsite
Website
 
Unit 5 application layer
Unit 5 application layerUnit 5 application layer
Unit 5 application layer
 
The Living Style Guide: How CustomInk created a their new ux lead style guide
The Living Style Guide: How CustomInk created a their new ux lead style guideThe Living Style Guide: How CustomInk created a their new ux lead style guide
The Living Style Guide: How CustomInk created a their new ux lead style guide
 
Keeping Your Website Accessible
Keeping Your Website AccessibleKeeping Your Website Accessible
Keeping Your Website Accessible
 
Chapter 4 Web design tech in formation technology msc class .pdf
Chapter 4 Web design tech in formation technology  msc class .pdfChapter 4 Web design tech in formation technology  msc class .pdf
Chapter 4 Web design tech in formation technology msc class .pdf
 
Website usability ideas for business growth
Website usability ideas for business growthWebsite usability ideas for business growth
Website usability ideas for business growth
 
Online platform for ict content development
 Online platform for ict content development Online platform for ict content development
Online platform for ict content development
 
Web C&C
Web C&CWeb C&C
Web C&C
 
Web development | Derin Dolen
Web development | Derin Dolen Web development | Derin Dolen
Web development | Derin Dolen
 
Library as publisher handout 4-ojs design-brief
Library as publisher handout 4-ojs design-briefLibrary as publisher handout 4-ojs design-brief
Library as publisher handout 4-ojs design-brief
 
Html & CSS - Best practices 2-hour-workshop
Html & CSS - Best practices 2-hour-workshopHtml & CSS - Best practices 2-hour-workshop
Html & CSS - Best practices 2-hour-workshop
 
Promote Education Web Design Things To Consider When Designing A Website
Promote Education Web Design Things To Consider When Designing A WebsitePromote Education Web Design Things To Consider When Designing A Website
Promote Education Web Design Things To Consider When Designing A Website
 
Web authoring a1
Web authoring a1Web authoring a1
Web authoring a1
 
Web authoring a1
Web authoring a1Web authoring a1
Web authoring a1
 

More from missstevenson01

Lesson 3 - Coding with Minecraft - Variables.pptx
Lesson 3 -  Coding with Minecraft -  Variables.pptxLesson 3 -  Coding with Minecraft -  Variables.pptx
Lesson 3 - Coding with Minecraft - Variables.pptxmissstevenson01
 
Lesson 2 - Coding with Minecraft - Events.pptx
Lesson 2 - Coding with Minecraft - Events.pptxLesson 2 - Coding with Minecraft - Events.pptx
Lesson 2 - Coding with Minecraft - Events.pptxmissstevenson01
 
Lesson 1 - Coding with Minecraft -Introduction.pptx
Lesson 1 - Coding with Minecraft -Introduction.pptxLesson 1 - Coding with Minecraft -Introduction.pptx
Lesson 1 - Coding with Minecraft -Introduction.pptxmissstevenson01
 
Lesson2 - Coding with Minecraft - Events.pptx
Lesson2 - Coding with Minecraft - Events.pptxLesson2 - Coding with Minecraft - Events.pptx
Lesson2 - Coding with Minecraft - Events.pptxmissstevenson01
 
Ethical hacking trojans, worms and spyware
Ethical hacking    trojans, worms and spywareEthical hacking    trojans, worms and spyware
Ethical hacking trojans, worms and spywaremissstevenson01
 
Ethical hacking anti virus
Ethical hacking   anti virusEthical hacking   anti virus
Ethical hacking anti virusmissstevenson01
 
Ethical hacking introduction to ethical hacking
Ethical hacking   introduction to ethical hackingEthical hacking   introduction to ethical hacking
Ethical hacking introduction to ethical hackingmissstevenson01
 
S1 internet safety-chattingonline
S1 internet safety-chattingonlineS1 internet safety-chattingonline
S1 internet safety-chattingonlinemissstevenson01
 
Video Games and Copyright laws
Video Games and Copyright lawsVideo Games and Copyright laws
Video Games and Copyright lawsmissstevenson01
 

More from missstevenson01 (20)

S3 environment
S3 environmentS3 environment
S3 environment
 
The Processor.pptx
The Processor.pptxThe Processor.pptx
The Processor.pptx
 
How Computers Work
How Computers WorkHow Computers Work
How Computers Work
 
Lesson 3 - Coding with Minecraft - Variables.pptx
Lesson 3 -  Coding with Minecraft -  Variables.pptxLesson 3 -  Coding with Minecraft -  Variables.pptx
Lesson 3 - Coding with Minecraft - Variables.pptx
 
Lesson 2 - Coding with Minecraft - Events.pptx
Lesson 2 - Coding with Minecraft - Events.pptxLesson 2 - Coding with Minecraft - Events.pptx
Lesson 2 - Coding with Minecraft - Events.pptx
 
Lesson 1 - Coding with Minecraft -Introduction.pptx
Lesson 1 - Coding with Minecraft -Introduction.pptxLesson 1 - Coding with Minecraft -Introduction.pptx
Lesson 1 - Coding with Minecraft -Introduction.pptx
 
Lesson2 - Coding with Minecraft - Events.pptx
Lesson2 - Coding with Minecraft - Events.pptxLesson2 - Coding with Minecraft - Events.pptx
Lesson2 - Coding with Minecraft - Events.pptx
 
Ethical hacking trojans, worms and spyware
Ethical hacking    trojans, worms and spywareEthical hacking    trojans, worms and spyware
Ethical hacking trojans, worms and spyware
 
Ethical hacking anti virus
Ethical hacking   anti virusEthical hacking   anti virus
Ethical hacking anti virus
 
Ethical hacking introduction to ethical hacking
Ethical hacking   introduction to ethical hackingEthical hacking   introduction to ethical hacking
Ethical hacking introduction to ethical hacking
 
S1 internet safety-chattingonline
S1 internet safety-chattingonlineS1 internet safety-chattingonline
S1 internet safety-chattingonline
 
Sql
SqlSql
Sql
 
Alien database
Alien databaseAlien database
Alien database
 
Video Games and Copyright laws
Video Games and Copyright lawsVideo Games and Copyright laws
Video Games and Copyright laws
 
Games Design Document
Games Design DocumentGames Design Document
Games Design Document
 
Video game proposal
Video game proposalVideo game proposal
Video game proposal
 
Evaluation
EvaluationEvaluation
Evaluation
 
H evaluation
H evaluationH evaluation
H evaluation
 
H testing and debugging
H testing and debuggingH testing and debugging
H testing and debugging
 
H file handling
H file handlingH file handling
H file handling
 

Recently uploaded

Introduction to ArtificiaI Intelligence in Higher Education
Introduction to ArtificiaI Intelligence in Higher EducationIntroduction to ArtificiaI Intelligence in Higher Education
Introduction to ArtificiaI Intelligence in Higher Educationpboyjonauth
 
ECONOMIC CONTEXT - LONG FORM TV DRAMA - PPT
ECONOMIC CONTEXT - LONG FORM TV DRAMA - PPTECONOMIC CONTEXT - LONG FORM TV DRAMA - PPT
ECONOMIC CONTEXT - LONG FORM TV DRAMA - PPTiammrhaywood
 
Paris 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activityParis 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activityGeoBlogs
 
Mastering the Unannounced Regulatory Inspection
Mastering the Unannounced Regulatory InspectionMastering the Unannounced Regulatory Inspection
Mastering the Unannounced Regulatory InspectionSafetyChain Software
 
How to Make a Pirate ship Primary Education.pptx
How to Make a Pirate ship Primary Education.pptxHow to Make a Pirate ship Primary Education.pptx
How to Make a Pirate ship Primary Education.pptxmanuelaromero2013
 
A Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy ReformA Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy ReformChameera Dedduwage
 
Organic Name Reactions for the students and aspirants of Chemistry12th.pptx
Organic Name Reactions  for the students and aspirants of Chemistry12th.pptxOrganic Name Reactions  for the students and aspirants of Chemistry12th.pptx
Organic Name Reactions for the students and aspirants of Chemistry12th.pptxVS Mahajan Coaching Centre
 
The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13Steve Thomason
 
Employee wellbeing at the workplace.pptx
Employee wellbeing at the workplace.pptxEmployee wellbeing at the workplace.pptx
Employee wellbeing at the workplace.pptxNirmalaLoungPoorunde1
 
Interactive Powerpoint_How to Master effective communication
Interactive Powerpoint_How to Master effective communicationInteractive Powerpoint_How to Master effective communication
Interactive Powerpoint_How to Master effective communicationnomboosow
 
Call Girls in Dwarka Mor Delhi Contact Us 9654467111
Call Girls in Dwarka Mor Delhi Contact Us 9654467111Call Girls in Dwarka Mor Delhi Contact Us 9654467111
Call Girls in Dwarka Mor Delhi Contact Us 9654467111Sapana Sha
 
Presiding Officer Training module 2024 lok sabha elections
Presiding Officer Training module 2024 lok sabha electionsPresiding Officer Training module 2024 lok sabha elections
Presiding Officer Training module 2024 lok sabha electionsanshu789521
 
Enzyme, Pharmaceutical Aids, Miscellaneous Last Part of Chapter no 5th.pdf
Enzyme, Pharmaceutical Aids, Miscellaneous Last Part of Chapter no 5th.pdfEnzyme, Pharmaceutical Aids, Miscellaneous Last Part of Chapter no 5th.pdf
Enzyme, Pharmaceutical Aids, Miscellaneous Last Part of Chapter no 5th.pdfSumit Tiwari
 
URLs and Routing in the Odoo 17 Website App
URLs and Routing in the Odoo 17 Website AppURLs and Routing in the Odoo 17 Website App
URLs and Routing in the Odoo 17 Website AppCeline George
 
MENTAL STATUS EXAMINATION format.docx
MENTAL     STATUS EXAMINATION format.docxMENTAL     STATUS EXAMINATION format.docx
MENTAL STATUS EXAMINATION format.docxPoojaSen20
 
Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)eniolaolutunde
 
mini mental status format.docx
mini    mental       status     format.docxmini    mental       status     format.docx
mini mental status format.docxPoojaSen20
 
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdfBASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdfSoniaTolstoy
 

Recently uploaded (20)

Staff of Color (SOC) Retention Efforts DDSD
Staff of Color (SOC) Retention Efforts DDSDStaff of Color (SOC) Retention Efforts DDSD
Staff of Color (SOC) Retention Efforts DDSD
 
Introduction to ArtificiaI Intelligence in Higher Education
Introduction to ArtificiaI Intelligence in Higher EducationIntroduction to ArtificiaI Intelligence in Higher Education
Introduction to ArtificiaI Intelligence in Higher Education
 
ECONOMIC CONTEXT - LONG FORM TV DRAMA - PPT
ECONOMIC CONTEXT - LONG FORM TV DRAMA - PPTECONOMIC CONTEXT - LONG FORM TV DRAMA - PPT
ECONOMIC CONTEXT - LONG FORM TV DRAMA - PPT
 
Paris 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activityParis 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activity
 
Mastering the Unannounced Regulatory Inspection
Mastering the Unannounced Regulatory InspectionMastering the Unannounced Regulatory Inspection
Mastering the Unannounced Regulatory Inspection
 
How to Make a Pirate ship Primary Education.pptx
How to Make a Pirate ship Primary Education.pptxHow to Make a Pirate ship Primary Education.pptx
How to Make a Pirate ship Primary Education.pptx
 
A Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy ReformA Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy Reform
 
Organic Name Reactions for the students and aspirants of Chemistry12th.pptx
Organic Name Reactions  for the students and aspirants of Chemistry12th.pptxOrganic Name Reactions  for the students and aspirants of Chemistry12th.pptx
Organic Name Reactions for the students and aspirants of Chemistry12th.pptx
 
Model Call Girl in Bikash Puri Delhi reach out to us at 🔝9953056974🔝
Model Call Girl in Bikash Puri  Delhi reach out to us at 🔝9953056974🔝Model Call Girl in Bikash Puri  Delhi reach out to us at 🔝9953056974🔝
Model Call Girl in Bikash Puri Delhi reach out to us at 🔝9953056974🔝
 
The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13
 
Employee wellbeing at the workplace.pptx
Employee wellbeing at the workplace.pptxEmployee wellbeing at the workplace.pptx
Employee wellbeing at the workplace.pptx
 
Interactive Powerpoint_How to Master effective communication
Interactive Powerpoint_How to Master effective communicationInteractive Powerpoint_How to Master effective communication
Interactive Powerpoint_How to Master effective communication
 
Call Girls in Dwarka Mor Delhi Contact Us 9654467111
Call Girls in Dwarka Mor Delhi Contact Us 9654467111Call Girls in Dwarka Mor Delhi Contact Us 9654467111
Call Girls in Dwarka Mor Delhi Contact Us 9654467111
 
Presiding Officer Training module 2024 lok sabha elections
Presiding Officer Training module 2024 lok sabha electionsPresiding Officer Training module 2024 lok sabha elections
Presiding Officer Training module 2024 lok sabha elections
 
Enzyme, Pharmaceutical Aids, Miscellaneous Last Part of Chapter no 5th.pdf
Enzyme, Pharmaceutical Aids, Miscellaneous Last Part of Chapter no 5th.pdfEnzyme, Pharmaceutical Aids, Miscellaneous Last Part of Chapter no 5th.pdf
Enzyme, Pharmaceutical Aids, Miscellaneous Last Part of Chapter no 5th.pdf
 
URLs and Routing in the Odoo 17 Website App
URLs and Routing in the Odoo 17 Website AppURLs and Routing in the Odoo 17 Website App
URLs and Routing in the Odoo 17 Website App
 
MENTAL STATUS EXAMINATION format.docx
MENTAL     STATUS EXAMINATION format.docxMENTAL     STATUS EXAMINATION format.docx
MENTAL STATUS EXAMINATION format.docx
 
Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)
 
mini mental status format.docx
mini    mental       status     format.docxmini    mental       status     format.docx
mini mental status format.docx
 
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdfBASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
 

S3 wireframe diagrams

  • 2. What are wireframes? Quick sketches / outlines of page layouts o Show navigation and content elements Used in the early stages of the design phase of website development Often done using pencil & paper
  • 3. Why are wireframes used? Careful design and planning is done to ensure finished sites meet user / client needs Wireframes allow agreement on best page designs before any significant time is spent on building pages Aim is to build the pages and site correctly first time, with no need for changes o No wasted time, effort or resources
  • 4. Wireframe Content Shows where the main content and navigation elements could appear o Company logo o Search bar o Page titles o Breadcrumbs o Page content o Navigation menu o Header / Footer / Sidebar o Hyperlinks Wireframes do not use – o Chosen fonts or colours o Actual text or images
  • 5. Good Wireframes Should include enough detail for someone else to fully understand the ideas shown o The ideas shown in wireframes may be “tested” with clients or users / personas before further development work is done o Development team will discuss and refine wireframes Should be quick o Developers should be prepared to change or replace their wireframes if clients or team don’t agree with plans o Easier to throw away work that did not take a lot of time
  • 6. Wireframe Elements - Page An outline representing the browser window should be added Give the page name in the title bar
  • 7. Wireframe Elements - Text • Areas of text should be drawn with borders • Sometimes, general headings and dummy text are used for illustration • Section headings and descriptions help to understand the page layout
  • 8. Wireframe Elements - Media • For images, use a box with a cross through it • Name the image to be used • Identify the graphics file format to be used • For video, use a plain box • Name the file to be used • Identify the video file format to be used • Represent the media window controls • For audio, show media controls • Name the audio file • Identify the file format
  • 9. Wireframe Elements - Navigation • Hyperlinks should be shown with underlining • Naming links helps show site structure • If breadcrumbs are used, show the page name & path • Row of boxes for navigation bar options
  • 10. Wireframe Elements - Input • Form inputs on wireframes should look like the elements to be used • Show labels that will be used for elements Text input boxes Checkbo x Radio buttons