SlideShare ist ein Scribd-Unternehmen logo
1 von 27
Prototyping with Axure   (or: How to kick ass and
                          have fun at the same time)
for the web and beyond
Agenda

• Introductions (5 mins)

• What is Axure? (10 mins)                            • Quick tour of features (10 mins)

• Why and when to use Axure (20 mins)                 • Your first prototype (40 mins)

• Axure examples (10 mins)                            • Next steps (5 mins)

Break (10 mins)                                       • Questions (10 mins)



Required materials:

Pen, paper, laptop (Mac or PC) with installation of
trial version of Axure RP 5.6
License key extension
(valid until 25/11/2010)


Licensee: extend

Key: QhrKN/+cPYgZQqxVQ4Jfobj4yCs4iaz8UIknCKeLQKsITvyguyncEp0rmvuJMVRl
Who am I?
• Luke Perman, Experience Architect and Interaction Designer

• 14 years of web and application design

• Using Axure in my process for over 4 years

• Major browser and desktop applications for Singapore Airlines, Travelodge,
  Royal Navy and currently working within investment banks in the city

• Curator of Axure pattern library, AXLIB.uxtechniques.com
What is Axure?

• Axure RP Pro is a wireframing, rapid prototyping, and specification
  software tool aimed at web and desktop applications.

                                                         (via Wikipedia)
What is Axure?

• Axure RP Pro is a wireframing, rapid prototyping, and specification
  software tool aimed at web and desktop applications.

                                                         (via Wikipedia)




      One of many prototyping solutions.
We love it.                           We don't.




Axure users seem to fall into two distinct categories...
We love it.                           We don't.




Axure users seem to fall into two distinct categories...
What is Axure?

A tool we can use for:

• Planning

• Wireframing

• Prototyping

• Documentation
What is Axure?

A tool we can use for:

• Planning

• Wireframing

• Prototyping

• Documentation



                  "Functional design"
What Axure is not

• Visual (or graphic) design software

• A drawing program

• A development environment
What can Axure be used for?

Functional design for:

• Desktop applications

• Browser based application and websites

• Mobile applications
Why do I love it?




Helps me to explain ideas
Helps me to think and visualise
I can if see something works...
Or if it doesn't.
100




 75




 50




 25




  0
 Beginner              Expert



Steep learning curve
Some things are   Some things are
straightforward   not so clear

• Wireframe       • Some interactions

• Prototype       • Specification output

• Annotation      • Custom shapes

• Collaboration   • Import / export
Some things are              Some things are
straightforward              not so clear

• Wireframe                  • Some interactions

• Prototype                  • Specification output

• Annotation                 • Custom shapes

• Collaboration              • Import / export




              But all things are possible.
Know where Axure fits in the process

                             Wi
                   h           re
                 tc              f
             e




                                 ra
           Sk




                                   me
             op




                                    Des
           el




                   v          ign
                 De
Axure examples
Break (10 mins)
Main differences between Mac and PC version
• Window / Menu layouts, Case Editor...




• Bugs :)
Your first prototype

Form with inline validation:

• Widgets

• Dynamic panels

• Masters

• Generate prototype
Next steps

Some Axure resources...

• Axure Forum
 http://axure.com/CS/forums/4/ShowForum.aspx


• Axure Tutorials
 http://www.axure.com/online-training.aspx


• A Clean Design
 http://www.acleandesign.com/


• AXLIB
 http://axlib.uxtechniques.com/


• Join the conversation: #Axure
Questions?
Thank you!
luke@uxtechniques.com   axlib.uxtechniques.com   @axlib

Weitere ähnliche Inhalte

Was ist angesagt?

Modern UX, UI, and front-end tools
Modern UX, UI, and front-end toolsModern UX, UI, and front-end tools
Modern UX, UI, and front-end tools
Alan Roy
 
Importance of Wireframes in Web Design
Importance of Wireframes in Web DesignImportance of Wireframes in Web Design
Importance of Wireframes in Web Design
Hitesh Mehta
 

Was ist angesagt? (20)

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
 
Wireframing /Prototyping with HTML
Wireframing /Prototyping with HTMLWireframing /Prototyping with HTML
Wireframing /Prototyping with HTML
 
Modern UX, UI, and front-end tools
Modern UX, UI, and front-end toolsModern UX, UI, and front-end tools
Modern UX, UI, and front-end tools
 
Importance of Wireframes in Web Design
Importance of Wireframes in Web DesignImportance of Wireframes in Web Design
Importance of Wireframes in Web Design
 
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
 
Workshop Mock-Ups
Workshop Mock-UpsWorkshop Mock-Ups
Workshop Mock-Ups
 
High Fidelity Prototyping
High Fidelity PrototypingHigh Fidelity Prototyping
High Fidelity Prototyping
 
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
 
Designing with Sketch App
Designing with Sketch AppDesigning with Sketch App
Designing with Sketch App
 
Game Design 2: Lecture 5 - Game UI Wireframes and Paper Prototypes
Game Design 2: Lecture 5 - Game UI Wireframes and Paper PrototypesGame Design 2: Lecture 5 - Game UI Wireframes and Paper Prototypes
Game Design 2: Lecture 5 - Game UI Wireframes and Paper Prototypes
 
Wine and Wireframes
Wine and WireframesWine and Wireframes
Wine and Wireframes
 
Wireframes - a brief overview
Wireframes - a brief overviewWireframes - a brief overview
Wireframes - a brief overview
 
Design and Development Techniques for Accessibility: WordCamp Tampa 2015
Design and Development Techniques for Accessibility: WordCamp Tampa 2015Design and Development Techniques for Accessibility: WordCamp Tampa 2015
Design and Development Techniques for Accessibility: WordCamp Tampa 2015
 
Game Design 2 (2013): Lecture 5 - Game UI Prototyping
Game Design 2 (2013): Lecture 5 - Game UI PrototypingGame Design 2 (2013): Lecture 5 - Game UI Prototyping
Game Design 2 (2013): Lecture 5 - Game UI Prototyping
 
Wireframe and Mockup Templates by Creately
Wireframe and Mockup Templates by CreatelyWireframe and Mockup Templates by Creately
Wireframe and Mockup Templates by Creately
 
Wireframing Basics - UX and the Design Process by Amber Vasquez
Wireframing Basics - UX and the Design Process by Amber VasquezWireframing Basics - UX and the Design Process by Amber Vasquez
Wireframing Basics - UX and the Design Process by Amber Vasquez
 
Wireframes for the Wicked
Wireframes for the WickedWireframes for the Wicked
Wireframes for the Wicked
 
Layout and Wireframing
Layout and WireframingLayout and Wireframing
Layout and Wireframing
 
UX Edmonton - Pattern Libraries
UX Edmonton - Pattern LibrariesUX Edmonton - Pattern Libraries
UX Edmonton - Pattern Libraries
 
GCU Game Design 2 (2013): Lecture 2 - Menu Flow
GCU Game Design 2 (2013): Lecture 2 - Menu FlowGCU Game Design 2 (2013): Lecture 2 - Menu Flow
GCU Game Design 2 (2013): Lecture 2 - Menu Flow
 

Andere mochten auch

Andere mochten auch (8)

Zen Axure
Zen AxureZen Axure
Zen Axure
 
Prototyping with Axure
Prototyping with AxurePrototyping with Axure
Prototyping with Axure
 
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
 
Mathsproject quadrilaterals
Mathsproject quadrilateralsMathsproject quadrilaterals
Mathsproject quadrilaterals
 
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
 
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
 
Creating a Website Sitemap
Creating a Website SitemapCreating a Website Sitemap
Creating a Website Sitemap
 

Ähnlich wie Prototyping with Axure for the web and beyond

The front end toolkit
The front end toolkitThe front end toolkit
The front end toolkit
samuel-holt
 
Mobile prototyping kaziak - Codemotion Rome 2015
Mobile prototyping kaziak - Codemotion Rome 2015Mobile prototyping kaziak - Codemotion Rome 2015
Mobile prototyping kaziak - Codemotion Rome 2015
Codemotion
 
SharePoint Saturday Twin Cities - SharePoint Framework, Angular & Azure Funct...
SharePoint Saturday Twin Cities - SharePoint Framework, Angular & Azure Funct...SharePoint Saturday Twin Cities - SharePoint Framework, Angular & Azure Funct...
SharePoint Saturday Twin Cities - SharePoint Framework, Angular & Azure Funct...
Sébastien Levert
 

Ähnlich wie Prototyping with Axure for the web and beyond (20)

PLAT-20 Building Alfresco Prototypes in a Few Hours
PLAT-20 Building Alfresco Prototypes in a Few HoursPLAT-20 Building Alfresco Prototypes in a Few Hours
PLAT-20 Building Alfresco Prototypes in a Few Hours
 
How to write a web framework
How to write a web frameworkHow to write a web framework
How to write a web framework
 
Requirement designer
Requirement designerRequirement designer
Requirement designer
 
2022 COMP4010 Lecture 6: Designing AR Systems
2022 COMP4010 Lecture 6: Designing AR Systems2022 COMP4010 Lecture 6: Designing AR Systems
2022 COMP4010 Lecture 6: Designing AR Systems
 
A guide to hiring a great developer to build your first app (redacted version)
A guide to hiring a great developer to build your first app (redacted version)A guide to hiring a great developer to build your first app (redacted version)
A guide to hiring a great developer to build your first app (redacted version)
 
Prototyping for responsive web design
Prototyping for responsive web design Prototyping for responsive web design
Prototyping for responsive web design
 
APIs distribuidos con alta escalabilidad
APIs distribuidos con alta escalabilidadAPIs distribuidos con alta escalabilidad
APIs distribuidos con alta escalabilidad
 
SGCE 2015 REST APIs
SGCE 2015 REST APIsSGCE 2015 REST APIs
SGCE 2015 REST APIs
 
Wireframes, prototypes and mockups - comparison of tools.
Wireframes, prototypes and mockups - comparison of tools.Wireframes, prototypes and mockups - comparison of tools.
Wireframes, prototypes and mockups - comparison of tools.
 
Wireframes
WireframesWireframes
Wireframes
 
The front end toolkit
The front end toolkitThe front end toolkit
The front end toolkit
 
Zero to Sixty with Oracle ApEx
Zero to Sixty with Oracle ApExZero to Sixty with Oracle ApEx
Zero to Sixty with Oracle ApEx
 
COMP 4026 Lecture3 Prototyping and Evaluation
COMP 4026 Lecture3 Prototyping and EvaluationCOMP 4026 Lecture3 Prototyping and Evaluation
COMP 4026 Lecture3 Prototyping and Evaluation
 
Prototyping like it is 2022
Prototyping like it is 2022 Prototyping like it is 2022
Prototyping like it is 2022
 
Rapid Prototyping With jQuery
Rapid Prototyping With jQueryRapid Prototyping With jQuery
Rapid Prototyping With jQuery
 
McrFRED talk 25/09/2014
McrFRED talk 25/09/2014McrFRED talk 25/09/2014
McrFRED talk 25/09/2014
 
Comp4010 Lecture7 Designing AR Systems
Comp4010 Lecture7 Designing AR SystemsComp4010 Lecture7 Designing AR Systems
Comp4010 Lecture7 Designing AR Systems
 
Mobile prototyping kaziak - Codemotion Rome 2015
Mobile prototyping kaziak - Codemotion Rome 2015Mobile prototyping kaziak - Codemotion Rome 2015
Mobile prototyping kaziak - Codemotion Rome 2015
 
SharePoint Saturday Twin Cities - SharePoint Framework, Angular & Azure Funct...
SharePoint Saturday Twin Cities - SharePoint Framework, Angular & Azure Funct...SharePoint Saturday Twin Cities - SharePoint Framework, Angular & Azure Funct...
SharePoint Saturday Twin Cities - SharePoint Framework, Angular & Azure Funct...
 
COMP 4026 Lecture4: Processing and Advanced Interface Technology
COMP 4026 Lecture4: Processing and Advanced Interface TechnologyCOMP 4026 Lecture4: Processing and Advanced Interface Technology
COMP 4026 Lecture4: Processing and Advanced Interface Technology
 

Kürzlich hochgeladen

Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
ciinovamais
 
Seal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptxSeal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptx
negromaestrong
 
The basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxThe basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptx
heathfieldcps1
 

Kürzlich hochgeladen (20)

Web & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdfWeb & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdf
 
Micro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdfMicro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdf
 
Python Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docxPython Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docx
 
This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
 
Food Chain and Food Web (Ecosystem) EVS, B. Pharmacy 1st Year, Sem-II
Food Chain and Food Web (Ecosystem) EVS, B. Pharmacy 1st Year, Sem-IIFood Chain and Food Web (Ecosystem) EVS, B. Pharmacy 1st Year, Sem-II
Food Chain and Food Web (Ecosystem) EVS, B. Pharmacy 1st Year, Sem-II
 
ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.
 
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptxBasic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
 
Seal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptxSeal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptx
 
ICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptxICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptx
 
On National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan FellowsOn National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan Fellows
 
Sociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning ExhibitSociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning Exhibit
 
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
 
Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104
 
Unit-V; Pricing (Pharma Marketing Management).pptx
Unit-V; Pricing (Pharma Marketing Management).pptxUnit-V; Pricing (Pharma Marketing Management).pptx
Unit-V; Pricing (Pharma Marketing Management).pptx
 
Mixin Classes in Odoo 17 How to Extend Models Using Mixin Classes
Mixin Classes in Odoo 17  How to Extend Models Using Mixin ClassesMixin Classes in Odoo 17  How to Extend Models Using Mixin Classes
Mixin Classes in Odoo 17 How to Extend Models Using Mixin Classes
 
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
 
General Principles of Intellectual Property: Concepts of Intellectual Proper...
General Principles of Intellectual Property: Concepts of Intellectual  Proper...General Principles of Intellectual Property: Concepts of Intellectual  Proper...
General Principles of Intellectual Property: Concepts of Intellectual Proper...
 
The basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxThe basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptx
 
Unit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxUnit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptx
 

Prototyping with Axure for the web and beyond

  • 1. Prototyping with Axure (or: How to kick ass and have fun at the same time) for the web and beyond
  • 2. Agenda • Introductions (5 mins) • What is Axure? (10 mins) • Quick tour of features (10 mins) • Why and when to use Axure (20 mins) • Your first prototype (40 mins) • Axure examples (10 mins) • Next steps (5 mins) Break (10 mins) • Questions (10 mins) Required materials: Pen, paper, laptop (Mac or PC) with installation of trial version of Axure RP 5.6
  • 3. License key extension (valid until 25/11/2010) Licensee: extend Key: QhrKN/+cPYgZQqxVQ4Jfobj4yCs4iaz8UIknCKeLQKsITvyguyncEp0rmvuJMVRl
  • 4. Who am I? • Luke Perman, Experience Architect and Interaction Designer • 14 years of web and application design • Using Axure in my process for over 4 years • Major browser and desktop applications for Singapore Airlines, Travelodge, Royal Navy and currently working within investment banks in the city • Curator of Axure pattern library, AXLIB.uxtechniques.com
  • 5. What is Axure? • Axure RP Pro is a wireframing, rapid prototyping, and specification software tool aimed at web and desktop applications. (via Wikipedia)
  • 6. What is Axure? • Axure RP Pro is a wireframing, rapid prototyping, and specification software tool aimed at web and desktop applications. (via Wikipedia) One of many prototyping solutions.
  • 7. We love it. We don't. Axure users seem to fall into two distinct categories...
  • 8. We love it. We don't. Axure users seem to fall into two distinct categories...
  • 9. What is Axure? A tool we can use for: • Planning • Wireframing • Prototyping • Documentation
  • 10. What is Axure? A tool we can use for: • Planning • Wireframing • Prototyping • Documentation "Functional design"
  • 11. What Axure is not • Visual (or graphic) design software • A drawing program • A development environment
  • 12. What can Axure be used for? Functional design for: • Desktop applications • Browser based application and websites • Mobile applications
  • 13. Why do I love it? Helps me to explain ideas
  • 14. Helps me to think and visualise
  • 15. I can if see something works...
  • 16. Or if it doesn't.
  • 17. 100 75 50 25 0 Beginner Expert Steep learning curve
  • 18. Some things are Some things are straightforward not so clear • Wireframe • Some interactions • Prototype • Specification output • Annotation • Custom shapes • Collaboration • Import / export
  • 19. Some things are Some things are straightforward not so clear • Wireframe • Some interactions • Prototype • Specification output • Annotation • Custom shapes • Collaboration • Import / export But all things are possible.
  • 20. Know where Axure fits in the process Wi h re tc f e ra Sk me op Des el v ign De
  • 23. Main differences between Mac and PC version • Window / Menu layouts, Case Editor... • Bugs :)
  • 24. Your first prototype Form with inline validation: • Widgets • Dynamic panels • Masters • Generate prototype
  • 25. Next steps Some Axure resources... • Axure Forum http://axure.com/CS/forums/4/ShowForum.aspx • Axure Tutorials http://www.axure.com/online-training.aspx • A Clean Design http://www.acleandesign.com/ • AXLIB http://axlib.uxtechniques.com/ • Join the conversation: #Axure
  • 27. Thank you! luke@uxtechniques.com axlib.uxtechniques.com @axlib

Hinweis der Redaktion

  1. \n
  2. \n
  3. \n
  4. Currently working for Lab49\n
  5. How many in the room have prototyping experience?\n
  6. \n
  7. Ask audience prototyping experience\n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. Highlight importance of sketching\n
  19. \n
  20. \n
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n