How Card Styles can Improve User Experience

Remember the trading cards you used to collect as a kid?

Introducing Card Styles

The cards are simple rectangles containing valuable information.

flipboard-card-styles-design
flipboard-card-styles-design
Pinterest-Card-Styles-Design
Pinterest-Card-Styles-Design

Benefits of Card Styles UI

One of the main reasons why designers adopt card interfaces when designing mobile apps is that it improves the user experience.

Improved Scannability

Feed your audience with content in small portions.

Structured Content

The material has a mix of images and text, conveying the context within seconds.

Thumb Friendly

One of the mobile app design best practices concludes that the app should be thumb-friendly.

Easy-on-the-eye Visuals

Images tend to draw the user’s attention immediately and elevate your app’s design.

Cards for User Experience

Dashboard-Card-Styles-UI
Dashboard-Card-Styles-UI
  1. They are responsive, which means they can fit-to-size on any device.
  2. You can stack, move or adjust ensuring they fit your screens.
  3. You can relay the information to the user within 3 seconds.
  4. They are designed using an aspect ratio, which means they are not intended to the exact size of the screen.

The Different Card Types

The digital cards can also be stacked, expanded, flipped and spread.

The narrative cards

Typically used in blogs, they give out a quick overview of the content.

narrative-card-design-ui
narrative-card-design-ui

Discovery cards

They are presented in a grid format and contain fade-in effects.

Conversational cards

The cards that grow on the chat app are your conversational cards.

tinder-conversation-card-styles-ui
tinder-conversation-card-styles-ui

Flow cards

The cards that showcase an appropriate flow of tasks, reminders, etc.

evernote-card-style-design-ui
evernote-card-style-design-ui

Best Practices for Card Style Design

Usability & Structure

Single concept card

A card should be designed with a focus on a unique idea.

Clickable cards

Many designers prefer linking the text or image on the card.

Grid structure

The elements in the card should be appropriately aligned.

Visibility

Image-driven

Images tend to improve the visibility quotient for your designs.

Typography

A simple typeface combined with easy-on-the-eye colour should help design legible cards.

Solid background

If you use images in the card background, it will not be able to highlight the text.

Animation

Add hints

Adding hints to the card can make it easy for the user to browse through your app.

Offer feedback

In the physical world, when you interact with an object, there is a particular kind of response generated by them.

Allow user to zoom

Zooming into the card will give you more information.

Here are a few examples of good card style designs

Google’s card design works on the “one card one concept” theory.

instagram-card-design-ui
instagram-card-design-ui

When to Avoid Card Design

Card patterns are not always relevant when designing app interfaces.

Here’s when you should avoid card patterns

Avoid card patterns when you are designing image galleries.

Summing it up

good-card-styles-ui-design
good-card-styles-ui-design

Written by

Inkbot Design a Creative Graphic Design Agency in Belfast, Northern Ireland. Experts in Logo Design and Branding. https://inkbotdesign.com/

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store