Card-Based Web Design: Anything is Possible
From social media platforms to eCommence sites, the use of cards is widespread across industries. So, what exactly are cards and why have card layouts popularised? A card put simply is a clickable module with information. Card layouts feature small arrangements of content that vary in sizes, commonly featuring inclusive images and entry points to content with more detailed information. Often used to enhance UX and UI aesthetics, each card represents a section of related information, most commonly with a headline, an image or graphic, links, and text.
Pioneered by Pinterest, cards are used to break down content into condensed ‘content containers’ displayed as a list or dynamic grid. Just like those tangible cards we all used prior to digital life — from playing cards to business cards and even post-its etc. Physical cards were used to place relevant information about a single topic and today, card-based design maintains that same concept, making a comfortable experience for users by promoting content that is engaging and tailored for the user. UI/UX design trends are being driven more and more by card-based interfaces due to their compatibility and functionality.
Why Card-based Web Design Works:
- Responsive: Cards not only work well on desktop, but translate well across mobile devices. This is critical as we shift to a multi-device age where content needs to fit on different screen sizes. Think ease of use — Grids that can restructure to fit any screen size allows for a consistent experience, enticing users to click to read the full content. When it comes to responsive design, cards make sense for designers and users alike.
- Organised: Each card can hold a unified theme and display information in a pattern or order, that is ideal for mobile device users. Cards are aesthetically pleasing and occupy minimal screen space. Think singular thoughts — Each card should contain one single concept. Overall, a clean, neatly arranged card layout make browsing products convenient and easy.
- Shareable: Card-based design has been adopted by social sites including: Pinterest, Facebook, Instagram and Twitter. Much like business cards, design cards can be personalised and are easier to share across social sites and platforms. Cards are essentially bite-sized chucks of information that are great for communicating quick stories.
- Digestible: Cards allow for sites to condense large amounts of content into easily digestible pieces that work seamlessly across platforms. With an instantly comprehensible interface, cards are intuitive and easy to understand without explanation. Users can easily access the client they want to interact with.
- Personalised: By providing a personalised experience, cards can invite users to engage and explore content. Each card can easily be modified to expand or shrink, depending on how much content you want on display. Think — What information is the most important for users to see? Card-based design allows you to customise information to the user by content hierarchy.
Bottom line: Cards continue to dominate as one of the top web design trends of 2016 and will undoubtedly for years to come. If you want to learn more about cards or anything digital, drop us a comment!
