Card Tricks: Using Cards in Web Design Layouts

From social networks to news websites, from online stores to common sites, cards are omnipresent on the web these days.

The rise of mobile technologies, bit by bit, led towards a new architecture of websites to the point that responsive design and adaptability are now a must. This contributed to the success of “cards” which are one of the top design trends in 2015.

However, we can be reasonably certain that cards are not just a passing design fad, but they will be the future of web development as they are provide one of the best ways to organize and display content in a coherent fashion.

So, in this article I’m going to explain you what “card design” is, and how it impacts on how you design.

Let’s go!

Card Design Through the Ages

Although cards have now become very popular in web design, they have been an effective mean of visual communication for at least a thousand years. Firstly introduced as a game in 9th century Imperial China, cards later became useful in the business world.

Indeed, in the 17th century, “trade cards” made their first appearance in London to help people find business: they were an early example of the modern “business cards”.

Today, the card is the preferred shape for coupons issued by stores and supermarkets, which people collect to get special discounts.

And most of us have to look no farther than our own wallet to find more cards that we care to mention: we have credit cards, loyalty cards, store card and even the standard driving license has the standardized format of the card.

Anyway, there is a strong link between the traditional use of cards and the application they found in web design: as common material cards usually contain information on two different sides, so web cards redirect to further content.

What are Cards on the Web?

From a web point of view, we can define a “card” as a small rectangle associated to a singular thought. Cards are full of interactive elements such as text, links, buttons or images but they suggest just one main action: the one of “clicking” through the card to further discover the content.

Indeed the principal aim of cards is to provide an overview of a certain topic in a condensed space and, if the reader is interested, with just one click he can open the subject in another page.

This is a great advantage for websites such as Facebook or Twitter, which have adopted the card design pattern, as they can feature a large amount of content while saving precious space.

Therefore, the most important characteristic of cards is the idea of the interaction they have to convey. When designing, web developers should remember that cards do not only have to feature news but they also have to engage the reader. That’s why cards include buttons for likes, shares or links to read the full story.

Besides being useful, cards are a common design choice because they are compatible with responsive frameworks. The “broken-into-pieces” structure can create eye-catching user interfaces, but it is also perfect for mobile platform development too. Indeed, the design of a card has a very similar shape to the one of mobile phones screens.

Often we talk about ‘fluid’ layouts. Cards give us the small units that allow us to ‘pour’ our page components into differently sized and shaped screen layouts.

Why should we use cards?

Since cards give us built-in versatility, they can be used in different ways according to the required functions. So, let’s have a look at some of the reasons to use cards:

• They are a trend : although trends are, by their nature, transient things, using cards you can give your design an undeniable currency.
• They inject order : the use of cards forces a level of organisation to your content.
• They are ideal for responsive design: they can easily fit in websites and applications for mobile devices. The most important aspect is that, on smartphones, cards are easy to be stacked vertically to create a feed-like layout.
• They encourage economy of thought: because they are bitesize, cards can never contain a lot of content. At first, this may seem a drawback, but I think it is a good thing! In a card you should feature only a hint of the full content, and then encourage the reader who wants more to click through to find out.
• They are social: cards are perfectly suited to social media, not only because they are used by social networks, but because they make it possible for users to easily share content across social platforms and through emails.
• All content is more equally weighted: cards help to solve the issue of which article you might feature at top of the site. With cards, pieces of content of the equal importance can live on the same page without you having to rank them. It is the reader himself who is going to choose what is important and what he wants to read.

Who is Using Cards?

Dribbble

The layout of the website is based on cards which feature an image and little information about each design. What I like about the Dribbble design is that you can click on the card to discover more details but you can also stop the mouse pointer on the card to make a small description of the work appear.

Pinterest

Speaking of card design, we could not avoid mentioning Pinterest. In fact, many people think credit Pinterest as the first to adopt the cards metaphor. Pinterest clearly demonstrates that “all content is important” because on Pinterest there are no cards which are more visually dominant than others.

Twitter

Twitter arose out of the 144 character limitations of SMS so was born with a ‘card ready’ layout. Last year the social network launched their own product called “Twitter Cards“, an application designed to help you ‘card-ize’ your own content as you post it into their system. They describe the application as a chance to:

“attach rich photos, videos and media experience to Tweets that drive traffic to your website”.

The result is that now the homepage of Twitter is full of cards associated to tweets. Clicking any one of them will enlarge the content and, sometimes, offer third party options.

The Guardian

The famous British newspaper, applied the card layout to their website in order to “think of new ways to improve the discovery and promotion of content”.

They have been able to create a modular scheme composed by different cards: each one is associated to a title and if you click it you will be redirected to the full article. The website evokes an overall impression of elegance and clarity.

Conclusion

Cards provide an useful method to create attractive websites and they are also a highly flexible format to realize various layouts to give user a great experience.

The ever increasing importance of tablets and smartphones will contribute to keep cards on top of web design for long.

Meanwhile, will you use cards in your works?

Frequently Asked Questions about Using Cards in Web Design Layouts