Connect
To Top

The best design tools for mobile design (2012)

Click here to check out my out my 2015 updated list of the best mobile design tools here.

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 try 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 Mobile Design Photoshop Plug-In
GuideGuide – Free

This plug-in is actually great for designing any digital experience because you know how often 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 which 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. Best of all you get all of this for free.

Best iOS Design Plug-In for Adobe Photoshop
DevRocket – $10

DevRocket is a Photoshop panel extension that provides additional Apple iOS specific tools and functionalities to help in key areas of design 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 dont 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 $10 price tag for the time it will save in the iOS design process.

Best Desktop to Mobile Design Display
No Winner

It may be weird to have a category with no winner but I have tried tons of Apps that would take a design on my laptop and display it on a mobile device and haven’t found very good results.

One of my favorite desktop tools is 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 Mobile Web Development Tool
Adobe Shadow – Free

If you have ever worked on a mobile web project you know how much of a pain it is to code on your laptop and constantly have to put your work on a port, go to your devices, type in the address and look at your work. Adobe Shadow is a new inspection and preview tool that allows front-end web developers and designers to work faster and more efficiently by streamlining the preview process, making it easier to customize websites for mobile devices. The program is available for free through Adobe Labs and it is still in beta but the initial focus is on device pairing, synchronous browsing and remote inspection. You will need to download the Shadow mobile client from the iOS app store and the Android Market. In addition you will need the Google Chrome extension to run Shadow in your browser. This was you put the code in your Google Chrome browser it will push the entire site out to multiple devices. This way you can see your work instantly, easily and even do remote inspection to optimize the code for particular devices. Shadow currently supports Mac and Windows desktop environments. You can watch the full demo Adobe Shadow here.

Best iPhone Prototyping Tool
Prototypes – $39.99

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. Prototypes is an application that can take your Photoshop. Illustrator or Fireworks images easily turn them into tappable animated prototypes.

If you don’t want to pony up the $40 for Prototypes then I also recommend Briefs which is a free Cocoa framework that takes a little more work but also lets you create prototypes on an iPhone.

Best Spec Writing Extension
Specctr – Lite: FREE  Full: $49

One of the constant pains when working with any good dev team is writing the specs they need to buyild your designs. I have found one Adobe Fireworks plug-in 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 Fireworks panel and then just click the Spec button.

You must be logged in to post a comment Login

Leave a Reply

More in Great resource

Creative Director, Designer, Brand Builder, Speaker, Podcaster, Crazy One. As a designer, I have 20+ years experience creating the strategy, concepts, and designs for award-winning integrated global advertising campaigns, building multiple global Fortune 500 brands and creating innovative digital experiences. As a leader, I have 15+ years transforming agency and client-side teams using a mix of creativity, business strategy, process and political skill to create innovative, world-class work and cultures that change industries and companies. My clients have included American Airlines, W Hotels, Disney, Citi, ExxonMobil, Acura, Old Navy, Nationwide Insurance, Verizon, Subaru and many others. My work has received over 150 international awards, my app designs have been named as one of the World’s 100 Greatest Apps, Apple has featured my work in 9 keynotes, 4 TV commercials and more.

Follow Me On Instagram

 Spending a lot of time away from home lately so looking forward to getting home tomorrow to see these two crazy ones. #NationalPuppyDay #pugs #pugsofinstagram #pug #puglife  Brunch with @thechiclibrary before I hit the road again #chic #tomford @blackscale #blackscale @tomford #brunch #fashion  I always love the unwritten rule in Barcelona where you can create street art on doors and shutters but not the actual buildings. #streetartbarcelona #barcelona #streetartofficial #streetart #streetartist  Another preview of our commission from @tristaneaton and based on the 'crazy' in letterpress type and archery target you should know this is my side of the piece. #tristaneaton #tristaneatonart #tristaneatonmural #streetart #streetartist #streetartofficial  No caption does this justice because @tristaneaton is an absolutely brilliant artist. @thechiclibrary and I each gave him a list of what we love and inspires us which he used to create this massive 8' x 4' painting that he is finishing today. It can't get here fast enough. #streetartofficial #streetart #streetartist #tristaneaton #tristaneatonart #tristaneatonmural #commission #modernart #mural
 Another preview of our @tristaneaton commission. Full photos coming soon #tristaneaton #tristaneatonart #tristaneatonmural #streetart #streetartist #streetartofficial  The @obeygiant globe is a limited edition replica of the one which hung from the Eiffel Tower last year and was made by the worlds oldest globe maker. #galerieitinerrance #streetartparis #streetart #streetartist #shepardfairey #obeygiant #obey @galerie_itinerrance  My kind of street art from the Gothic Quarter in Barcelona #streetart #streetartist #streetartofficial #barcelona #streetartbarcelona #hola #skull  Our abdominal snow Pug loves the weather and the 16" of snow at our house north of NYC which feels more like north of the wall today. #pug #pugs #pugsofinstagram #nyc #westchester #snow #northofthewall  For those who asked about where to find the @invaderwashere is at @picassomuseum - remember it's an old piece before he got his style down so maybe look down at the last doorway on the south end of the museum. #streetart #streetartist #streetartofficial #streetartbarcelona #spaceinvader #invader #invaderwalls
 More in love with our @obeygiant from @galerie_itinerrance more every day. #streerart #shepardfairey #shepardfaireyart #shepardfaireyobey #streetartist #globe #earthcrisis  Feels a bit like Xmas today as our Earth Chrisis @obeygiant pieces and more showed up from @galerie_itinerrance in Paris. #obeygiant #obey #shepardfairey #streetartist #streetart #streetartparis #galerieitinerrance  Briefcase 2.0 thanks to @louisvuitton Avenue champ de Elysees #apolloalldaybag #louisvuitton #louisvuittonmonogram #monogrameclipse #lv #design #creativedirector  Thanks to @quiccs for the new addition to the collection - a black Forbidden TEQ63. It's the perfect middle size between my two @huckgee TEQ Skullheads. #quiccs #urbanvinyl #huckgee #huckgeeskullhead #dunny #skullhead  Barcelona street art public service announcements #streetart #streetartist #streetartofficial #streetartbarcelona

Copyright © 2015 Stephen Gates