Simple Design Tips for Crafting Better UI Cards

Simple Design Tips for Crafting Better UI Cards

22 Jun 2020

Cards are box containers that hold pieces of information. Recently this simple UI component became an essential part of the web and mobile design - every second app or website available on the market today uses cards. Cards make both content and features more discoverable, and they look good on any screen size - from the large TV screen to the small screen of a mobile device.

In this article, we will review the concept of cards and share some practical tips for designers.

What exactly is the card?

Card is a UI component that contains content and actions about a single subject. A card can contain several different elements, but they all should be about a single subject. Typically, the card serves as an overview and an entry point for more detailed information.

When it comes to visual design, cards can have a lot of different layouts and while there are no hard and fast rules, a typical card layout features the following elements:

  • Imagery. Images or videos that scale to fit the top area of a container.
  • Title
  • Short summary. A synopsis of the unit.
  • Actions (optional). Actions associated with the unit.
Example of card layout.

Principles of UI card design

Well-designed cards make it easier for users to scan the available information. Good card design is:

  • Efficient. Avoid overloading cards with extraneous information or actions. Each card should contain only essential information and actions.
  • Meaningful. Each card should contain information that helps users make a decision.
  • Clear. The layout of a card affects how it is perceived. Each card is made up of content blocks (elements like text and images). Content blocks should be placed on a card in a way that clearly indicates hierarchy.
  • Independent. A card should stand alone, without relying on other cards for context. A card cannot divide into multiple cards.
  • Transformative. Cards can transform to reveal additional content.
  • Responsive. Cards can resize to fit into the available space.

When to use cards

Cards are better suited for browsing the information rather than for search. When you design a layout with cards, the key idea is to allow users to quickly digest large portions of content and dive deep into their interests.

Cards aren't' the right choice when users need to compare multiple options (for example, when users need to compare a few products on an eCommerce page). Since cards provide only a limited number of content, they make the process of comparing harder for users. It's better to use a list or grid view for that.

Tips for card design

Use relevant imagery

Card-based design often relies heavily on visuals (images or videos) because visuals are the first thing users notice when they scan a card. It's vital to select a relevant image - the one that allows you to communicate the meaning of a unit in a glance. Note that graphics are going to scale, so be sure to preview them on all platforms you design for.

Prioritize textual information

Anything that needs to be read by a user should be included as a text. Cards should present a summary of information about a particular unit. Don't use a card to display long texts. Instead, provide a short overview and ensure that they encourage users to explore more. Strive to have 50–60 characters for a brief summary (50–60 characters is a recommended line length according to the "Typographie," E. Ruder).

Use simple typography for content

Generally, it's recommended to use sans-serif fonts for text in card because such text looks equally good on large and small screens.

Use shadows to indicate the card container

UI elements should always communicate their meanings. Users should know how to interact with a particular UI element just by looking at it. And when it comes to card design, a shadow effect helps indicate a card - a slight drop shadow as a signifier that the entire card is clickable.

A slight drop of a shadow helps to indicate the card UI element.

If you plan to show a collection of cards, consider using the same visual properties for all cards in the collection.

3D interface animation for cards by Gleb Kuznetsov✈

Clearly indicate interactive elements within a card

If the UI card contains interactive elements, it's vital to indicate such elements clearly. Material Design recommends using visual dividers to separate individual regions in cards. Dividers can be either visible (like a 1-pixel line that divides the sections in the example below).

Visual divider (1) is used to separate static content and interactive elements. Image by Material Design

Or they can be created using whitespace (Gestalt law of proximity states that items placed near each other are perceived as grouped). Use whitespace around each block to make it easier for users to separate different sections.

Whitespace is used to separate the sections with actions 'Accept' and 'Decline' actions from the static content. Doctor Appointments App by Alex Arutuynov 🤘

Avoid using scrolling within a card on mobile

Card content can be taller than the maximum available screen space. In this case, card content should not be scrolled. Otherwise, you risk creating unpredictable scrolling behavior (scrolling within scrolling).

Avoid scrolling withing scrolling. Image by Material Design

Use parent-to-child transition to reveal more information

As was mentioned above, cards are transformable UI components - they can transform to reveal additional content. The card should expand to fill the screen with additional information. When it comes to animated transitions, it's recommended to avoid fancy animated effects such as flip over such effect demands too much attention and quickly becomes annoying when users see such effect regularly.

Avoid flip card effects, especially for large-sized cards. Flip Card by Samuel Couto

It's better to rely on subtle effects such as zoom-in expanding.

Music Playlist App Interaction by Ehsan Rahimi

Support familiar gestures

If you plan to use cards in mobile design, consider supporting tap and swipe gestures. A tap can be used to change the state of a card (i.e., expand the card to go from the preview state to a detailed state).

3D Car Presentation by Cuberto

Swipe can be used to navigate between cards in a collection.

Swiggy Daily by Saptarshi Prakash
Card Swipe Interaction by Minh Pham ✪

Swipe can also be used to dismiss the card (i.e. for cards that used as notifications).

Card swipe actions by Vishnu Prasad

References

Get our newsletter