{{ searchResult.published_at | date:'d MMMM yyyy' }}

Loading ...
Loading ...

Enter a search term such as “mobile analytics” or browse our content using the filters above.

No_results

That’s not only a poor Scrabble score but we also couldn’t find any results matching “”.
Check your spelling or try broadening your search.

Logo_distressed

Sorry about this, there is a problem with our search at the moment.
Please try again later.

The rise of the smartphone has ushered in a new way of thinking among web designers and developers, who need to create websites that work on smaller screens.

The constraints of smaller screens have actually helped the web to become that little bit more modular, with responsive design now one of the foremost web design trends: pages can be broken up into their constituent parts, and reordered on the fly, depending on browser or screen sizes. Content spread over three or four columns can be repositioned into just one. 

This has refocused attention on 'cards', as a design pattern for displaying information in bite-sized chunks. Cards are ideal for the TL;DR generation, perfect for mobile devices and responsive design, and I think we'll be seeing a lot more of them in the months and years ahead. The format may not be new, but it's on the rise.

What is a card, exactly? Well, they come in all kinds of shapes and sizes, but commonly cards will include information such as a title, a user name, a picture, and various icons. Sometimes there might be a brief amount of text, for example a product description. In a sense, they are miniature, condensed web pages.  

Cards were one of my 18 web design trends for 2014, and I wanted to highlight some beautiful examples of card-based user interfaces. Tuck in!

Wander Card

A picture and brief description, plus icons that convey further information.

Mail Client

A concept by Roman Shkolny.

Food widget

Cards, like your smartphone, don't always have to remain in portrait mode. They can be landscape too...

Prismatic story card

An avatar, a user name, a timestamp, a category tag, a title, a nice picture, and a bunch of interaction icons. Who says cards and mobile screens are limited? Nice work, by Nate Navasca.

Pinterest

Pinterest has been highly influential around visual design in recent years. Countless websites have emulated its easily-digestible, card-based layout. 

ReaLync

Cards work well when you need to condense key information and a picture in a highly browsable format. 

Newsfeed

Edi Gil designed this as a concept.

Meditation

I'm about a 2. 

City Guides

Cards are a perfect choice for guidebooks and apps. 

Placeley

Justin Woods embraced the card format for this location-based social network.

Supermanager ACB

Some card patterns look more like traditional cards than others. Anybody fancy a game of Top Trumps?

Temperature Card II

I keep seeing so many good looking weather apps! Bruno Passos mashes up a card-based approach with flat design and accumulates more karma from the Gods Of Design.

Etoilate

A rather beautiful card-centric Tumblr theme by Oliur.

Pravda

Speaking of themes, here's one for Wordpress.

Linkedin homepage concept

Emerson McIntyre imagined browsing LinkedIn in passive mode, and used cards to render content in a snackable format.

For further reading on cards, check out this excellent overview by Paul Adams, and also this practical piece on design patterns for cards.

Max Tatton-Brown also wrote about Twitter Cards ('action+caption') on this blog recently, which is well worth a read. Cards as a native ad format!

Finally, when researching this post I stumbled across these marvellous UC cards. Potentially useful for offline wireframing and IA planning.

What do you think? Who else is doing a good job with cards? Do leave a comment below...

Chris Lake

Published 3 April, 2014 by Chris Lake

Chris Lake is CEO at EmpiricalProof, and former Director of Content at Econsultancy. Follow him on Twitter, Google+ or connect via Linkedin.

582 more posts from this author

Comments (5)

Avatar-blank-50x50

Colleen Stratton

Chris,
Great tips,here. Many thanks.

The thinking about leaning your marketing toward Mobile is, of course, something that we saw coming for a while, but all businesses can make themselves more attractive to prospects in these ways. Who chooses content? The vendor, or are they taken from customer polling ?

over 2 years ago

Avatar-blank-50x50

Sofia Rhodes

Being Frank, I have never seen such designs in my life. This is real exciting. I must say, you have areal collections of fantastic designs which we can upload it in various websites. Most of the mobile or technology website look for such designs so that it can attract visitor at a glance and you did it.. Cheers..!!!

over 2 years ago

Avatar-blank-50x50

Krish TechnoLabs

Cards are incredible for showing straightforward content. One isn't going to show a complex document with cards, however.

over 2 years ago

Kevin Pham

Kevin Pham, Responsive Web Design at ProWeb365

That's really creative! thanks!

almost 2 years ago

Avatar-blank-50x50

Sanne Seyer-Hansen, Digital Communications Manager at Chr. Hansen A/S

Do you have any examples of B2B companies converting their traditional websites into websites based on the card concept?

over 1 year ago

Comment
No-profile-pic
Save or Cancel
Daily_pulse_signup_wide

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Daily Pulse newsletter. Each weekday, you ll receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.