Mobile UI Design Patterns: 10+ Sites for Inspiration

Mar 29 2012 by Jacob Gube | 7 Comments

Mobile UI Design Patterns: 10+ Sites for Inspiration

User interface design patterns are solutions to common design challenges, such as navigating around an app, listing data or providing feedback to users.

Mobile apps and sites have unique UI design requirements because, compared to their desktop counterparts, they’re used in smaller screens and, at least with today’s modern mobile devices, rely on fingers instead of a keyboard and mouse as input mechanisms.

Whether you’re designing a mobile app UI for the first time or in need of specific design solutions, these mobile UI design pattern resources will surely help!

1. Mobile UI Patterns

Mobile UI Patterns

Mobile UI Patterns is a great site to visit to see common mobile UI design patterns such as activity feeds and notifications. The patterns are organized into 20 categories so that you can easily find what you’re looking for.

2. Inspired UI

Inspired UI

Inspired UI is an excellent mobile UI design pattern gallery with over 1,000 screenshots of real mobile apps. Design patterns featured in the site include sign up pages and check-in user interfaces.

3. lovely ui

lovely ui

This site features common mobile app user interface elements such as buttons, lists and popovers. lovely ui was created by NYC-based interactive designer Diana Frurip.

4. Mobile Design Pattern Gallery

Mobile Design Pattern Gallery

This design pattern gallery is a supplement to UX designer Theresa Neil’s mobile design pattern book published by O’Reilly Media. This gallery features an anti-patterns section featuring UI design techniques to avoid. You can also view the design patterns on Flickr.

5. pttrns

pttrns

Over 30 mobile UI design patterns (e.g. splashscreens and walkthroughs) are featured on pttrns, a gallery site with large screenshots and a clean interface. The site is by Robin Raszka (founder of popular iOS development firm Tapmates) and chemiX.

6. Patterns of Design

Patterns of Design

This site seeks to present notable mobile app UI patterns from exceptional iPhone and iPad apps. Patterns of Design is by Will Simons, a freelance UX designer and project manager.

7. 4ourth Mobile Design Pattern Library

4ourth Mobile Design Pattern Library

This wiki resource is a general reference guide to mobile UI design patterns. It discusses a wide array of design patterns such as slideshows and pagination, to advertising within your mobile app.

8. Android UI Design Patterns

Android UI Design Patterns

This blog by German technologist/developer/Android user Juhani Lehtimaki publishes posts that cover Android UI design patterns. In each post, a design pattern is discussed and relevant screenshots from mobile apps are included.

9. android pttrns

android pttrns

android pttrns, inspired by pttrns (featured above), is a gallery of Android app UI design patterns. It currently only has a few patterns, such as action bar and tab bar.

10. Official Developer Documentation of Mobile Operating Systems

Mobile OS manufacturers typically have official docs geared for professionals developing for their platform. These docs often include guides on UI design patterns.

Related Content

About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and also a book author. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

7 Comments

Sigrid

March 29th, 2012

Nice overview :-) thanks

Maybe add one more to the Official Developer Doc section

Metro Apps for Win 8

http://msdn.microsoft.com/en-us/windows/apps/

(style guide in progress but already very exhausive)

Sergey Pakhandrin

March 29th, 2012

Thank you for featuring the Inspired UI!

Juhani Lehtimaeki (@lehtimaeki)

March 29th, 2012

Hi Jacob,
Thanks for sharing this list. A lot of good sites! Also thank you for including my site in the list. Much appreciated!
One quick correction though. I’m not German, I’m Finnish, but I live in Germany :)

Cheers,
Juhani

Finch

March 29th, 2012

Helpful Design Patterns, now to put it into practice – Thanks Jacob

asrm

March 30th, 2012

Amazing list! Thanks for bringing it altogether! (:

Mirko

March 30th, 2012

As usual great content. Thanks a lot

Abhinav

March 31st, 2012

Hi Jacob,
Just put up this website at http://android-patterns.rickreation.com inspired from pttrns.com though specifically for Android and a super fast search option. Lots of screenshots there and it’s growing rapidly. :)
Abhinav

Leave a Comment

Subscribe to the comments on this article.