Useful Tools for Mobile App Designers

by Grant Gipe

Here are 14 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) 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.

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

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

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

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

Useful Free Apps from 2015

by Grant Gipe

1. Pushbullet 
If I asked you to send a photo from your phone to your computer, how would you do it? With Pushbullet, sharing photos, text, links, and more between devices is as easy as sending a text to yourself. Simply download the mobile app and chrome extension, copy/paste your content, hit send and voila! Now all of your devices can be connected making them feel like one.

2. WordPress's New Desktop App 
You probably already use WordPress to power your business. What you may not have realized is that last month they released a FREE desktop app to make running your website easier than ever. See your stats, publish a new blog post, even push updates all from your dashboard.

3. OneNote 
OneNote is as if WorkFlowy, Scrivener, and Evernote had a weird hybrid baby. This amazing free app is my favorite way to quickly write, record, and store text notes (Evernote is still king for web clippings).

The coolest feature is for students though. You can record audio from class and your notes will sync via timeline. So you can quickly jump to what your professor was saying when you wrote down "Chlorophyll? More like Bore-aphyll."

4. Atom.io 
Talking text editors with developers is more dangerous than talking Religion. But Atom.io is one editor you should consider putting into your line up. Why?

  • It's made by the folks at Github
  • It's open source
  • But the best feature are the packages!

Packages are like plugins for your editor. Quickly add Javascript snippets, autocomplete functionality, and macros into your editor with the click of a button. Writing code has never been easier.

5. Slack 
Slack is the AOL Chat Room for entrepreneurs. With thousands of online communities discussing startups, marketing, design, development, and more, you can quickly get plugged into some of the brightest minds around the world. Oh, and you can also use it to chat with and manage your remote team of employees.

6. Flux 
You've tried Amish hour and keeping your laptop out of the bedroom. The love was too strong. Well at least help your brain out by installing Flux. Flux automatically adjusts the brightness and blue saturation of your screen as you get closer to bed time making it easier for you to fall asleep. Think of it as a digital sunset slowly lulling you away from the computer. Your eyes will thank you.

7. Spectacle 
If you work on a laptop, screen space is a hot commodity. Quickly go dual-screen using spectacle. With a simple keyboard shortcut, you can snap your chrome window to the left, text editor to the right so you can get more done with less alt-tabbing. Invaluable for all high-productivity mobile workers.

8. Calibre 
Got a ton of unread ebooks sitting in your dropbox folder? Quickly manage and export them to your kindle using this cool free app. Calibre helps you manage all of your free ebooks, books that you've torrented, and other docs so you can stay on top of your growing library.

9. Authy 
Quickly add two-factor authentication to Google, FaceBook, and more using Authy. Signing in from a strange place or new device? Authy will send you a text message with a custom code that you must enter to login. Perfect for keeping your websites secure.

10. Waze 
Google Maps may have a cleaner interface, but for finding the fastest route in traffic? Waze is hands down the winner. Waze crowdsources information from other drivers so it can quickly alert you to accidents, traffic jams, and reroute you on the fly. Now that Google owns Waze, it's starting to implement some of those features, but until there is feature parity, we're sticking with Waze.

11. Fluid 
Use a couple web tools that don't have desktop apps yet? (Looking at you WorkFlowy and BrainFM). With Fluid, you can instantly turn any website into a desktop app (using the website's Favicon as the desktop icon). So now with one click, you can launch your favorite website on a separate desktop keeping your chrome tabs clean. Slick!

12. Jing 
Made by friends at TechSmith, Jing is the quickest way to quickly share a screenshot or screen recording (with audio). Teaching a new employee? Record the steps on your screen so they can reference it later. Need some changes made on a website? Quickly screen grab what you're talking about. Once complete, Jing immediately gives you a link where the content is hosted so you can quickly share it.