Design patterns screens examples Flashcards
Splash screen
strive for simplicity — a great splash screen consists of an application’s name, logo and some background image, nothing more
show it for no more than 3 seconds. If an app uses a lot of hardware and takes more time to load, add a progress bar.
Experts say the advancement of mobile technologies allows modern apps to load in a flash making splash screens unnecessary.
Onboarding screen
familiarize a user about the app’s major functions and what are they are needed for
give the opportunity to make a registration
collect that information to improve personalization.
show onboarding to first-time users, not to the returning ones.
Home screens
Since the home screen contains the major mobile app’s options it usually presents an app’s key navigation elements like a search field. It’s great if the screen features basic colors and sometimes, even doodles, depending upon the type of app. Icons should be easily visible and have an obvious meaning.
Log-in and profile screens
get rid of all the unnecessary distractions
limit the number of form fields to a couple or better offer one-click logins via Google or Facebook
provide clear error messages.
Stats screen
Making good stats screen design can be a harder task than it seems simply due to the existence of the information overload problem rooting from the dominance of digital technologies when people get overwhelmed with loads of data on a daily basis.
Make the stats screen look appealing with a clear layout where all the charts and graphs neatly arranged with distinct icons and easily deciphered typography.
Calendar screen
A calendar should have a convenient interface with a visual style matching the overall design of a mobile app. Put an emphasis on the UX and UI, rely on a simple and uncomplicated mobile application design to let users concentrate on the main functions of your app. Expect that they will want to sync it with their accounts in Google, iCloud, etc.
E-commerce Catalog screen
Catalog screen In most cases, products on catalog screens are organized in columns to scroll through. Alternatively, you can showcase items horizontally for users to swipe. The designer’s duty is to decide which variant to chose to prioritize some pieces and provide an easy way for users to maneuver through multiple products.
Product card screen
The central part of the product card screen is most often a product image. Below comes the additional data about the product specifications, better presented in groups like size, style or country of origin.
Checkout screen
all the possible methods of payment should be clearly presented with the help of icons or other visual elements. A user mustn’t speculate on whether they can use a certain method or not
make sure users are aware that the personal data they provide you with is secure. A powerful copy can help you with that.
Feed screen
People often quickly scroll feeds during brief breaks so the best option is to create a design without too much overloading visual details.
remove any redundancies
improve feed typography. Readability is of prime importance in feeds
don’t encumber each entry with too many UI controls (like, save, follow, etc.).
Contacts screen
Usually, the lists in mobile apps are alphabetically ordered. Each separate contact is accompanied by a small photo and upon clicking leads to detailed information with email, phone number, etc.
Playlist screen
The UI of playlist screens is usually similar on various apps, and rightfully so. Users expect certain features working a certain way. So it might be best not to reinvent the wheel but to follow the guidelines other designers have already formulated.
A music app playlist is a list of tracks showing the detailed data on the track. A small image representing the album can be added to each track.
