Design Mobile Onboarding Patterns Walkthrough

Collection of Mobile Design Patterns for App Ideas

Author PSDMockups
Last Modified 23 Apr, 2018

The following is a collection of 11 Mobile design Patterns websites (scroll down) where you can gather inspiration or information on how other designers and developers like yourself have created their apps. Most of these sites contain several screenshots of the popular iOS and Android apps so you can view the onboarding process or if you’d simply like to walkthrough each mobile pattern manually.

Introduction: What are design patterns?

There is a great PDF report about Mobile Patterns which can be found on the UXBerlin website. This technical paper was first released in 2007 and has some historical data about the origins of mobile design patterns:

Originating from architecture theory they were adapted first to software development [11] and consequently to interaction design [4]. Here they describe standard solutions to recurring design problems and may apply across applications, platforms and devices. Pedagogical patterns have been proposed in order “to capture expert knowledge of the practice of teaching and learning in a portable, salient format” [15]. Patterns may serve to find new solutions due to their “generative” potential [6], to not only document and optimize existing solutions, but to critically reflect upon them in order to generate new ones.

Another great source for reading about mobile patterns was written by Jim Lentz. Mr Lentz is the user experience architect for WebSphere Application Server at IBM and his post on User interface design for the mobile web can be found here. Here’s a quote:

Exploiting UI design patterns facilitates ease of use for two reasons.

By definition, a pattern is a proven solution to a common design problem. Some patterns are proven by formal usability testing, and others through the “natural selection” of designs. Over time, unusable designs will be abandoned and better designs will be copied.

Because patterns are common design practices, they’re familiar to users. Pattern-based UIs will usually require less learning by users.

There are a few mobile UI pattern sites on the web; pttrns and Mary Sheibley’s Mobile-Patterns are the most comprehensive. Both sites provide examples of common design idioms. While these pattern libraries don’t provide design guidance, they can serve as a design inspiration while helping you design UIs that leverage user experience with other applications.

In a followup post title “List Mobile UI Design Patterns“, Mr Lentz wrote:

Unlike programming design patterns, UI design patterns define the externals of an application – the user interactions and visual structure of the interface. UI design patterns intentionally omit details about the implementation so that the designer can concentrate on the user experience. UI design patterns are often grouped into collections (“libraries”) that are organized by user goals, task or use of specific UI elements.

Design Pattern Websites

The following websites do not teach, or even explain, mobile patterns. These sites are destinations for designers to go and admire the design patterns implemented by other mobile app developers. Enjoy!