Web Design Trend #11 • More Card and Grid UIs

Zazzle Media, by Jamie Leeson

We’ve previously touched on the rise of UI patterns, and although there are hundreds of which we could touch on, one which is seeing more and more across the web is the use of card-based UIs, a fundamental principle from Google’s Material Design.

Cards, made famous by Pinterest and then even more so by the likes of Facebook, Twitter, and Google are UIs where pieces of content (text, imagery, video) are broken down into individual ‘cards’ which the user is able to navigate through. Card UIs allow brands to show larger amounts of content on a screen at once, but in more manageable chunks, so users can quick scan to see what’s appealing to them and dismiss what isn’t.

As well as addressing the internet’s need for quickly consuming as much content as possible, card’s tie in nicely with Mobile-First design and Responsive principles, working well on tablet and mobile (think of those precious mobile users!) with gesture based swiping, as per Tinder, Chrome, Safari, which then scale up nicely for desktop users.

Cards also allow brands to build more robust systems for creating and organizing content, as users can filter, customize and sort them to suit their own needs, allowing brands to cater to the needs of their users on a much more personal level.

Dribbble Card

dribbble.com, an invite only sharing platform for designers, is often the go-to place to discover the latest creative trends. It’s also a great example of a functional card UI. With a simple grid, each element is clear, accessible and has equal weighting on the page, allowing user’s to navigate content quickly and easily.

Our prediction – As attention spans become shorter and users seek quicker and easier ways to find the content they want, we anticipate seeing more brands implement this particular UI pattern in order to hold the attention of their visitors, as well as organize ever-increasing amounts of content.

WordPress Video Lightbox