SlideShare a Scribd company logo
1 of 25
Download to read offline
Prototyping (Using Axure)



Krista Kostuch, CUA
Usability Analyst, Sr.
Synovus Financial Corporation
Me
You
Today’s Topics
   Prototyping in General
       Types
       Tools
       Process
   Axure
       Basic Features
       Example Projects
   Questions/Discussion
Why Prototype?
Types
    of
Prototypes
Low Fidelity
sketchy and incomplete—has some
  characteristics of the target product but is
  otherwise simple, usually in order to quickly
  produce the prototype and test broad
  concepts.
 what you need to start with
 “quick and dirty” and “cheap”
 can help focus on the interaction, and not
  the visual
Low Fidelity “tools”
   Pencil and paper
   Whiteboard
   Visio
   PowerPoint
   Balsamiq
High Fidelity
   Close to the final product
   Realistic interaction and visual design
   Prevents waterfall of designing after the
    requirements
   Keeps focus on user experience
   Lets you very quickly and easily create a
    realistic user experience.
Tools
Formalize into SDLC
Whatever way, it must be done
early and often – iteratively.
from Boxes and Arrows
Axure
   What is it?
       “Axure RP is a wireframing, prototyping and
        specification tool used by user experience
        designers, information architects, business
        analysts and product managers to design
        applications and websites.” axure.com
Axure
   Pros                                Cons
       Allows to make quickly              Generated HTML is not
        wireframe: drag and drop             reusable (made up of
        text boxes, form                     images, and absolutely
        components…                          positioned divs)
       Numerous interactions               Price (about 589 USD)
        (tabs; conditional events;          Tables integration weak
        hidable panels…) easy to             (can put only text in it, no
        create                               form elements, no
       Reusable components                  buttons…)
       Easy to add comments
        visible in the output
       Export HTML
       Export specs in doc
I do not work for Axure.
I just use it everyday.
Let’s Play
Basic Axure Features
   Annotated Wireframes
   Basic Interactions
   Dynamic Panels
   Masters
   Flow Diagrams
   Interactive Prototypes
   Functional Specification
You can download a free trial at
Axure.com
Again…I do not work for Axure.
A few Best Practices/Tips
   Data gathering first and foremost
   Iterative process – low to high fidelity
   Structure, Presentation, then Behavior
   Design to the/a grid
   Usability testing is a must at all stages of
    the process
Questions

More Related Content

What's hot

Intro to Axure 7 - User Vision Breakfast Briefing
Intro to Axure 7 - User Vision Breakfast BriefingIntro to Axure 7 - User Vision Breakfast Briefing
Intro to Axure 7 - User Vision Breakfast BriefingStephen Denning
 
Managing Visual Design in Axure
Managing Visual Design in AxureManaging Visual Design in Axure
Managing Visual Design in AxureFred Beecher
 
How to Extend Axure's Animation Capability
How to Extend Axure's Animation CapabilityHow to Extend Axure's Animation Capability
How to Extend Axure's Animation CapabilitySvetlin Denkov
 
Storyboarding and Wireframe Tools Review
Storyboarding and Wireframe Tools ReviewStoryboarding and Wireframe Tools Review
Storyboarding and Wireframe Tools ReviewHenry Cogo
 
Get started with Sketch: a fast (and awesome) communication and design tool
Get started with Sketch: a fast (and awesome) communication and design toolGet started with Sketch: a fast (and awesome) communication and design tool
Get started with Sketch: a fast (and awesome) communication and design toolChristopher Azar
 
Mockup, wireframe e visual: una breve introduzione
Mockup, wireframe e visual: una breve introduzioneMockup, wireframe e visual: una breve introduzione
Mockup, wireframe e visual: una breve introduzioneWEBdeBS
 
Wireframing /Prototyping with HTML
Wireframing /Prototyping with HTMLWireframing /Prototyping with HTML
Wireframing /Prototyping with HTMLDee Sadler
 
Game Design 2: 2011 - Introduction to Game Interface Design
Game Design 2: 2011 - Introduction to Game Interface DesignGame Design 2: 2011 - Introduction to Game Interface Design
Game Design 2: 2011 - Introduction to Game Interface DesignDavid Farrell
 
Mirror - Android UI on steroids: Droidcon Cracow 2014
Mirror - Android UI on steroids: Droidcon Cracow 2014Mirror - Android UI on steroids: Droidcon Cracow 2014
Mirror - Android UI on steroids: Droidcon Cracow 2014Sylwester Madej
 
Rapid Prototyping With jQuery
Rapid Prototyping With jQueryRapid Prototyping With jQuery
Rapid Prototyping With jQueryPaul Bakaus
 
Conditional Logic, Variables, & Raised Events in Axure
Conditional Logic, Variables, & Raised Events in AxureConditional Logic, Variables, & Raised Events in Axure
Conditional Logic, Variables, & Raised Events in AxureFred Beecher
 
Designing with Sketch App
Designing with Sketch AppDesigning with Sketch App
Designing with Sketch AppIan Soper
 
Adobe xd- The Empire strikes back
Adobe xd- The Empire strikes backAdobe xd- The Empire strikes back
Adobe xd- The Empire strikes backAyelet Paz Akler
 
chisnell wireframing workshop
chisnell wireframing workshopchisnell wireframing workshop
chisnell wireframing workshopJenny Chisnell
 
Using Sketch in Your Workflow – From Idea to Finished Product
Using Sketch in Your Workflow – From Idea to Finished ProductUsing Sketch in Your Workflow – From Idea to Finished Product
Using Sketch in Your Workflow – From Idea to Finished ProductBrian Louis Ramirez
 

What's hot (20)

Intro to Axure 7 - User Vision Breakfast Briefing
Intro to Axure 7 - User Vision Breakfast BriefingIntro to Axure 7 - User Vision Breakfast Briefing
Intro to Axure 7 - User Vision Breakfast Briefing
 
Managing Visual Design in Axure
Managing Visual Design in AxureManaging Visual Design in Axure
Managing Visual Design in Axure
 
How to Extend Axure's Animation Capability
How to Extend Axure's Animation CapabilityHow to Extend Axure's Animation Capability
How to Extend Axure's Animation Capability
 
Adobe XD
Adobe XD Adobe XD
Adobe XD
 
Storyboarding and Wireframe Tools Review
Storyboarding and Wireframe Tools ReviewStoryboarding and Wireframe Tools Review
Storyboarding and Wireframe Tools Review
 
Get started with Sketch: a fast (and awesome) communication and design tool
Get started with Sketch: a fast (and awesome) communication and design toolGet started with Sketch: a fast (and awesome) communication and design tool
Get started with Sketch: a fast (and awesome) communication and design tool
 
Mockup, wireframe e visual: una breve introduzione
Mockup, wireframe e visual: una breve introduzioneMockup, wireframe e visual: una breve introduzione
Mockup, wireframe e visual: una breve introduzione
 
Workshop Mock-Ups
Workshop Mock-UpsWorkshop Mock-Ups
Workshop Mock-Ups
 
Wireframing /Prototyping with HTML
Wireframing /Prototyping with HTMLWireframing /Prototyping with HTML
Wireframing /Prototyping with HTML
 
Future of UX
Future of UXFuture of UX
Future of UX
 
Game Design 2: 2011 - Introduction to Game Interface Design
Game Design 2: 2011 - Introduction to Game Interface DesignGame Design 2: 2011 - Introduction to Game Interface Design
Game Design 2: 2011 - Introduction to Game Interface Design
 
Mirror - Android UI on steroids: Droidcon Cracow 2014
Mirror - Android UI on steroids: Droidcon Cracow 2014Mirror - Android UI on steroids: Droidcon Cracow 2014
Mirror - Android UI on steroids: Droidcon Cracow 2014
 
Prototyping in Figma
Prototyping in FigmaPrototyping in Figma
Prototyping in Figma
 
Rapid Prototyping With jQuery
Rapid Prototyping With jQueryRapid Prototyping With jQuery
Rapid Prototyping With jQuery
 
Conditional Logic, Variables, & Raised Events in Axure
Conditional Logic, Variables, & Raised Events in AxureConditional Logic, Variables, & Raised Events in Axure
Conditional Logic, Variables, & Raised Events in Axure
 
Designing with Sketch App
Designing with Sketch AppDesigning with Sketch App
Designing with Sketch App
 
Adobe xd- The Empire strikes back
Adobe xd- The Empire strikes backAdobe xd- The Empire strikes back
Adobe xd- The Empire strikes back
 
chisnell wireframing workshop
chisnell wireframing workshopchisnell wireframing workshop
chisnell wireframing workshop
 
Introduction to Figma
Introduction to FigmaIntroduction to Figma
Introduction to Figma
 
Using Sketch in Your Workflow – From Idea to Finished Product
Using Sketch in Your Workflow – From Idea to Finished ProductUsing Sketch in Your Workflow – From Idea to Finished Product
Using Sketch in Your Workflow – From Idea to Finished Product
 

Viewers also liked

Zen Axure
Zen AxureZen Axure
Zen AxureUXandRP
 
DUXDay Presentation – Prototyping In Axure
DUXDay Presentation – Prototyping In AxureDUXDay Presentation – Prototyping In Axure
DUXDay Presentation – Prototyping In AxureNik Williamson
 
Prototyping with Axure for the web and beyond
Prototyping with Axure for the web and beyondPrototyping with Axure for the web and beyond
Prototyping with Axure for the web and beyondLuke Perman
 
Chap 4 prototype
Chap 4   prototypeChap 4   prototype
Chap 4 prototypearoka55
 
Introduction to an UX tool _ Axure_Liz Xu
Introduction to an UX tool _ Axure_Liz XuIntroduction to an UX tool _ Axure_Liz Xu
Introduction to an UX tool _ Axure_Liz XuLiz Xu
 
Prototyping with Axure RP - A brief introduction to Axure
Prototyping with Axure RP - A brief introduction to AxurePrototyping with Axure RP - A brief introduction to Axure
Prototyping with Axure RP - A brief introduction to AxureNorthernUX
 
Rapid Prototyping with Axure RP Part 3 – Using Axure for Usability Testing
Rapid Prototyping  with Axure RP  Part 3 – Using Axure for Usability Testing Rapid Prototyping  with Axure RP  Part 3 – Using Axure for Usability Testing
Rapid Prototyping with Axure RP Part 3 – Using Axure for Usability Testing NorthernUX
 
Rapid Paper Prototyping Workshop — Campus Party GDL 2016
Rapid Paper Prototyping Workshop — Campus Party GDL 2016Rapid Paper Prototyping Workshop — Campus Party GDL 2016
Rapid Paper Prototyping Workshop — Campus Party GDL 2016Misael Leon
 
Prototyping - the what, why and how at the University of Edinburgh
Prototyping - the what, why and how at the University of EdinburghPrototyping - the what, why and how at the University of Edinburgh
Prototyping - the what, why and how at the University of EdinburghNeil Allison
 
Visualising the User Experience
Visualising the User ExperienceVisualising the User Experience
Visualising the User ExperienceGrant Robinson
 
Requirement Gathering & Rapid Prototyping
Requirement Gathering & Rapid PrototypingRequirement Gathering & Rapid Prototyping
Requirement Gathering & Rapid PrototypingAurobindo Nayak
 
Prototyping invision vs axure
Prototyping invision vs axurePrototyping invision vs axure
Prototyping invision vs axureAndrii Rusakov
 

Viewers also liked (13)

Zen Axure
Zen AxureZen Axure
Zen Axure
 
DUXDay Presentation – Prototyping In Axure
DUXDay Presentation – Prototyping In AxureDUXDay Presentation – Prototyping In Axure
DUXDay Presentation – Prototyping In Axure
 
Prototyping with Axure for the web and beyond
Prototyping with Axure for the web and beyondPrototyping with Axure for the web and beyond
Prototyping with Axure for the web and beyond
 
Chap 4 prototype
Chap 4   prototypeChap 4   prototype
Chap 4 prototype
 
Introduction to an UX tool _ Axure_Liz Xu
Introduction to an UX tool _ Axure_Liz XuIntroduction to an UX tool _ Axure_Liz Xu
Introduction to an UX tool _ Axure_Liz Xu
 
Virtual Prototyping & Rapid Prototyping
Virtual Prototyping & Rapid PrototypingVirtual Prototyping & Rapid Prototyping
Virtual Prototyping & Rapid Prototyping
 
Prototyping with Axure RP - A brief introduction to Axure
Prototyping with Axure RP - A brief introduction to AxurePrototyping with Axure RP - A brief introduction to Axure
Prototyping with Axure RP - A brief introduction to Axure
 
Rapid Prototyping with Axure RP Part 3 – Using Axure for Usability Testing
Rapid Prototyping  with Axure RP  Part 3 – Using Axure for Usability Testing Rapid Prototyping  with Axure RP  Part 3 – Using Axure for Usability Testing
Rapid Prototyping with Axure RP Part 3 – Using Axure for Usability Testing
 
Rapid Paper Prototyping Workshop — Campus Party GDL 2016
Rapid Paper Prototyping Workshop — Campus Party GDL 2016Rapid Paper Prototyping Workshop — Campus Party GDL 2016
Rapid Paper Prototyping Workshop — Campus Party GDL 2016
 
Prototyping - the what, why and how at the University of Edinburgh
Prototyping - the what, why and how at the University of EdinburghPrototyping - the what, why and how at the University of Edinburgh
Prototyping - the what, why and how at the University of Edinburgh
 
Visualising the User Experience
Visualising the User ExperienceVisualising the User Experience
Visualising the User Experience
 
Requirement Gathering & Rapid Prototyping
Requirement Gathering & Rapid PrototypingRequirement Gathering & Rapid Prototyping
Requirement Gathering & Rapid Prototyping
 
Prototyping invision vs axure
Prototyping invision vs axurePrototyping invision vs axure
Prototyping invision vs axure
 

Similar to Prototyping with Axure

Designing Powerful Web Applications Using AJAX and Other RIAs
Designing Powerful Web Applications Using AJAX and Other RIAsDesigning Powerful Web Applications Using AJAX and Other RIAs
Designing Powerful Web Applications Using AJAX and Other RIAsDave Malouf
 
Software Tools of Experience Design
Software Tools of Experience DesignSoftware Tools of Experience Design
Software Tools of Experience DesignDana Giuliana
 
Designing Powerful Web Applications - Monterey
Designing Powerful Web Applications - MontereyDesigning Powerful Web Applications - Monterey
Designing Powerful Web Applications - MontereyDave Malouf
 
Wireframes and UI-Prototypes
Wireframes and UI-PrototypesWireframes and UI-Prototypes
Wireframes and UI-Prototypestec
 
Accessibility patterns testable requirements during early design
Accessibility patterns testable requirements during early designAccessibility patterns testable requirements during early design
Accessibility patterns testable requirements during early designAidan Tierney
 
LvivCSS: Web Components as a foundation for Design System
LvivCSS: Web Components as a foundation for Design SystemLvivCSS: Web Components as a foundation for Design System
LvivCSS: Web Components as a foundation for Design SystemVlad Fedosov
 
Design systems - Razvan Rosu
Design systems - Razvan RosuDesign systems - Razvan Rosu
Design systems - Razvan RosuRazvan Rosu
 
Modern ux-workflow-presentation
Modern ux-workflow-presentationModern ux-workflow-presentation
Modern ux-workflow-presentationBrian Akpa
 
Usability Design: Because it's awesome
Usability Design: Because it's awesomeUsability Design: Because it's awesome
Usability Design: Because it's awesomeJen Yu
 
Unify Design & Deliverables
Unify Design & DeliverablesUnify Design & Deliverables
Unify Design & Deliverablesnathanacurtis
 
Prototyping for responsive web design
Prototyping for responsive web design Prototyping for responsive web design
Prototyping for responsive web design mrscammels
 
Developing For The Web
Developing For The WebDeveloping For The Web
Developing For The Webaleemb
 
User Experience Design + Agile: The Good, The Bad, and the Ugly
User Experience Design + Agile: The Good, The Bad, and the UglyUser Experience Design + Agile: The Good, The Bad, and the Ugly
User Experience Design + Agile: The Good, The Bad, and the UglyJoshua Randall
 
Importance of User eXperience
Importance of User eXperienceImportance of User eXperience
Importance of User eXperienceguest1bcbc9
 
How to Use Engineers in a UX Department
How to Use Engineers in a UX DepartmentHow to Use Engineers in a UX Department
How to Use Engineers in a UX DepartmentStephen James
 
Web User Experience (BGSU ARTD 302)
Web User Experience (BGSU ARTD 302)Web User Experience (BGSU ARTD 302)
Web User Experience (BGSU ARTD 302)Keith Instone
 
Design Systems: Enterprise UX Evolution
Design Systems: Enterprise UX EvolutionDesign Systems: Enterprise UX Evolution
Design Systems: Enterprise UX EvolutionAnne Grundhoefer
 
From Website To Webapp Shane Morris
From Website To Webapp   Shane MorrisFrom Website To Webapp   Shane Morris
From Website To Webapp Shane MorrisShane Morris
 

Similar to Prototyping with Axure (20)

Designing Powerful Web Applications Using AJAX and Other RIAs
Designing Powerful Web Applications Using AJAX and Other RIAsDesigning Powerful Web Applications Using AJAX and Other RIAs
Designing Powerful Web Applications Using AJAX and Other RIAs
 
Software Tools of Experience Design
Software Tools of Experience DesignSoftware Tools of Experience Design
Software Tools of Experience Design
 
Tools of the Trade
Tools of the TradeTools of the Trade
Tools of the Trade
 
Designing Powerful Web Applications - Monterey
Designing Powerful Web Applications - MontereyDesigning Powerful Web Applications - Monterey
Designing Powerful Web Applications - Monterey
 
Wireframes and UI-Prototypes
Wireframes and UI-PrototypesWireframes and UI-Prototypes
Wireframes and UI-Prototypes
 
Business Analyst
Business AnalystBusiness Analyst
Business Analyst
 
Accessibility patterns testable requirements during early design
Accessibility patterns testable requirements during early designAccessibility patterns testable requirements during early design
Accessibility patterns testable requirements during early design
 
LvivCSS: Web Components as a foundation for Design System
LvivCSS: Web Components as a foundation for Design SystemLvivCSS: Web Components as a foundation for Design System
LvivCSS: Web Components as a foundation for Design System
 
Design systems - Razvan Rosu
Design systems - Razvan RosuDesign systems - Razvan Rosu
Design systems - Razvan Rosu
 
Modern ux-workflow-presentation
Modern ux-workflow-presentationModern ux-workflow-presentation
Modern ux-workflow-presentation
 
Usability Design: Because it's awesome
Usability Design: Because it's awesomeUsability Design: Because it's awesome
Usability Design: Because it's awesome
 
Unify Design & Deliverables
Unify Design & DeliverablesUnify Design & Deliverables
Unify Design & Deliverables
 
Prototyping for responsive web design
Prototyping for responsive web design Prototyping for responsive web design
Prototyping for responsive web design
 
Developing For The Web
Developing For The WebDeveloping For The Web
Developing For The Web
 
User Experience Design + Agile: The Good, The Bad, and the Ugly
User Experience Design + Agile: The Good, The Bad, and the UglyUser Experience Design + Agile: The Good, The Bad, and the Ugly
User Experience Design + Agile: The Good, The Bad, and the Ugly
 
Importance of User eXperience
Importance of User eXperienceImportance of User eXperience
Importance of User eXperience
 
How to Use Engineers in a UX Department
How to Use Engineers in a UX DepartmentHow to Use Engineers in a UX Department
How to Use Engineers in a UX Department
 
Web User Experience (BGSU ARTD 302)
Web User Experience (BGSU ARTD 302)Web User Experience (BGSU ARTD 302)
Web User Experience (BGSU ARTD 302)
 
Design Systems: Enterprise UX Evolution
Design Systems: Enterprise UX EvolutionDesign Systems: Enterprise UX Evolution
Design Systems: Enterprise UX Evolution
 
From Website To Webapp Shane Morris
From Website To Webapp   Shane MorrisFrom Website To Webapp   Shane Morris
From Website To Webapp Shane Morris
 

More from STC Atlanta Chapter

More from STC Atlanta Chapter (7)

Got Conflict?
Got Conflict?Got Conflict?
Got Conflict?
 
So, You Want to Be a Technical Writer?
So, You Want to Be a Technical Writer?So, You Want to Be a Technical Writer?
So, You Want to Be a Technical Writer?
 
Fwdcurrentspresentations
FwdcurrentspresentationsFwdcurrentspresentations
Fwdcurrentspresentations
 
Fwdfwcurrentspresentations
FwdfwcurrentspresentationsFwdfwcurrentspresentations
Fwdfwcurrentspresentations
 
Implementing ISO 26514 in Your Workplace
Implementing ISO 26514 in Your WorkplaceImplementing ISO 26514 in Your Workplace
Implementing ISO 26514 in Your Workplace
 
What's New in Flare 6?
What's New in Flare 6?What's New in Flare 6?
What's New in Flare 6?
 
Stc presentation 8-24-1
Stc presentation 8-24-1Stc presentation 8-24-1
Stc presentation 8-24-1
 

Prototyping with Axure

  • 1. Prototyping (Using Axure) Krista Kostuch, CUA Usability Analyst, Sr. Synovus Financial Corporation
  • 2. Me
  • 3.
  • 4. You
  • 5. Today’s Topics  Prototyping in General  Types  Tools  Process  Axure  Basic Features  Example Projects  Questions/Discussion
  • 7.
  • 8. Types of Prototypes
  • 9. Low Fidelity sketchy and incomplete—has some characteristics of the target product but is otherwise simple, usually in order to quickly produce the prototype and test broad concepts.  what you need to start with  “quick and dirty” and “cheap”  can help focus on the interaction, and not the visual
  • 10. Low Fidelity “tools”  Pencil and paper  Whiteboard  Visio  PowerPoint  Balsamiq
  • 11.
  • 12. High Fidelity  Close to the final product  Realistic interaction and visual design  Prevents waterfall of designing after the requirements  Keeps focus on user experience  Lets you very quickly and easily create a realistic user experience.
  • 13. Tools
  • 15. Whatever way, it must be done early and often – iteratively.
  • 16. from Boxes and Arrows
  • 17. Axure  What is it?  “Axure RP is a wireframing, prototyping and specification tool used by user experience designers, information architects, business analysts and product managers to design applications and websites.” axure.com
  • 18. Axure  Pros  Cons  Allows to make quickly  Generated HTML is not wireframe: drag and drop reusable (made up of text boxes, form images, and absolutely components… positioned divs)  Numerous interactions  Price (about 589 USD) (tabs; conditional events;  Tables integration weak hidable panels…) easy to (can put only text in it, no create form elements, no  Reusable components buttons…)  Easy to add comments visible in the output  Export HTML  Export specs in doc
  • 19. I do not work for Axure. I just use it everyday.
  • 21. Basic Axure Features  Annotated Wireframes  Basic Interactions  Dynamic Panels  Masters  Flow Diagrams  Interactive Prototypes  Functional Specification
  • 22. You can download a free trial at Axure.com Again…I do not work for Axure.
  • 23. A few Best Practices/Tips  Data gathering first and foremost  Iterative process – low to high fidelity  Structure, Presentation, then Behavior  Design to the/a grid  Usability testing is a must at all stages of the process
  • 24.