Let’s Talk UI: Card Design
By Aly Richmond
With today’s social media culture, there has been a huge shift toward personalized content when it comes to smartphone applications and websites. GUIs, or graphical user interfaces for mobile devices, are created with user experience in mind.
The most popular apps are using card design for their content as a way to create this personalized experience. What is card design? It’s a user interface (UI) pattern based on individual pieces of content that works well for mobile devices, as well as desktop sites. It’s best described by Carrie Cousins as, “A boxed piece of content that looks like it is featured on a playing card of sorts. Card-style boxes typically hold one unique bit of content or information and are commonly vertically oriented.” These rectangular card-shaped containers fit the shape of most mobile phones, and feature anything from images, text, buttons, and links, and keep information organized and separated accordingly.
Mobile card design can be used in many different ways. Social media applications with a lot of individual posts, such as Facebook, use a narrative card design where the cards appear in an endless stream, one after another. Each card is designed to look similar, even though the content from one to the next is varied.
For example, two posts from my Facebook newsfeed are featured below. One contains an article that is shared from another website, and the other features a simple status. Although the content is different in each post, Facebook uses a flexible universal design that works for both.
The way the infinite scroll feature works on Facebook is that each white card has grey padding above and below it, that helps the user to separate each section of content. Inside the cards, Facebook leaves plenty of room between each piece of content. According to Carrie Cousins this “provides users with time to visually reset when looking from one element to the next or from card to card.” And the best part of Facebook’s card design is that it’s flexible enough to work on both mobile and desktop.
But narrative card design isn’t the only way to use card design. There’s also discovery card design, which is when the cards are presented in a grid layout, allowing the user to see multiple items of content at once. This design is used in image-sharing websites, such as Pinterest. Pinterest also uses personalized content for each viewer, and has a range of content.
Pinterest is set up on a flexible grid so, no matter the screen width, the content can fit. Each card is designed with the same width, but length can be as long as needed because the grid is not set up so rigidly. It’s flexible (and looks cool) because any type of image can fit.
Perhaps the best part of card design is that it’s not just used for main content. It’s used to show notifications, ads, and even pop-ups. It’s a simple design for creators that makes websites and applications organized for the user.
So are cards the future of UI web design? As content becomes more and more personalized, and as audiences begin to expect that personalization, we’re certainly headed that way.