Card-based web design and how you can use it

One of the web design trends of the past two years has been called “card-based design”. I’m rather fond of this myself, and started using it on hobby websites which I run, some time back, even though I’m no great web designer. It just makes so much sense to me.

Card-based design involves breaking down the content of a page into smaller panels. If you’ve used Pinterest or Flipboard, you’ll recognise it immediately. By filling the page with these panels, it doesn’t matter what size or shape browser the reader is using, because the content can resize and reflow to fill the space perfectly:

verge-screenshot-desktop

verge-screenshot-mobile

What’s more, this format allows content to be tailored for the user, with different panels showing for different users and at different times. That may be a step further than you’re prepared to go at the moment, but it might be something to investigate sooner rather than later. Why highlight introductory information about your company to previous visitors, for example?

But how can you take a tentative first step into card-based design, without a complete site overhaul? One way might be to use this format to replace the tired old (unwatched) ‘carousel’ display on your home page. If this contains 2, 3 or 4 ‘slides’, why not ask your designer to make these into separate panels which will show alongside each other – or on a narrow screen, above each other? Take a look at the site shown above. I’d bet you can take in the content of the first three or four panels in under two seconds. In that time, your ‘carousel’ wouldn’t even have moved on to the second tedious slide.

And who knows, once people actually start to look at the contents of this section for the first time, you might be tempted to update it more frequently.

Further reading: How cards are taking over Web design on The Next Web.

Leave a Reply

Your email address will not be published. Required fields are marked *