Loading presentation...
Prezi is an interactive zooming presentation

Present Remotely

Send the link below via email or IM

Copy

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.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

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.
by

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.
Web
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...
lo-fi
hi-fi
So many tools!
Visio
Balsamiq
Axure
Omnigraffle
Adobe
Illustrator
iRise
Mockingbird
moqups
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
#1
Are
wireframes
dead?
Long live
wireframes!

Thank you and happy holidays!
Background thanks to Axure 7 Beta
concept
detailed
prototype
template
Beyond the tools
there are strategies for wireframing.
Home
Channel Landing Page
Sub Channel Page
Product Details
Reviews
Announcements
Customer Service
Search Results...
Build scenarios with states and layers.
#2
Free form
How you do it might depend on the tool...
Tip - naming conventions are VERY important.
Layers
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.
Components
Axure's widgets and masters are a powerful combo that can save a ton of redrawing.
Visio
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
Masters
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.
#3
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