Everywhere you look – from desktop websites to apps – you’ll see images and text joined together as rectangular components. each bite-sized chunk of information is known as a card. Because cards present each item on an equal plane, designers can organize large amounts of content while still enticing users to engage with each item (thanks to the snapshot format). Cards typically present a few distinct bits of information – image, headline, main
text, call-to-action (such as a share button or link) – in a collective and cohesive block.
A Primer to Card UI Design
Cards have been steadily growing in popularity for the past few years, starting with the image-sharing site Pinterest and evolving alongside other techniques such as responsive design and flat design.
Card layouts came to the forefront of web design when web giants Facebook and Twitter each adopted card-driven interfaces for their desktop and mobile websites. Both sites took full advantage of container-style design to group together information despite a nearly endless stream of activity. Let’s deconstruct the card for a moment. The best approach to this UI pattern is to think about each card as a singular thought. While cards contain different images, text, buttons, links, and other interface elements, every single card only suggests one primary action – whether that’s clicking a link to expand the content or filling out a simple form.
“Container-Style Design” and Cards
Card-style design has experienced quite an evolution as it’s embedded itself as a core pattern in grids, magazine, flat design, and pinstyle design formats. All of these techniques fall under the category of container-style design since the basic concept is the same – one block (or card) equals one chunk of user interaction. The best definition of container design itself comes from The Guardian newspaper which applies this layout style to their website.
Let’s examine a couple manifestations of container-style design below – some of which prevail while others fade in popularity).
Attempting to mimic Pinterest, plenty of designers added elements that look just like the “pins” from the popular social media site. Unfortunately, the look quickly became stale since every site using the technique started to feel the same. In fact, WordPress users quickly picked up on the technique by creating dozens of pin-style themes. The other problem was the inconsistent visual experience createdwhen many of the links went to external sites or an internal webpage that looked quite different than original pin-style page. It was,though, the starting point to thinking about individual containers for specific bits on content. The philosophy broadened so that information in cards was more than links; content styles include video, images, forms and social sharing tools. In some interfaces, cards also served other purposes, including micro-interactions such as notifications.
2.Metro & Flat Design
Coined by Microsoft, the Metro typography-based design language originated in 2006 as the earliest representation of card-based flat design.
While it still retains the colorful chunked-out look of its Metro roots, the company has now evolved its design language to “modern design,” which is really just a fancier way of saying “flat design.” In fact, as we described in Flat Design Trends, flat design is again evolving by embracing the textures, shadows, and gradients previously associated with more skeuomorphic techniques.
3.Grid (or Masonry)
The classic look of grids never really fades away. Card-Style Web Design 12 Instead, designers are iterating the technique by adhering to a more strict grid or masonry-style framework that includes blocks of content either spaced out or connected perfectly throughout the layout. Some designers create the grid by weaving together
cards or other container-style patterns, while other designers prefer a more purist grid to showcase images and graphics (more common in the stripped-down sites we explored in Minimalist Design Trends).
While this design concept was almost exclusively used for news and magazine websites, it has also emerged as a popular option for content-heavy sites like portfolios and blogs. Characteristics of this design style include blocks featuring a “teaser” image and text linking to a full article or post elsewhere on the site.
Interestingly enough, one of the most helpful ways to create a container-style design is to first start with an exercise in information architecture – card sorting. In this technique, you usually present physical cards representing navigation or content items) to users for them to sort into their own categories or pre-existing categories. To create a cards layout, you can conduct this exercise yourself, validate with at least 5 users, then incorporate the most usable structure into your design. Of course, keep in mind that this technique is only helpful if you plan on categorizing your cards – it won’t really help if you plan on just listing your cards in an infinite scroll without much structure.
Ultimately, container design works simply because the framework mirrors a familiar information model rooted in the physical world: one idea, one card.