Welcome!

Think Labs is an ongoing effort by Seven2 to provide research and educational opportunities in the web development and mobile field. To see what we’ve been cookin’ up, check out our blog postings.

Created by
Seven2 Login

Categories
Tags
Team Think Labs | Mobile Design & Usability
2395
single,single-post,postid-2395,single-format-standard,ajax_fade,page_not_loaded,,,wpb-js-composer js-comp-ver-4.2.3,vc_responsive
mobile design & usability

Mobile Design & Usability

mobile design & usability

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

-Be succinct

-Use UI elements consistently

-Make buttons fingertip size (about 44 x 44px is a good start)

-Use / Integrate the features on the device

[divider] [/divider]
liveviewappLiveView app:

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.

http://www.zambetti.com/projects/liveview/

Live View App Screen Shots

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.

sync live view

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

http://bit.ly/d02Heg

 

Touch Gesture Reference Guide Touch Gesture Reference Guide
This is a great illustrated resource for all interactions on a mobile device.

http://www.lukew.com/ff/entry.asp?1071

 

DevRocket

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.

http://devrocket.uiparade.com/index.html

 

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.

http://www.teehanlax.com/blog/ipad-gui-psd-retina-display/