Mobile Designs. Strategic Solutions. Course Material

Here are the slides and material from the 1 day class I gave for Door64 in Austin.

Class description:

  • User experience expert Theresa Neil will guide you through the latest mobile UI design strategies: Responsive web, Optimized sites, Native apps, and Hybrids.
  • Study the most successful mobile implementations in the market today (and some of the worst). Learn the merits and pitfalls of each strategy.
  • Get to your mobile solution faster by learning the best practices for layout and navigation.

In a nutshell, the first 45 slides look at the mobile strategy options and explains each, the next 150+ slides deep dive into the four options: responsive, mobile optimized sites, native apps and hybrids.

I pulled shamelessly from Luke W, Ethan Marcotte, and Rachel Hinman’s books and articles to create this class, and am in debt to these great designers for sharing their mobile know-how.

I will soon be presenting this class for Udemy if you missed the Austin talk!

Mobile Prototyping Stencils

I love OmniGraffle, and am also a big fan of Balsamiq, especially for early design concept work, however, I have been using Keynotopia lately for wireframing and prototyping mobile apps. It is easy to just knock out the designs, then run them on the mobile device for testing.

I think I paid < $100 for the set of iPhone, iPad and Android Keynote & PPT stencils. The newest update includes Windows 8 Metro UI. I hope they provide a wireframe version of the Windows 8 UI next.

Book Release: Mobile Design Pattern Gallery

Get it for $20 on the O’Reilly site, format ePub, mobi or PDF, or $10 for the Kindle edition on Amazon.

The print version is now available too, but only in black and white. So save your money and get the eBook in full color.

The print book should be available next week. I’ll be signing copies at SXSW @ 1:30pm March 13, at the Expo Hall.

Thanks to everyone who came to the O’Reilly both at SXSW, we sold out! I’m waiting for the first review though…

Designing for Android 3.2 & 4.0

Here are some excellent resources if you are designing for Android Gingerbread or Ice Cream Sandwich.

Galleries

Pattern Libraries

Stencils/Templates

  • Zurb’s excellent OmniGraffle Stencil
  • Android 4.0 PSD
  • High Density PSD from Teehan + Lax, June 2011
  • Stencil for Visio- Nope can’t find one. I’ll say it again, the Visio community needs to get it together and starting making high quality stencils and sharing them. If you know of a Visio stencil for a current version of the Android OS, please comment and share.
  • Keynotopia for prototyping. I have bought and used this bundle for iPad prototyping and it works well. I haven’t tried it for Android apps yet.
  • Glypish Icons are really useful for low and high fidelity mockups

User Interface Design Guidelines

Android Design

Blogs/ Articles

Books

Presentations & Videos

Show Me, Don’t Tell Me: Pattern Galleries vs Pattern Libraries

I read a post on Boxes and Arrows this week titled Are Design Patterns an Anti-Pattern? where Stephen Turbek outlines the pitfalls of pattern libraries. This got me thinking about a UIE talk a couple of months back where Stephen Anderson ‘vilified’ the set of RIA screen patterns Bill Scott and I published in 2009 & 2010. His talk encourages designers to fully explore an engaging conceptual model before falling back on an established design pattern.


The Villains in Stephen Anderson’s talk on Emotional Engagement

And I started thinking, does my new book about mobile patterns have any value or am I unwittingly polluting designers creative minds?

After a glass of wine, here’s what I came up with:
UI patterns are a useful educational tool. Designers should be familiar with design patterns, just as they should be aware of other fundamental principles of design (psychology, typography, color, balance, proportion, etc…). If nothing else, patterns give us a shared vocabulary and rules to break.

UI patterns are also useful for developers and product owners who don’t have a dedicated designer to collaborate with. Patterns give them a better chance at creating a usable interface than if they randomly design something in a vacuum (or more likely, a small, stinky meeting room with a whiteboard and a half-dead dry-erase marker).

After another glass of wine I realized, I’ve never used a Pattern Library. I’ve made a couple for clients, I’ve browsed a few online, I own a two books on Pattern Libraries, but I don’t use them. And I have a sneaking suspicion I’m not alone here.

 

Pattern Galleries are a different story. What’s the difference? A Pattern Library is a an educational effort explaining the how, when, why. A Pattern Gallery is a bunch of pictures of good design that can be perused for inspiration.

 

At the risk of sounding immodest, I frequently refer to my own DesignGalleRIA when I’m working on complex Rich Internet Applications. Many interaction design challenges have already been solved and I can build upon these IX patterns to create an ‘intuitive’ experience. In fact, I’m a better designer and provide a better value to my clients by knowing what’s out there, and knowing when to leverage an existing solution or start from scratch. I’m pretty sure Mari Shelby and others started their Pattern Galleries for similar reasons.

If the number of subscribers on these sites are any indication, the popularity of Pattern Galleries is exploding. Even my brand new gallery and Flickr photostream is getting upwards of 1k+ unique visitors a day and the book isn’t even released yet.

UX practioners aren’t the only ones creating Pattern Galleries. I know of fashionistas, architects, interior designers, puppeteers, brand designers, and landscapers who create scrapbooks, physical and digital, for design inspiration.

What do good Pattern Galleries have in common?
1. Lots of pictures
2. Minimal text
3. Easy to flip through
4. Frequent updates

With that in mind, I’m updating my Pattern Gallery with better navigation and a bunch of new screenshots.

Please comment and share your own experiences with Pattern Libraries, have you ever really used them, did they help you solve your design challenge, do you use Galleries more often, if so, which ones?

Update on Book Release Date- February 2012

To everyone awaiting the release of the Mobile Design Pattern Gallery, we are now looking at a February release date. I apologize for the delay but we ran into some layout issues. Our publisher is used to producing programming books, not design books, so there has been some give and take in the page layout. But I am now confident we have a format that will be easy for readers to flip through for design inspiration. We’ll shortly be updating the Pattern Gallery on this site and Flickr Photostream too.

Obviously the Topic of Mobile Design is Best Represented by a Rooster

In my last book with Bill Scott, Designing Web Interfaces: Principles and Patterns for Rich Interactions, we were given poultry as our cover animal. Although I wanted a panda, I wasn’t too upset because we got the Cock of the Rock which provided us with innumerable jokes and jests.

This new book also features poultry, the Asian Rooster. The only upside I can see to this is that my book and Sambal, that really spicy chili sauce in a red bottle you see in Asian restaurants, share the same iconic bird.

We also have an official release date now, November 30, 2011. You can pre-order the book now on Amazon, or sign up to win a free copy.

About the Book

We recently had a new mobile project starting and all of our experienced mobile designers were booked. This gave me less than a week to ramp up a new designer. So I made a quick tutorial with lots and lots of screenshots, illustrating good design and not so good design. Gradually a set of patterns for mobile application design emerged.

Even as I was cataloging these patterns, I knew that the real value wasn’t only the pattern identification, but in the hundreds of examples I’d captured. So instead of a tome of abstract patterns only an author can love, this book is a showcase, or gallery, of mobile application design. This book includes 400+ current screenshots from iOS, Android, BlackBerry, WebOS, Symbian and Windows mobile applications.

Check out the Flickr photostream for over 600 screenshots organized by pattern type. And follow me on Twitter, @mobilepatterns, for expert mobile design tips. And don’t forget to sign up to win a copy of the book!