UI Patterns
UI Patterns

Weekly UI Patterns - Cards

Email sent: Jun 11, 2021 12:02pm
The user wants to see an overview of the larger set of available content.
View this email in your browser


Cards have become a norm for layouts. More and more companies have moved to using card layouts as their main hub for information. It is mostly because of their nature as compact design elements which can be easily wrapped around many types of content while providing a great user experience.

So why cards?

For content driven websites and apps, cards are a very effective way of organizing information. Everything from text, video, images to interactive.

It all started to get popular with the sharing website Pinterest, but got adapted by daily goto services like Facebook and Twitter. The Guardian labeled it the container model and for good reason. It contains data in an elegant way. Microsoft based their Windows 8 and 10 operating system on cards. Even Google renders its search results in cards on mobile.

While mobile made it fashionable, cards can be found not just on smartphones. The rendering layout works pretty well for all screen sizes. It is compatible with responsive design principles and provides a consistent experience across different screens, it works even for wearables like watches.

Your gateway to rich content

The apps that we build usually feature a "central place” - a gateway to detailed content. It might be something that you open up when you start and plan your day or it is something that you visit multiple times.
While people are visiting more and more hubs on a daily basis, we as product designers need to present and maintain different entry points that take them to specific content which valuable at the right time.

Cards help tremendously in providing experiences that encompass more than just a single task.

So what are cards? Cards are basically containers for different types of content and enclose it in an entity that can be mixed and matched, presented in a recognizable way.

Listing Items

Organize similar content into cards. Each item can be an action and tapping should open up a detail view. Create lists of cards to provide a high level overview of the available content. When listing similar items, like apps in a store, you can segment based on category and provide a scrollable list for the items. You can think of this as a "sign" of the actual app. Make sure to render information that helps the user decide which card to open for additional details.

Enhanced productivity

Content cards are relevant in context. Your users might be browsing a list of leads with the goal of finding the more valuable ones. Let’s say you are building a CRM and have a page to list leads with name, photo and phone number. In addition to that you can provide key actions that help the user make progress faster. Think about what is important to the user when browsing the list, what is a common action? It may be rating items or tagging. Whatever it is, provide additional UI elements placed in a consistent way. Limit to one-two actions, more can be shown in the detail view. Don’t overwhelm with choice.


Maintaining consistency

Cards can provide a unified look & feel for your app. Instead of just printing inline lists with images and text, you can format and show the data in an easily navigable format. This translates well to many screen shapes and sizes.


Mix & match

Cards have a unique characteristic of enclosing content in a frame while maintaining consistency. Use it to provide structure when you have to render multiple types of information

Cards are useful tools that help in rendering and organizing data in a consistent and usable way. Use them to provide an overview of the greater dataset.


Try the fully interactive examples on your phone
Levi Kovacs - Founder of Mobiscroll

PS. How is this content helping you? Let me know if you like it and even more so if you don't!

Know anyone who would benefit from the Weekly Patterns email? Share it with your team and friends.

Copyright © 2021 Mobiscroll, All rights reserved.
Hi there, It's Levi from uipatterns.io. You signed up to get a new UI pattern every week and level up your mobile design and dev skills.

Want to change how you receive these emails?
You can update your preferences or unsubscribe from this list

Other emails from UI Patterns

UI Patterns
Jun 4, 2021
Weekly UI Patterns - Time input
UI Patterns
May 28, 2021
Weekly UI Patterns - Good Defaults
UI Patterns
May 20, 2021
Welcome to Weekly UI Patterns
UI Patterns
May 20, 2021
Get a UI design pattern every week: Subscription Confirmed
UI Patterns
May 20, 2021
Get a UI design pattern every week: Please Confirm Subscription