This document discusses wireframes and provides guidance on how to create them. It begins by explaining what wireframes are not, such as prototypes, visual designs, or marketing materials. It then describes what wireframes are, including low-fidelity visual representations of a website's layout and structure that are free of design elements. The document provides tips for creating wireframes, such as getting inspired, determining your process, choosing tools, using grids and blocks, and adding typographic hierarchy. It cautions that wireframes should remain flexible and not dictate the final design.
2. Wireframes
It’s possible people will try to misuse wireframes.
It’s your responsibility to maintain focus on them
as a step in development, not an end.
!
Wireframes are part of a process, and exist to
support the next step.
3. Wireframes
NOT
!
— prototyping
— visual design (http://ux.stackexchange.com/
questions/18069/how-to-work-with-visual-designers-
who-treat-wireframes-as-literal-graphic-sugges)
— proofs of your concept
— marketing materials
6. Wireframes
NOT
!
Prototypes: Semi-functional. Have the the start of a
functional user interface.Ability to click, simulates the
way the site will work.
!
Wireframes will miss if there’s an interaction-related
issue (which could be a showstopper).
!
9. Wireframes
Wireframes ARE:
!
A low-fidelity visual
representation of a website’s
layout design.
!
Represents the basic page layout
structure and navigational
scheme of the site, as well as
major site components
10. Wireframes
Wireframes ARE:
!
Free of color, particular font
choices, logos, or "live"
design elements
!
A tool to help us learn about
the site or app’s architecture
11. A Quick Note on
Greeking
Though there is not universal
agreement, it’s an accepted
practice is to use greeked
text as a placeholder. It
shows where content will go,
how the page will look with
content (not too busy nor too
unbalanced).
!
And it can be fun.
http://favbulous.com/post/973/20-funny-lorem-
ipsum-dummy-text-generators
12. Wireframes
Wireframes ARE:
!
Low fidelity so we don’t get
hung up on "hm, maybe 5px
to the right" or "I don’t like
that shade of blue"
!
Can even be really, really low
in fidelity to start
14. Wireframes
Wireframes DO:
!
Help evaluate page layout
against usability best
practices
!
!
!
Help us all get on the
same page
http://www.w3.org/WAI/eval/Overview.html
15. Wireframes
Recapping the case for low fidelity
!
— Helps teams avoid premature conversations about surface
issues like color or "pixel-perfect"
!
— Instead focuses discussion on correct and complete
content and functionality
!
— Keeps the focus on user interaction (works or fails)
16. Wireframes
Recapping the case for low fidelity
!
— Keeps the focus on user interaction (works or fails)
!
— Can clearly communicate how features will function
(note: you need to be active in presenting)
!
— Makes it easier to "kill your darling"/update
!
— Everything’s easier to change if code isn’t committed
17. Wireframes
AND:
!
It’s the UX team’s (or person’s) job and
responsibility to communicate this and put it in
context to the boss/client/external team/etc.
18. Wireframes: How To
Step 1: Get inspired
!
(Pro tip: Not all work you’ll see out in the wild may be
good work… build your critical eye and facilities.)
!
!
!
19. Wireframes: How To
Step 1: Get inspired
!
UICloud I Heart Wireframes
!
!
!
http://www.w3.org/WAI/eval/Overview.html http://wireframes.tumblr.com
20. Wireframes: How To
Step 1: Get inspired
!
Wirify Browser Bookmarklet
!
!
!
http://www.wirify.com/
21. Wireframes: How To
Step 2: Figure out your process
!
— sketch —> code?
— sketch —> wireframe —> high-fidelity —> code?
— sketch —> wireframe —> visual design —> code?
— wireframe —> interactive prototype —> code?
— etc.
!
—What’s your story?
!
(Bonus round: What do these have in common?)
22. Wireframes: How To
Step 2: Figure out your process
!
— think about your strengths, skills, and interests
!
— you may need to try many times to figure out what
works best for you
!
— maybe different processes work for different projects
23. Wireframes: How To
Step 3: Choose your quiver
!
Balsamiq UXPin
!
!
!
http://balsamiq.com http://uxpin.com/
24. Wireframes: How To
Step 3: Choose your quiver
!
OmniGraffle Axure RP
!
!
!
http://www.omnigroup.com/omnigraffle/ http://axure.com/
25. Wireframes: How To
Step 3: Choose your quiver
!
Flairbuilder Keynote/PowerPoint
!
!
!
http://www.flairbuilder.com
26. Wireframes: How To
Step 3: Choose your quiver
!
Web-based tools:
http://www.mockflow.com/
https://gomockingbird.com/
http://www.hotgloo.com/
http://www.webflow.com/
27. Wireframes: How To
Step 3: Choose your quiver
!
"Traditional" graphics tools:
Photoshop
Illustrator
Fireworks
InDesign
!
!
28. Wireframes: How To
Step 3: Choose your quiver
!
Free and paid sketching tools:
http://designshack.net/articles/inspiration/5-fantastic-
notebooks-and-sketchbooks-for-designers/
!
Sketching blanks:
http://www.jankoatwarpspeed.com/free-sketching-
wireframing-kit/
http://benmartineau.com/works/grids-for-
sketching.php
30. Wireframes: How To
Step 4: Grid it
!
!
!
!
!
You can create responsive grids using http://responsify.it
31. Wireframes: How To
Step 4: Block it
!
Gray boxes help give a
leg up on information
hierarchy when
creating wireframe,
seeing information
hierarchy when
working from
wireframe
33. Wireframes: How To
Step 4: or both
!
Based on your research, you
should have a sense of
what’s important for users
to find and clients to
present.
!
Relative positioning reflects
information hierarchy.
34. Wireframes: How To
Step 5: Hierarchy through typography
!
You pay more attention to this
than this
or this
or this
!
!
36. Wireframes: How To
Step 6 (optional): Go hi-fi
!
— Increment
!
— at visual/code stage you want to be in polishing mode
and no longer in drafting or experimenting mode. Perform
the iteration cycles (feedback <-> wireframing) quickly
!
— or instead go to interactive prototyping
!
38. Wireframes
Alternatives
!
— if you’re a Photoshop ace, maybe wireframe in that
!
— if you’re a Javascript/CSS ace, maybe you can wireframe
"in the browser"
!
— or you can use frameworks such as ZURB Foundation,
Twitter Bootstrap, Skeleton
39. Wireframes
CAVEAT
!
Make sure everybody understands that each step of the
process exists to support the next one, not dictate what it
should be.The wireframe should remain a tool that helps
with the creation of a higher fidelity mockup or prototype,
not a perfect blueprint for it.This means that no part of the
wireframe should be off limits when it comes to changes.
!
http://www.attackofdesign.com/why-wireframes-can-hurt-your-project/
40. Wireframes
Huddle? Break!
!
Let’s take a break to ponder all this, keeping in mind the
project of building a site for a new Oakland Farmers’
Market based on all our user research (including the
stakeholder needs). Break into teams, share what processes
work for you.
!
15 minutes.
45. Patterns
ANTI-PATTERNS
!
"a frequently used design pattern that either outright
doesn’t work or is counter-productive"
!
— Sarah Kahn, in http://webdesign.tutsplus.com/articles/
the-world-of-ux-anti-patterns--webdesign-12198
46. Patterns
ANTI-PATTERNS
!
Type: Clickable elements which don’t appear clickable
!
Can include:
— Buttons which are too small.
—Text links which aren’t visually distinct
— Buttons which are too flat to cue users that they are in fact
buttons
—The absence of hover states can also be problematic,
including failure to use {cursor: pointer;}.
49. Patterns
ANTI-PATTERNS
!
Type: Content covering content
Example: Drop-down menus on MPICT.org
!
Type: Users want to batch an action, but nope
Example: A long list of items with actions for each item (e.g.
edit or delete), but user has no way to select multiple items
!
Type: Oh, you entered some data? Took care of that for you.
Example: Forms that delete user-entered data on page reload
51. Patterns
DARK PATTERNS
!
—"…dirty tricks designers use to make people do stuff"
— Harry Brignull, www.darkpatterns.org
!
— User interfaces designed to trick people
!
—And these test well! They’re effective. Just at the expense
(sometimes literal) of users: trying to end a gym membership.
!
— Not cool, man. Not cool.