5 Tips for Designing UI Cards

In UI design, cards are UI components or elements that contains a specific content and usually a CTA (call-to-action) button at its bottom. Typically, the goal of UI cards is to emphasize a single, specific subject to users with the aim to make the users take action for the subject. Sometimes, cards are just a more concise and organized way to present information, regardless if it encourages its users to take an action or not.

Some examples where UI cards can be applied are ads (such as those in Google ads), job openings and profile displays in social media platforms.

Design-wise, UI cards typically have an image, text and a button for the user to take action on it. Of course, how you’ll make a card mainly depends on the purpose, but usually, these three elements are included in a card.

If you’re new to creating UI cards or you’re struggling with it, consider these 5 tips the next time you build your cards.

5 Tips for Designing UI Cards

1) Focus on a single topic only

Cards are made to deliver a single topic in a concise and efficient manner. That being said, think about what you want to convey before you begin on designing your card.

Are you designing for ads? Are you selling something? Are you encouraging your users to go to a hotel or vacation spot? Is the card intended as profile display?

Whatever it is, know what topic or idea you want to convey and stick to it. Do not attempt to convey two or more ideas (depending on the situation, you can just new cards for those ideas).

2) Use imagery wisely

Most of the time, cards would often rely on imagery. Why? Simply because visuals attract our eyes. But at the same time, cards in themselves are not visually attractive. This explains why real-life cards such as business cards are well-designed even if they are just small piece of paper that most of us would not really care about it after, say, we’ve got the details that we need from it.

The same logic applies for UI cards – imagery enhances their visuals, making them more eye-catchy. But be wise in using imagery and be sure to use the most relevant image that you can find. You should also consider how your image will scale as they may scale differently when viewed on different platforms.

3) Use shadows to easily see the card

Most UI cards have a drop shadow in them. That’s because the drop shadow make the cards more visible than if it does not have any shadow even if the website’s or app’s background color is slightly different than the card’s color.

Aside from making the cards more visible, a drop shadow also indicates that the card itself is clickable. In a way, the drop shadow can also enhance the card’s CTA if you have a CTA for that card.

4) Use simple typography

As a general rule, sans serif fonts work best for cards because they are simple and easy to read.

While cards must be visually well-designed, when it comes to its text, simple is better. This is because your users are more interested in simply reading the card’s text to know what it’s all about. If you use more aesthetic fonts, it may cost the text its readability.

Don’t worry about the visuals; let your imagery do the work for it. When it comes to text, simplicity is almost always better! So, use simple typography for your cards.

5) Use negative space

When laying out the card’s elements such as its image, text and button, be sure to space them properly – in other words, feel free to give your card some negative spaces. If properly used, negative spaces make the card look relaxed and clean, making it pleasing to the eyes.

Also, to that regard, when writing down your card’s text, make sure to summarize it as much as possible. Few but key details is the key to writing texts for these cards.

6) Use “dividers” or other indicative elements when separating cards

If you are using two or more cards, be sure to divide them properly. One way to do them is by literally separating the cards apart to make them distinguishable.

However, there are times when you need to stack up your cards and make it look like they’re one even when they’re not. One example of this are the cards that you can see on social media platforms. Their platform consist of different cards to indicate different content, but because they act as one page, they need to be as close as possible to each other. That being said, how can you separate them?

One typical example is to simply leave a very minimal space between two cards. Most of the time, your page’s background color is different than of your cards’, therefore, if you leave a very little space between two cards, it will appear as if they are separated by a line.

Of course, how you’ll separate your cards depend again on the situation at hand, but however you do it, be sure that it’s indicative so that viewers can know that they are viewing separate types of content.