Rustam K. Lead Designer

7 tips on how to improve card interface in web design

If you look through the web design trends over the past few years, you can see that card design elements on web pages appeared quite a long time ago. This is primarily due to the development of adaptive design and social media, for which it was necessary to come up with a simple and universal method of displaying data.

Interface cards in web design

Such cards are a brief excerpt with some information and the ability to generate interest to proceed to read it in full. This element of the user interface may include: media objects (often images), text announcement, links or buttons, as well as titles and subheadings.

The design of cards should be approached seriously, because you have little room to maneuver, and much of it depends on this component. If you don't design them conveniently and efficiently enough, it will have a negative impact on the final user experience. Today I share with you this article, which presents a selection of useful tips on how to make card design better.

1. Lists and tables

Let's start a little bit from afar. There are situations where cards shouldn't be used at all. For example, if you have homogeneous content with content smaller than a few lines, it looks better designed as a list. Viewing such information will then be much faster.

Similarly, when you have a large set of data with the same characteristics, to which it would be nice to add sorting or filtering, then a more effective solution would be the use of tables.

Sometimes this kind of presentation of information can be added as an alternative. Surely in online stores you've encountered the function of switching the catalog of products in the form of cards or a list.

2. One idea one card

Do not use this element for the output of multiple subjects, it's better to present each of them as a separate card.

3. No unnecessary links

It is not recommended to add links into the brief text description, the link to the card should be only in the form of a button/picture or accessed. Links on their own do not look nice, and can direct the visitor to the wrong place.

4. Get rid of frames

Sometimes, beginner designers allocate each item a frame to represent them as separate objects. You don't have to do that at all. It just creates extra "visual noise" and prevents you from concentrating on the contents of the individual card.

5. Visual Hierarchy

The content of a card should be easy to read and show the user at a glance which element is located where and how important it is: title, sub-title, button, etc. This is done by different techniques of typography - different font sizes, colors, background, etc.

6. Distinguish Between Multiple actions

If you have several actions in your card UI for the elements, it's desirable to separate them somehow.

7. Limit announcement

Add a certain limit for text content - 20 words, 50 characters, 2 sentences, etc. Compact cards are better received in the interface. But it is important to give the user enough information so he can understand if he should click on the link or not.

Of course, here we considered only a small part of nuances, which could be highlighted in the design of the interface cards, and there are many other important details. This post can be considered a "first acquaintance" with this question.