A Closer look at card based design

Added 21.08.14

Whilst you might be unfamiliar with the term, we are sure that you are familiar with the concept of cards – they are, after all, everywhere in web design these days. And the trend seems to be catching – if big names like Google, Facebook and Twitter are using cards, there must be something to it!

So, what are cards?
Cards are, basically, packages of interactive information (usually presented in the shape of a rectangle and often including ways to share on social media). They provide readers with quick and related information in a condensed format, whilst politely demanding engagement.

card based design

And what aren’t cards?
Because cards are still in their infancy and not everyone refers to them as cards (they are also known as tiles, modules, or portraits), there is still some uncertainty surrounding them. A card isn’t strictly a design – it must have functionality, be self-contained and (possibly) flippable.

Why should I use cards?
The good news is that cards can be used in a variety of ways in order to satisfy specific functions. Some of the main reasons to introduce cards into your web design include:

  • They grab attention and are an exciting alternative to unnecessary text.
  • They’re responsive, which is great if your website is also for mobile browsers instead of desktop only.
  • They’re digestible due to their limited space; you can’t say much, and readers who want more will click.
  • They’re shareable, as they enable users to quickly share content across social media, mobile and email.

But how do I use cards?
It is important to remember that the main point of cards is to interact with the user and prompt them into action. We have shared some examples of how cards can be used successfully:

  • Facebook – We’ll bet you didn’t know that the infamous newsfeed is card based! Each card (read: post) features content as well as a way to like, share and add comments.
  • Google Now – Card based design is prevalent throughout Google and its related apps. Google Now takes this a step further by being completely card based in the form of a virtual personal assistant.
  • Pinterest – This website is actually one of the most popular card based designs ever! It’s, basically, a virtual pinboard that allows users to collect images onto virtual boards.
  • Twitter – Each and every tweet is a card with media attached – it could be a photograph, a collection of photos, a video or audio. This encourages retweeting and favouriting.

Now that you are more aware of what cards are and how they can be used to enhance your web design, what are you waiting for? It’s time to think about the ways you can incorporate cards into your website, perhaps using some of the big names outlined above as your inspiration.