Over the last few years at YML, we’ve been working tirelessly at perfecting our respective design toolkits. We’ve been experimenting with various extensions, plug-ins, tools and online resources, many of which have become integral in our design processes. To help you speed up your workflow and make the right design choices, I thought I’d share what we’ve learned over the years.
Here are 15 incredibly useful mobile app design tools that our mobile app designers use to make workflows, screens, and pitches more powerful and effective with each project.
1) Invision– http://www.invisionapp.com/
This prototyping, collaboration and workflow tool quickly transforms static designs into fully interactive prototypes.
Prototypes which are fully equipped with gestures, transitions and animations for responsive web, iOS and Android. Most importantly, this tool helps us better sell to potential and existing clients, allowing them to navigate through the designs and experience it first-hand.
Invision has enabled us to test initial mobile app wireframe flows and visuals more tangibly. It lets designs come to life without any code required, allowing us to better identify problems or UX concerns upfront, and enabling us to iterate more effectively.
UXPin is a comprehensive wireframing and prototyping web tool. With an easy-to-use interface and built in components, UXPin lets you design, collaborate on, and present fully-interactive wireframes and prototypes. With drag and drop integration with Photoshop and Sketch, UXPin also simplifies the workflow while preserving all the layers of your design. To support design decisions, usability testing is also built-in so that you can create tasks, record users and their clicks, and present results to your team. UXPin helps to speed your design, testing, and rollout cycles.
Though most of our designers here at YML are die-hard Photoshop users, a few have made the conversion over to Sketch. This powerful graphic design tool is similar to Photoshop, but more intended for UI/UX design. Sketch produces very professional results and has a wide range of tools. It also supports infinite zooming, 2x export and styled vector shapes which are perfect for multiple resolutions.
Sketch also comes with an “Export All” feature and since it’s vector-based, it can export in PDF, JPG and PNG (optionally in 2x). Many app designers use 3 separate tools for 3 different needs: Omnigraffle for wireframing, Photoshop for visual design, and Illustrator for vector logos. All those 3 tools are seamlessly integrated with Sketch, and using one app for all your needs means less back and forth and more overall productivity.
4) Slicy– http://macrabbit.com/slicy/
It goes without saying, that any tool that can expedite the slicing process is a resource worth looking into. Slicy is a Mac app that specializes in exporting assets (png, jpg etc) from a Photoshop PSD. This adds a huge benefit for designers in iOS workflow using Photoshop. With Slicy, exporting visual assets out of your PSDs becomes virtually painless– just drag & drop your Photoshop file on the Slicy window after you have launched the application, and your files are automatically exported. The only thing you need to do is tell Slicy which layers, or layer groups, you want to be exported.
5) Skala Preview–http://bjango.com/mac/skala/
Skala Preview displays size and colour accurate image previews on any iOS or Android device. What makes Skala Preview so incredibly useful, is how it allows designers to preview canvases as they edit (if they’re using Photoshop CS5, CS6 or CC). Just set up a remote connection and every single change you make to your design will update instantly.
Skala preview let’s you see lossless previews in real time; a bridge between working files and prototypes, with no saving or exporting required. Viewing your design with Skala Preview lets you better test colour, fonts, text sizes, contrast and ergonomics.
PlaceIt is a simple, drag-and-drop web tool which lets designers generate realistic product screenshots within seconds. If you want to reveal your latest app design to a client in an enticing and elegant way, PlaceIt is certainly worth a look. It also provides realistic environments to help your designs beautifully come to life. PlaceIt supports screenshots of iOS, Microsoft, and Android products.
7) Adobe Color–https://color.adobe.com/
Having trouble finding the perfect color scheme for your upcoming project? Adobe Color lets you create custom color schemes with an interactive color wheel and browse thousands of previously created color combinations from the Adobe Color community. This online tool also lets you easily edit color palettes and save them for future use in Adobe applications such as Photoshop and Illustrator. You can view the newest, the most popular, and the highest rated color schemes to specify your selections. A truly useful tool for visual design.
8) FontFace Ninja–http://fontface.ninja/
Font Face Ninja is a free plugin that lets you identify the font being used on any website. The extension is extremely simple to use and has consistently helped me cultivate a sense of inspiration for exploring new unearthed fonts. Font Face Ninja also hides all pictures and commercials so you can seamlessly enjoy fonts on a blank background. Once you’ve added the plugin to your browser, and have clicked the extension icon, simply drag your mouse over the font being used on any website, and a pop-up window containing the font name, point size, and line spacing will appear. Pure magic!
9) Illustrator & Photoshop
Not surprisingly, Adobe Illustrator and Photoshop CC are the most commonly seen programs used by our designers here at YML. Although Photoshop gained its popularity from photo editing, it has increasingly been adopted by UI and UX designers to create interface visuals.
Being that Photoshop is a pixel based bitmap, it tends to lend itself most appropriately to screen interface design. Contrastingly, Illustrator is a Vector graphic program and has the advantage of infinite element resizing without any loss of quality. It’s preferable to create logos and icons with unrestricted manipulation, making Illustrator a more viable option.
10) UnSplash– https://unsplash.com/
Unsplash releases 10 free high-resolution stock photos every 10 days. These photos are released under the creative commons public domain license, which means you can copy, modify, distribute and use these images for work and commercial purposes, all without asking for permission. This website has arguably become the best source for stock images for our design team.
11) iOS/Android Sketch Paper
A lot of our designers love and swear by physically sketching wireframes and mobile app prototypes before even touching a computer. These dotted wireframe sketch papers for iOS and Android have all of the UI Elements marked down the sides, as well as half, third, and fourth markers along the top to ensure composition accuracy. A lot of our best UX ideas were first drafted on iOS/Android sketch paper.
12) Omnigraffle– https://www.omnigroup.com/omnigraffle
Omnigraffle is known for being the top diagram and wireframing tool. The program helps expedite the process of creating multi page decks and extensive wireframes. It uses vector based graphics, easy to duplicate master pages, icon/element templates, and frictionless exporting options for a streamlined wireframing process. You also have the option of importing your own custom element libraries, allowing you to quickly re-use elements, and thus resulting in a more efficient creation process. Omnigraffle has consistently reduced our production time in half, subsequently giving our design team more time to solve complex UX problems.
13) CloudComp– http://cloudcmp.co/
CloudComp is a lightweight mobile prototype and mockup tool powered by Cloud App which lets designers seamlessly share app and website mockups with clients. Mockups are elegantly encased inside of a realistic device shell and a great tool to leverage when pitching or presenting to clients.
While there are many mobile app prototyping tools available to designers, one of our favorites is, Proto.io. The mobile prototyping platform lets you easily build and deploy fully interactive mobile app prototypes and simulations.
You can easily emulate screen transitions, orientation changes or touch gestures and test each prototype on any device iPhone, iPad or Android. Though designed primarily for use with mobile apps, Proto.io used by has found its designers using the platform for other emerging Internet-connected devices, such as smart TVs, gaming devices, refrigerators, alarm clocks and cars, and Google Android Wear.
Designers can quickly make changes to the prototype, view it as a fairly functional mobile app, and easily collaborate and share prototypes with others.
15) After Effects– http://www.adobe.com/products/aftereffects.html
Attempting to verbally explain transitions or subtle animation ideas between each screen of an app can be a daunting task. With After Effects, we are able to effectively demonstrate exactly what we envision to the client. This is our go-to tool for all animations and motion graphics. Adobe’s motion graphics product has been used to prototype animation for some time now, and once you get the hang of it, there are no limits to what can be done.