How to Create The Trendy Card Layout

Written by Kevin Liew on 06 Apr 2016
18,611 Views • Web Design

Ever since the introduction of Card design by Pinterest, it has been one of the biggest things in web design, particularity in Mobile. It has been quite a popular design in desktop, but it also start roaming in mobile design. Nowadays, you can see card layout are widely used in popular apps such as Facebook, Twitter, Google app.

Card design is a great design concept to organize large amount of content. Everything is arranged in a systematic and consistency manner which able to enhanced the UX of the website. Here is a list of benefits that I could think of:

  • It plays well with responsive layout
  • It's well-presented and good readability
  • It works well with different types of content
  • You can easily absorb large amount of information with a quick glance

In my own personal opinion, there're two main component to make a successful Card layout - The card design, and the grid layout.

The Card Design

A standard card design usually comprises the following elements:

  • Image: A large, crisp and inviting image
  • Headline: A attention-seeking headline
  • Excerpt: A glimpse into the content
  • CTA: Call-to-action button or link
  • Hover: Includes some nice hover effects or other interactive components when cursor hovers on it
Card Grid Design - Card Design Layout - Different card designs

However, a card can be a complex module too. Take Google Now as example, different types of content and functionality are broken down into different modules. The boundary of each modules are divided with space, border and drop shadow. Adequate amount of space is required to create a clean layout.

Card Grid Design - Card Design Layout - Google Now card layout

A Few Card Layout Examples

Card Grid Design - My Poor Brain Card Grid Design - The Arts Centre Card Grid Design - Square Wordpress Card Grid Design - Dribbble Card Grid Design - Pinterest

The Grid Layout

So, that's the card design. To hold all the cards together you will need masonry or grid layout. Masonry layout can organise all the cards by giving gutter space and rearrange them in different viewports. Other that that, you can manipulate your cards such as add and remove cards.

Here we have quite a number of open source responsive Javascript plugins to create the layout easily. They all play nicely with responsive layout too.

Bricks.js

A no dependencies and blazingly fast Masonry layout.

Card Grid Design - Bricks.js

Masonry

Probably the first Masonry plugin. A popular and highly configurable plugins.

Card Grid Design - Masonry

Packery

Packery is a JavaScript library and jQuery plugin that makes gapless and draggable layouts. It uses a bin-packing algorithm to fill in empty gaps.

Card Grid Design - Packery

Gridly

Gridly is a jQuery plugin to enable dragging and dropping as well as resizing on a grids. In the example below try tapping or dragging any of the bricks.

Card Grid Design - Gridly

Grid-a-licious

Another lightweight and fully responsive grid layout plugin.

Card Grid Design - Grid-a-licious

Card Layout Will Stay For Long

Card Layout is popular because it's not just an eyes-pleasing layout but it's also a sound solution to solve the display of large quantity of content on screen. It solves many problems for large content websites. Not doubt about it, you will able to see more and more websites embrace this kind of layout until there's better solution.

Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.