Minimalist UI Design (Part 3) - Minimal Card Styles

Card-style interfaces might have been one of the biggest trends of the past year. Thanks in part to Google’s Material Design, cards are the go-to design pattern for many Android-based mobile applications and for Apple apps as well. Cards are also finding homes in plenty of desktop sites.

The popularity is due in part to the phenomenal usability of cards. Something Pinterest has known about for sometime.

Cards are a simple method of creating organization and flow in a design. Plus, they work with almost any type of content:

• Photos
• Text
• Video
• Coupons
• Music
• Payment information
• Signups or forms
• Game data
• Social media streams or sharing
• Rewards information
• Links
• Combinations of elements

That’s why big-name websites are using card-style design patterns in a minimal framework. Cards are a visual element that relates to a specific action against a simple backdrop. This simplicity is easy to look at, feels unobtrusive and the simplicity is calming, which gives the user the feeling of control. That they have the power to do what they want on the site. It’s no wonder than a combination of minimalism and cards is a popular option for sites where users have choices to make, from picking a song to buying socks.

Cards are a fluid option that can work between desktop and mobile sites responsively. However, it’s important to note that cards will look (and maybe even function) differently between devices. Look back at the eBay design above. The cards are different sizes and the “pick of the day” is horizontally oriented, while the “trending deals” is more square. Each of these shapes presents a problem on mobile, with a solution that is more vertical. Each card will reshape for smaller device sizes.

Here’s a few things to keep in mind when using cards in a responsive design:

• Is the text equally readable on desktop and mobile devices?
• Do shapes work with device aspect ratios?
• How will photos and images look across devices and will they be the same or different?
• Are the clickable and tappable areas the same? (It is recommended to make the entire card a single linked element.)

Source: UXPin