The future of cards in Web design
A simple but powerful UI concept for digital content collections.
“In this article, we’ll help explain what cards mean to the modern web UI designer: pros and cons, best practices, how they’ll likely evolve in the future, and finally some online resources to help.”
(Jerry Cao a.k.a. @jerrycao_uxpin ~ TNW) ★
Why the Card UI is the next big interaction paradigm
There was a time when CUI meant ‘Character-based User Interface’. That time has gone.
“I think it’s safe to say that, going forward, the majority of mobile UI designs will be based on the card UI paradigm. The next logical step is marketing professionals and ad agencies starting to embrace cards. The larger platforms are already embracing it. The card UI is set to be the next creative canvas for online content and will consequently also be the next big ad unit.”
What is a card?
My C5 design law of cards: Cards contain content chunks and code.
“(…) when we talk about cards in digital products, it’s important to understand that there are actually two, interrelated concepts at work that some people conflate as one. I’ll use some grossly simplified language to label them as cards as presentation and cards as third-party content. (…) A card is a single unit of content or functionality, presented in a concise visual package. More advanced cards use that form to surface content or functionality from other apps, and allow users to interact with that content or functionality directly in the context of where a user encounters the card.”
(Khoi Vinh a.k.a. @khoi ~ Subtraction)
How Google unified its products with a humble index card
Think Paul Otlet and his index cards. His mission and operations align so well with those of Google.
“We’ve actually tapped into one of the oldest pieces of graphic and information design around — business cards, calling cards, greeting cards, playing cards. They all have the same embodiments because they’re all reflections of a similar set of design problems.”
(Mark Wilson a.k.a. @ctrlzee ~ Fast Co.design)
Cards: The next paradigm?
Leave out the question mark for me.
“I’m going to share some insights about cards and explore other design patterns that those drawn to cards might want to consider. (…) The cards design pattern is a smart solution for the modern web, which is both dynamic and responsive. However, the pattern has its limitations and might be a challenge to adopt when designing for a complex interface.”
(Wan-Ting Huang ~ EchoUser) ~ courtesy of @iatv
Surveying the big screen
And what about wall-size screens or future iTVs?
“(…) by embracing large screens, designers have the opportunity to work within a larger fold, presenting the user with more content simultaneously, lessen scrolling on longer pages, and create a richer, more expansive user experience. And by using the same practices we developed to adapt layouts to smaller screens and identifying some common patterns for large screens, we need not necessarily introduce extra cost or time to our projects.”
(Mike Pick a.k.a. @mikepick ~ A List Apart)
The future of Google search
Cards, tags and organizing, the Google way.
“The idea is that each card is a single atomic contextual piece of information; essentially, a suggestion, a prompt, a call to action.”
(Graham Hunter a.k.a. @MarketerGraham)
Why cards are the future of the Web
Cards and tags, a magic duo. Ask Paul Otlet or Bill Atkinson.
“We are currently witnessing a re-architecture of the web, away from pages and destinations, towards completely personalised experiences built on an aggregation of many individual pieces of content. Content being broken down into individual components and re-aggregated is the result of the rise of mobile technologies, billions of screens of all shapes and sizes, and unprecedented access to data from all kinds of sources through APIs and SDKs. This is driving the web away from many pages of content linked together, towards individual pieces of content aggregated together into one experience.”