Managing Visual Design
Presented by Fred Beecher
Um. Isn’t Axure for prototyping?
Yes, but it is also good at representing visual design.
And there are plenty of reasons why you’d want to
take advantage of this capability.
While it’s not Photoshop, it will get the job done well
enough for the purpose of prototyping.
I give. Why is this useful?
• Visual design affects the usability of your UX design, so you should
probably test it. And hey, you’ve got a prototype already so why not?
• Some audiences don’t react so well to low visual ﬁdelity.You’ve got to
use high visual ﬁdelity prototypes if you want to get quality data back
from testing them.
• When you’re prototyping new functionality on an existing site that
interacts with existing functionality. Using a wireframey prototype will
disrupt the user’s ﬂow.
• Except for the above situations, visual design is not critical for
prototype testing. But if you happen to have a well deﬁned styleguide
laying around, it couldn’t hurt to apply it.
How does Axure do it?
Axure has four high-level features that address visual design. Add
one best practice and you’re all set.
1. The color selection palette
2. Widget & user-deﬁned styles
3. Images (and the ﬁve million things you can do around them)
4. Re-use functionality such as masters & libraries
5. Best practice: Design to a grid by showing a dynamic panel with grid
elements on a background master during design but hiding it before
you generate a prototype or spec
Dude. It’s just a color palette!
Yeah, but it can be tricky! Here are the basic bits.
Anatomy of the palette 1
1. Solid ﬁll or gradient dropdown 2 3 4 5 6
2. Current color swatch
3. Eyedropper tool
4. Hex code entry ﬁeld
5. No ﬁll swatch
6. More button (Opens standard Windows
color dialog. Lame. Don’t bother to use.)
7. Transparency slider & text ﬁeld
Color palette details
You don’t need to hit enter if... To create a gradient...
• You just click on a swatch or... 1. Choose “Gradient” from the ﬁll type
• You use the eyedropper tool on a solid ﬁll
object (as opposed to a gradient) 2. Click in the leftmost arrow in the gradient
You do need to hit enter if...
3. Choose a swatch, enter a hex value, or use
• You create or modify a gradient or... the eyedropper tool
• You type or paste a hex code into the text 4. DO NOT HIT ENTER! Click on the
ﬁeld rightmost arrow in the gradient display
Using the eydropper tool 5. Repeat steps 2 & 3 with the rightmost
arrow to specify the second gradient color
• The color you want must currently be
visible on the screen 6. Use the Angle text ﬁeld to control the
direction of the gradient
• Mac users: The color you want must
currently be visible in Windows. Exposé will 7. Click anywhere in the gradient to add
not help you here. another color
• Consider creating a master with all your 8. Drag an arrow off the palette to delete
colors & assigning to all pages that section of the gradient.
Styles. Like CSS for Axure? Kinda.
Axure’s Style Editor is as useful as it is hidden...
and boy is it hidden!
Getting to the Style Editor
The Style Editor allows you to speed up, reuse, & constrain
formatting by deﬁning default and optional widget styles... but
you’ve gotta ﬁnd it ﬁrst.... there are two ways:
1. Go to Wireframe > Style Editor or
2. Click on that tiny, obscure little button between the font & style
See? I wasn’t kidding.
Setting default widget styles
You know how you can change the formatting associated with tags
in CSS, e.g., <strong>? Well you can do that in Axure with Widget
1. Open the Style Editor
2. Choose a widget
3. Specify its formatting
WARNING! THIS CHANGE WILL APPLY TO ALL WIDGETS OF THIS
TYPE IN YOUR PROTOTYPE!!!
Setting custom widget styles
You know how you can set up and apply styles in Word? Well you
can do that in Axure with User-Deﬁned Styles
1. Open the Style Editor
2. Select “User-deﬁned” from the
3. Click “New”
4. Specify the style’s formatting
5. Use the style dropdown on the
formatting toolbar to apply
If you specify border & ﬁll formatting and apply the style to something
without those properties, they will simply not be applied.
Images are cooler than you think
There’s a lot of interesting functionality around them!
• Text on images!
• Image widget styles
• Which include the ability to style image text!
• Preserve corners
• Combine this with image text & widget styles and you just need a
few images for ALL your buttons!
• Image maps
• Image slicing
• Combine with image styles to make your giant screenshots more
Image Styles. And text!!!
Double-click on an image to add text! Choose “Edit Rollover
Image” etc. to specify the image you want to display plus the style of
the associated text!
Preserving corners allows you to prevent rounded, etc. corners on
imported images from distorting when the image is resized.
1. Select the image you want to preserve
2. Right-click and choose Edit Image > Preserve
3. Click on the yellow triangles to deﬁne the
corners. When you move them, they will
display lines that make the corners clear
4. Resize your image with impunity!
The bottom image is a copy of the 5. Right-click and select Edit Image > Disable
top image that has been stretched Preserve corners to turn it off
Making re-usable graphic buttons
1. Import a button image with no text
2. Double-click the image, add some placeholder text, & format it
3. Right-click the image & select Edit Image > Edit Rollover (etc.) Image
4. Import another button image with no text
5. Specify the text formatting for the style
6. Repeat steps 3-5 for additional image styles
Right-click an image and select Edit Image > Slice Image. This will
bring up two bars & a knife icon. Move them around until the
correct position and click to create four images from one.
Image mapping vs. image slicing
When do you just use an image map region rather than slicing?
1. Use Image Map Regions to make parts of images interactive when
they don’t need to change visually
2. Slice images to make parts of images interactive when they do need to
The 960 Grid
Deactivating the grid
No, this is not some left-wing terrorist pipe dream... it’s what you
do before you generate a prototype or spec to avoid cluttering the
design with the grid.
1. Import the relevant grid masters from the 960 Grid System ﬁle into
your own RP ﬁle
2. In each master, select all the grid elements and right-click > Convert to
3. Name your panel descriptively!
4. Add an action that hides the grid panel on the OnPageLoad interaction
for each master. This will prevent the grid from showing up in the
prototype and documentation although it remains available during