4 popular types of cards in UI design
Credit: Hai Thắng (UI Design)
Card is a type of component we often see in every website, and every application because of the simplicity and convenience it brings. A card often briefly summarizes the information of a record that we want to convey to the user, instead of using a tabular form.
The card UI design is a small tag component, with images and text. The card is the first point that users access to the information we want to convey, a stimulating place for users to click to see details. Compared with traditional interface design, the advantage of simplicity and visualization makes the user experience more friendly.
Card UI design has been around for a long time, but to increase user experience, card design has become the mainstream in modern UI design and has been an indispensable component of a website or app UI. Especially when the popularity of Google’s Material design, card design is even more popular.
To have a nice and clear card separate from the background you need to have a border around the tag, the elements inside depend on what you want to convey through the card, but the following elements you will usually see in the card.
The content displayed on a card is about a single topic, must be easy for users to quickly scan through important information and take action. Elements such as image text should be hierarchical. Each card is made up of content blocks. All of the blocks, as a whole, are related to a single subject or destination. Content can receive different levels of emphasis, depending on its level of hierarchy.
So why use cards in design?
- In the card, we have the most distilled information of a record, so when using the card, the user will focus on the important information.
- Easy for responsive on website and mobile.
- Many websites and applications now use cards to describe information, so users have been taught to recognize it, so it is easier to absorb information.
- Cards help keep the interface neat and enhance the minimalism in the design.
Type of card in UI desgin
1. Blog posts
A blog posts card is a component that displays your posts on your blog page. It includes many components such as creation date and time, title, content, illustrations, and article type… To create a beautiful blog card, we need to rely on many factors such as: is a clear layout, easy understanding, and reasonable division of components.
You can see with the blog posts card we have common components like media, main title, short description, and CTA (call to action). You can customize common components to your design that you need, like changing the button “Read more” to “Save post” or adding more buttons “Share”, “Like”,…
2. Product card
Product card is widely used in websites and e-commerce applications. It aims to attract buyers’ interest in products. Using visual hierarchy makes product cards more efficient, product images are usually larger than the rest of the content, followed by the product and price.
The main purpose of the product card is to provide preliminary information about products for buyers, depending on the product you want to sell, you need to consider the information when designing.
In addition to the title of products, interesting images, and CTA button (Add to cart, Buy now) your product card should have a short description, parameters of the product, the number of purchases, and rating.
The image is a very important factor because it is the first element that attracts the user’s eyes when viewing our products, so you need to make the image as clear and true as possible. You also should not use too many fonts and the content is not too much because users will be lazy to read, so you only need to describe the most prominent features of the product for the product card.
3. Reviews
With the rating function, we often see the star rating form (1 to 5 star) is the most popular. Based on the quality of products and services, users rate them from 1 to 5 stars. This evaluation method is very suitable to use to evaluate the level of products or services. Many e-commerce sites, movie reviews, and room rentals are using this rating for their system.
But in fact, users are not like we think they do not care about this evaluation. If they have a good experience, they give 5 stars, if they don’t like them give 1 star. Since then, the developers used to rate like or dislike. In addition, we have types of reviews that describe their experience with the product or service.
From there, we should design cards suitable for each type of assessment.
In the review cards, we will see a lot of different types. Aggregate all the reviews and calculate the average number of stars. Or a display of each user’s review, including the number of stars rated or like dislike and note information about their experience with the product or service.
4. Dashboards card
Dashboards help convey important information quickly to system administrators. The main purpose of the dashboards card is to present the current data and resources and display their status, helping the administrator to quickly and proactively work on their system.
For each important information item, each information will have 1 card to describe, depending on the information we want to describe, we choose the most optimal chart design. Column and line charts are probably the most used, in addition, we can also come across pie charts.
Commonly needed components of a dashboard card: name of information item, current data, a chart showing the current volatility, % change over. Use visual hierarchy, and color to help users distinguish easily.
Summary
Cards in website and application design are countless, but the above 4 types are the most common. Normally, it will be designed like the demo samples above, but in reality when designing we also need to look at the requirements of the project and arrange the information so that it is most reasonable.
Hope this was useful for you. Thanks for reading through.
