8 rules for a perfect card design

The Ultimate Guide to Better Cards.

Cards are these little UI components we see everywhere and the reason is simple, they take really little space and show you enough information and usually 1–2 options you can choose from.

❓Why cards:
1⃣ Cards are here to stay, because of their simple design and good usability cards will continue to increase in popularity.
2⃣ They serve as entry points to more detailed information.
3⃣ Cards are also visually pleasing since on most cards the image of the card is what gives style into it.
4⃣ They are already responsive for web and mobile view.
5⃣ No Icebreaking, Cards are everywhere so users are really familiar with them.
6⃣ They keep the interface organized and they are really minimalistic.

1. Understand the structure

Cards represent physical cards. They act as the container, grouping the information inside.

2. Shadows/Stroke

A shadow or stroke helps to indicate a card, what you decide to go with depends on the style of the UI.

3. Background

The good thing about cards is that you can play around with the background as long as you don’t create a lot of contrast.

4. Text size and weight

Users read more when the font is smaller, and scan more when the font is larger. Wrong font weights used incorrectly can impact usability and aesthetics.

5. Contrast

Cards are really minimal, so contrast plays a major role in dividing the information and giving priorities.

6. Buttons

You can use normal buttons, text buttons or icons, on vertical cards buttons, are usually placed on the bottom, on horizontal cards on the right or bottom.

7.Spacing & Padding

Include appropriate padding between focusable elements also enough spacing to group the information inside.

8.Focus and hover.

To make the cards more noticeable on hover a darker shadow or a small elevation is usually used.

“Writing articles for people who are in a rush, I value your time, and probably like me, you like reading on the go. Keeping it short so you don’t have to skip any paragraph.”

❓Do you have any questions? Let me know:
Instagram — Linkedin — Behance — Dribbble