Web design trend: cards
Google introduced their new design guidelines
At the Google I/O conference last month, Google introduced their new design guidelines called Material Design. These specs will be used to redesign all the Google products: Search, their web apps and the whole Android ecosystem. One important component of this Material Design is cards, a design trend used by all the major key players online.
Cards are not a new phenomenon: Twitter switched to cards, Pinterest always displayed their content in the form of cards, Facebook redesigned its news feed as cards and Google is already using cards for Google Now on Android.
Coming to think of it, we have been using cards forever: business-cards, which contain relevant information about 1 person, playing cards, greeting cards and credit cards. In general: cards are a great way to bundle scannable bite-size information.
Google describes ‘Cards’ in Material design as:
A card is a piece of paper that contains a unique data set of related, heterogeneous information, for example, a photo, text, and link all about a single subject. Cards typically are an entry point to more complex and detailed information.
Cards are a step away from the classic navigation that uses pages and destinations and makes websites more modular with pieces of personalized content. You can compare each card to a miniature webpage. These cards can display website-specific content, but – in the case of Twitter – are also used to include third-party content, relevant to the tweet in the card. For example: Twitter also embeds the video from YouTube, or the photo you linked to in the tweet. This drastically improves the experience for the user.
The advantages for the end-user are significant: we bundle all the relevant information into one card, mostly using a visual, a title, some text, and one or more actions. In this way everything is easily scannable, quickly discarded if not relevant and – more importantly – each card can be easily shared or embedded in your own site.
From a builder’s perspective
Cards are a design pattern that makes it easy to design and develop for a responsive website, where all the content has to be available to all devices (and all different sizes of screens, going from smartwatches to giant TVs). It is an excellent solution for the specific demands of mobile devices (which are typically smaller) and interfaces, where screen estate is expensive and user interaction has to be simple. On tablet and desktop, we can put multiple cards in columns while still keeping the card’s design.
Cards also solve a typical mobile-only UX issue: users expect condensed information. Cards are perfect for the new generation of Internet users, who will probably skip long chunks of text (TL/DR = Too long, didn’t read).
Cards are the new creative canvass and are incredibly flexible. We can add user interactions, link, expand, fold or turn them over to display more information or to group other actions a user can perform with this information.
We think card design will boom over the next few years and will be a very important user interface element that is going to be around for a long time to come.