As a lead user experience designer, I spend a good portion of my time researching new tools, techniques and processes. For the last three years, I’ve worked exclusively in the realm of mobile app design, so most of my research focus has centered around the mobile space. Throughout these three years of mobile-focused work, I’ve had the intense pleasure of helping to build Coach’s Eye, TechSmith’s ground breaking sports video analysis app. This has given me plenty of opportunities to discover and experiment with a number of different mobile oriented techniques, tools and resources. In this blog post, I’d like to share a handful of my all time favorites.
To help structure what could be a massive, rambling post, I’ve broken things down into 5 categories: Inspiration, Ideation, Creation, Iterations and Validation. These might not be the best categories, but they will do for now. But first, before I dive into the details, I’d like to share a small disclaimer:
This is a representation of my own process and it’s certainly not perfect. I may leave out some of your favorite tools or techniques. If so, please sound off in the comments below!
So, without further delay…
Inspiration
Inspiration is critical for any designer. We need to look at the work of others, in order to spark our own creativity. Creativity is often the synthesis of multiple different ideas into something new. So here are some of my favorite places to find such inspiration.
Mobile-patterns.com
iPhone and Android design patterns archive
Mobile Patterns is a simple site, which hosts screenshots of many apps in order to categorize the screenshots into different design patterns. It’s one of the few sites that hosts both Android and iOS design patterns. It’s frequently updated with noteworthy apps and very easy to navigate. However, it’s fairly plain to look at, if you care about that sort of thing.
Lovely UI
iPhone design pattern archive
While it only has iPhone design patterns, I particularly enjoy visiting Lovely UI because of how many unique, quirky designs show up within their pattern archive. There are a ton of non-standard, interesting, beautiful designs which can help inspire new ideas for your own app projects.
Dribbble
Design project sharing community, great for finding inspiration.
I know, I know… This one goes without saying. It’s an excellent resource for all manner of visual inspiration. If you’re experiencing a creative block, a quick search on Dribbble can often yield fascinating results that may just break your block apart. While often criticized for superficiality, Dribbble is unmatched when it comes to high quality visual design content.
pttrns
iPhone and iPad design patterns archive
This is my absolute favorite design pattern website. It contains both iPhone and iPad designs, which is quite rare and exceptionally useful for seeing how other designers have bridged the gap between form factors. The website is constantly updating, full of excellent content and is quite pleasant to look at. I use this site so frequently, I donated some money to help them keep operating. If you find it as useful as I have, you should do the same!
Ideation
A critical part of any design process is generating as many good ideas as you can. On the Coach’s Eye team, we like to explore every idea that we come up with. We very rarely create only one single design. To facilitate the rapid generation of these designs, we use a variety of tools.
Pencil & Paper
This one is the undisputed king of creativity. There are no limits. Ultimately flexibility and incomparable simplicity. If you’re looking for great, easy to carry around notebooks, I highly recommend Field Notes!
OmniGraffle
Charts and Wireframes Powerhouse
I don’t always use mapping software, but when I do, I use the big guns. Omnigraffle has no equal. The power and flexibility is off the charts. Which also makes it overkill for so many simple tasks. And while it’s exceedingly powerful for wireframing, it is not quite functional enough to create true mockups. Still, it’s a good tool to have in the toolbox!
Teehan+Lax Templates
iOS UI templates
If you use Photoshop to create mobile mockups, then the Teehan+Lax templates are likely something you’ve already heard of. They are exceptionally thorough, containing nearly all possible standard iOS controls, going back to iOS 6 stylings and including both iPhone and iPad. Using these templates as a starting point to build off of will save you a ton of time and are even quite useful for generating wireframes. For the last few years, Teehan+Lax has been exceptionally good at keeping these templates up to date, as well.
Sketch 3
Wireframing, mockups and asset creation for designers.
As time goes on, Sketch is becoming more and more of a thoroughbred design application. In many ways, it is replacing my usage of Photoshop. While it still has some bugs and funky quirks, it has a large amount of functionality that is designed specifically for user experience/UI designers.
For starters, it has built in templates for iPad and iPhone. It also has a mirroring app so that you can immediately see your wireframes/mockups on your device. The app is fast enough for rapid wireframing, but full featured enough to graduate to pixel perfect mockups. And when the time comes for saving out assets, it has slicing and exporting functionality built right in. The learning curve is somewhat small, as well, which makes it rather pleasant to play with as a new user. If you’re looking to dive in, I highly recommend checking out Design+Code and reading through their tutorials.
Creation
So you’ve come up with ideas, you’ve floated them around, maybe done some quick user testing on your wireframes or prototypes and now it’s time to actually create your final UI assets. Here are some of my favorite tools to help streamline this process.
Sketch 3
Wireframing, mockups and asset creation for designers.
Yep, this guy is getting called out twice. Sketch 3 is so functionally useful, it deserves a double mention. Pixel perfect asset creation and exporting makes this app a powerhouse of design functionality.
Skala Preview
Device mirroring for designers
So, you’re not quite ready to leave Photoshop behind? Don’t worry, neither am I. I still use it quite a lot. And since I do, I also use Skala Preview. Skala is one of the simplest mirroring apps out there, allowing you to immediately display what you are building in Photoshop right on your iPhone or Android device. On top of that, it also has controls for brightness and simulating color blindness!
One thing that is true about designing for mobile: what looks good on your Macbook Pro doesn’t necessarily look good on the iPhone. It’s critical that you always look at your designs on the intended device. Skala will help make this critical phase and integral part of your entire creation process.
Slicy
Asset slicing and saving
Yes, Photoshop has asset exporting built in now. However, it’s a bloated implementation full of more configuration and functionality than I want. Instead, I prefer to use Slicy. Slicy is every bit as powerful as what Photoshop has built in (for all intents and purposes) but far simpler.
All you have to do is name your folders with AssetName@2x.png and when you open your PSD in Slicy, it will automatically pull out your images. You can also set clipping masks to define the size of the assets manually, of course.
I remember the days before I had Slicy. It was a darker, sadder time, with hours and hours of time wasted on slicing up and saving out graphics. No more! We now live in a golden age!
For a more thorough tutorial on how to improve your workflow with Slicy, check out my previous blog post, Mobile Design: Painless Pixel Perfection.
Teehan+Lax Pixel Density Converter
Easily determine the dimensions of your art assets, across multiple platforms.
I don’t know about you, but reading through the explanation of DPI/sizing on Google’s design documentation gave me a headache. It made sense, but was far more information than I needed.
Teehan+Lax makes things far easier with this simple calculator. All you have to do is enter the dimensions for one of your platforms and it will pop out the dimensions for other densities and platforms, in an instant! This little guy will save you a ton of time if you’re building graphics that span across platforms.
App Icon Template
Fastest and easiest way to create app icons at all the necessary sizes.
Pixel Resort (Michael Flarup) did us all a solid by putting together these icon templates. The basic premise – design an icon at 1024×1024 and then, with a single Photoshop Action, export all necessary sizes for your icon across the board. This will save you absolutely enormous amounts of time. You may want to tweak the smaller sizes in order to maximize quality, but at the very least, the icon template is a fast way to see how your icon will work at multiple sizes.
This is such a time saver, I highly recommend sending some money his way either by purchasing one of his prints or by ordering one of his awesome t-shirts. I did!
Ikonica
Ikonica – Crazy easy app icon previewing
If you’re designing icons, another killer app is Ikonica. Previewing icons on your actual device is a mission critical stage of the design process. Ikonica makes this step as easy as pie. Just connect your phone to your desktop through the use of a PIN in the respective apps and you can quickly drag icons to the Ikonica app on your desktop and immediately see that icon on your phone or iPad. You can even save it to your home screen to see what it will look like alongside the icons already on your phone.
Guide Guide
Get your layouts right, yo.
Want an easy to use grid? Get Guide Guide. Quickly throw together grid layouts for your Photoshop mockups to make sure you’re being accurate in your design work. Absolutely indispensable.
Adobe Edge Animate
Fast, simple HTML 5 animation software.
Saving out static assets is great, but sometimes you need to demonstrate how your UI is going to move. Animation is an absolutely vital part of communicating interactions and giving users clear feedback. So being able to rapidly prototype and share your animations with your development team is enormously important as well.
Adobe Edge Animate is extremely powerful for creating HTML 5 animations. However, it’s also one of the fastest, simplest animation platforms I’ve used recently. You can use it to create interactive prototypes, or just use it to rapidly generate animations you can share with your team. While it’s not as powerful as After Effects, it’s generally enough for 90% of your animation needs and far, far faster.
Dropbox
Save ALL THE FILES. Easily view them on your devices. Share them with your team.
Another one that goes without saying. Let’s say you want to compare a bunch of mockups on your device, or easily shop around mockups to you teammates. Dropbox, as a general tool, is hard to beat. I also use Dropbox to save and share final art assets with my team.
Iteration
Let’s face it, you’re gonna be wrong a whole lot. The first version is rarely the right one. Prototypes are prototypes for a reason. You gotta miss a whole lot before you start hitting consistently. So, you have to keep adjusting things until you get it right! Here’s some tools that will help you figure out what you’ve done wrong, in order to find what’s right.
POP – Prototyping on Paper
Super fast, super simple iOS app prototyping.
One of the simplest interactive prototype apps around. Just take photos of your paper prototypes, or import mockups from your camera roll, then throw interactive hot spots on those shots. You can rapidly create a faked out prototype for navigating throughout your apps. This is excellent for both low fidelity user testing and also for just creating something “a little more real” if you’re trying to get a feel for how something would actually work.
Marvel App
Powerful online prototyping
A new contender in the prototyping arena, Marvel App beats the crap out of POP when it comes to powerful prototyping functionality. Amazingly, however, it doesn’t become much more complicated in the process. The learning curve is a bit higher than POP, but not too bad, and the flexibility is through the roof. It allows you to create interactive prototypes that you can even save to your home screen! While it is a tiny bit heavier than POP, the extra functionality is totally worth it. Marvel App has almost replaced POP for my prototyping uses, but I still use POP when I just need a really quick, simple prototype.
Just Get Your Devs to Make the Thing
The world of mobile development moves stupid fast. iOS and Android both can create high fidelity, functional apps in a fraction of the time it took to do the same on desktops. There have been many times I have shared an idea with the Coach’s Eye devs and less than an hour later they were like “Is this what you mean?”
It’s generally a good idea to bounce all your ideas off your team. Sometimes they can make something faster than you could even prototype it. And in the case of Coach’s Eye, some things can’t be prototyped easily (the flywheel, drawing tools, etc…). Whenever possible, leverage the talent and speed of your development team. Real code beats faked prototypes EVERY time.
Validation
So, you’ve iterated the heck out of the design. You think you’ve nailed it. It’s time to put it out in the wild! But the truth is, the real game is just beginning. User testing is great and will help flush out problems, but the real test is how your product does in the real world. Here’s some tools that will help you determine whether or not your designs are living up to your expectations.
Cohdoo Highlight
Super simple interview recording and highlight marking.
Interviewing customers who are using your app (or potential customers who aren’t) is something every designer should frequently do. It’s dangerous to lock yourself away in your ivory tower, away from feedback from and interaction with actual users.
Cohdoo is an fantastic, dead simple app for recording these interviews. It allows you mark highlight points so you can jump to them later, which is a wonderful time saver for you and your team.flurry
Flurry
Mobile app usage analytics.
One of the most user friendly, flexible and powerful usage analytics services out there. Flurry is insanely powerful and will change your life as a designer. You can easily tell whether or not your designs have affected user behavior in the way you intended, or if you need to adjust your designs further. One drawback, however, is occasional data lag for the Android platform. This means it can take a while for events to actually register. So if you’re using it on Android, wait about 3-4 days before trusting the data that’s rolling in.
Google Analytics
Not very user friendly and, frankly, ugly as all get out. It’s complicated, huge and heavy. But, it’s undisputably powerful and flexible. One of the major strengths is that the data is almost real time on Android and doesn’t suffer from the data lag present in Flurry. As the industry powerhouse, it’s hard to ignore.
App Annie
Mobile App Store analytics
Usage analytics are great, but market analytics are just as important. App Annie will help you map out the impact of your sales, updates and other events. It will also help you figure out your historical overall placement in the store, as well as the performance of other apps in the store.
Well, that’s all for now! If you know of a tool, resource, or technique that should be on this list, please share! I’m always trying to find new things to experiment with. One of the best aspects of working in this industry is how it’s constantly evolving. With all these new things to play with, it never gets boring! Please share some of your favorite things in the comments and we’ll give them a shot!
The post Design Corner: A Few of My Favorite Things: 21 Must-Have Tools for the Mobile Designer appeared first on TechSmith Blogs.