What is and how to design a Card – | Blog

A Card is a UI component known as a card that serves as an entry point to give access to more detailed information.

The Cards or cards show a type of content made up of different elements whose size and actions can be very varied.

What is a Card as a component of a user interface

A card is a component with a UI design pattern () that groups related information into a resizable container that visually resembles a card.

Cards were created as a modular interface pattern that works well on a wide variety of screens and resolutions. Its main objective is to display enough information to get the user to touch or click it to see more details. and continue consuming content.

UX fundamentals and UI properties of a Card

Cards can include different types of information: an image, a title, a short summary, a timestamp, a primary and secondary button, etc.

Cards provide context and an entry point to information, more robust views, and can vary widely in content and quantity. Cards can contain a single set of data. It is better not to overload it with irrelevant or superfluous information.

Cards have 4 key properties:

• They are used to group information, for example, an article from a news website or blog, a product in an Ecommerce or a publication or post in a social network.
• They include a summary and links to additional details or more information. Basically, a Card is a link or input link to obtain more details of the content on another page of the digital product.
• They resemble physical cards. Cards use a border around the grouped content and the background color within the card that differs from the background color of the underlying canvas. These visual design elements create a strong sense that the different pieces of information contained within the border are grouped together.
• Cards allow for flexible layouts. As a general rule, their height can vary, but their width is usually fixed.

Basic UI design of a Card

The designs of a Card at the level can be very varied depending on its objective, result page, digital product, etc.

What is commonly found as Card, includes the following elements:

• Thumbnail image. It is usually an image that contextualizes the content to which the Card itself gives access.
• Header or title. It is the text that identifies the content of the Card itself, such as: the name or title of a photo album or the headline of an article.
• Description. It is a supporting text as a brief description or summary.
• Calls to action. They are basically buttons or CTAs.
• Caption. This is usually text, such as the category the article belongs to, a date, etc.
• Icons. Cards can also include iconography to execute actions.

Some UI tips for designing effective Cards are:

• Use relevant images.
• Use a good visual hierarchy.
• Use limited content.
• Avoid using links in descriptive texts.
• The actions must be differentiated.
• Use rounded corners for the border.
• Use a light border or soft shadow.
• Do not overload the Card with information.

Examples of Card designs applied in interfaces

Below are some screenshots of interfaces of different digital products in which very varied Cards are used to categorize and generate the content architecture.

1. Twitter

Twitter is a service that allows groups of friends, family and co-workers to communicate and stay in touch through quick and frequent messages. People post Tweets, which can contain photos, videos, links, and text.

2. Pinterest

Pinterest is a social network based on visual content (images and videos). One of its main characteristics is the proactivity of users, since the network is designed to inspire and motivate them when carrying out their lifestyle projects.

3. Justin Mind

Justinmind is a solution for prototyping any web or mobile app you want. You can define websites and apps for web, iOS, and Android with this intuitive drag-and-drop interface.

4. Google

Google Search is a fully automated search engine that uses software programs called “web crawlers” to periodically scan the web for pages to add to its index.

5. Dribble

Dribbble is an online community for showcasing user-made artwork. It works as a self-promotion platform for jobs in graphic design, web design, illustration, photography, and other creative fields.

6. AliExpress

AliExpress is an online sales platform founded in 2010 by small businesses from China and beyond that offers products for international buyers. It is owned by Alibaba Group.

credits