The article shows a comprehensive compilation of mobile design resources, touching upon user research approaches, design patterns, prototyping tools, and usability testing, ideal for experienced designers and those new to the domain.
11/17 Update: I’ll be adding resources to this post periodically, I just added a few more 🙂
I’ve been putting together a presentation deck for a mobile user experience workshop we’re running, and I thought – man I’ve collected a lot of resources in my time designing for mobile, why not share the wealth? If you’re a mobile designer who’s looking for more resources, or someone who’s just taking the plunge, hopefully you’ll find this post helpful.
User Research
User research tends to be pretty similar across the board in terms of methods. Whether you’re designing for web, mobile, or some other experience, methods like observation, interviews, diary studies, etc, can all be used to great effect. Of course, there are certain ways people use their mobile devices that should be taken into account when gathering user research. In the book Mobile First, Luke Wroblewski details some of these usage patterns in the following way:
- Lookup/Find (urgent info, local): I need an answer to something now—frequently related to my current location in the world.
- Explore/Play (bored, local): I have some time to kill and just want a few idle time distractions.
- Check In/Status (repeat/micro-tasking): Something important to me keeps changing or updating and I want to stay on top of it.
- Edit/Create (urgent change/micro-tasking): I need to get something done now that can’t wait.
Mobile Design
While some principles in the web design space certainly transfer over to mobile design, mobile design is an entirely different arena in a lot of ways. With touch interaction comes new expectations and design patterns, and though it may seem overwhelming, it is important to realize there’s a whole set of tools and resources out there these days that can help you. Below I’ve listed some of the resources I’ve found helpful, separated into different design activities (get ready, there’s a lot!).
INTERACTION DESIGN
Reviewing Design Patterns
- pttrns.com
- mobile-patterns.com
- iospirations.com
- androidpatterns.com
- lovelyui.com
- Mobile Design Pattern Gallery
Sketching
Wireframing
- balsamiq.com
- iphonemockup.lkmc.ch
- Konigi’s omnigraffle stencils
- Gesture Icons – gesturecons.com
Prototyping
VISUAL DESIGN
Creating Mobile Icons
- Iconizer – make one icon, it makes all the others for you
- Unretiner
- Creating an iPhone app in Fireworks
Viewing Your Design on Mobile Devices
- Liveview Screencaster – install on mac, see your design on a phone
- Air Display
- Mobilizer – preview mobile websites on any device simulated on your PC
Adobe Photoshop
- Teehan-Lax Templates
- Mobile Design Starter Kit from Tapptics
- Punchcut toolkit for managing screen resolutions
Adobe Fireworks
- Prototyping for iPhone in Fireworks
- Fireworks template for Android – (other resources are also here)
- Fireworks template for iPhone
Usability Testing / Evaluation
Paper Prototyping
- Konigi’s omnigraffle stencils
- iPhone sketch stencil
- Example of “sliding” mobile paper prototyping: http://www.youtube.com/watch?v=6TbyXq3XHSc
- http://uxmag.com/articles/paper-in-screen-prototyping
Task-based Usability Testing
Heuristic Analysis
Even More! (Books)
(there’s a lot more books out there, I simply found these two to be the most relevant of the ones I’ve read)
- Mobile First – Luke Wroblewski
- Tapworthy – Josh Clark
- Designing Mobile Interfaces – Steven Hoober
Enjoy! And if you have more awesome resources let me know and I’ll add them to the list.
