SlideShare une entreprise Scribd logo
1  sur  28
Télécharger pour lire hors ligne
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

Contenu connexe

Tendances

Luidia eBeam Interact Features VG
Luidia eBeam Interact Features VGLuidia eBeam Interact Features VG
Luidia eBeam Interact Features VGTimothy Misko
 
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 barVu Tran Lam
 
Building a game engine with jQuery
Building a game engine with jQueryBuilding a game engine with jQuery
Building a game engine with jQueryPaul Bakaus
 
Swift Animated tabBar
Swift Animated tabBarSwift Animated tabBar
Swift Animated tabBarKetan Raval
 
10 photoshop techniques for visualization
10 photoshop techniques for visualization10 photoshop techniques for visualization
10 photoshop techniques for visualizationAniCiije
 
Meet The Vector Superhero - Seminar on Adobe Illustrator by RapidValue Solutions
Meet The Vector Superhero - Seminar on Adobe Illustrator by RapidValue SolutionsMeet The Vector Superhero - Seminar on Adobe Illustrator by RapidValue Solutions
Meet The Vector Superhero - Seminar on Adobe Illustrator by RapidValue SolutionsRapidValue
 
Adobe Illustrator - Creating the Poster
Adobe Illustrator - Creating the PosterAdobe Illustrator - Creating the Poster
Adobe Illustrator - Creating the PosterTimothy F McKenna
 
Powerpoint tutorials
Powerpoint tutorials Powerpoint tutorials
Powerpoint tutorials ePowerpoint
 

Tendances (9)

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
 
Swift Animated tabBar
Swift Animated tabBarSwift Animated tabBar
Swift Animated tabBar
 
10 photoshop techniques for visualization
10 photoshop techniques for visualization10 photoshop techniques for visualization
10 photoshop techniques for visualization
 
Rock that Power Point
Rock that Power PointRock that Power Point
Rock that Power Point
 
Meet The Vector Superhero - Seminar on Adobe Illustrator by RapidValue Solutions
Meet The Vector Superhero - Seminar on Adobe Illustrator by RapidValue SolutionsMeet The Vector Superhero - Seminar on Adobe Illustrator by RapidValue Solutions
Meet The Vector Superhero - Seminar on Adobe Illustrator by RapidValue Solutions
 
Adobe Illustrator - Creating the Poster
Adobe Illustrator - Creating the PosterAdobe Illustrator - Creating the Poster
Adobe Illustrator - Creating the Poster
 
Powerpoint tutorials
Powerpoint tutorials Powerpoint tutorials
Powerpoint tutorials
 

En vedette

Weaponizing Downtime: Creating a Perpetual Learning Environment
Weaponizing Downtime: Creating a Perpetual Learning EnvironmentWeaponizing Downtime: Creating a Perpetual Learning Environment
Weaponizing Downtime: Creating a Perpetual Learning EnvironmentFred Beecher
 
Patterns for building patterns communities
Patterns for building patterns communitiesPatterns for building patterns communities
Patterns for building patterns communitiesYishay Mor
 
Design patterns - How much we understand and know ??
Design patterns - How much we understand and know ??Design patterns - How much we understand and know ??
Design patterns - How much we understand and know ??Vinay Raj
 
Axure Predictive Search Demo
Axure Predictive Search DemoAxure Predictive Search Demo
Axure Predictive Search DemoJonathan Lupo
 
What is a UX Strategy?
What is a UX Strategy?What is a UX Strategy?
What is a UX Strategy?LMarine
 
Enterprise UX: What, How & Why in 20 short minutes
Enterprise UX: What, How & Why in 20 short minutesEnterprise UX: What, How & Why in 20 short minutes
Enterprise UX: What, How & Why in 20 short minutesDave Malouf
 
Focus on customer experience the journey not the destination
Focus on customer experience   the journey not the destinationFocus on customer experience   the journey not the destination
Focus on customer experience the journey not the destinationclarityrules
 
UX Poland 2014: Y.Vetrov — Applied UX Strategy
UX Poland 2014: Y.Vetrov — Applied UX StrategyUX Poland 2014: Y.Vetrov — Applied UX Strategy
UX Poland 2014: Y.Vetrov — Applied UX StrategyYury Vetrov
 
UX Deliverables in Practice
UX Deliverables in PracticeUX Deliverables in Practice
UX Deliverables in PracticePeter Boersma
 
Framework Design Guidelines
Framework Design GuidelinesFramework Design Guidelines
Framework Design Guidelinesbrada
 
9 Secrets of Kano Model
9 Secrets of Kano Model9 Secrets of Kano Model
9 Secrets of Kano ModelGena Drahun
 
UXPeople2013: Юрий Ветров — UX-стратегия. Теория и практика
UXPeople2013: Юрий Ветров — UX-стратегия. Теория и практикаUXPeople2013: Юрий Ветров — UX-стратегия. Теория и практика
UXPeople2013: Юрий Ветров — UX-стратегия. Теория и практикаYury Vetrov
 
UXPeople 2015: Юрий Ветров — Платформенное мышление
UXPeople 2015: Юрий Ветров — Платформенное мышлениеUXPeople 2015: Юрий Ветров — Платформенное мышление
UXPeople 2015: Юрий Ветров — Платформенное мышлениеYury Vetrov
 
What is Customer Experience?
What is Customer Experience?What is Customer Experience?
What is Customer Experience?ClearAction
 
Higher education and intercollegiate athletics research: A missed opportunity
Higher education and intercollegiate athletics research: A missed opportunityHigher education and intercollegiate athletics research: A missed opportunity
Higher education and intercollegiate athletics research: A missed opportunityScott Hirko
 

En vedette (20)

Weaponizing Downtime: Creating a Perpetual Learning Environment
Weaponizing Downtime: Creating a Perpetual Learning EnvironmentWeaponizing Downtime: Creating a Perpetual Learning Environment
Weaponizing Downtime: Creating a Perpetual Learning Environment
 
Patterns for building patterns communities
Patterns for building patterns communitiesPatterns for building patterns communities
Patterns for building patterns communities
 
Design patterns - How much we understand and know ??
Design patterns - How much we understand and know ??Design patterns - How much we understand and know ??
Design patterns - How much we understand and know ??
 
Axure Predictive Search Demo
Axure Predictive Search DemoAxure Predictive Search Demo
Axure Predictive Search Demo
 
Triangular trade
Triangular tradeTriangular trade
Triangular trade
 
What is a UX Strategy?
What is a UX Strategy?What is a UX Strategy?
What is a UX Strategy?
 
Enterprise UX: What, How & Why in 20 short minutes
Enterprise UX: What, How & Why in 20 short minutesEnterprise UX: What, How & Why in 20 short minutes
Enterprise UX: What, How & Why in 20 short minutes
 
Design pattern
Design patternDesign pattern
Design pattern
 
Triangular trade
Triangular tradeTriangular trade
Triangular trade
 
Focus on customer experience the journey not the destination
Focus on customer experience   the journey not the destinationFocus on customer experience   the journey not the destination
Focus on customer experience the journey not the destination
 
UX Poland 2014: Y.Vetrov — Applied UX Strategy
UX Poland 2014: Y.Vetrov — Applied UX StrategyUX Poland 2014: Y.Vetrov — Applied UX Strategy
UX Poland 2014: Y.Vetrov — Applied UX Strategy
 
UX Deliverables in Practice
UX Deliverables in PracticeUX Deliverables in Practice
UX Deliverables in Practice
 
Framework Design Guidelines
Framework Design GuidelinesFramework Design Guidelines
Framework Design Guidelines
 
9 Secrets of Kano Model
9 Secrets of Kano Model9 Secrets of Kano Model
9 Secrets of Kano Model
 
UXPeople2013: Юрий Ветров — UX-стратегия. Теория и практика
UXPeople2013: Юрий Ветров — UX-стратегия. Теория и практикаUXPeople2013: Юрий Ветров — UX-стратегия. Теория и практика
UXPeople2013: Юрий Ветров — UX-стратегия. Теория и практика
 
UXPeople 2015: Юрий Ветров — Платформенное мышление
UXPeople 2015: Юрий Ветров — Платформенное мышлениеUXPeople 2015: Юрий Ветров — Платформенное мышление
UXPeople 2015: Юрий Ветров — Платформенное мышление
 
What is Customer Experience?
What is Customer Experience?What is Customer Experience?
What is Customer Experience?
 
Introduction to Microservices
Introduction to MicroservicesIntroduction to Microservices
Introduction to Microservices
 
Make-up
Make-upMake-up
Make-up
 
Higher education and intercollegiate athletics research: A missed opportunity
Higher education and intercollegiate athletics research: A missed opportunityHigher education and intercollegiate athletics research: A missed opportunity
Higher education and intercollegiate athletics research: A missed opportunity
 

Similaire à Managing Visual Design in Axure

ETECH_WEEK7-Image-Manipulation-Techniques-1.pdf
ETECH_WEEK7-Image-Manipulation-Techniques-1.pdfETECH_WEEK7-Image-Manipulation-Techniques-1.pdf
ETECH_WEEK7-Image-Manipulation-Techniques-1.pdfbongsantiago96
 
217 quick guide to photoshop cs6
217 quick guide to photoshop cs6217 quick guide to photoshop cs6
217 quick guide to photoshop cs6Rodel Morales
 
Adobe illustrator 1
Adobe illustrator 1Adobe illustrator 1
Adobe illustrator 1ilaazmil2
 
Kano Model Process
Kano Model ProcessKano Model Process
Kano Model ProcessSlideTeam
 
how to use design by software.pptx
how to use design by software.pptxhow to use design by software.pptx
how to use design by software.pptxNitinKumar12570
 
adobephotoshop_frerking
adobephotoshop_frerking adobephotoshop_frerking
adobephotoshop_frerking Agung Yuwono
 
Business Process Management Tools Process Management Tools Process Performanc...
Business Process Management Tools Process Management Tools Process Performanc...Business Process Management Tools Process Management Tools Process Performanc...
Business Process Management Tools Process Management Tools Process Performanc...SlideTeam
 
HR Operating Model Key Component
HR Operating Model Key ComponentHR Operating Model Key Component
HR Operating Model Key ComponentSlideTeam
 
Photoshop notes cs-4
Photoshop notes  cs-4Photoshop notes  cs-4
Photoshop notes cs-4SirajRock
 
CorelDraw%20Tutorial%203
CorelDraw%20Tutorial%203CorelDraw%20Tutorial%203
CorelDraw%20Tutorial%203tutorialsruby
 

Similaire à Managing Visual Design in Axure (20)

dr_4
dr_4dr_4
dr_4
 
dr_4
dr_4dr_4
dr_4
 
Photoshop basics
Photoshop basicsPhotoshop basics
Photoshop basics
 
Adobe illustrator basics
Adobe illustrator basicsAdobe illustrator basics
Adobe illustrator basics
 
ETECH_WEEK7-Image-Manipulation-Techniques-1.pdf
ETECH_WEEK7-Image-Manipulation-Techniques-1.pdfETECH_WEEK7-Image-Manipulation-Techniques-1.pdf
ETECH_WEEK7-Image-Manipulation-Techniques-1.pdf
 
217 quick guide to photoshop cs6
217 quick guide to photoshop cs6217 quick guide to photoshop cs6
217 quick guide to photoshop cs6
 
Adobe illustrator 1
Adobe illustrator 1Adobe illustrator 1
Adobe illustrator 1
 
Kano Model Process
Kano Model ProcessKano Model Process
Kano Model Process
 
Tutorial Coreldraw_3
Tutorial Coreldraw_3Tutorial Coreldraw_3
Tutorial Coreldraw_3
 
how to use design by software.pptx
how to use design by software.pptxhow to use design by software.pptx
how to use design by software.pptx
 
Basic tutorials
Basic tutorialsBasic tutorials
Basic tutorials
 
Basic tutorials
Basic tutorialsBasic tutorials
Basic tutorials
 
PDT Engineering: ProE Tip #018
PDT Engineering: ProE Tip #018PDT Engineering: ProE Tip #018
PDT Engineering: ProE Tip #018
 
adobephotoshop_frerking
adobephotoshop_frerking adobephotoshop_frerking
adobephotoshop_frerking
 
Photoshop
PhotoshopPhotoshop
Photoshop
 
Business Process Management Tools Process Management Tools Process Performanc...
Business Process Management Tools Process Management Tools Process Performanc...Business Process Management Tools Process Management Tools Process Performanc...
Business Process Management Tools Process Management Tools Process Performanc...
 
Cours photoshop
Cours photoshopCours photoshop
Cours photoshop
 
HR Operating Model Key Component
HR Operating Model Key ComponentHR Operating Model Key Component
HR Operating Model Key Component
 
Photoshop notes cs-4
Photoshop notes  cs-4Photoshop notes  cs-4
Photoshop notes cs-4
 
CorelDraw%20Tutorial%203
CorelDraw%20Tutorial%203CorelDraw%20Tutorial%203
CorelDraw%20Tutorial%203
 

Dernier

WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa LetšosaModels of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa Letšosaannemarleenolthof1
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfUnlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfIBM
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
UI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessUI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessThink 360 Studio
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaAMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaBarusRa
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 

Dernier (18)

WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa LetšosaModels of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfUnlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
UI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessUI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design Success
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaAMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 

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.