With so many tools available for designers, how do you know which ones to use? Photoshop? Illustrator? InDesign? Balsamiq? Axure? Which tools are for user experience mock-up design and which ones are for creating pixel-perfect visual designs? Do you need specific tools for different mobile platforms such as iPhone, Android or Windows? We will explore these tools and more, what they are used for and how to decide which tools are best for you and your organization for your mobile design needs. With the explosion of the mobile app industry, there are many new designers and organizations just getting started with mobile. There are a number of tools available and it may be difficult to decide which tools to invest in to accomplish the specific design needs of creating a mobile app or site.

1. A PEEK INSIDE THE
UX + UI DESIGNER’S
TOOLBOX Erin Daniels, CXO
Apollo Matrix, Inc.
@erinartworks
@apollomatrix

2. Some of the brands I have helped…

3. Wireframing
Design wireframes or “mockups” to
plan the structure and how the user
will interact with the product
Prototyping
String your comps together
& create hotspots to show how
your product will work
DESIGN
TOOLS
Designing
Create pixel-perfect visual comps
setting the stage for the emotional
response of the user

4. Wireframing
 UX Architect or UX Designer
 Black & white, low-fidelity mockups
 Similar to blueprints that an architect creates
when planning to build a home
 Annotations are notes or call-outs that give
stakeholders, designers and developers a
clear understanding of the desired
functionality

5. Wireframing tools we’ve used forever
Adobe Illustrator Visio
Adobe InDesign

6. OmniGraffle – omnigroup.com/products/omnigraffle/
 For Mac and iPad
 Been around for awhile
 Users love it
 Good for Mac shops
 Pricing for Mac:
Standard $99.99
Pro $199.99
iPad: $49.99

7. Axure – axure.com
 For PC & Mac
 Been around for awhile
 Users love it
 Pricing:
Standard $289
Pro $589
Good students/classrooms can
get it free

8. Balsamiq Mockups – Balsamiq.com
 For PC, Mac, Linux, Cross-platform
 Very easy to use
 Extensive mobile component library
 “Sketchy” look-and-feel
 Start ideation on iPad & export BMML
 Requires Flash. Until they release an iPad
version the workaround is to use iPad
sketching tool on iPad, then import to
Balsamiq for refining.
 Enhance w/ Plugin for Google Drive,
Atlassian Confluence or JIRA, Fogcreek
FogBugz, Xwiki
 Pricing Desktop: Single user $79
Volume packs available

9. Cloud-based
Wireframing Tools
 MyBalsamiq – mybalsamiq.com
MyBalsamiq Remote/Cloud subscription:
(5 plan levels from $12/month personal to $249/month enterprise)
 Mockingbird – gomockingbird.com
(Powered by Cappuccino: no Flash needed.)
 Mockup Builder – mockupbuilder.com
(only cloud-based solution with native Android controls)
Review on Smashing Magazine: http://uxdesign.smashingmagazine.com/2012/05/10/interaction-design-in-the-cloud/

10. iPad Sketching & Wireframing
Tools
 SketchBook Pro by Autodesk – sketchbook.com
(iPad, separate iPhone/iPod version)
 Bamboo Paper –
wacom.com/en/products/software/bamboo-paper
(iPad, Mac or PC)
 Paper by fiftythree – fiftythree.com/paper
(iPad)
 SketchyPad – sketchyapp.com
(iPad)
 iMockups – endloop.ca/imockups/
(iPad)

11. Prototyping
 UX Architect or UX Designer
 Hot spots are created to demonstrate certain
interactions and screen flow
 Great to use for usability testing before
spending time on visual design and
development

12. FlairBuilder – flairbuilder.com
 For Windows & Mac
 Prototyping and wireframing
 Switch between low fidelity &
high fidelity
 Pricing:
1 user: $99
Volume pricing for multiple users

13. Fluid – fluidui.com
 Browser-based (Mac, Windows,
and Linux)
 Made for Mobile: Extensive iOS,
Android, and Windows 8
wireframe UI libraries
 Web app built in HTML5
 Pricing: Subscriptions based on
number of projects from $29 to
$129 per month)

14. Proto – proto.io
 Web-based
 Made for Mobile and other
devices
 Very affordable
 Pricing: Subscriptions based on
number of projects from free to
$49 per month

15. Cloud-based
Prototyping Tools
 InVision – invisionapp.com
 FieldTest – fieldtestapp.com
 ClickDummy – clickdummy.com
Review on Smashing Magazine: http://uxdesign.smashingmagazine.com/2012/05/10/interaction-design-in-the-cloud/

16. Designing
 UI Designer
 Pixel-perfect design
 Visual treatment, color, use of lighting and
design techniques to influence emotional
response of the user
 Best when this is done after well-thought out
UX design has been tested and approved by
all stakeholders ensuring business and
technical needs are met

17. Photoshop – adobe.com/products/photoshopfamily
 Industry standard for creating
images and manipulating photos
 Pricing: included with Creative
Cloud subscription $49/month

18. Illustrator – adobe.com/products/illustrator
 Industry standard for creating
vector graphics
 Perfect for illustrations, custom
icons and logos
 Pricing: included with Creative
Cloud subscription $49/month

19. Teehan Lax iOS GUI– teehanlax.com/downloads/
 Comprehensive compilation of
pixel-perfect iOS GUI elements
 Also have iPad and Andriod GUI
available and Sketch Elements
 Free download to create comp
designs
 Love these guys!

20. How do you decide
which tools to use?
 Is there a tool currently in place? Is your
team happy with it? Why/why not?
 Collaboration on the design effort?
 Budget?
 How much work do you anticipate?
(some tools allow for a certain number of projects)
But, most importantly…

21. What are your designers comfortable with?
 It isn’t the tool that will ensure
great design, it is the talent +
skills of the DESIGNER that
will determine the success of the
design.

22. Tweet your favorite
UX/UI Design tool
@erinartworks
@apollomatrix
#modeveast
Erin Daniels, CXO
Apollo Matrix, Inc.
@erinartworks
@apollomatrix
Thank you!