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
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.
A Few Card Layout Examples
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.
A no dependencies and blazingly fast Masonry layout.
Probably the first Masonry plugin. A popular and highly configurable plugins.
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.
Another lightweight and fully responsive grid layout plugin.
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.