Loading presentation...

Present Remotely

Send the link below via email or IM


Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.


Making Better Wireframes

Michigan CHI, UPA, and STC Holiday Mixer - Dec 10, 2013 -- In this short talk, a veteran shares his tips on how to make good wireframes with techniques that transcend the tools.

Chris Farnum

on 23 January 2014

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Making Better Wireframes

Adobe Illustrator's layers offer an extreme amount of control over presentation. Nested layers, selection by layers, and one-touch show/hide are power features.
Good for:
simulating state-changes
adding comments
global layout
At a high level they are diagrams that document user interface design ideas and requirements.
What do I mean by "wireframes?"
Here are the 3 ridiculously simple weird old tricks I promised...
Making Better Wireframes
Wireframe v.
Chris Farnum | @crfarnum | chris.farnum@proquest.com
Michigan CHI, UxPA, and STC Holiday Mixer, Dec. 10, 2013

images courtesy of The Weather Channel, Katie Farnum
They are... wire-y
Not as detailed as the final page, product, site. It's ok if they are sketchy.
Wireframes are not...
Visual design comps
Production-ready code
So many kinds of wireframes...
So many tools!
even PowerPoint?
and more...
Use page types to
plan your project.
Sketch Layout Options
Make a list.
Check it twice ;-)
Create templates and Flesh out with content
Long live

Thank you and happy holidays!
Background thanks to Axure 7 Beta
Beyond the tools
there are strategies for wireframing.
Channel Landing Page
Sub Channel Page
Product Details
Customer Service
Search Results...
Build scenarios with states and layers.
Free form
How you do it might depend on the tool...
Tip - naming conventions are VERY important.
Axure's dynamic panels let you change the state of a component, show/hide elements.
Visio - Backgrounds help with global nav and page types. Hint, backgrounds can be stacked on other backgrounds.
Use an open canvas, with arrows to show user flow, component state changes.
Layers in Visio allow show/hide, and can also be used to lock components from accicental edits.
Balsamiq's UI library has many objects that you can customize with settings instead of drawing everything.
Tip - before you draw it yourself, search the internets.
Axure's widgets and masters are a powerful combo that can save a ton of redrawing.
Comes with a large library of shapes.
Easy to create your own shapes & sets.
Good for:
adding and reusing common shapes
creating and sharing custom libraries
THINKING in terms of screen components
Widget libraries
huge community of sources
define common components to be reused, then
update all instances in one place.
Focus on the task at hand. Sometimes you can't tackle the whole page or site at once.
Draw just enough.
Leave room for others
Find the right amount of time/effort needed to invest in wireframes for your project.
Use Placeholders
On a team, assume that other specialists will fill in your framework.
Maybe for some folks who...

Go straight to code, edit in the browser
Are more comfortable with higher-end visual design tools and technique
Don't wireframe anymore because they are in a new role (manager, entrepreneur, etc.)
In defense of wireframes-

Not everyone is a unicorn.
New UXD folk learn to wireframe in school.
The main reason for doing wireframes hasn't changed

Wireframes are a good way to communicate.
Full transcript