Wireframing basics may 2012

1,431 views
1,245 views

Published on

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,431
On SlideShare
0
From Embeds
0
Number of Embeds
247
Actions
Shares
0
Downloads
28
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Wireframing basics may 2012

  1. 1. Wireframing: Just the Basics Feel free to holler with ?s! meaghan.barbin@gmail! @mbarbin!
  2. 2. Wireframing 101: Syllabus•  What is wireframing?!•  Why do it?!•  5 types of web pages !•  How does it tie into product development?!•  Toolkit!
  3. 3. WHAT IS WIREFRAMING?
  4. 4. WHAT IS WIREFRAMING?“page  schema+c”   “blueprint”   “comprehensive  layout”   A website wireframe is a visual guidethat represents the skeletal framework of a website! “paper  prototype”   “whiteboarding”  
  5. 5. WHAT IS WIREFRAMING? “[It] depicts the page layout orarrangement of the website’s content,”!
  6. 6. WHAT IS WIREFRAMING? “… including interface elements”!
  7. 7. WHAT IS WIREFRAMING? “… and navigational systems,”!
  8. 8. WHAT IS WIREFRAMING? “… and how they work together”! - Wikipedia!
  9. 9. WHAT IS WIREFRAMING? If  all  else  fails:   h<p://www.youtube.com/watch?v=QSxF-­‐pISj1w  
  10. 10. WHAT IS WIREFRAMING? Wireframes connect the underlying conceptual structure, or informationarchitecture, to the surface, or visualdesign of the website and are measured in terms of “fidelity” or how closely they resemble the final product !
  11. 11. WHY DO WE USE WIREFRAMING?
  12. 12. WHY DO WE USE WIREFRAMING? To make rapid prototypes of pages, while measuring the practicality of a design concept!
  13. 13. WHY DO WE USE WIREFRAMING?To get a 10,000 foot view on our product! – Flowcharts: How do we want it to work?! – Sketches of product: What are all the parts we need to build?! – Visual designs: Make it sexy!
  14. 14. IT’S AN ITERATIVE PROCESS!!Get stakeholder’s buy-in and feedback! – Incorporate early user feedback into design! – Prepare user stories before you wireframe! •  Keep the end user at top-of-mind! •  Helps to make sure the information, navigation & flows make sense!
  15. 15. KNOW THE BASIC PAGES Landing! Dashboard! Detail! Gallery / List! Forms!
  16. 16. LANDING
  17. 17. DASHBOARD
  18. 18. GALLERY
  19. 19. LIST
  20. 20. DETAIL
  21. 21. FORMS
  22. 22. SOME ELEMENTS OF A WIREFRAME…
  23. 23. INTEGRATE USABILITY STANDARDS! Save yourself the headache / extra work later ! – People are “used to” the iOS platform, including the look and feel… ! – Makes the dev legwork easier, but it’s also help to make the user’s experience frictionless! – iOS Usability Standards!
  24. 24. WRAPPING IT UP…
  25. 25. WIREFRAMING WRAP-UP Wireframing is a minimalist’s sport – goal is to rapidly iterate so you can start building!! – Does our product have all the necessary pieces? ! – Do the engineers know what they need to build? !
  26. 26. WIREFRAMING TOOLBOX
  27. 27. WIREFRAMING TOOLBOX Templates are your friend ! – And so is paper – seriously. Sketch it out first.! – Ain’t no shame in ppt or google drawing (makes it easy to share with your peeps)! – Balsamiq, Keynotopia, GoMockingbird, Prot.io, Omnigraffle! – Smashing pumpkin for fancy pants and freebies!!

×