SlideShare ist ein Scribd-Unternehmen logo
1 von 19
WHAT IS WIREFRAME / WIREFRAMING?
Wireframing is a way to design a website service at
the structural level.
A wireframe is commonly used to layout content and
functionality on a page which takes into account
user needs and user journeys. Wireframes are
used early in the development process to establish
the basic structure of a page before visual design
and content is added.
TYPES OF WIREFRAMES?
Low Fidelity
High Fidelity
Final Design
LOW FIDELITY
HIGH FIDELITY
FINAL DESIGN
LOW – FI PROPOSALS
SKETCHES FOR LOW FIDELITY
SKETCHES FOR LOW FIDELITY
HI FI PROTOTYPES
HI FI PROTOTYPES
How to navigate the site?
What does each button do?
How many screens are there in total?
What end-points will be
used and where?
DRAFTING
WIREFRAME CONNECTIONS
WIREFRAME CONNECTIONS
WEB VIEW TO MOBILE VIEW
WEB VIEW TO MOBILE VIEW
WEB VIEW TO MOBILE VIEW
WIREFRAMES.pptx
WIREFRAMES.pptx

Weitere ähnliche Inhalte

Ähnlich wie WIREFRAMES.pptx

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 WebsitePropel Guru
 
What are wireframes?
What are wireframes?What are wireframes?
What are wireframes?Chance Bliss
 
Website Mockup-Wireframe Tool.pdf
Website Mockup-Wireframe Tool.pdfWebsite Mockup-Wireframe Tool.pdf
Website Mockup-Wireframe Tool.pdfEmilyEthan1
 
Leading frameworks to power your front end development
Leading frameworks to power your front end developmentLeading frameworks to power your front end development
Leading frameworks to power your front end developmentBenish Balakrishnan
 
Wireframes for the Wicked
Wireframes for the WickedWireframes for the Wicked
Wireframes for the WickedNick Finck
 
Wireframes for Web Design
Wireframes for Web DesignWireframes for Web Design
Wireframes for Web DesignMindy McAdams
 
583171984-SHAETECH11-LessdDdFDAFFDADFAFon6.pdf
583171984-SHAETECH11-LessdDdFDAFFDADFAFon6.pdf583171984-SHAETECH11-LessdDdFDAFFDADFAFon6.pdf
583171984-SHAETECH11-LessdDdFDAFFDADFAFon6.pdfmarissaramos007
 
Front-end vs Back-end vs Full-stack Developers – Understand the Difference.pptx
Front-end vs Back-end vs Full-stack Developers – Understand the Difference.pptxFront-end vs Back-end vs Full-stack Developers – Understand the Difference.pptx
Front-end vs Back-end vs Full-stack Developers – Understand the Difference.pptxDianna W. Perry
 
Online tools for Content Development
Online tools for Content DevelopmentOnline tools for Content Development
Online tools for Content Developmentadrianlaranjo111
 
How to Succeed in a Mobile World - Use the Growth of Mobile to Better Serve Y...
How to Succeed in a Mobile World - Use the Growth of Mobile to Better Serve Y...How to Succeed in a Mobile World - Use the Growth of Mobile to Better Serve Y...
How to Succeed in a Mobile World - Use the Growth of Mobile to Better Serve Y...WebLink International
 
LATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptx
LATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptxLATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptx
LATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptxchitrachauhan21
 
Breaking the Box: Pushing the Boundaries of UX with Drupal
Breaking the Box: Pushing the Boundaries of UX with DrupalBreaking the Box: Pushing the Boundaries of UX with Drupal
Breaking the Box: Pushing the Boundaries of UX with DrupalAcquia
 
Build a Responsive WordPress Theme with Zurbs Foundation Framework
Build a Responsive WordPress Theme with Zurbs Foundation FrameworkBuild a Responsive WordPress Theme with Zurbs Foundation Framework
Build a Responsive WordPress Theme with Zurbs Foundation FrameworkBrendan Sera-Shriar
 
The Guide To Wireframing
The Guide To WireframingThe Guide To Wireframing
The Guide To WireframingLewis Lin 🦊
 
01 01 - introduction to mobile application development
01  01 - introduction to mobile application development01  01 - introduction to mobile application development
01 01 - introduction to mobile application developmentSiva Kumar reddy Vasipally
 

Ähnlich wie WIREFRAMES.pptx (20)

website
website website
website
 
Webpage and ict
Webpage and ictWebpage and ict
Webpage and ict
 
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
 
What are wireframes?
What are wireframes?What are wireframes?
What are wireframes?
 
Website Mockup-Wireframe Tool.pdf
Website Mockup-Wireframe Tool.pdfWebsite Mockup-Wireframe Tool.pdf
Website Mockup-Wireframe Tool.pdf
 
Leading frameworks to power your front end development
Leading frameworks to power your front end developmentLeading frameworks to power your front end development
Leading frameworks to power your front end development
 
Wireframes for the Wicked
Wireframes for the WickedWireframes for the Wicked
Wireframes for the Wicked
 
Wireframes for Web Design
Wireframes for Web DesignWireframes for Web Design
Wireframes for Web Design
 
583171984-SHAETECH11-LessdDdFDAFFDADFAFon6.pdf
583171984-SHAETECH11-LessdDdFDAFFDADFAFon6.pdf583171984-SHAETECH11-LessdDdFDAFFDADFAFon6.pdf
583171984-SHAETECH11-LessdDdFDAFFDADFAFon6.pdf
 
Front-end vs Back-end vs Full-stack Developers – Understand the Difference.pptx
Front-end vs Back-end vs Full-stack Developers – Understand the Difference.pptxFront-end vs Back-end vs Full-stack Developers – Understand the Difference.pptx
Front-end vs Back-end vs Full-stack Developers – Understand the Difference.pptx
 
Online tools for Content Development
Online tools for Content DevelopmentOnline tools for Content Development
Online tools for Content Development
 
How to Succeed in a Mobile World - Use the Growth of Mobile to Better Serve Y...
How to Succeed in a Mobile World - Use the Growth of Mobile to Better Serve Y...How to Succeed in a Mobile World - Use the Growth of Mobile to Better Serve Y...
How to Succeed in a Mobile World - Use the Growth of Mobile to Better Serve Y...
 
LATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptx
LATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptxLATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptx
LATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptx
 
Breaking the Box: Pushing the Boundaries of UX with Drupal
Breaking the Box: Pushing the Boundaries of UX with DrupalBreaking the Box: Pushing the Boundaries of UX with Drupal
Breaking the Box: Pushing the Boundaries of UX with Drupal
 
Build a Responsive WordPress Theme with Zurbs Foundation Framework
Build a Responsive WordPress Theme with Zurbs Foundation FrameworkBuild a Responsive WordPress Theme with Zurbs Foundation Framework
Build a Responsive WordPress Theme with Zurbs Foundation Framework
 
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 Page Design.ppt
Web Page Design.pptWeb Page Design.ppt
Web Page Design.ppt
 
Web Page Design.ppt
Web Page Design.pptWeb Page Design.ppt
Web Page Design.ppt
 
01 01 - introduction to mobile application development
01  01 - introduction to mobile application development01  01 - introduction to mobile application development
01 01 - introduction to mobile application development
 

Kürzlich hochgeladen

Platformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityPlatformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityWSO2
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Zilliz
 
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 DiscoveryTrustArc
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAndrey Devyatkin
 
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 WorkerThousandEyes
 
Vector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptxVector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptxRemote DBA Services
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusZilliz
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businesspanagenda
 
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...apidays
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...apidays
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobeapidays
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDropbox
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MIND CTI
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMESafe Software
 
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamDEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamUiPathCommunity
 
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontologyjohnbeverley2021
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdfSandro Moreira
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Victor Rentea
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxRustici Software
 

Kürzlich hochgeladen (20)

+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
Platformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityPlatformless Horizons for Digital Adaptability
Platformless Horizons for Digital Adaptability
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
 
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
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
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
 
Vector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptxVector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptx
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
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...
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamDEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
 
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontology
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 

WIREFRAMES.pptx

Hinweis der Redaktion

  1. A low-fi prototype is a computer-based visual representation of a digital product with little resemblance to the final design. It can take on a lot of different forms, from simple black&white sketches to colorful layout drafts.
  2. More often than not, we start our low-fi prototypes from sketching. Once we get the idea, we can use paper and pen and any other softwares for rough sketch. we’re super enthusiastic to jump into Sketch app or Axure RP to lay out a monochrome wireframe and start connecting screens. Whenever our design team takes on a project, our designers ask our clients questions. Sometimes a lot, sometimes just a few, depending on the previously received brief. 
  3. More often than not, we start our low-fi prototypes from sketching. Once we get the idea, we can use paper and pen and any other softwares for rough sketch. we’re super enthusiastic to jump into Sketch app or Axure RP to lay out a monochrome wireframe and start connecting screens. Whenever our design team takes on a project, our designers ask our clients questions. Sometimes a lot, sometimes just a few, depending on the previously received brief. 
  4. As it has been previously laid out, a high-fidelity prototype is of closer resemblance to the final product. It is usually much more detailed and most importantly, answers more questions.
  5. As it has been previously laid out, a high-fidelity prototype is of closer resemblance to the final product. It is usually much more detailed and most importantly, answers more questions.