Between starting the book in September of 2010, and the publication date, a lot of mobile pattern collections have emerged.
I for one actually disagree with the principles behind most of them. Not all, but many. I've talked about this in some presentations, so for the record, too many of these are:
- Screenshot focused.
- Few or no explanations.
- Interface focused, with few nods to interaction.
- Too focused on one OS. Mostly, iOS.
- Mostly, really, iPhone. Far too often "mobile" means handsets, though some tablet interfaces are coming.
- One tier of organization, and no cross-referencing. If you don't get their method of organization or referencing, you may not understand what options are available.
As often happens, someone else said it better than me:
Just because a design looks great doesn't mean it's usable. - James Eggers
Of course, you may disagree. The presence of these is another key reason I am not worried about having too many screenshots in my patterns. There are plenty of others that do this. Enjoy.
Our Ancestors
Design for Mobile - The pattern library from Little Springs Design, long lost but still on the Wayback Machine. We wrote many of these, and it was the original reason to submit a book proposal at all. Mostly superseded by this wiki, but a few things didn't come over, like the many weird keyboards or techniques of programming which are dated, but may be of historical interest.
Animation, Transition and Active Interactions
DataViz
MobileViz - With some best practices even. Nice. Finally.
Codified Pattern Libraries
Android Design Patterns - Much of what's in Greg Nudelman's Android Design Patterns book is on this site.
Android Patterns - One of my favorites, each pattern is drawn, has a lot of explanations and describes the interaction, and there's a really snazzy organization to help you drill down to the options available for your design problem.
Mobile Design Pattern Gallery - Also an O'Reilly author, Theresa Neil has published this supporting website with the patterns from the book. They are abstracted at the top level, then explained as screenshots.
Flickr collection of screenshots Theresa used in creating this library.
Design Patterns by Only Mobile Pro. Not bad, but... odd. Either terribly badly written, or just not English as a first language. And some quite non-standard labels that you have to work through. Also, new, so few patterns, but interesting to watch.
Cocoa Controls Custom controls and views for iOS and Mac OS X. Includes links to get the source code for the widgets. Not as explained (e.g. why to use a widget) as I'd like, but reasonably well-organized and designed to implement, not just be pretty.
Android UI Design Patterns by widget (with the proper Android name), with descriptions, diagrams and examples. By Juhani Lehtimäki.
Responsive Navigation Patterns by Brad Frost, who has lots of good presentations on what responsive means, or if it's even right. Anyway, not your typical pattern library, but relevant and there's no place else to put it, so here you go.
Nokia Developer Wiki the category on Mobile Design patterns has a bunch that are very well described, well categorized and quite useful to any platform. Many examples are generalized, so don't worry if you don't design for Symbian devices.
Screenshot- & Review-Oriented Pattern Collections
Tab Patterns} - About tablets.
Lovely UI - A collection of mobile UI elements, tagged so all the similar items can be found.
Mobile Patterns - Ryan Sims' collection of patterns, with the opportunity for you to contribute your own to the collection.
Pttrns - By By Robin Raszka & Chemix, seems to be more focused on interfaces (screen design) than even the others.
Tappgala: The best in mobile interface design Organized by verticals (e.g. Healthcare) and about the whole app experience, not individual screenshots. Curated but allows contribution. Heavy iOS representation, but not officially restricted to that.
Make Better Apps German-language only site, with long reviews of entire applications, including many screenshots.
Well Placed Pixels No obvious organization, with a single screenshot per app. Links load the app's hope page. Some desktop widgets and apps also represented.
Beautiful Pixels Not precisely a collection, but functionally similar. Written app reviews with a design bent.
House of Buttons By no means all mobile, and even includes concepts.
FWA Mobile - Mobile of the Day A collection of apps and sites. Desktop version
Creattica A gallery where creatives submit their own work, with brief blurbs about them. This is the mobile part, but it includes desktop, graphics, packaging, etc.
Dribble Mobile Tagged group of screenshots submitted by designers.
http://littlebigdetails.com/Little Big Details A collections of UI widgets, instead of full screens, submitted by users and curated by Floris Dekker.
UX Archive Organized a bit, but still screenshot-oriented. Seems to be iOS only, so far.
iOS-only Patterns
UX Archive - Very iOS centric, to the point it even has an iOS 6 vs 7 tool.
Mobile UI Patterns - Mari Sheibley's quite large, regularly updated, and somewhat organized collection. Recently reviewing this, while it is not designed as an iOS app only site, functionally it has such a preponderance of these, I moved it down here.
iOS Inspires Me A selection of items, broken down by icons, apps, web, etc. Some notes, review and other minor information attached to each item.
Well Placed Pixels With no organization at all I can see, includes iPhone and iPad only.
Landing Pad - A showcase of beautiful iPad applications again as a Tumblr blog-like, organization-free list.
iOS Design Inspiration Grouped by icon, iPhone, iPad, web, and other top categories. Supports user star ratings by category, but little else.
Tapfancy Grouped by verticals, with multiple screenshots (use left/right arrows) for each application.
Building iPhone Apps Several images (see thumbs above the screenshot) of a random collection of app screenshots.
Inspired UI Not officially all iOS, but so far. Not bad organization by classes of UI widget, but only screenshots.
Web-only Patterns
Mobile Awesome All screenshots, no obvious organization, web-only maybe. Has attached blog and some other resources.
Refined Mobile Mobile web-oriented. Organized by categories, and by color schemes, so very useful when looking for interface screenshots to crib from.
AppSites A showcase of beautiful iPhone, iPad & Mac app websites. No actual items collected past the grid view. Clicks go to the actual site.
jQuery Mobile Gallery A simple gallery of jQuery mobile websites and native apps for ideas and inspiration.
CSS iPhone & Resource Screenshots, links and articles about CSS and web design for mobile.
Screenshots From Designing Mobile Interfaces
Screenshots for Designing Mobile Interfaces - This is just a collection on Flickr, of all the screenshots (or often, photos) of the various devices I own. Not organized into a library, but if you were looking for an old device especially, it might be here. Enjoy.
Anti-Patterns & Worst Practices
What would our jobs be without making fun of others? But really, it's important to recognize bad solutions, and know why they are bad so we can all improve. Here's a couple places that collect bad mobile solutions.
WTF Mobile Web also on twitter @WTFMobileWeb. This also explains real well the point of sharing antipatterns.
Next: Introduction to Mobile Typography
Discuss & Add
Please do not change content above this line, as it's a perfect match with the printed book. Everything else you want to add goes down here.
Another list to borrow from
http://mobilegui.net/inspiration/ Eventually, when I get time, I go through gathered up lists like this and put the info in the list above. This one I just found and haven't yet looked at.
What if these were all one place?
Like, if someone made a single markup language for all patterns to use? Not sure, but it's been put forth.
Not Mobile, But Cool
Examples
If you want to add examples (and we occasionally do also) add them here.
Make a new section
Just like this. If, for example, you want to argue about the differences between, say, Tidwell's Vertical Stack, and our general concept of the List, then add a section to discuss. If we're successful, we'll get to make a new edition and will take all these discussions into account.