Member-only story
How to design better cards
Cards seem simple, but making them requires thinking about your content.
Sometimes, the content you leave until last can give you the most issues.
That’s something that I found out when I started working more with cards. They’re often easy to leave as blocks of lorem ipsum until you’re ready with the content, but doing so can result in many issues. More importantly, it’s often disastrous to copy card designs from other websites. That’s something that I found out when I designed pages that featured dozens of cards at once. In those cases, spending the time to make sure the cards were right was a crucial part of the design process.
Here’s how I got started with that.
Defining a “Card”
A “Card,” when it comes to design, can come in many shapes and sizes. The official definition of cards is “Areas where content and actions are about a single subject,” but that can take many forms:
- Individual search results, which describe different products
- Clickable ‘index cards’ that are a preview of featured content
- Images with text that hyperlink to a store/product page
- A preview headline and text of a blog/article post
- etc.
If you were to group images and text through Gestalt principles on a website, putting a border and a background behind it essentially makes it a card.
As a result, it’s essential to consider what text to group (or not group) into cards. After all, it’s possible that what you choose doesn’t just affect one element but all of the elements on the page: after all, all search results should follow the same format.
Here are three steps that helped me make better cards.
