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 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…
Comments