Three years I wrote an article on what I thought were the best mobile design tool and I still get asked that question a lot so I thought it was time to update the list. I wrote the original article because as soon as you start designing mobile web sites or mobile apps you see that the current set of design tools just aren’t built for the challenge. The problem is that you need to see and interact with your designs on a mobile device to really know if it going to work the way you wanted and if it will meet the users context. So after a lot of research and trying out a lot of different tools here are some of the best ones I’ve found so far.
Best New Design Tool
Sketch – Free trail / $99
The biggest change in my digital design workflow in the past three years has been the introduction of Sketch from Bohemian Coding. This hasn’t been a small change for me because I have used Adobe Photoshop literally from the beginning and version 1.0 but Sketch does an amazing job of solving a lot of my design workflow problems and is a much more modern and lightweight app. I was aware of the app for a long time but it took the prompting of some friends at Apple to get me to take it more serious and I am so glad that I did.
If you have ever used Photoshop you will be able to easily learn Sketch in under an hour and I did it with these free YouTube tutorials from LevelUpTuts. I love Sketch for a lot of reasons including the fact that everything is done in vectors which keeps the files small and fast, that you can keep an entire project in one file by using multiple pages and artboards, that you can easily create styles for every part of your design which makes changes super easy and that it has very robust image export functionality. But at the same time I won’t be uninstalling Photoshop any time as Sketch is not able to handle image manipulation at all and I still do all that type of work in Photoshop and then bring it into Sketch to do my UI and UX work. You can try it out for free for 7 days to see if you like and it is just $99 for a full license.
Best Mobile Design Photoshop Plug-In
GuideGuide – Free / Donations accepted
The last time I did this review GuideGuide my was my favorite Photoshop plug-in for mobile and even all digital design projects and that still remains true today. As digital designer you that you live and die by the grids you create. The problem for me has always been that getting those grids set-up quick and accurately in of Photoshop can be a real pain. GuideGuide is a Photoshop panel extension that creates pixel accurate columns, rows, midpoints, and baselines created for your document or a marquee selection. I also love the fact that frequently used guide sets can be saved for later use and best of all you get all of this for free.
Best iOS Design Plug-In for Adobe Photoshop
DevRocket – $19 personal / $99 team (10)
DevRocket is a Photoshop panel extension that provides additional Apple iOS specific tools and functionalities to help in key areas of exporting assets for iPhone and iPad. It has a lot of functionality that comes in really handy starting with the ability to generate portrait, landscape and splash display canvases for both iPhone and iPad with one click of a button. You can then design for standard and Retina display resolutions using only one Photoshop document which is a huge help over having to keep two different Photoshop files in sync as you design. DevRocket also allows you to cut down a full ui design into separate files for Xcode using their ui snips feature. With one click it will create a copy of the selected ui onto a new canvas that will be sized specifically to match the ui elements pixels measurements so you don’t have to create new files and drag elements between canvases. Lastly if you have ever designed for a iOS Retina display you know that Xcode requires all graphic files in high-resolution with the extension @2x after the end of the file name. DevRockets automatically adds the @2x at the end of the file name when it save your Retina display graphics making the whole process a lot easier. So for me getting all these different features in one extension is worth the $19 price tag for the time it will save in the iOS design process.
Best Desktop to Mobile Design Display
It may be weird to have a category with no winner but three years and this category had no winner and it is still true today. I have tried TOSN of Apps that would take a design on my laptop and display it on a mobile device and haven’t found any one that I thought had very good results.
Sketch has a mirror functionality but it can be buggy, has zooming problems that never let me see the design just how I want it, works over WiFi and USB if you can turn your iPhone into a personal hotspot.
I still can’t live without xScope and you can extend it’s functionality with xScope Mirror which will take a user defined capture area and display it on your iPad or iPhone. I wanted this app to be the perfect solution more than anything but I had issue with that fact that you can’t freely change the zoom level of the design displayed on the mobile device. This means that you are stuck with it only zooming at set percentages like 50%, 100%, 200% etc. which is frustrating because you can’t play with sizing, crop, etc. If xScope could get some these issues under control it could be a winner.
LiveView is a combination of Desktop and iPad app but I didn’t like it because it would only capture your desktop at the resolution of your iPad. I need the ability to customize the desktop capture area because it really falls down if you are like me who is working on an iPad 3 because you have no chance of ever getting your design to fill the gigantic resolution on your iPad.
Am I missing a great program you love? Put it in the comments below because I could really use one.
Best Prototyping Tool
InVision – FREE
The key to any great mobile experience is to get your information architecture and designs into prototypes as soon as possible because there is just substitute for working trying them out on a real device. The problem has been that getting those designs quickly onto a device so you can work through your ideas hasn’t been easy. InVision is a free online service that is my go to resource for web and mobile projects. I think it really shines for mobile as it supports transition and gestures which are critical to mobile app design work. Also since it is web-based it is easy to be able to look at he prototypes on any device without the need for special apps for having multiple devices on the same WiFi network. It also has a really nice system so that your team or your clients can go into the prototypes and leave location specific feedback which make virtual collaboration much easier.
Best Spec Writing Plug-In
Specctr – Lite: FREE Full: $49
One of the constant pains for a designer when working with any good dev team is writing the specs they need to build your designs. I have found a plug-in for Photoshop, Illustrator, InDesign and Fireworks called Specctr that automates spec generation making the process a lot more painless. It is as easy as expanding your canvas to make room for the spec’s, select the details that need spec’s from the panel and then just click the Spec button. It can also generate page coordinates, give the spacing between elements in percentages, can spec text in em and even generate CSS.