10 Must-Have Tools for App Designers

Design Tools

Although a design process may vary by the type of project, personal preferences, team size, and other similar variables, as designers we find we keep coming back to a handful of tools. These tools provide us a solid foundation for planning and brainstorming, help us communicate our ideas clearly, overcome technical hurdles to create stunning animations, and even simplify our interactions with developers. From powerful new design software meant specifically for apps to the ever-useful pen and paper, these are the tools the Savvy Apps design team wouldn't want to work without.

Starting a project off right is key. We've organized the tools chronologically, beginning with what we use to form the foundation of an app all the way through the much later interaction design phases.

OmniGraffle for App Flowcharts

OmniGraffle is a diagram design tool that provides the features and freedom to prototype screen flows, wireframes, strategy maps, and a variety of diagrams.

Why use OmniGraffle?

We use OmniGraffle to quickly and easily visualize the flow of an app. The tool's pre-defined symbols and libraries, as well as its familiar interactions and concepts like layers and pages make sure there are few roadblocks to positioning our ideas. OmniGraffle provides an infinite canvas so there are no constraints. It's also easy to re-arrange diagram components later on in the strategy and planning process by setting your arrows to follow each other. We use OmniGraffle during the planning and strategy phase to create flowcharts and system diagrams for our apps.

www.omnigroup.com/omnigraffle

MindNode for Relationship Mapping

MindNode is a mind mapping tool used to visually represent a central idea and all its corresponding pieces, as well as how each item interacts with the other.

Why use MindNode?

MindNode's single purpose is to help organize thoughts. This narrow functionality makes it easier to do just that, as there aren't a lot of features to distract you. It's flexible, making it easy to reorganize your thoughts as they expand, gain new relationships and priorities. MindNode also offers a free flowing nature that doesn't slow you down, a cornerstone of effective mind mapping. We use MindNode to organize ideas and feature requests from customers.

mindnode.com

UI Stencil Kits for Early App Sketches

The stainless steel stencil kits by UI Stencils are made specifically for mobile and web designers. These high quality stencils come with a little carrying case and sketch pads specifically sized for different devices (Android phones, iPhones, tablets, etc.). They offer commonly used icons and conventions like nav and tab bars to help designers draw user interface, user experience, and other mockups.

Why use UI Stencils?

We use UI Stencils to quickly sketch out ideas during the ideation and brainstorming phase. They help us keep things a little neater than just scribbling. The sketch pads have a sticky top on the back (like Post-Its) so we can throw them up on the wall or whiteboard when collaborating with others. We like to break out the stencils after completing very rough sketches on a whiteboard, and before we start doing wireframes in Sketch.

www.uistencils.com

Sketch for User Experience Mockups

Sketch is a interface design tool encroaching on Adobe's dominance in design software. It's a mix of Adobe Illustrator, Photoshop and Fireworks built specifically for UI and UX designers.

Why use Sketch?

We prefer using Sketch because of its ease of use, and the ability to create symbols of common components (buttons, headers, tabs, etc). It speeds up the process of wireframing, but also allows for an easy hand-off to the visual designers. Because we’re using the same tool in the visual design phase, we can easily update wireframes into high-fidelity visuals.

www.sketchapp.com

Marvel for App Prototyping

Marvel is a tool for crafting interactive prototypes. It allows designers to import from Sketch, create prototypes of app interactions, animations, and transitions, and share these prototypes with stakeholders and developers. It’s an easy way to share an entire flow to the customer as well, without the need for static user flows.

Why use Marvel?

Designers no longer need to know advanced programs like Framer and After Effects to incorporate animations, transitions, and other delightful touches into their app designs. Marvel allows any designer to quickly create transition-based animations across a large number of app screens. We use Marvel to prototype an entire app, particularly an app with a large number of screens that has basic transitions.

www.marvelapp.com

Sketch for Powerful App Interface Design

Sketch isn't just our favorite tool for user experience mockups. We prefer to use Sketch for interface design and about 90 percent of our app design work.

Why use Sketch?

We've seen some significant improvements to the way we design apps thanks to Sketch's vectorized model and features like multi-resolution exporting, Shared Styles, and Symbols. You can read why we prefer Sketch over Photoshop. For those of you already designing for mobile with Sketch, try out our iOS app icon template that we made specifically for Sketch.

www.sketchapp.com

Iconjar for Storing and Organizing Icons

Iconjar allows us to upload and organize all of our icons into a single hub from which we can search for specific icons and browse our icon collection in full. The tools also allow us to drag our icons into Sketch, Photoshop, and Illustrator. Only certain file types are supported (.svg and .png are among them, .ai and .sketch are not).

Why use Iconjar?

It's a time saver. We work with over 20 different sets of icons and potentially thousands of individual icons. Iconjar allows us to organize all of our icons in one place so we don't have to go searching for them. It also helps us locate existing icons for icon design ideas. Not all icon styles fit in an app, so when we're searching for something like “filter” the search process itself sometimes sparks an idea for a certain kind of filter icon we can tweak to use or design ourselves.

geticonjar.com

Photoshop for Bitmap Manipulation

We learned the tricks of the design trade on the king of design software, Photoshop. While Photoshop was first created to cover all aspects of photo manipulation, it later extended into other realms of art and design, including mobile and web. In doing so, it spread its functionality and focus too thin. We now prefer Sketch's specific mobile and web focus to Photoshop's all-in-one approach.

Why use Photoshop?

Even though we've moved most of our app design work into Sketch, Photoshop is still our go-to program for advanced photo and/or bitmap manipulation. We still use Photoshop for certain effects like advanced blending, layering, blurring, texture, or lighting.

www.photoshop.com/products/photoshop

Zeplin for Fast and Accurate App Speccing

Zeplin is a plugin and web app that works solely with Sketch. It compiles all aspects of the selected elements into an interactive specifications sheet that simplifies the handoff between our design and developer teams. It allows us to create living, breathing, interactive specification sheets.

Why use Zeplin?

We no longer have to wait until the very end of the design process to give specs to our developers. Instead we can bring in developers earlier in the process and iterate as much as we want. We've also written about how Zeplin has drastically cut our speccing time and improved our overall app speccing process.

zeplin.io

Principle for Complex App Animations and Interactions

Principle is useful for presenting advanced interactive prototypes. It relies more heavily on timeline control, allowing for more complex animations and transitions.

Why use Principle?

Principle is another detour from the specialization required to create animations, transitions, and interactions in older, advanced programs like Framer and After Effects. The depth of control Principle gives us makes it more suited for creating, testing, and more importantly, presenting more complex animations that focus on functionality, like navigation. We use Principle to present a couple of screens with a specific, intense animation to other team members and customers. Some examples where it might shine include animating based on user input (i.e. dragging of an option causes it to modify and morph) or creating exciting onboarding screens. You can also read our review and comparison of Principle versus Flinto.

principleformac.com

Bonus: Pencil and Paper for Getting Perspective

We use pencil and paper, or pen and a notebook, throughout the design process to list, sketch, and map out thoughts. The simplest of any tool, there's no real learning curve to jotting down thoughts on paper.

Why use pencil and paper?

Stepping out of the digital space is something that is too often overlooked. It helps to remove yourself from distractions and sit with the project you're working on. It's also the fastest way to generate ideas and, more importantly, get ideas out. We rely on pencil and paper for a no excuses, no obstacles approach to ideating.

Concluding Note

Each of these tools eliminates a hurdle in the design process, giving us extra time to think up inspired ideas or the ability to add more delightful interactive touches to our designs. We're excited about discovering even more mobile-focused design tools that may prove to be just as integral to our day to day work as the ones listed above. If you have a tool you'd like to recommend, hit us up on Twitter @savvyapps.

Whitney Rhodes is the lead editor for the Savvy Apps blog. She helps share Savvy Apps' extensive knowledge with all who seek to build better apps.

You made it this far so...