In recent times, there is more emphasize on designs that render well on both desktops and mobile devices. And there’s no surprise in this. People have gone multi-screens. They browse on desktops, switch to mobile and may pick a Tablet in the evening. And as designers, we need to accommodate the varying device usage of our visitors. One such element that perfectly fits the bill is card layout.
Cards are everywhere. From social media sites Facebook, Twitter to ecommerce stores like Amazon- card layout has gained rapid popularity. And for good reasons. It looks neat and tidy. It invites engagement. It organizes content well. And it helps users quickly scan the page.
But cards need to be designed well to optimize the user experience. Else it can go awry.
How to do it?
We will get into the best practices of designing cards a little later but let’s first understand-
What are cards? What are its benefits?
Cards resemble physical cards. They are rectangles including images, texts, links, buttons etc., and are used as a teaser to detailed information. A card consists of multiple containers with one element occupying one container. One container has the image, the second one has the title, third the copy, fourth the link to next page and so on.
For example, in ecommerce stores, cards are used for category listings introducing a particular category. In social media sites, it is used to represent a single activity or thought. In news websites and magazines, cards are used to feature different news items.
The many benefits of cards include:
Cards are a convenient means of displaying content composed of different elements. They’re also well-suited for showcasing elements whose size or supported actions vary, like photos with captions of variable length.
- Mobile Responsive: Designs that use cards render beautifully in small screen size mobile phones. Mobile phones prefer fluid layouts and cards are the best fit for it. A 3 item row of cards on the desktop can be easily rendered into 3 items column on mobile. And it gels well with users eye movements on the desktop (left to right) and mobile (top to bottom).
- Organization: Cards keep various elements of content like images, text, CTAs organized in different containers. It saves designers precious time in aligning each of these elements. Also it aligns well with the user behavior patterns to help him accomplish his task fast.
- Minimalist: Minimalism is popular design approach that eases user comprehension and looks elegant. Cards are a natural fit into minimalist designs.
Best practices in designing cards-
- Use it for real purpose: While cards are an excellent UI element but don’t just use it for the look. Use it for its real purpose i.e. to organize varying types and sizes of content elements. A card layout works best when-
You have multiple content types like images, texts, CTA buttons etc.
- You have content types of variable lengths
- A user doesn’t have to compare images or texts
- There is some sort of interaction like a link, like and share buttons etc
Source: material.io
- Keep it simple: One thought per card works well. You can use multiple elements images, text, links, buttons etc., but they all should constitute one thought or action. Don’t overload cards with extra information or actions. And limit the amount of text in your card. Don’t add paragraphs of texts.
- Direct your user to the most important information or action: Use content hierarchy within the card to attract your user’s attention to the most important information. For example, place the primary information at the top of the card. You can also use typography to emphasize primary information or action.
- Use Images Smartly: Good images make your cards shine. However, don’t simply use it to elevate design but also to convey the right information to users. The size and placement of the images within the card should depend on whether images are the primary content or are being used to support other content on the card.
- Support microinteractions: While cards are interactive elements that point a user to the more detailed information, a little bit of microinteraction on the card will boost the experience. You can use microinteractions when the user hovers the mouse on the card, clicks a link or a button.
- Support gestures: Especially in mobile, gestures work well and add an element of fun. You can use swipe gestures to move cards and pick-up-and-move gesture to arrange a collection of cards. However, make sure the functionality is perfect or else it may hamper user experience.
Source: Pinterest
- Design it well: Go creative in designing your cards. Use good quality images and of the right size. Use good typography. Give it rounded corners. Use shadows and gradients to good effect to make your cards a delight for users.
Source: Bashooka
Final Thoughts
Cards are excellent in boosting the design of your page. It also brings in great usability for the user. Cards are more than just good design, they are good experiences. And there is plenty for designers in cards to go creative, express themselves and create rich user experiences.
What are your rule for designing cards? Share it with us in the comments section. Liked the article? Share it on Twitter and Facebook. And I will greatly appreciate your claps :)
