Booklet

author

Lisa Martinovska

Design

User interface: The anatomy of Cards

design

Design

|

User interface: The anatomy of Cards

A card can be a Single component, but it usually contains a header, subheader, content and some cta.

The base
For the base, use some sort of shadow or light border, to highlight the separation between the card and the background.
Light blue
Shadow.
Don't just
Go black.

Image
Image should clearly reflect the content of the card. So try avoiding cute puppy picture while talking about coffee, alright?
The main image should be in the best quality possible

Title
Title have to be easy to read and understand use bigger font size to create distinction between the title and the description.
One typeface can be enough for the whole card design.

Card detail
This space depends highly on the purpose of the card. It can be anything from location description to first 3 lines from the article...
Make the font size readable between 13 - 16 px

Call-to-action
Ios often uses the whole image as a clickable card. If you have the image only on some part of the card, use cta button to increase the ctr.
Make sure your cta button stays consistent with your design.

Several examples for different card styles.

Thank you for reading!
Make your content be easy to digest thanks to card pattern.

More booklets by Lisa Martinovska

More Design booklets

Your recently viewed booklets

  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
See all booklets