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.

Continue reading %Card Tricks: Using Cards in Web Design Layouts%

by Simone Sala via SitePoint