What is Card-Based Design and Should you be Using it?

The Pros and Cons of Card-Based Design

What is Card-Based Design and Should you be Using it?

It may seem like every website you visit lately is migrating to card-based layouts over their traditional layouts. Taking cues from social media platforms, this trend has become hugely popular across all types of websites. The question is why, and should you be doing the same?

What is Card-Based Design?

Card-based layouts have been around in web design for longer than you may think are more popular right now than ever. The growing trend of using cards can be seen across some of the biggest websites in the world including Google, Twitter, Facebook and Instagram. Card-based layouts were pioneered by sites such as Pinterest which used a Masonry style grid of cards and Microsoft also implemented it into their operating systems with the Metro design language in 2006.

Examples of Card-Based Design

Pinterest

pinterest

Google+

google+

Silk Tricky

silktricky

Herman Miller

herman miller

Fire Box

fire box

Fibb

made by fibb

How to Design with Cards

Designing a website with cards requires a modified approach to traditional layouts. Cards are nearly always displayed in a grid or list of some sort, your job as a designer is to first figure out what portion of your design will feature cards and where other elements such as branding and navigation will appear. pinterest And then to decide how to create hierarchy within your cards, traditional methods such as placing more important content nearer the top of the page may work in some cases, but the very nature of cards is that they are scannable rather than an ordered list. Content that you want to stand out needs to do just that. This can be achieved by either by making it larger than other cards, using an eye-catching image of some sort or darker colours than other cards etc.

Pros of Card-Based Design:

Adaptive

Having your content contained within individual cards makes them easy to re-arrange and re-order. This is particularly important when it comes to responsive design for various devices and screen sizes. For this reason, cards make perfect sense to designers.

Scan-ability

Card-based layouts present your visitors with lots of short bursts of information, that are easy to scan and find what they need. Where as traditional layouts may dedicate their entire homepage to saying "hello" and telling you about a company, cards can show snippets of content from all across the site, meaning that visitors are more likely to find what they are looking for on the very first page they land at.

Bite-Sized Chunks of Information

Cards are good for communicating quick stories, things which don't necessarily require a whole paragraph of text, let alone their own dedicated page, but are important nonetheless. Much like on Social Media, these shorter straight to the point snippets of information are easier to digest and more likely to actually be read by your visitors/followers. And you can always provide a 'Read More' link if you do have more information to provide for those who are particularly interested.

Social Media Integration

As briefly mentioned in the last point, cards have a lot in common with social media. Tweets, Facebook posts, Instagram photos etc. all fit the criteria of cards. So they are ideal for integrating into your website.

Cons of Card-Based Design:

Less Consistency

Unless all of your widgets visually look the same (which would be a bad practice in itself), a card-based design may require you to use a larger range of colours, images, fonts or other variables to distinguish between cards. Less consistency in this fashion can make your layout look disorganised.

Lack of Traditional Hierarchy

Although there are methods to bring attention to more important cards, the lack of a traditional hierarchy in which more important content is displayed first, can have a negative effect. Especially for visitors to a website who are looking for a specific piece of information, throwing a grid of seemingly unorganised snippets of content at them may leave them confused and not knowing where to look.

Not Suitable for Some Websites

Card-based design may not be suitable for smaller projects or projects that are primarily information based. For a website with the sole purpose of proving detailed information, a card-based design would be a step in the wrong direction. It would be counterintuitive to break a design up into multiple isolated segments, when all your visitor really wants to do is read the information you're offering. Likewise, for smaller projects which simply don't have a lot of content, switching to a card-based design will only confuse your visitors. Smaller websites that have less content tend to be easy to navigate anyway, so why fix what isn't broken?

Is Card-Based Design More Than Just a Trend?

When we think of web design trends, we think of things that have been and gone. GIFs were a big trend once (not just for memes), Skeumorphism was a huge trend not long ago too, and Flat design is probably the most popular recent trend which is fading slightly. However some ‘trends’ that have been around from the beginning have proven themselves to be much more than just passing fads. For example common UI elements that we see on a daily basis such as dropdown menus, header images and sidebars were new once. Some trends just make a lot of sense and end up ultimately becoming the norm. If cards are just a trend, one thing for sure is that it will be sticking around much longer than most. Whether or not you should use them, depends on the project but honestly I think the Pros outweigh the Cons in most cases.

Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Sign up to our Newsletter

Get site updates, freebies, and MediaLoot news.

Contact Us

Suggest a resource

FAQ

See all
X

You've successfully logged in!