- Published on
Best UX Tools for Sketching and Prototyping
Catalina Naranjo-Bock (User experience researcher at Google)
There are many UX tools I use a user researcher. The first set of tools pertain to the research methods to be used during the different stages of the design process. Generally, when you are starting a product design or re-design process you use foundational research methods. Methods in this stage include interviews, participatory design, field visits, contextual inquiry, etc. As you progress on the design process, you start using more tactical research methods, such as usability testing, concept evaluations, A/B testing, etc.
As a researcher, I also use my design skills. Both when I work hand in hand with designers to implement user insights on design iterations, as well as when creating deliverables of research findings such as graphic reports, data visualizations, posters, etc.
Catalina Naranjo-Bock interview
Dan Saffer (Designer and writer @ San Francisco)
We use pretty much everything in our daily work, from old standbys like Illustrator and Photoshop, to newer tools like Sketch to home-grown tools for putting animations on the robot. In my own work, I do a lot of “design” work in non-design tools like Excel. I know: I’m just as surprised as you are. I’m also blessed with having two whiteboards in my office and those are easily the tools I use the most, aside from email and Slack. We also keep an internal Wiki to keep track of the design decisions that get made, so we can always reference them and engineers can always look them up independently.
Andrew Smyk (Educator and mobile UX designer)
Paper and pencil are still the best design tools available. I tend to doodle and work from rough sketches. I am a big fan of Mike Rohdes’ “Sketchbook Handbook.” For mobile UX concept sketching, I made myself a phone UI stamp based a post on the blog The Russian Used a Pencil. It’s sized nicely for Field Notes or for stamping into a sketch book. My favorite sketching tools are the Rotring 600 -.7mm drafting pencil, a set of HiTec C colored pens and the Uni Ball Vision Elite pen.
My prototyping time is split between a 27-inch iMac and a Dell XPS workstation with a similar sized monitor. I use (Adobe) Illustrator for my user flows and interface work (because it’s cross-platform). Axure is another great tool for user flows and interface work and I use it when requested by clients. When I build UX prototypes with HTML, CSS, and JavaScript, I will often use Notepad (I taught myself HTML 20 years ago in Notepad and still like the simplicity of it today) or Sublime. Sublime is great for productivity and writing clean markup.
Artiom Dashinsky (Designer and entrepreneur)
I’m using MacBook Pro (Retina) with iPad Air as a second display using Duet, StandStand for standing work, Baron Fig notebook and MUJI pens for my sketches, Beats Pill XL speaker for music.
Usually my projects start as a Pages document where I define the idea, the purpose and the vision of it. After that I do sketches on paper and jump to Sketch/Photoshop. I’m using Slack, CloudApp, InVision, Quip and Appear.in for collaboration with my team, SourceTree for git and Sublime for a code.
James Stiff (UI/UX designer and copywriting from Manchester)
Quite often I’ll alternate between analogue and digital tools throughout the design process. I’ve been using Photoshop and Illustrator for around 20 years but nothing beats the freedom of pencil and paper when getting ideas down.
Recently, I’ve been trying to design more in the browser and I’ve been experimenting with frameworks such as Bootstrap and Foundation.
Joe Leech (UX Director from UK)
For design Sketch app. For web design there really is nothing that can beat it. I typically produce lo-fi wireframes and and pass on to a designer who uses Sketch to extend the wireframes. Makes working together much easier.
We use InVision to discuss designs and gather feedback. We're also beginning to use it to UX prototype interactions and use in research.
I use ComicLife to advocate design. Creating comic books really helps explain the thinking behind a design. It shows user context and importantly gives a feel for how the design will be used.
Michael Angeles (UX designer at Balsamiq)
I use Balsamiq to wireframe (obviously). I use Sketch app (by Bohemian Coding - WSP) for visual design and illustration. For sketching I use a Pilot HiTec C and make my own sketchbooks. Atom is my code editor. Evernote keeps all my ideas and my swap folder.
Ross Popoff-Walker (Digital product designer)
I’m aways much more interested in “process” rather than tools. I think there’s a huge misconception that design is just about what happens in Adobe software or Sketch, or on Dribbble. If you’re thinking that way, you really couldn’t be far enough from what UX design is. Design is about a thoughtful, structured process that uncover human behavior, customer pain-points, business needs, consumer trends, and synthesizes all that into a clear design challenge and solutions for that challenge. To me, UX tools just help you move through that process, and the best work happens amongst teams that create processes and an environment focused around sharing, learning, and experimenting.
Eric Karjaluoto (Designer at smashLAB)
On the design end, I still use Photoshop, Illustrator, and InDesign, but I find myself doing so less. Sketch is imperfect, but a good tool for UX design. VSCO is a nice way to reproduce certain film effects. Similarly, a whole new suite of light, affordable tools (e.g. the Affinity products) look good.
Jan Jursa (Author of ebook "UX Storytellers")
The usual UX tools. Everything from Adobe and Microsoft. I have created wireframes with Axure, OmniGraffle, PowerPoint, Pidoco, Balsamiq, Flui UI, Cacoon and many of more.
Nick Disabato (Designer from Chicago)
Interfaces are usually made in OmniGraffle, although I also use Coda to write HTML, CSS, and JavaScript when I create UX prototypes. User flows and site maps happen in OmniOutliner first, and then I make the final thing in OmniGraffle when I want it to look nice.
I have a white board in my office, and sketch a great deal as well. Pen and paper goes a long way in my design practice.
Laura Klein (Author of UX for Lean Startups)
It depends on what I'm doing. I tend to build prototypes in HTML, CSS, and Javascript, which doesn't require any special software - just an IDE. I use Balsamiq for quick sketching. I use GoToMeeting or join.me for remote moderated user research. I sometimes use UserTesting.com for unmoderated tests and FiveSecondTest to test landing page messaging. I use Omnigraffle for creating user flows and Photoshop only when I've completely run out of options. At the moment, I do a lot of workshops and talks, so I find myself making a lot of decks in Keynote, but I'm not happy about that.
Eva-Lotta Lamm (Interaction designer for Google)
Like most designers, I use Adobe Creative Suite for most of the things I do. I use Illustrator for wireframing and icon design, InDesign to pull together documentation and Photoshop for visual design. I also sometimes use Flash or HTML/CSS/JS to build interactive UX prototypes and AfterEffects to visualise animations and transitions.
Christopher Noessel (Interaction designer, author, and speaker)
I’m a sucker for (and very long time user of) the whole Adobe Creative Suite: Photoshop for any image manipulation, After Effects and Photoshop to make animated gifs, Illustrator and Photoshop for most comps of new interfaces. Occasionally I'll build 3D stuff in Sketchup. Sci-fi University and the second screen videos are made with After Effects and the Adobe Creative Suite. Loosest sketches happen in GoodNotes. Tighter sketches happen in OneNote (though I still very much want to consult on rethinking that software for use as a design sketching tool).
Rachel Ilan (UX Designer on Google Chrome)
These days I use mainly Adobe Illustrator and After Effects to get the level of polish that I want to achieve, though I've also been getting into Sketch as well. I use a lot of other tools depending on the task - when building small websites I still work directly with html and css, and I'm currently really digging Sublime Text 2 for editing. I'm also a huge fan of Keynote and Keynotopia for UX prototyping in the context of Design Sprints.
Sometimes I find that nothing in the world matches the good old whiteboard and sticky note - I don't do a lot of detailed wireframing these days and instead jump straight from sketches to realistic mocks to iterate on.
Jesmond Allen (User Experience Director at CXPartners)
It’s my job to get the best out of my design teams, and that rarely means I’m heads-down wireframing any more. However, if I do wireframe (or otherwise create a diagram), Omnigraffle is my software of choice.
The tools I mainly use now are: Apple’s Mail app, Numbers for devising proposals, Keynote for presentations, Notational Velocity for note taking, and Basecamp for sharing and communicating with clients.
Mark Jenkins (Mobile UX and UI Designer from London)
I use the usual design tools from the Adobe suite for my on-screen work, alongside Sketch, Textwrangler and Twitter to keep up to date with the industry and the randoms I follow. Off screen, the usual pens and pencils and small mobile sized notebooks for rapid sketching of ideas – I find it easy to pen ideas down on paper and then put together flows from this, it’s always good to sense check an idea quickly.
Daniel Eden (San Francisco designer at Dropbox)
Most of my work happens in Sketch. I never thought I’d be doing so much work in a “design” tool—I’m really comfortable and used to working in code—but Sketch is fantastic for quickly jamming on ideas, iterating quickly, and producing great results. I still get about a 70/30 mix of design and code, doing a lot of prototyping in HTML and CSS, which mostly happens in CodePen. CodePen is great for throwing ideas around and sending code snippets to engineers. I find it way better than any other prototyping tool because often I can write production-ready code for animations—that’s something you tend not to get with typical UX prototyping tools.
Magdalena Georgieva (Product Manager at HubSpot)
When it comes to prototyping and user testing, I've been using Adobe Fireworks and InVision. I have a lot of Google Docs at all times and like to use them for drafting product announcements, taking notes from user testing, outlining action items, sharing soundbites with other teams, etc.