Embracing the latest web trend: card-based design

Default avatar.
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. The Spaces 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. contrastly 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 15th most popular site in the U.S. Pinterest 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 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. Feedhop 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.

Marc Schenker

Marc’s a copywriter who covers design news for Web Designer Depot. Find out more about him at thegloriouscompanyltd.com.

Read Next

10+ Best Resources & Tools for Web Designers (2024 update)

Is searching for the best web design tools to suit your needs akin to having a recurring bad dream? Does each…

3 Essential Design Trends, April 2024

Ready to jump into some amazing new design ideas for Spring? Our roundup has everything from UX to color trends…

How to Plan Your First Successful Website

Planning a new website can be exciting and — if you’re anything like me — a little daunting. Whether you’re an…

15 Best New Fonts, March 2024

Welcome to March’s edition of our roundup of the best new fonts for designers. This month’s compilation includes…

LimeWire Developer APIs Herald a New Era of AI Integration

Generative AI is a fascinating technology. Far from the design killer some people feared, it is an empowering and…

20 Best New Websites, March 2024

Welcome to our pick of sites for March. This month’s collection tends towards the simple and clean, which goes to show…

Exciting New Tools for Designers, March 2024

The fast-paced world of design never stops turning, and staying ahead of the curve is essential for creatives. As…

Web Tech Trends to Watch in 2024 and Beyond

It hardly seems possible given the radical transformations we’ve seen over the last few decades, but the web design…

6 Best AI Productivity Apps in 2024

There’s no escaping it: if you want to be successful, you need to be productive. The more you work, the more you…

3 Essential Design Trends, February 2024

From atypical typefaces to neutral colors to unusual user patterns, there are plenty of new website design trends to…

Surviving the Leap from College to Real-World Design

So, you’ve finished college and are ready to showcase your design skills to the world. This is a pivotal moment that…

20 Mind-Bending Illusions That Will Make You Question Reality

Mind-bending videos. Divisive Images. Eye-straining visuals. This list of optical illusions has it all. Join us as we…