2016

Embracing Cards in Web Design


With the re-architecture of the web, we are moving towards building completely personalized experiences with individual pieces of content. There are always new webdesign trends gaining recognition.

Who can forget parallax scrolling, which came into existence a few years back and is still popular today? One trend that’s not gotten as much recognition as many others, and has been around for a little while already, is card-based design.


Origins of Card Based Design

Popularized by the image-sharing site Pinterest, cards have been steadily growing in popularity over the past few years and evolving alongside other techniques like responsive design and flat design.



Content is now being broken down in different components as it needs to be compatible with billions of screens of diverse shapes and sizes. The aggregation is now depending on:
  1. The person consuming content and their preferences
  2. Location and environmental context.
  3. Friends’ interests and behavior.
  4. Pressures of Advertising Eco-system.
Even when mobility is driving the predominant medium to be the portable screen then the design pattern is now mostly set to cards.

Cards are taking over the web

Cards are all over the web design trends these days, and it is fast becoming a design ruler even for the web trinity of Google, Twitter, and Facebook. From news sites to real estate, cards are everywhere on the Web today.


Cards have been around for a long time especially as an information dissemination medium and even for games. Trade cards in have helped people gain business contacts. Those little rectangles full of images and text have been so successful in Web design that they’ve almost become a default option when it comes to balancing clear aesthetics with simple usability.

Cards on the Web

From a web point of view, cards are associated to singular thoughts. They include interactive elements like text, links, buttons etc. and invite clicks through the card for exploring related content.

The principal aim of cards has always been to provide concise information in a condensed space and pique the reader’s interest. This is a great advantage for websites such as Facebook or Twitter, which have adopted the card design pattern. They now can have diverse content while saving space.




Cards are a great way to develop the idea of interaction. It is important here to consider cards as not only a medium to feature news but promote content that is engaging. Hence, these cards can be promoted and liked extensively.

Here are some more reasons why they are useful for design:
  1. They are a common design choice for compatibility with different responsive frameworks. They help in developing eye-catching user interfaces, and it renders well on mobile too.
  2. Mobiles need ‘fluid’ layouts. Cards are such units that allow the components to get into different screen layouts.
  3. It has built-in versatility and can be moulded as per the required functions.
  4. They are now part of a trend thus adding the design a huge and undeniable currency.
  5. Cards inject subconscious order to content and are ideal for responsive web design.
  6. Cards can be stacked vertically for forming a feed-like layout.
  7. They promote economy of thought thus enticing the reader for reading the full content
  8. Cards are perfect for social media and users can easily share content across multiple social sites and platforms.
A card isn’t strictly actually a design but an approach. Boxes cannot stand for cards in the web design point of view since a card indicates functionality, self-contained module, which can even be flippable. With every card, there is an enticement and an invitation to do more.

Advantages of using Card-Based Design

  1. Cards can be used in multiple ways to satisfy specific functions.
  2. Cards grab attention and are uncluttered giving way to minimal text
  3. They are responsive and enticing since mobile compatibility is a big driver
  4. Cards are digestible than more content because of limited space and readers who want to read more can proceed further with the action button.
  5. Cards are shareable to varied social sites and platforms and doable in bursts of content

In the real world, many social sites are moving towards cards. Twitter has launched Cards, to attach multimedia inline with tweets. Content now can be seen in card format often. With Google Now, Google is considering a new way for information distribution, away from search to the handling of mobile devices.

Pinterest revolves around cards while the Discover feature present on Spotify uses cards. Facebook is now using information snippets to be conveyed through cards.

Final Thoughts

Cards cannot be segregated with certain aesthetics since they can complement everything and all types of designs. Cards can be arranged for a structured layout in magazines and even kept completely scroll able. They do require incredible development chops with plenty of interactions and usability.

Also they need to have attention to detail in an unforgiving space along with a perfect visual balance between different elements including images, text, and action buttons. Also they should have a definite purpose. One can use cards in a flippable mode with the card folded out or flipped to embed content, photos, videos and the like. Cards can be stacked vertically or horizontally, depending on the orientation too.



About S. Kapoor

Powered by Blogger.