card based interface

Mobile technologies are taking over the world. Smartphones and Tablets made us switch to responsive design to satisfy user needs. But the next big thing are card based interfaces. Let’s talk about card based interfaces: the next trend.

Card based interfaces

The web is no longer a fit place for websites made of static content: websites are now experiences built around every user. The pages are a result of our interests, our location and our friends. Personalised experiences are brought to our devices by aggregators, specialized websites or applications that pieces of content from various sources.

card based interfaces - personalised content

Here’s how cards work. A card is basically a small document that holds information to be shown. Cards in web design are made up by contents and information gathered together in a single box, just as business cards or panini cards. Cards are simply a great way to deliver stories to people.

This is due to the high customization possibilities brought by cards: Cards can be small, medium or large, but they can always be stacked, folded or unfolded. Cards can be manipulated but mainly they are responsive, flexible and engaging.

The next trend in user interface design is to embrace the card revolution: Crafting interfaces based on cards, placing them in different ways depending on the display size.

card based interfaces - display sizes

Elements shown by cards

card based interfaces - elements of cards

You’ve probably seen them on your mobile phone, or in your favourite social network. There are several types of cards, but all of them are constituted by the same elements: They all show a context, a lens and some triggers related to them.

Cards can be large or small: their size depends on their purpose. Cards that are meant to convey alerts are usually small, with some triggers inside (like push notifications). Cards that work as a teaser are bigger than notifications as they have to show an excerpt or an image (as news in the twitter stream).

 

Let’s take a look at something really common. What you see above is an embedded tweet. Just as the tweets shown in your timeline this is a card. It’s got a title, a date, a text and much more information. It has some triggers and could hold a picture as well. The popular Facebook stream is also full of different types of cards.

The new challenge for designers is to craft powerful cards, and gather them into simple (but effective) containers with adaptive structure. Lots of photo cards can make a board (that’s the basics of Pinterest). News and content can be part of a news feed.  

Switching to cards

Google Now, Twitter, Facebook and so on. Everyone is switching to cards. But why? It’s clear that cards are very handy. Layouts based on them can be adapted to different devices and can be easily displayed on any screen size. Thanks to websites like www.embed.ly you can easily create engaging cards. This is an example:   Get a free trial! – LiveBox Cloud File Sharing

 

I think that cards are just amazing, in particular i love how Google has designed them in google Now. Information represented as cards are always full of information well placed in a really small box.

But i also like the philosophy of Live Tiles introduced with Windows 8, in particular I like how information that matters to me is gathered together in my start screen to create a personal experience.

card based interfaces - google now

If you enjoyed this short article about interface design i recommend this article named “The end of apps as we know them“. If you want to read more about design these are my latest articles:

Card based interfaces: The next trend

Leave a Reply