Design Better Cards
Summary: The card component is a preview of more detailed content a user sees when actioned. It has become a symbol of our current digital paradigm. Elements include multimedia, text, links, graphs, and captions.
The card is a user interface component that acts as an entry point to more detailed information. Varying sources of information are pooled together and presented in a digestible way. It is a reflection of our current media environment.
The proliferation of varying screen dimensions and the launch of HTML5/CSS3 around the turn of the decade enabled the card to take shape. It was the perfect representative of the new web, where social media sites like Facebook, Twitter, and Pinterest launched into the mainstream. The web saw greater personalization, aggregation, and socialization than ever before. And the card was its container.
Cards accommodated fleeting micro-posts, serving singular thoughts, ideas, and most importantly pictures to an audience with a shorter attention span than a goldfish.
Photo by Bao Han on Unsplash
The Card’s Shape
Cards present various content pieces in a group. The viewer attains a quick overview of information and has the option to see its entirety.
The information between cards is of equal hierarchy. This allows the user to browse content in a manner similar to surveying a store shelf. Users evaluate each card before committing to action.
Cards work well for responsive web design because of their flexibility. Through the use of media queries, content can be reordered to fit any screen. This malleability enables a visual language and user experience to be unified across devise types.
Deconstructing the Card
To design better cards you must understand its comprising elements. Cards may include a headline, sub-headline, summary text, multi-media, image, video, graph, comments, and action. Actions are usually limited, and in many cases the entire card serves as a singular link.
Deconstruction of card elements
Cards are presented in many ways including individually, in a timeline, gallery, next to each other, or making up a dashboard.
Card Design Best Practices
Use a list if the design presents homogeneous content that is less than a few lines. This allows for faster scanning.
Resist excessive borders and heavy drop shadows. This causes distracting visual friction. To learn more about why read Unbox the Web.
Don’t present multiple ideas in one card. Instead, present each idea as its own card.
Provide visual hierarchy to the content to increase the cards focus and legibility.
Don’t include inline links. A card should be a singular link or provide a limited set of actions.
What the card says about our place in history
The card currently symbolizes the height of a fragmented societal consciousness alienated from its humanity, and desperately searching for meaning. The result is a condition where addiction loops dictate how media is consumed. Vapid blips are on constant rotation, pedaling the emotions of arousal to direct attention towards what the content manipulator, advertiser, and siren server wants us to see. Joy, happiness, anger, frustration, hate, and excitement are offered as a way to temporarily distract us from our reality and greater potential to change it.
Photo by Jake Hills on Unsplash
This spectacle will change when designers and engineers push back on the linear trajectory of the web and direct it toward the reality we wish to bring into existence.
In the future, the card will symbolize the entry point to a culture with a sense of purpose and self-esteem, and the exodus from the fragmented culture wars, nihilism, institutional decay, and vapid consumption.
The wealth or poverty of our web is up for us to decide. The card is just its container. I hope this article helps you design it better.