Send the link below via email or IMCopy
Present to your audienceStart 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
Making Better Wireframes
Transcript of Making Better Wireframes
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
Chris Farnum | @crfarnum | email@example.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
So many kinds of wireframes...
So many tools!
Use page types to
plan your project.
Sketch Layout Options
Make a list.
Check it twice ;-)
Create templates and Flesh out with content
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
Build scenarios with states and layers.
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.
adding and reusing common shapes
creating and sharing custom libraries
THINKING in terms of screen components
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.
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.