How Cards Take the UI Design to the Next Level

When we talk about the UI components, the forms, buttons, icons may be more familiar with the people. In recent years, there is a UI component that is largely used by the designers and becomes the trend which is the “Card”. The card in UI is “a snapshot-like display intended to encourage users to click or tap to view more details.” In this post, I will explain why more and more cards are used in the UI design. In order to let you incorporate the cards into your design, I will also introduce how to create the card step by step by using the Sketch. Follow me and let’s begin!

A “card” is a UI design pattern that groups related information in a flexible-size container visually resembling a playing card. — Nielsen Norman Group

Card UI Shots in Dribbble.

To better understand the cards, firstly we need to know what contains a card. The cards act as the container and to group the information and normally it is composed of the media/image, primary text, supporting text, and actions.

The Structure of a card — Dorjan Vulaj

Why Cards?

• Cards are easy to design and be useful to group the information.
• Cards are better to use for users to browse the information and deemphasize the ranking of content.
• The layout of the cards is flexible which allows more possibilities in design and works well with the contents.
• Users are familiar with the card display and the cards also serve as the entry point for more detailed information and better engagement.

The appearances of the cards are various and here I will use to sketch to explain one type of card design that is greatly used in UI design and easy to mater.

How to Design a Card?

• Text size, weight, and color
• Background color
• Decoration
• Shadow

Text

The hierarchy of the text is decided by the text size and weight, therefore, the size of the title and body should be at least 4px differences. The weight of the title can go with the bold or heavy and the key point is to make the title stand out.

Background color

Compared to use a single color, try to use the gradient to create the depth of the background and eye-catching. The thing is to be careful of the transitions between the colors. In the Sketch, after you decide the color, you could click the fills and select the type of the gradient.

Decoration

Mask With Selected Shape

The decoration here means you could adding some shapes on top of the color background to make create the texture feeling and increase the visual appealing. Here are the tips: 1. create the circle using the white color; 2. use the gradient effect; 3. change the opacity until it immerses into the background color; 3. select the background color and the shapes then use the “mask” function.

Shadow

Besides the stroke, the shadow effect is widely used in the card. Here you could see the difference between using the shadow effect the sketch provides and another approach with a better appearance. Here are the steps:

Adjust the “Gaussian Blur”

1. Command (Mac) + D to duplicate the background color;
2. Move this copy layer behind the background and use shift + ↓ (each time is 10px)
3. Downscale to 80% compared to original;
4. Adjust the “Gaussian Blur” to 8 -12;
5. Change the opacity; (if the whole card is on top of another colored background, then adjust the color in this copy layer to a bit darker based on the cards on.)

The best practice to familiarize yourself with using the cards is to incorporate it into your design and you could try more colors and by adding different UI elements on top of it.

Photo credits: Manoj Rajput

Thank you for reading and hit me up if you want to collaborate, talk about product design, or just want to say hello, feel free to let me know.