perfectowebWeb design & programming studio
Blog Design

8 Rules for Perfect Card Design

Here are 8 recommendations to help you create perfect cards. 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.

 

Rule 1: Clear block structure

Cards are digital analogues of physical cards featuring information and control panel. The example below consists of visual description(media), title, supporting text and control buttons.

Clear block structure
 

Rule 2: Shades and outlines

Use shades and outlines to make the card stand out against the background and other content.

Shades and outlines
 

Rule 3: Choose appealing background

Card background should be appealing and not distracting. Cards in light colors against dark background look bright and effective, and in most cases, there is no need for shades and outlines.

Choose appealing background
 

Rule 4: Font size and thickness

Users prefer reading more in small font size. Font size and style affect significantly interface convenience and aesthetics.

In the example below the title is emphasized, while the card description is in smaller and thinner font. This allows the user to get the point of the card at once.

Font size and thickness
 

Rule 5: Contrast

Cards are the smallest of the elements; thus, contrast is very important as it helps to prioritize.

Contrast
 

Rule 6: Buttons

You can use different types of buttons on your cards – usual buttons, text buttons, etc. In vertical cards the buttons can be placed in the center, in the bottom, or on the right or left side. Choose the location that best suits your design.

Buttons
 

Rule 7: Indents and intervals

Use indents between emphasized elements. Leave enough space while grouping information on the card. The example below is relevant for most cases. Instead of the «X» put the numbers you need to calculate the indent size.

Indents and intervals
 

Rule 8: Focus and cursor pointing

To make your design interactive, use darker shades on cursor pointing or change certain elements in the card. There are no ready answers here, as everything will depend on your UI.

 Focus and cursor pointing
 

Best regards
Perfecto Web

Like

Like this? Subscribe!

8 Rules for Perfect Card Design
Share this article
Subscripition
Subscribe and get new posts of web technologies
Comments: 0
Views: 829
Published: 15 Jul 2019

Choose language