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
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, allowing people to get mobile web projects to come to fruition a little easier when paired with cheap web hosting able to get these mobile sites live on the internet. 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.