15 tools that every mobile designer needs to have.
Over the last few years at YML, we’ve been working tirelessly at perfecting our respective mobile app designing toolkits. We’ve been experimenting with various extensions, plug-ins, tools and online resources, many of which have become integral in our user centric 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, using our own UX design process as the example.
Here are 15 incredibly useful mobile app designing 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 mobile designing tool helps a UX design agency like ours better sell to potential and existing clients, allowing them to navigate through the user centric designs and experience it first-hand.
Invision has enabled us to test initial mobile app wireframe flows and visuals more tangibly throughout our UX design process. It lets designs come to life without any code required, allowing our mobile designers 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 for an optimized UX design process. With drag and drop integration with Photoshop and Sketch, UXPin also simplifies the workflow for mobile designers while preserving all the layers of your design. To support design decisions, usability testing is also built-in to the mobile app designing tool so that you can create tasks, record users and their clicks, and present results to your team. UXPin helps to speed your user centric design, testing, and rollout cycles.
Though most of our mobile 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 a UI/UX design process. Sketch produces very professional results that are ideal for a UX design agency, and has a wide range of mobile app designing 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 mobile 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 throughout the UX design process.
4) Slicy– http://macrabbit.com/slicy/
It goes without saying, that any mobile app designing 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 mobile 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 to the UX design process, is how it allows mobile 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 user centric 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 mobile 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 user centric 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 your UX design process 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 mobile designers like myself cultivate a sense of inspiration during the UX design process 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. This mobile app designing tool really is pure magic!
9) Illustrator & Photoshop
Not surprisingly, Adobe Illustrator and Photoshop CC are the most commonly seen programs used by our mobile designers here at YML. Although Photoshop gained its popularity from photo editing, it has increasingly been adopted by UI and UX design agencies 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 team of mobile designers.
11) iOS/Android Sketch Paper
A lot of our mobile designers love and swear by physically sketching wireframes and mobile app prototypes as part of their UX design process 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 user centric design 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 UX design process. Omnigraffle has consistently reduced our production time in half, subsequently giving our mobile designers 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 mobile designers seamlessly share app and website mockups with clients. Mockups are elegantly encased inside of a realistic device shell and are a great mobile app designing 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 mobile designers integrating the the platform into their UX design process for other emerging Internet-connected devices, such as smart TVs, gaming devices, refrigerators, alarm clocks and cars, and Google Android Wear.
Mobile 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 the user centric design 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 with this mobile app designing tool.