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 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 tools 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 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.

2) UXPin–https://www.uxpin.com/

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.

3) Sketch–http://www.bohemiancoding.com/sketch/

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.

6) PlaceIt–https://placeit.net/

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

http://www.adobe.com/products/illustrator.html

http://www.photoshop.com/

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

http://www.ideatoappbook.com/sketch-paper/

http://androiduiux.com/2013/01/06/printable-a4-screen-flow-sketch-template-free-

download/

A lot of our designers love and swear by physically sketching wireframes and mockups

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 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.

14) Proto.io–https://proto.io/

Proto.io is a mobile prototyping platform that 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 and view it as a fairly functional

mobile app and you 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.