Home > User Experience > Ultimate guide for designing UI cards | by Vikalp Kaushik | Jul, 2021

Ultimate guide for designing UI cards | by Vikalp Kaushik | Jul, 2021

Ultimate guide for designing UI cards | by Vikalp Kaushik | Jul, 2021


Let’s look at the real-word UI card examples

It’s essential to keep your blog cards simple. They should have a consistent, repeated structure, but use different image and font sizes to represent the most important to least important elements of the card to make them more understandable for those reading them.

Designed by Diseno Constructivo & Webpixels

They highlight the featured image and title as the most prominent elements. Then, they also included quotes, which not only help users decide whether or not the article or posted content is right for them, but can entice them to click through if they were on the fence.

A product card is an important thing that helps you convert a visitor to a customer. An excellent product card should attract attention, arouse the desire to get the product, work out questions and disapproval, motivate people to buy, and also promote your website in search results.

Designed by Webpixels

The name of the product should be placed in the most noticeable place so that the visitor will immediately understand that he has come to the right place.

A good image will tell the customer over a thousand words, so you need a high-quality image to have the perfect product card.

If a product has a special offer, indicate not only the promotional price in the price block but also the regular price and how much money the customer will save.

Profile card has become a nail user interface widget in a website template. With personal branding becoming important more than ever due to the shift of interest towards the online domain, it’s time to move away from those boring hyperlinks pointing to your online page.

Designed by Neelesh Chaudhary

Just like every card, a profile card is a UI component that holds pieces of information vital to what it represents. It’s yourself you want to sell to your audience (not literally) to achieve your objective.

Make sure to include only the necessary information (e.g., image, name, profession) and let your “about” page to have the remaining details to complete your profile.

This is in terms of design and layout whereas both interior and exterior of the card does not damage the look and theme of the website. Hierarchy is the key.

Dashboard designs can differ widely. But all dashboards are made of cards. Depending on the type of dashboard, each card might include profile info, notifications, quick links or a navigation design element, key data, graphs and data tables. Make sure you use the correct type of card for each element.

Designed by Simmmple

Dashboard card allows the user to decide which data they want to focus on. Easily understood UI which allows the user to control exactly which data needs to be front and center in the dashboard.

Only include the most relevant information and for your users, at least in the initial screen. When you have datasets that are easier to understand when seen together, find ways of presenting them in a single card. But be careful not to confuse the user.

Kanban task cards seem like a pretty straightforward thing — take a sticky note, write what you need to do and put it on the wall. These cards must contain the number of units that need action. They also likely contain a variety of other information that clearly conveys what must be done.

Designed by Neelesh Chaudhary

The information contained on the card includes the name of the task and important details like what type of task it is and who owns it. Kanban cards are placed under status categories. The most basic status categories are “To Do”, “In Progress”, and “Complete”, but statuses may vary project to project.

The card structure is best for small changes like adding or deleting tasks rather than changing big picture ideas like your overall goals.



Source link