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 15th 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.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…
By WDD Staff
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…
By Simon Sterne
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…
By Ben Moss
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…
By WDD Staff
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…
By Louise North
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…
By Simon Sterne
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…
By Simon Sterne
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…
By Max Walton