Web and mobile apps are moving away from pages towards completely personalized experiences. These new experiences are built on an aggregation of many individual pieces of content. The way this content is now being presented is in the form of cards. The card-based interaction model is spreading pretty widely, and you can see digital cards almost everywhere — from news sites to food delivery apps.
What Are Cards?
Cards are those little rectangles full of inclusive images and text that serve as entry points to more detailed information. The word ‘cards’ is an excellent metaphor since they look like real-world tangible cards in user interfaces.
Before web and mobile apps, cards were always all around us — business cards, baseball cards, and even sticky notes. Thus, it is more intuitive for us to know that these cards are representing piece of content just like in real life.
A baseball card is a good example from real-life objects: the basic information you needed to know about a player is contained on both sides of a small card. (Image credit: oldbaseballcards)
The Advantages Of Cards
Digital cards can be applied to a variety of contexts, implemented correctly, they can improve the user experience aspect of the app. Here are some examples to illustrate why cards can be good for your UI:
Cards organize information into chunks of content, and users appreciate chunked content because it aids for scannability: it helps avoid walls of text, which can appear intimidating or time-consuming and allows users to dive deep into their interests quicker. Cards divide content into meaningful sections, similar to the way text paragraphs group sentences into distinct sections. They can gather various pieces of information to form one coherent piece of content.
Cards are neat little containers for information.(Image credit: Google)
EASY TO DIGEST
Cards are a great tool for communicating quick stories. Placing content in cards makes it digestible for users. Users can easily access the content that they are interested in, and this empowers users to engage in any way they want.
Card-based design usually heavily relies on visuals. Actually, going heavy on images is a strength of card-based design. Studies confirm that images elevate site and app design, because images draw the user’s eye efficiently and immediately. The emphasis on using images makes card-based design more attractive to the users.
Cards can tease users with visual information. (Image credit: Google)
GOOD FOR VARYING SCREEN SIZES
The most important thing about cards is that they are almost infinitely manipulatable. They are a good choice for responsive design since cards act as content containers that easily scale up or down. This feature allows us to create a single aesthetic across multiple devices and to establish a consistent experience regardless of the device.
Cards are perfect for mobile devices and various screen sizes. (Image credit: Google)
DESIGNED FOR THUMBS
Cards are made for thumbs. Cards are a style that seem just made for apps. Digital cards behave in the same way as physical cards. Users like the simplicity of the cards and intuitively understand the physics of turning a card over for more information or swiping for the next chunk of information.
Best Card Design Examples
Card-style design lies at the intersection of design for desktops and mobile devices, bridging the gap between interaction and usability. But in order to be successful, card-based interface requires both clean aesthetics and direct user engagement with a certain action.
Cards can appear in a stream, creating a timeline of events. For example, Facebook uses them to present a quick overview of recent events in the news feed. Facebook’s news feed is an endless stream, whereas cards are individual. The point of cards here is disaggregation. They’re taking things out of infinite stream, packetizing them, and making them sharable. This action also encourages users to share the content on social media.
Facebook is a great example of content-driven card design.
Cards allow relevant content to naturally reveal itself, making possible for users to dive deep into their interests. Take a look at Behance, an online creative community which showcases creative work. Card-based design is the most suitable way for presenting such type of content.
Behance uses a card layout for maintaining an intuitive user interface.
Tinder is a great example of how utilizing discovery mechanism to present the next option has driven the app to emerge as one of the most popular mobile apps. Tinder has a terrifically simple card swipe interface — you swipe to the left if you’re not interested, to the right if you are. This card-swiping mechanism is curiously addictive, because every single swipe is gathering information — cards connect with users and offer the best possible options based on the made decisions.
Image credit: Tinder.
Cards are easily categorized for a list of tasks. The Trello task management app does a great job of using a card-style interface to create a dashboard for users, where each card represents a separate task.
A Trello board is a canvas filled with cards.
Since cards are content containers, they’re perfect for representing actions. Consider the AirDrop service on Apple devices. When you have an incoming request for data transfer, a card pops-up with a notification to accept or decline the transfer. Apple’s screenshots focus on photos, but developers can put anything in card — coupons, songs or web links.
Image credit: Apple
Сard design offers fantastic precision when it comes to organizing content from varying sources. Using cards, you can organize information collections into logical groups, aggregate your content and show it context specific. A selective content from many different content providers can be easily gathered together and redistributed as a “deck” of related information.
Image credit: Material design.
CARD-BASED DESIGN LANGUAGE
In 2010, Microsoft introduced its Metro design language. A key design principle is better to focus on the content of applications, which is achieved by using flat elements, relying more on typography and cards. A card for Metro design is more than just a design element; it’s an essential functional part which provides an easy interaction.
Microsoft Windows 8.
Creating Card In More Detail
CARDS AND SIMPLICITY
When you think about cards, simplicity should be the number one thing to keep in mind. A great advice from Carrie Cousins is “one piece of information per card”: card can contain multiple elements within a design, but each should focus on only one bit of information or content. This gives users the opportunity to select the parts of your content they want to consume or share.
ReaLync carries cards over to all of their listings in order to show the most important information about places. Credit: piperlawson.
CARDS AND RESPONSIVE DESIGN
We all know how important it is to make your app or site look and work equally well across all devices. When we are designing for different screens, we should take full advantage of target environment and using cards we can adjust content quickly and easily depending on the size of the screen. Cards offer excellent compatibility with responsive frameworks — cards grids can restructure themselves to fit any breakpoint or screen size.
What’s nice about a digital card is that it can be manipulated in a variety of ways. For example, on mobile devices, cards can be stacked vertically, like an activity stream on a phone:
The Verge on mobile viewport.
While for larger screens they can fall into a grid:
The Verge on desktop screen.
Cards can be a fixed or variable height: You can set a fixed-width with variable height for your cards based on the device type.
Image credit: Intercom.
CARDS AND TYPOGRAPHY
Everything about a card design should be easy to read and understand. You should design for maximum readability:
Opt for simple typefaces and easy to read color schemes (text is most legible when placed on a solid color background with a sufficient contrast ratio to the text).
Try to limit the number of typefaces as well. For most card projects a single typeface is enough.
Image credit: Material Design.
Most of you probably have a better understanding why card-style design is so popular and will continue to increase in popularity. This trend won’t end anytime soon. Cards are here to stay and continue to be an essential part of app design.
What makes cards work is good design and great usability. Cards are more than just a look, they are one of the most flexible layout formats for creating rich content experiences. Today, people seek out information quickly, and cards serve it up well, regardless of device.