A card based user interface boxes up several different elements on a page, each with an individual piece(s) of content. So, basically unique components are broken down and “nested” or aggregated into card-like shapes. Think of Pinterest and the deck of cards placed all over the page. The trend has in fact been around for a long time, but it wasn’t until recently that it was given a proper name.
Many websites, especially photoblogs have adopted this trend. Those squares and rectangles encompassing images and pieces of text have are taking over the web. This trend was made popular after the introduction of Material Design. Currently, this card-based system is becoming a mean to design clean, appealing, and user-friendly pages.
So, why the card based web layout is becoming so popular as opposed to traditional layouts? Let’s find out.
How Card-based Trend Began
Microsoft’s Metro UI is an early example of card based design.
The trend began when mobile-based web design was endorsed by a large majority of designers, owing to the paradigm shift in the field of web development. Constraints of smaller screens and screens of all sizes (of all types of phones) forced designers to build UI’s that focused on responsiveness, clarity, and ease of navigation. Much has changed since. With the help of “cards” or nested objects, layouts would re-order and re-arrange to suit the screen size, browser, and other features of the device. What used to be content arranged in several columns spread over a large page on a desktop screen can now be compact stacked, folded, expanded, or spread out elements re-positioned on a smaller one-page screen.
What do cards Include?
See the Pen Material Design Login Form by Josh Adamous (@joshadamous) on CodePen.
Cards may include anything ranging from titles, headings, subheadings, usernames, images, advertisements, rss feeds, previous posts, author bios, recommendations, banners, sliders, menus, icons/buttons, forms and so much more. Most of Google’s websites have a card layout, based on their popular Material Design, and all of them are examples of a successful adoption of card-based designs at an early stage.
Examples of Card-based Designs
Pinterest UI
Imagine Google Now, Jelly, Twitter, Tinder, Weotta pages. These are perfect examples of a large mass of compact cards. A handful of designers are still under the notion that these grid-like examples are the only kinds of card-based web- designs. They miss the point when they take into account what the card-system actually is. Cards don’t always have to be small, numerous, or placed in grid mode.
Let’s label a few examples to further illustrate this point. The food widget is a perfect example of a card-based design that has successive card placement in different positions. Check out the City Guide, perfect for guidebook and apps. This may not appear to be card-like, but as a matter of fact, it is. Every image and text box is placed within a “card” to making the design appear more modular and systematic.
For more examples, take a look at econsultacy’s blog post, 15 Delicious Examples of Card-Based Web Design.
Pros of Card-Based Design
One Design To Rule Them All.
Card-based web design may have been initiated with the intention of creating a more adaptive and flexible framework for websites to be displayed perfectly in different screen sizes, a one design solution for all screen sizes. However, this isn’t the only advantage to this now-trending UI. With the card-based system, came an end to hierarchy. Previously we lead our users with the help of hierarchy systems. The card based design eliminates the need for a hierarchy, leaving the user to decide what’s important and making the whole of content easily scan-able. Also, you can customize CTA buttons and make your pages more sharable across social networks (with the help of widgets). One of the most profitable pros is one that uses split testing tools and tracking. For website owners who require constant data on which new feature of their website is a hit, cards enable easy testing of individual elements.
Cons of Card-Based Web Design
To avoid any biases, we won’t forget to mention the “cons” of card-based UI. For one, this trend could simply be a fad that is currently a hit, but eventually, considering the fast-paced transformations in technology and web-design, may go under. Another more obvious, but less worrisome, con is that users are not used to card-based designs may take some time before they accept this UI and label it “visually aesthetic”. Users who favor traditional designs may find it less logical and prefer hierarchy systems. Additionally, updating content on card-based UI’s can be difficult since you have fixed your grid. The traditional page designs were more flexible in terms of updates and alterations made later on.