Embracing the latest web trend: card-based design

September 03, 2015

Embracing the latest web trend: card-based design.

There are always new webdesign trends gaining momentum. Who could forget parallax scrolling from a few years ago, which is still popular today? As of late, long-scrolling pages are getting more attention from site visitors. One trend that’s not gotten as much recognition as many others, and has been around for a little while already, is card-based design. The most popular website that showcases this design trend is Pinterest, but there are also other sites that are increasingly using this design approach, and with good reason. When visitors browse a site that uses this design technique, they immediately notice the cleanness and well-organized planning behind such a simple-yet-elegant approach to design. There’s a slew of benefits to using card-based design on your own site.

A grid approach to IA

When you look at any card-based design, it’s impossible not to also see a grid-based design peeking through. That’s because every edge of a card is really the edge of various grids in a bigger, well-organized system that promotes great consistency and harmony in the way the site’s presented. This in turn significantly helps the information architecture of your site. Information architecture is the intelligent order and flow in which your visitors absorb site information, ideally in keeping with the goal of each page and the overall site.

Think of it: The card-based design guides your visitors’ eyes due to its emphasis on consistency. Every card is part of a column or row that directs their eyes along uniform horizontal and vertical lines. This arrangement helps your visitors understand what piece of information is more important than others.

Take, for instance, Contrastly, a photography magazine. Following its grid/card layout helps you understand what’s more important in the information hierarchy. The newest articles are placed along the top row while the older articles appear in the bottom row. Newness is generally associated with greater importance, so following this descending order of rows in the card system lets users quickly associate what content is more important. They can therefore prioritize the order in which they read this information.

Heavy reliance on images

We’ve heard the old saying that people are visual creatures so many times that it’s a cliché, yet in card-based design, it takes on new meaning. Card-based design relies on visuals almost exclusively; any copy on the same page is usually secondary to the visual in terms of the information architecture. Going heavy on images like this is a strength of card-based design because studies already confirm that images elevate web design. For example, both high-quality pictures and using more human faces in images boost conversion rates. In fact, all told, there are several ways in which using images in design can increase your site’s conversions. In other words, the emphasis on using images makes card-based design more attractive to site visitors. It’s no coincidence that Pinterest is, according to Alexa, the 15^th most popular site in the U.S.

Looking at the Pinterest results for the search term “food,” we can see that images are the very first things that draw your eye when you’re on the site. You don’t care about the descriptions underneath the pictures, at least not at first. The high-quality, dazzling pictures are what nab your attention, and then, after deciding you want to learn more (but already committing to that card), you read the card descriptions.

Enhanced UX

Any designer should tell you that the user experience matters most. It’s what we’re supposed to be designing for, first and foremost. Another reason that card-based design has resonated so well, and will continue to do so for the foreseeable future, is because it helps the user experience. And that encourages site visitors to keep coming back to your site, which in turn leads to them spending a longer time there, which finally leads to more conversions! A great user experience centers around people being able to find their way around your site without any friction; basically, they should find what they want to find immediately and with no headaches.

Dribbble is a site that understands this well because its designers have used cards to make the user experience simpler and better. This site is well-known in the online creative community as a showcase for user-generated artwork. The point of the site is for people to admire illustrations, graphics and images of all kinds, so card-based design is really the most suitable way for presenting this. Since images draw the visitor’s eye efficiently and immediately, the user experience is greatly enhanced when visitors can quickly peruse the cards in the grid layout to see which ones interest them. As soon as they see one that interests them, they can instantly click on the card to take a closer look. A site like Dribbble lets visitors find right off the bat what they’re looking for in a super-convenient way. That’s the epitome of a great user experience!

Well-Suited for mobile design

You may’ve heard that mobile has already overtaken desktop in the sheer number of users. In the U.S. alone for 2015, mobile media digital time comes out to 51% compared to desktop’s 42%. Card-based design is ideal since it takes this trend into consideration by being eazily compatible with responsive frameworks. Because cards offer content in more digestible chunks, it makes it easier to display on mobile frameworks. Look at cards this way: their shape and size is practically a mimicry of the shape and size of a smartphone or tablet. Of course, not exactly a perfect match due to the multitude of different models available, but still a pretty close match when you think in terms of aspect ratio.

As a result, cards are never going away as long as mobile keeps growing, and it’s not showing any signs of slowing down anytime soon.

Not merely another design fad

The problem with some design trends is that they turn into fads, which makes them short-lived and forgettable. Card-based design, though, is anything but! Because of the slew of practical uses and benefits that it offers, it’s only going to become more popular as time wears on. This means that it has staying power. It provides consistency in the information architecture of sites and taps into users’ obsession with sharp images as a way of driving more conversions. Consequently, the entire user experience also gets a huge improvement with card-based design simply because it actually makes it easy for users to find what they’re searching for on the site. Thanks to the rise of mobile in the last couple of years, this design approach is becoming a mainstay that more and more people are encountering and enjoying. When you think of it, cards are really an old concept, yet they’ve been given a shot in the arm and updated to a fresh, new way of web design. It just goes to show you that innovative designers can take something old and mundane and turn it into something that’s extremely relevant and beneficial in the 21st century.