Playing With Cards

cardsGoogle’s Material Design has helped designers by providing design principles based on a unified theory of a rationalized space using a material metaphor. A foundational element of the material design is the content card.

The skeuomorph is dead, long live the skeuomorph!

There are a ton of templates and resources for app designers to get their ideas onto cards and into their apps but many designers simply browse these resources for inspiration then apply their own interpretation. Therein lies the rub. Looking to other designers for inspiration risks misinterpretation of the design thinking (or principles) behind the design system.

Here are some basic guidelines for card design you can use to get started in the card game.

When should I use cards?

  • Use cards to provide context and an entry point to more robust information and/or content views.
  • Use cards when you want to display discrete collections of highly variable content comprised of multiple data types and actions.
  • Do not use cards for direct comparison of content.
  • Don’t overload cards with extraneous information or actions.
  • Don’t use cards for homogeneous content that would be more scannable as a grid or list.

What do I need to know about cards?

  • Card collections only scroll vertically.
  • Cards within a collection contain varied content types.
  • Cards have a constant width and variable height.
  • Cards can be dismissible and rearranged.
  • Cards do not flip over to reveal information on the back.

How do I design great cards?

Design Tips

  • Make cards using:
    • Rounded corners (2dp/3px) and shadows 2dp/3px(y)
    • Card header (optional)
    • A primary title
    • Rich media
    • Supporting text
    • Actions
  • Use a strong visual hierarchy within cards to direct attention to the most important information.
  • Truncate card content that exceeds maximum card height.
  • Use inset dividers to separate related content.
  • Don’t overload cards with extraneous information or actions.

Interaction Tips

  • Limit swipe gestures within a view so that only a single action occurs when the card is swiped.
  • Make the card itself the primary action.
  • Place supplemental actions at the bottom of the card and limit to 3 actions (including expand menus).
  • Place overflow menus in the upper-right corner of a card.
  • Avoid scrollable space within a card (avoid double scrolling).

That’s it. Follow these guidelines and you will deal a winning hand with your design.

To learn more, go here…