4. WHAT IS WIREFRAMING?
“page
schema+c”
“blueprint”
“comprehensive
layout”
A website wireframe is a visual guide
that represents the skeletal framework
of a website!
“paper
prototype”
“whiteboarding”
5. WHAT IS WIREFRAMING?
“[It] depicts the page layout or
arrangement of the website’s content,”!
9. WHAT IS WIREFRAMING?
If
all
else
fails:
h<p://www.youtube.com/watch?v=QSxF-‐pISj1w
10. WHAT IS WIREFRAMING?
Wireframes connect the underlying
conceptual structure, or information
architecture, to the surface, or visual
design of the website and are measured
in terms of “fidelity” or how closely
they resemble the final product !
12. WHY DO WE USE WIREFRAMING?
To make rapid prototypes of pages,
while measuring the practicality of a
design concept!
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. 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!
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!
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? !
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!!
