Card-based Design: the Pros & Cons and Best Practices
Card-based design has been around for a long time, it disrupts the traditional website design as it removes the hierarchy on a website, this design brings a breath of fresh air and you may want to change your website to a card-based design but before doing so, you may want to find out more about it first.
What is a card-based design?
As the name suggests, a card-based design is made up of a number of cards — it’s a bit like a page with Polaroid prints. Each card contains an image, some text and is linked to a page that has more details, here is how a card-based design looks like in a wireframe:
There are lots of websites and apps using card-based design: Pinterest, Twitter, Instagram, HMV, BBC to name a few.
Why does card-based design become so popular?
Apart from the fact that the card-based design looks fresh and different, there are some other reasons why it becomes so popular.
It’s easier to create a responsive website
Cards are content containers, they can to be resized and rearranged. This makes it easier to make the webpage responsive and look great on different screen sizes. Google has started rolling out mobile first indexing, it is very important that your mobile site has the same content as your desktop site as Google prioritises your mobile site for indexation.
It enhances the user experience
Card is not just a simple content container, you can add different animations to make a flat, ordinary and even boring card come to life. For instance, a card can be expanded to reveal more content. You can add a hover effect so that the cards zoom in when on hover. These little animations seem to be small but they make the browsing experience more delightful and memorable. Apart from enhancing the overall experience, the users can also interact with your design by clicking, swiping and moving the cards. These small interactions could make the users stay longer on your website and this improves the user engagement.
It makes your website scannable — suitable for content heavy website
Since your visitors do not really read the text on your website word by word, having a card-based design interface makes it easier for your visitors to scan the content. On each card, you are displaying a snippet of text, instead of the full text with all the details, your visitors could choose what to read, instead of going through a full page of content that might not be interesting for them.
If your website is a content heavy website, like a blog, you may want to switch your current design to a card-based design. Imagine that if the page as shown in the image above has a layout similar to Wikipedia, it would be really difficult for your users to browse the content as they would need to scroll through the whole page to find the posts they want to read — quite likely they would just give up halfway through the scrolling.
The challenges of the card-based design
Card-based design is so popular and it has some really great advantages but is it for every website? You may want to consider the following before the switch:
No more traditional hierarchy
A card-based website has one major issue — there is no traditional hierarchy, you do not have control as to which specific content to show first, you could make the important cards bigger or use brighter colours to grab the users’ attention but your users might be looking for something else than the cards that you think important. If your cards are not arranged in a good way, your interface would look disorganised and your visitors would feel lost.
Not easy to make your design stand out
Since the card-based design has become so popular, lots of websites are using it, making your website stand out could be difficult. Think about business cards, all business cards contain more or less the same information, name, company name, company logo, address and so on. The traditional ones are in rectangular shape with a size of almost half of a hand. It’s not so often that you see a business card that has a very unique design that really got your attention. This is the same for your website. When choosing the card-based design, you need to think outside of the box: use colour, typography, rich media, etc. to set your website apart.
Card-based design best practices
Although it looks simple to create cards and a card-based design, there are some rules to follow to ensure a great user experience. The rules below offer you the groundwork for designing a good card-based interface.
Create a consistent pattern
In our daily life, we have our habits and schedule, these give us a sense of security as we know what to expect. The same goes for your card-based interface. Your users want to have a pattern to follow so they know what’s coming next. In addition to this, having a pattern helps the users locate content more easily. Imagine that you’re lost in a big city, if the building blocks are organised in a recognisable pattern, you would be able to go back to the starting point without the help of a map.
Keep UI elements to the minimum
To make your card-based design stand out, it’s tempting to add different animations and call to action buttons to a card. However, the more is not the better. The fewer options you provide, the less confused your user would become.
Don’t ditch the grid
The grid is the skeleton of your website, it helps you align your cards correctly and make your overall design more consistent.
The content in your card should still have a hierarchy
Even though you cannot create a traditional hierarchy on the page, you can create within a card. A typical hierarchy looks like this:
Having the hierarchy within a card could let your users know what that particular card is about, your users would be able to consume your content in a much better way.
Final thoughts
The design of your website is so important that you do not want to mess up. It affects the first impression, user experience and conversion. When choosing a design for your website, one of the first few things you do is to google the website trends or popular website design. However, a popular design might not be a suitable design for you. Also, when most websites are using a similar layout, it’s difficult to make your website unique and stand out. Before making your decision on the design, weight the pros and cons, then choose the best one for you or your business.
If you like this article, please 👏 and share so more people will see it. Don’t forget to follow me here and on Twitter.
