A Peek Inside the UX + UI Designer's Toolbox
22
A PEEK INSIDE THE UX + UI DESIGNER’S TOOLBOX Erin Daniels, CXO Apollo Matrix, Inc. @erinartworks @apollomatrix
-
Upload
erin-daniels -
Category
Documents
-
view
1.460 -
download
4
description
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.
Transcript of A Peek Inside the UX + UI Designer's Toolbox
A PEEK INSIDE THE UX + UI DESIGNER’S
TOOLBOXErin Daniels, CXOApollo Matrix, Inc.
@erinartworks@apollomatrix
Some of the brands I have helped…
Design wireframes or “mockups” to plan the structure and how the user will interact with the product
Wireframing
String your comps together& create hotspots to show how your product will work
Prototyping
Create pixel-perfect visual comps setting the stage for the emotional response of the user
Designing
DESIGNTOOLS
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
Wireframing tools we’ve used forever
Adobe Illustrator
Adobe InDesignVisio
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.99iPad: $49.99
Axure – axure.com
For PC & Mac
Been around for awhile
Users love it
Pricing: Standard $289 Pro $589Good students/classrooms can get it free
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
Cloud-based Wireframing Tools
MyBalsamiq – mybalsamiq.comMyBalsamiq 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/
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)
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
FlairBuilder – flairbuilder.com
For Windows & Mac
Prototyping and wireframing
Switch between low fidelity & high fidelity
Pricing: 1 user: $99 Volume pricing for multiple users
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)
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
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/
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
Photoshop – adobe.com/products/photoshopfamily
Industry standard for creating images and manipulating photos
Pricing: included with Creative Cloud subscription $49/month
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
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!
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…
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.
Thank you!
Erin Daniels, CXOApollo Matrix, Inc.@erinartworks@apollomatrix
Tweet your favorite UX/UI Design tool
@erinartworks @apollomatrix #modeveast
