Wireframes

1,939 views

Published on

A quick and dirty overview of wireframing, its use in website design and relationship with information architecture. Big plug for Balsamiq Mockups

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

No Downloads
Views
Total views
1,939
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
51
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Wireframes

  1. 1. Wireframing! Useful tools and information architecture!
  2. 2. Wireframing! “A website wireframe is a basic visual guide used in interface design to suggest the structure of a website and relationships between its pages.”! (Wikipedia) !
  3. 3. Wireframe Benefits! •  Demonstrates a site concept quickly, allowing stakeholders to react to content placement and rendering! •  Allows for usability testing early in the project lifecycle! •  Teamwork and project communication:! •  Can provide guidance to visual designers with respect to information priorities! •  Can facilitate collaboration between design team and information architects!
  4. 4. Example! Image from http://jlrinteractive.com !
  5. 5. When to use! •  Complex projects, with lots of interaction or information classification! •  Early in the design (before preparing comps, or passing to a developer)! •  If the UI is not understood during project discovery!
  6. 6. When ʻnotʼ to use! (Be  sneaky  instead)   •  If the stakeholders/review panel are expecting full graphical mockups! •  If the ʻclientʼ is not willing to be educated in IA/wireframes! •  Users are not involved in the site design process! •  Smaller, simple projects!
  7. 7. Tools! Professional Applications:! •  Visio (PC only)! •  OmniGraffle (Mac only)! •  InDesign! Pen and paper!!
  8. 8. Simple Choice! •  Balsamiq Mockups – can export to HTML via Napkee. AIR application, and online version soon.! •  Looks like a sketch – so isnʼt mistaken for graphical mockup! •  Quick & easy!
  9. 9. Other Resources! •  Wireframes Magazine wireframes.linowski.ca! •  Yahoo! Design Pattern Library developer.yahoo.com/ypatterns! •  Smashing Magazine www.smashingmagazine.com/2009/09/01/35-excellent- wireframing-resources! •  Boxes and Arrows (IA focus) boxesandarrows.com!

×