Introduction
Back in December, I was hired as a Graduate Student Researcher (GSR) by Professor Morten Hansen. A part of my responsibilities was to design an iOS app that would eventually end up being deployed to students enrolled in this Spring’s INFO 225: Managing in Information-Intensive Companies.
Being interested in behavior modification mobile technology, I was very much looking forward to the task. However, I faced the same workflow challenge I have had to confront every single time in the past I needed to design for mobile. The issue was previewing my work on an actual phone while designing it on a computer.
There simply was no convenient way to do it in real time, so over time I have developed all kinds of workarounds for the problem. For example, I would save the mockup I was working on in Photoshop, then move the saved file to My Photo Stream in iPhoto so it got synced to iCloud, and finally open the image from the Photos app on my iPhone to get the feel of how it looked and felt on an iOS device. Unfortunately, such a process is slow, cumbersome, and very easily breaks the designer’s concentration and focus.
Then, just as I was about to start working on the app for Professor Hansen, I stumbled upon Skala View, a free app which allows me to beam images from Photoshop to my mobile device in real time. Needless to say, it solved my problem and made me a happier and much more productive designer.
Skala (Pre)View
To be more precise, Skala is not a single app, but rather two interdependent apps: one for your Mac and one for your mobile device (iOS or Android). Setting everything up is very easy and straightforward.
Skala Preview is the OS X app. Once you download it from Mac App Store, all you have to do is create a remote connection in Photoshop, and just keep Skala running.
Next step is downloading Skala View for your mobile device from either Apple App Store or Google Play. Provided both your Mac and your phone are connected to the same wi-fi network, you should instantly get a live preview of whatever you are working on in Photoshop when you open the app on your phone.
Features
In addition to its main function of getting image from your Photoshop to your phone without hassle, Skala View has a few other useful features.
Multiple Connections
If there are several designers on the team but only one mobile device for previewing mockups, the team members can take turns using Skala. The mobile app will recognize all incoming desktop connections on the network and whoever is perusing the device at the moment can choose which image he/she wants streamed to the phone.
Photo Access
This feature enables you to open your photos and preview an image from the app, giving you access to Skala’s other tools, such as color blindness testing (see below). You can use this feature even when the phone is not tethered to a Mac.
Brightness
You can change brightness from within the app, thus easily identifying which UI elements are harder to interact with when the phone’s screen is dimmed.
Color Blindness Testing
By default, the app displays the Photoshop image in full color. However, it offers additional four filters: Protanopia, Deuteranopia, Tritanopia, and Monochrome. By previewing the mockups with these on, the designer can make sure that the user experience that is being built is satisfying to everyone, including people afflicted with these common forms of color vision deficiency.
Sharing Options
If you are particularly proud of something you have built, you can copy it to your device’s clipboard, save it to photos, email to someone, or tweet for the whole wide world to see.
Final Verdict
Skala View deserves to be an essential tool in any mobile designer’s toolkit. The app performs its primary function of bridging the workflow gap between your computer and your mobile device extremely well. Last but not the least, it is 100% free (no in-app purchases or any other such hidden “freemium” costs). I wholeheartedly recommend it.