Upload
liz-xu
View
383
Download
2
Embed Size (px)
Citation preview
Prototyping with Axure
Liz Xu2014-12-04
A powerful UX design tool
Agenda
⁻ What is Axure
⁻ Basics of Axure RP
⁻ The Pros and Cons of Axure RP
⁻ Project Lifecycle with Axure
⁻ Other UX tools
What is Axure ?
Easy wireframing & advanced prototyping
- Fancy tricks, no programming -
Why Axure?
− Page based
− You can connect pages & use logic
− Adjust the level of fidelity
− Outputs .html
− Publish and Share
This is where the magic happens …
Level of Interactivity.- Screen-by-screen.
- You show where the user clicks.
- Power to the people.
- Let the user click through a use case.
- Limited set of options.
- The prototype looks complete but only certain use cases are done.
- Real experience
- !!!Never try to do this! Seriously!!!
Basics of Axure RP
Widgets
-Common
-Forms
-Menus and Tables
- More … (Icons, layouts, complete UI sets, etc. )
* Some free/pretty cheap
* You can create your own
Those tiny pieces that form your prototype
Masters
-Ideal for header, footer, logo, sidebar, menus …
-Can convert widgets to master
- masters inside masters
Create once, edit once, apply to all
Get your ideas developed as you imagined them
- Notes, Annotations, Specifications & Feedback -
Page NotesTo the client, stakeholders and devs
AnnotationsTo the client, stakeholders and devs
Interactions
-Events
-onClick, onMove, onShow…
-Actions/Methods
-Wait, Set, Move, Scroll, Show, Hide
- Conditions
-If, Else if, Else
Would be a super boring prototype without them
Adaptive Views
-Different elements between devices / browser sizes
-Custom breakpoints
-Fluid elements
Easy responsive wireframing
Export
-Sitemap
-Add custom logo
-Mobile Logo
-Fonts
-Notes
Image, HTML, Mobile
Share
-Please go to axshare.com to register an account
-Upload your .RP file to Axure
-Set up (or not) password
-Send the link to the people you want to share it with
weblink
Help & Resources
-Online Training http://www.axure.com/learn
-Axure Chinese Community http://www.axure.org/axure/
-Axure Forum http://www.axure.com/c/forum.php
Axure’s online resources and community
The Pros and Cons
Pros- Easy and quick designing
- Axure provides tons of online libraries
- Ability to include interactions
- All in one prototyping – Axure makes it possible to move progressively from placeholders to high fidelity prototypes in the same program.
- Text elements come standard with dummy text (“Lorem ipsum”) decreasing designing time and providing a real feel when composing placeholders.
- Axure allows you to post your prototype in a secure website so stakeholders can interact with it (provide users with link and optional password optional).
Cons
-The dynamic panels can be a pain to deal with
-Editing shapes and the shape of photos in Axure can be difficult, also often requiring other libraries of shapes or imported images.
-Axure does not have an extensive font selection.
-It would be beneficial for developers when coding a project if Axure included more CSS options that developers could inherit from.
Project Lifecycle with Axure
-Before project begin, concepts must be decided
-Axure allows quick concept design, show it to others, get feedbacks from the whole team and make change fast
-Axure assist in bridging the gap between designers and developers with interactions and specification document
-QA can use Axure’s outcome, prototype and specification document to create User cases
Other UX Tools
Balsamiq
Keynote / PowerPoint
OmniGraffle Pro
Thank You!
Feel free to ask, to share, to teach me