How to Design good UI Cards.

What are cards?

Cards are UI components in the shape of a box that holds contents and actions about a single object. The card serves as an overview and an entry point for more detailed information.

What does a card look like?

Although card layouts depend on the object the card is giving details about, I’ll be talking about some characteristic components that cards come with, viz:

• Container: A card container is used to hold card contents. This is where we apply the drop shadow effect to give the card an elevated look.
• Media: This can be anything between graphics and photos to show the user what the card is talking about.
• Thumbnail: This is mostly used for profiles images. It is used to display avatars, icons, or logos.
• Header Text: This is used to indicate title. It could be the name of a photo album or a song title.
• Subheader Text: This is used to complement the Header text. It could be the name of the writer or a location.
• Subtitle Text: A subtitle is a summary of what the card is all about.
• Actions: These are actions that are associated with the card most often, we used buttons and cards for actions.

How do you design good Cards?

Make every card meaningful:

• Use well-detailed layouts.
• Keep everything on the card aligned.
• Make use of visual hierarchy in your typography.
• A card on mobile should not be scrollable.

Use transformative cards:

• Make cards that transform to reveal more information: This comes in handy when you have to keep the text in your card short to maintain aesthetic.

Keep your text short:?

• Prioritize using short but attention catching texts (50–60 characters is a recommended line length according to the “Typographie,” E. Ruder).

Add Shadows:?

• Use shadows to indicate a card container?and adding an elevated look to the card

Thank you for reading this through to the end. You can reach out to me via Twitter, Instagram. I also host my work on behance.