We’ve been working with a client to on a site that requires a separate mobile experience that has the same overall functionality. In doing so, we’ve taken the original site we designed and developed, and applied some mobile guidelines to the content to make sure it is a good user experience. Working with their mobile styleguide, I researched some other tools and topics as a way to learn more about best practices around mobile design.
Some overall mobile takeaways are:
-Elevate important content
-Think top down
-Make usage easy & obvious
-Use UI elements consistently
-Make buttons fingertip size (about 44 x 44px is a good start)
-Use / Integrate the features on the device
Here is a free app out I found that allows you to simply view your iOS designs live on your iPad or iPhone while designing them. You can tether it over wifi to your Mac and interact with your designs to make sure you have the right scale for both retina and standard displays.
To use it, download the app to your machine and to your iOS device from the app store.
Once installed, open LiveView on your device and on your computer to sync them over wifi.
Once it sees your device on the network, select it to begin in the Dialogue Screen. The “Interactive” check box to the left allows you use your device to select and control certain elements on your computer.
If you want to hide the rectangle while designing, hit (command + h) and LiveView will continue broadcasting while hidden.
If you have a device with a retina display, you can toggle the size of the viewing area accordingly up in the menu under “View.”
Mobile Resources / Links:
iOS Human Interface Guidelines
Touch Gesture Reference Guide
This is a great illustrated resource for all interactions on a mobile device.
This plugin for Photoshop might save designers and developers time putting an app together as it handles exporting of multiple file sizes for different displays, generates all icon sizes needed for an app, and has some other great features. Might be worth looking into on an upcoming project.
iPad & iPhone GUI PSD
I’m sure you’ve seen this one, but Teehan + Lax put together a few amazingly detailed PSDs that are free to download and start designing around.