SlideShare a Scribd company logo

Managing Visual Design in Axure

•
•
Fred Beecher
Fred Beecher

This document discusses using Axure to represent visual design in prototypes. It provides tips for defining colors and styles, using images effectively, and promoting reuse through masters, libraries and templates. The document recommends using Axure's color palette and style editor to define colors and formatting. It also suggests techniques like image maps, slicing, preserving corners and styles to make images more interactive. Further, it advocates applying a grid during design through masters but hiding it before generating prototypes to avoid clutter. The goal is to test visual design effectively while prototyping without compromising usability.

Related slideshows

Luidia eBeam Interact Features VG
Luidia eBeam Interact Features VGLuidia eBeam Interact Features VG
Luidia eBeam Interact Features VG
 
Session 13 - Working with navigation and tab bar
Session 13 - Working with navigation and tab barSession 13 - Working with navigation and tab bar
Session 13 - Working with navigation and tab bar
 
Building a game engine with jQuery
Building a game engine with jQueryBuilding a game engine with jQuery
Building a game engine with jQuery
 
1 of 28
Download to read offline
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 fidelity.You’ve got to use high visual fidelity 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 flow. • Except for the above situations, visual design is not critical for prototype testing. But if you happen to have a well defined 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-defined styles 3. Images (and the five 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
Defining Colors
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 fill or gradient dropdown 2 3 4 5 6 2. Current color swatch 3. Eyedropper tool 4. Hex code entry field 5. No fill swatch 6. More button (Opens standard Windows color dialog. Lame. Don’t bother to use.) 7. Transparency slider & text field 7
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 fill type dropdown • You use the eyedropper tool on a solid fill object (as opposed to a gradient) 2. Click in the leftmost arrow in the gradient display 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 field 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 field 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.
Defining Styles
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 defining default and optional widget styles... but you’ve gotta find it first.... there are two ways: 1. Go to Wireframe > Style Editor or 2. Click on that tiny, obscure little button between the font & style dropdowns: 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 Styles 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-Defined Styles 1. Open the Style Editor 2. Select “User-defined” from the dropdown 3. Click “New” 4. Specify the style’s formatting 5. Use the style dropdown on the formatting toolbar to apply styles If you specify border & fill formatting and apply the style to something without those properties, they will simply not be applied.
Images
http://fbeecher.googlepages.com/Axureworld-VisualDesign.zip
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 interactive
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 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 Corners 3. Click on the yellow triangles to define 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
Slicing images 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 change visually
Asset Reuse
Re-use at the right level Re-using visual design assets is the core of managing them. Axure offers functionality that supports re-use at various levels. Level 1: High Granularity (mechanics) • Custom Libraries (logos, buttons, etc) Level 2: Moderate Granularity (interactions) • Custom Widgets • Normal Masters Level 3: Systemic (styles, guidelines, & patterns) • Widget & user-defined styles • Template .RP files
Re-use at the right level Field
Label Custom library widgets Field
Label Normal Master Field
Label Bu,on
Label Link
Text User-defined widget style
Grid Layout
The 960 Grid http://www.userfocus.co.uk/resources
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 file into your own RP file 2. In each master, select all the grid elements and right-click > Convert to Dynamic Panel 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 design.
Discussion
Fred Beecher fbeecher@gmail.com @fred_beecher

More Related Content

Managing Visual Design in Axure

  • 1. Managing Visual Design Presented by Fred Beecher
  • 2. 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.
  • 3. 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 fidelity.You’ve got to use high visual fidelity 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 flow. • Except for the above situations, visual design is not critical for prototype testing. But if you happen to have a well defined styleguide laying around, it couldn’t hurt to apply it.
  • 4. 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-defined styles 3. Images (and the five 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
  • 6. 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 fill or gradient dropdown 2 3 4 5 6 2. Current color swatch 3. Eyedropper tool 4. Hex code entry field 5. No fill swatch 6. More button (Opens standard Windows color dialog. Lame. Don’t bother to use.) 7. Transparency slider & text field 7
  • 7. 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 fill type dropdown • You use the eyedropper tool on a solid fill object (as opposed to a gradient) 2. Click in the leftmost arrow in the gradient display 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 field 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 field 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.
  • 9. Styles. Like CSS for Axure? Kinda. Axure’s Style Editor is as useful as it is hidden... and boy is it hidden!
  • 10. Getting to the Style Editor The Style Editor allows you to speed up, reuse, & constrain formatting by defining default and optional widget styles... but you’ve gotta find it first.... there are two ways: 1. Go to Wireframe > Style Editor or 2. Click on that tiny, obscure little button between the font & style dropdowns: See? I wasn’t kidding.
  • 11. 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 Styles 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!!!
  • 12. 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-Defined Styles 1. Open the Style Editor 2. Select “User-defined” from the dropdown 3. Click “New” 4. Specify the style’s formatting 5. Use the style dropdown on the formatting toolbar to apply styles If you specify border & fill formatting and apply the style to something without those properties, they will simply not be applied.
  • 15. 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 interactive
  • 16. 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!
  • 17. Preserving corners 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 Corners 3. Click on the yellow triangles to define 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
  • 18. 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
  • 19. Slicing images 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.
  • 20. 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 change visually
  • 22. Re-use at the right level Re-using visual design assets is the core of managing them. Axure offers functionality that supports re-use at various levels. Level 1: High Granularity (mechanics) • Custom Libraries (logos, buttons, etc) Level 2: Moderate Granularity (interactions) • Custom Widgets • Normal Masters Level 3: Systemic (styles, guidelines, & patterns) • Widget & user-defined styles • Template .RP files
  • 23. Re-use at the right level Field
Label Custom library widgets Field
Label Normal Master Field
Label Bu,on
Label Link
Text User-defined widget style
  • 25. The 960 Grid http://www.userfocus.co.uk/resources
  • 26. 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 file into your own RP file 2. In each master, select all the grid elements and right-click > Convert to Dynamic Panel 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 design.