8 rules to help you design a better card user interface

Learn how to build a perfect card UI with these guidelines

Andrew Coyle
Jun 25 · 4 min read

Cards have exploded in popularity over the last decade due to the proliferation of online media and mobile apps. Unfortunately, user experience issues arise regularly from poor card design.

Elements of a card component

A card is a user interface component that provides a summary and an entry point to additional information. Elements of a card component include media objects, titles, subheadings, metadata, summary text, and actions.

This article presents guidelines to help you design better cards. Let’s get started!


1. Limit content

Limit summary content to under 100 characters or no more than two short sentences. The card should provide just enough information to help a user determine if they should further engage.


2. Differentiate actions

Cards that include multiple actions should be visually differentiated. In the above example, I make the subsequent action less prominent by giving it a link style instead of a button style.


3. Add visual hierarchy

Content should also have a visual hierarchy. To learn more about typographic hierarchy read: 5 simple ways to improve typography.


4. Resist excessive borders

It’s common for new designers to separate content with borders as a way to define distinct groups. These borders cause unnecessary visual noise that detracts from the content.


5. Limit links

Don’t include inline links. A card should be a singular link or provide a limited set of actions.


6. One idea per card

Don’t present multiple ideas in one card. Instead, give each idea in its own card.


7. Know when to use a list

Use a list instead of a card for homogeneous content that is less than a few lines to enable faster scanning.


8. Know when to use a table

Use a table instead of a card for sets of content containing many variables of the same kind.


Additional considerations

Please keep in mind there are no right or wrong answers, just some more right than others. I hope the guidelines I presented in this article help you design better cards!

But before I let you go, here are a few more considerations:

Card orientation

Cards can have a vertical or horizontal orientation. They can include a media object or just text arranged in multiple ways.


Differentiate a card from its background with a border, shadow, or color/value difference.

Construct cards with a border, shadow, or different background from the one it rests on to create its grouping. If you combine content and whitespace effectively, you might not even need any of these visual aids.


Consider hover actions

Including action(s) on a hover event can be an effective way to reduce the size of the card and improve appearances but keep in mind it won’t work on touch displays.


It takes hours of research and attention to create content like this article. Please give it a few claps to motivate me to keep writing. It’s free for you but means a lot to me.

Follow NextUX for more and feel free to reach out to me on Twitter if you have specific questions.

NextUX

The future of product iteration

Sign up for NextUX from NextUX

Our latest articles on design and product development

Create a free Medium account to get NextUX in your inbox.

Andrew Coyle

Written by

Co-founder (YC S19) startup — Formerly @Google @Flexport @Intuit

NextUX

NextUX

Companies that survive this decade will not only have superior data — they will have a superior user experience. https://nextuxdesign.com/

Andrew Coyle

Written by

Co-founder (YC S19) startup — Formerly @Google @Flexport @Intuit

NextUX

NextUX

Companies that survive this decade will not only have superior data — they will have a superior user experience. https://nextuxdesign.com/

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app