In mobile application development, mobile apps tend to adhere to a set of standard screen "archetypes" that appear again and again. There are over a dozen screen archetypes but there are six core archetypes that appear in nearly every app:
In addition to these six, there's other "extended" archetypes often encountered, including:
A large part of building mobile apps is about understanding how to build the UI and data back-end to power these common screen types above. Therefore when learning about Android development, you must ensure you have built at least all six of these core types when working on early projects.
The six archetypes are provided in more detail below.
This archetype is focused on the "signed out" view. This is where the user signs in or registers for a new account. This can usually take the form of username / password although commonly includes third-party authentication such as facebook or twitter connect for easy access.
Login screens usually require the following components:
Examples:
First, sign in pages:
Unsplash | Etsy | |
---|---|---|
And of course, signup:
AirBnB | Twitch | |
---|---|---|
Check out more examples of login screens and sign up pages at Design Vault.
This archetype is focused on the primary content or data that a user consumes within the application. This is typically time-based displaying activities from other users that might be of interest. This is usually a list of discrete items which contain different data properties. The primary data is usually text or media content while secondary data includes the timestamp and the author.
Streams usually require the following components:
Examples:
Medium | Overcast | IMDb |
---|---|---|
Check out more examples of streams on Design Vault.
This archetype is focused on displaying all relevant information about a single discrete item within the application. This usually is a view that is reached when a user is consuming content in a stream that they would like to view in more detail or interact with. Typically this view contains additional data not displayed on the stream as well as actions a user can perform such as editing their items, liking or commenting on other user's content.
Detail views usually require the following components:
Examples:
Pocket Casts | Seven | Hopper |
---|---|---|
Check out more examples of detail screens on Design Vault.
This archetype is focused on allowing the user to create a new item by filling in all the properties for the item using a creation flow. This typically involves presenting the user with a series of input fields and allowing them to attach media such as a photo from the camera or metadata such as their location. Usually this is broken up into discrete steps and/or a great deal of fields are optional.
Creation screens usually require the following tasks:
Examples:
Clubhouse | Dispo | |
---|---|---|
Check out more examples of creation screens on Design Vault.
This archetype is focused on allowing the user to view information about their own account, view their own content, and provide them account related action items. Typically, the profile contains important statistics about the user (i.e number of followers), displays recent content, and provides access to actions such as editing their profile, changing their picture, logging out, etc.
Profile screens usually require the following components:
Examples:
Dispo | Seven | |
---|---|---|
Check out more examples of profile screens on Design Vault.
This archetype is focused on giving the user the ability to tune preferences associated with their account and/or the behavior of the app. The settings available range from notification and privacy settings, to profile settings such as username or email and to preferences affecting the behavior of the app.
Settings screens usually require the following components:
Carrot | Twitch | Seven |
---|---|---|
Check out more examples of settings screens on Design Vault.