How To Preview UI Designs On A Mobile Device

 

Raise your hand if you’ve ever designed a mobile interface while working on your desktop only to realise it didn't actually work on a real mobile device. Font size too small? Tap areas completely off? Not enough contrast? Yep. We’ve all been there. Designing mobile devices in isolation doesn’t work — you need to preview your mobile designs on a real device as you work.

The trick is to get in the habit of previewing constantly on a real device. This needs to be done while you are designing — not as some process tacked on at the end. 

Luckily there are some great tools that make the preview process easy. Previewing basically works by mirroring your favourite design tool onto your mobile device. Previews happen in realtime, and your changes are accurately reflected in the device as you work. Here’s a quick summary of the best preview tools — Skala, LiveView, and Sketch.

Skala

My favourite of all the preview tools is Skala by Marc Edwards. Skala was built for designers, by a designer, and it really shows — the app integrates into your workflow intuitively to give you lossless, pixel perfect design previews from your desktop to your mobile device. It’s quick and easy to use, and it gives you high quality previews as you work. 

You can use Skala in a couple of different ways. The most useful is the Remote Connect option in Photoshop, which allows you to preview your Photoshop documents in realtime on your iOS device. In this mode you’ll see a preview of your canvas directly as you edit, without needing to hit save for the transfers to be pushed to the device. Skala pushes the current Photoshop canvas to your iPhone or iPad while you're making changes, which means you can preview directly as you are editing on your desktop. 

Running Skala is simple: you run the Skala Preview application on your Mac, and the companion Skala View app on your iOS device. The images it sends are an exact representation of how your UI will look on a real device, with accurate pixels and colour. Previews are realtime, and the app is very fast on a good wifi connection. 

If you’re using another image editor you can also use Skala Preview to send static images to your iOS device via the clipboard, including output from Illustrator, or any other application that you use. Clipboard image are pushed automatically, so all you need to do is copy a file and it is automatically sent to your device.

Skala provides exact zoom previews at 100% and 200% which is useful for designing for different resolutions — your previews appear at exactly 100% by default (good for retina), and you can then snap to 200% to view non-retina designs in full screen (e.g an iPhone 4). Zooming is clean, with crisp, sharp accurate pixels, and no interpolation or blur, and Skala happily supports portrait and landscape orientations. 

One thing I like is the ability to double tap the Skala View so that it snaps your design to the center position on your iOS device. I use this when I’m working on a design in Photoshop that includes mockup chrome such as the outline of an iPhone for demo purposes. Working this way allows you to see both a full mockup with chrome on your big screen, and just the actual screen pixels on your iOS device (the phone chrome remains outside the preview area if you setup your psd correctly). Other important features of Skala include the ability to test your work with various colour-blindness and brightness settings.

Development updates to Skala have been steady and have consistently improved the app. The Skala team has worked hard to deliver solid network performance and have also described several ways to improve your network performance if you are on slow connection (see below). Even more interesting is that Marc is currently working on a dedicated UI design tool called Skala, which looks like it could be a killer UI design tool. If you're not already following Marc you should follow him on Twitter and check out his blog at Bjango.

LivePreview

If you're looking for an alternative to Skala, then you should check out LiveView by Nicholas Zambetti. LiveView was the first real preview app that came onto the market, and it’s excellent. Like Skala, LiveView uses a Mac app and companion iOS app to mirror your Mac display to an iPhone or iPad. 

LiveView takes a different approach to Skala, in that it simply mirrors part of your source screen. Instead of sending data from within an app like Photoshop, it simply reflects a section of what is showing on your Mac screen to your mobile device. Basically the app streams everything that is visible in the LiveView frame, which means it can be used to mirror *anything* on your desktop. 

This can be extremely useful if you want to preview designs in motion, as LiveView mirrors an exact copy of everything that is showing on the desktop. This means you can interact with prototypes on your desktop and show these designs in motion on a real device. 

Note: as there is no Photoshop connect option, you need to position the LiveView app window over the top of whatever you want to screencast. This also means that zooming in to work on part of an interface on your desktop will also cause a zoom in on the iOS device, so you need to keep the canvas in the same spot and zoomed to 100% for LiveView to be effective. It can also be a bit cumbersome to position the LiveView frame in exactly the right position, but once you are set it works well. LiveView is fast, and you can choose to send Optimized Lossless, Lossless, or various other Lossy quality settings to the iOS device to speed things up even further. 

Overall, LiveView is great for specific situations, but if you're primarily looking to preview designs while working in Photoshop it is less useful than Skala’s direct Photoshop connection functionality.

Sketch

Next on the list is Sketch by Bohemian Coding, which has rapidly become a favourite for many UI designers. It has a very strong feature set for UI design, a simple, clear interface, and well thought out tools and workflows. I’m really excited about the potential of Sketch, and it’s being developed by a killer team with strong, clear goals, and solid execution.

One of my favourite features of Sketch is the in-built device mirroring. As with LiveView and Skala, you run Sketch on your Mac and reflect your work via a companion app for your iOS device. The advantage of Sketch here is that the mirroring tool is built directly into the core application, and is therefore a completely integrated part of your design process. This results in a very simple, solid workflow for mobile UI design. 

Sketch Mirror has some really nice features including support for Sketch pages and artboards, which allows you to swipe between different artboards on your mobile device while you are working on your desktop. 

You can also connect multiple devices to the Sketch Mac app, which means you can simultaneously preview different artboards made for iPhone and iPad on different actual iOS devices. This is very useful — you can preview a small artboard design for an iPhone while simultaneously previewing a larger artboard on your iPad. Sketch Mirror also automatically scales up or down to match the resolution of the connected preview device, and you can zoom in to see pixel level details. 

Note: Using Sketch Mirror requires the full version of the Sketch desktop application to function. This means it’s an expensive option if you just want mirroring, but it’s fantastic if you are already working in Sketch. Sketch currently has some performance issues and bugs that may make it not fully ready for some designers or companies. However, the team behind the app are excellent, and they’re constantly working to push new updates, features and fixes. I’d encourage everyone to support the Sketch team, and to do some design work in the app to appreciate the excellent work they have already done.

Improving your connection 

One problem that mirroring tools can suffer from is patchy network connectivity. Mirroring requires a good Wi-Fi connection to work, and it can be difficult to work effectively if your connection is poor or you are on a network that is used by multiple devices. Patchy connectivity typically manifests as a broken device connection, slow screen transfers, or intermittent performance issues. Luckily, if you’re having troubles with a slow connection there are a couple of fixes to improve your situation. 

Create an ad hoc network
You can create an ad hoc network if you’re using a laptop and don’t have a Wi-Fi network available for use. This means that you are connecting to your Mac directly, and it can result in a faster, more stable connection. Take these steps: 

Your Mac > Menu Bar > Airport icon > Create Network > “Your new network”

You can then connect an iOS device to this network. Note: while you’re using this method you effectively disable the ability to use the internet on both devices, so it’s only best as a short term fix to improve your situation during a patchy connection. 

Personal Hotspot
My favorite technique for improving a patchy connection is to use a Personal Hotspot with a USB cable connected to your iPhone. This creates a shared network that your desktop can connect to — it’s a direct network between your Mac and your phone. This is very stable, and also gives you the advantage of a simultaneous Wi-Fi connection. Take these steps:

On your phone: turn on Hotspot (Settings app / Personal Hotspot / “On”)
Connect your iPhone to your Mac with a USB cable. 
On your mac, open Mac / Apple icon / System Preferences / Network. If you view the list of devices in your Network settings your phone should be visible, and the mirroring process will now occur over the USB connection you’ve created. 

Note: internet activity on your desktop machine can be routed via your iOS device which could incur charges from your carrier. To ensure this doesn’t happen you need to set your device’s position in the Network device list. Ensure that your phone is the last device in the list so that your desktop computer won’t use phone data (if you need to reorder the list of devices just tap the gear icon and choose “Set Service Order”). If you’re really not sure about network charges, you can disable your Wi-Fi connection entirely.

Conclusion

We’re lucky to have so many great options for previewing UI designs on a mobile device. Here’s a quick summary of my recommendations for the best preview apps and techniques for you to do better mobile design work:

- if you use Photoshop, I recommend Skala as your weapon of choice. 
- if you use Sketch, I recommend the excellent inbuilt Sketch Mirror.
- if you need realtime motion previews I recommend LivePreview.

Coming up next I'll be writing about the best way to export all of your iOS design assets ready for Xcode.