SlideShare una empresa de Scribd logo
1 de 11
What is it?

 Wireframes are basic visual guides

 They describe the content and functionality without
  design

 They are very useful in working out the user
  experience an journey of a site without design
What to include

 Placement’s for content with descriptions. You can
  use things like CTA to describe the visuals.

 Point out functionality where needed

 Show when there are images and text
Think about how people
         read online
 Generally people read websites left to right top to
  bottom.

 You can change how read down your website but
  placing more weighting on different areas

 In you wire framing you have the chance to try many
  ways of laying out content to try it! Its much easier to
  get it right now, rather then later.
F-shape theory

 Formed from eye-tracking

 First Horizontal movement

 Then down a bit and second horizontal movement

 Then Finally a left hand side vertically
F-shape
What to learn from F

 Users won’t read your text completely

 The first two paragraphs must contain your most
  important information
Copy

 Online you need to dumb everything down the plain
  English

 People don’t pay attention online, unless they are
  committed to site. (they will just scan for what they
  want and look for keywords.)

 If you site has a lot of copy (like news and blogs)
  then make ways for people to work out if they want
  commit or not
Wire framing tips

 Try different solutions on paper

 Keep in mind different users, and what their
  approaches may be

 The wireframe isn’t the design, don’t feel like your
  committing to much to the layout.

 Form a priority order for the content

Más contenido relacionado

Destacado (8)

Customer story framework
Customer story frameworkCustomer story framework
Customer story framework
 
Harnessing The Power Of Art For Your Home
Harnessing The Power Of Art For Your HomeHarnessing The Power Of Art For Your Home
Harnessing The Power Of Art For Your Home
 
Tomlinson Hottopic Spring09
Tomlinson Hottopic Spring09Tomlinson Hottopic Spring09
Tomlinson Hottopic Spring09
 
IndúStria TèXtil
IndúStria TèXtilIndúStria TèXtil
IndúStria TèXtil
 
Jotun(Vietnamese)
Jotun(Vietnamese)Jotun(Vietnamese)
Jotun(Vietnamese)
 
Felicitacio
FelicitacioFelicitacio
Felicitacio
 
Philanthropy
PhilanthropyPhilanthropy
Philanthropy
 
A Scuola Senza LIMite
A Scuola Senza LIMiteA Scuola Senza LIMite
A Scuola Senza LIMite
 

Último

Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
 
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
Safe Software
 
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
Victor Rentea
 

Último (20)

MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
 
WSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering Developers
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
 
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
 
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
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
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...
 
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
 
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, ...
 
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
 
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
 
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
 
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 

Wireframing and the user experience

  • 1.
  • 2. What is it?  Wireframes are basic visual guides  They describe the content and functionality without design  They are very useful in working out the user experience an journey of a site without design
  • 3.
  • 4. What to include  Placement’s for content with descriptions. You can use things like CTA to describe the visuals.  Point out functionality where needed  Show when there are images and text
  • 5. Think about how people read online  Generally people read websites left to right top to bottom.  You can change how read down your website but placing more weighting on different areas  In you wire framing you have the chance to try many ways of laying out content to try it! Its much easier to get it right now, rather then later.
  • 6. F-shape theory  Formed from eye-tracking  First Horizontal movement  Then down a bit and second horizontal movement  Then Finally a left hand side vertically
  • 8. What to learn from F  Users won’t read your text completely  The first two paragraphs must contain your most important information
  • 9. Copy  Online you need to dumb everything down the plain English  People don’t pay attention online, unless they are committed to site. (they will just scan for what they want and look for keywords.)  If you site has a lot of copy (like news and blogs) then make ways for people to work out if they want commit or not
  • 10.
  • 11. Wire framing tips  Try different solutions on paper  Keep in mind different users, and what their approaches may be  The wireframe isn’t the design, don’t feel like your committing to much to the layout.  Form a priority order for the content