A Peek Inside the UX + UI Designer's Toolbox


Published on

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.

  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

A Peek Inside the UX + UI Designer's Toolbox

  1. 1. A PEEK INSIDE THEUX + UI DESIGNER’STOOLBOX Erin Daniels, CXO Apollo Matrix, Inc. @erinartworks @apollomatrix
  2. 2. Some of the brands I have helped…
  3. 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 workDESIGNTOOLS Designing Create pixel-perfect visual comps setting the stage for the emotional response of the user
  4. 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. 5. Wireframing tools we’ve used forever Adobe Illustrator Visio Adobe InDesign
  6. 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. 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. 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. 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. 10. iPad Sketching & WireframingTools 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. 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. 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. 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. 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. 15. Cloud-based Prototyping Tools  InVision – invisionapp.com  FieldTest – fieldtestapp.com  ClickDummy – clickdummy.comReview on Smashing Magazine: http://uxdesign.smashingmagazine.com/2012/05/10/interaction-design-in-the-cloud/
  16. 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. 17. Photoshop – adobe.com/products/photoshopfamily  Industry standard for creating images and manipulating photos  Pricing: included with Creative Cloud subscription $49/month
  18. 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. 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. 20. How do you decidewhich 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. 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. 22. Tweet your favorite UX/UI Design tool @erinartworks @apollomatrix #modeveast Erin Daniels, CXO Apollo Matrix, Inc. @erinartworks @apollomatrixThank you!