The secrets to effective card-based design

Carrie Cousins.
December 04, 2015
The secrets to effective card-based design.
So you want to get on-trend with a card-style interface? That’s probably a great idea; cards are a popular and user-friendly option for all types of digital design on varying device sizes. The key to a card design is creating something that users want to click. (That is the key to a great card.) A card should serve as a container for a specific bit of content – content link, signup, video player, and so on – that users want to interact with. Here’s how you design it…

Start with a black and white outline

si It sounds pretty simple: start with a black and white wireframe for the design. Think about the intent of the card and what parts of it will be click, or tappable. (The entire card can serve as a link.) Plan for elements like spacing, images, and typography so that you can see the card without color or embellishment. Think of it as the “playing card” phase of the design. All the elements of the card are there. Does it seem like a framework that’s easy to understand? Think about how you would use it from this stage. Where would you click for an action? Is the pattern and result clear? How do you go back or advance? The answers to these questions should be relevant without cues such as a red “click here” button blinking on the screen. As with any other project, if the outline does not work in black and white, the final design probably won’t either.

Use exaggerated spacing

firefox The biggest challenge when it comes to cards is creating a compact design that does not feel cluttered. That’s where whitespace comes in. And you’ll want to use more of it than feels comfortable at first. The addition of whitespace will give elements more room to breathe, making the overall card seem more spacious and increasing readability. Generally, you might want to start with twice the spacing you might normally consider between elements. Gutters should be extra wide and line spacing could use the extra room as well. The extra space will help you create an open design and organize the content more clearly. The card has a pretty limited canvas and should fit on a single screen on a phone, and a similar-sized portion of the screen on larger devices such as tablets or desktops. Cards may also compete against other cards for attention on larger screens. Added whitespace will help the entire design feel more open and easy to dive into.

Add natural color and shading

nexus Now you are ready to think about color and shading for the design. Keep it natural looking and mimic reality in the shadows and styles of the design. No, we are not talking skeuomorphism here, we’re talking about creating color with natural outlines and shadows. Think about how a card will be viewed. The user should get the same feeling as if he or she were actually holding it. Use some of the basic rules of physics to imagine (and design) each card as it would be held:
  • Lighting should cast some shadows to the back and bottom.
  • The darkest part of the design is likely at the bottom thanks to lighting conditions, which normally come from above.
  • Avoid content in areas that are required for holding the card.
  • Touchpoints (and the associated calls-to-action) should be focal points and easy to interact with. (Just like the face of a playing card is in the center of the design.)
  • One card equals one bit of information.

Create simple layers

todoist Now that you are thinking about physics, take it to the next level with simple layering to create a unified card style for the entire interface. Not sure where to start? Google’s Material Design guidelines are a great starting point. material-buttons “In material design, the physical properties of paper are translated to the screen. The background of an application resembles the flat, opaque texture of a sheet of paper.
An application’s behavior mimics the paper’s ability to be re-sized, shuffled, and bound together in multiple sheets. Elements that live outside of applications, such as status or system bars, receive a different treatment. They are separate from the app content beneath them, and do not carry the physical properties of paper.

Break this down and it goes back to making a digital object look and feel physical. And if users want to touch it, they’ll want to click it. The concept is just that simple.

Stick to simple typefaces

type When it comes to typography, simple sans serifs are often the answer. Avoid super thin or condensed options because they can be somewhat tougher on the eyes. Most cards work best with two typeface options (even if they are from the same family) – something for the main body and another for the headline or call-to-action. The most important factor when it comes to typography is to remember to include plenty of contrast so that text elements are easy to read. Remember to include contrast between typefaces and contrast between the background and text elements for each card.

Limit UI elements

music Repeat after me: one card equals one action. So that probably means you don’t need to include a bunch of user interface elements such as buttons throughout the design. You might not even need a button at all in a card-style design. But if you think users need a visual cue, one button is enough. Keep the shape and design simple – again, the Material Design approach is a good option – and stick to just one button. A button is probably the only UI element you need. This is your design goal.

Conclusion

There isn’t a magic formula for the perfect card, but there are some design choices you can make that encourage every user to click (or tap). Keep your design centered in reality, follow a minimalist approach with plenty of space and contrast, put an emphasis on simple typography, and create a single action for each card. Following this outline will help you best imagine and conceptualize card-style projects that users want to interact with. Combine these ideas with design theory and your mad skills for a great project that will be fun for users and aesthetically on-trend.

Carrie Cousins

Carrie Cousins is a freelance writer with more than 10 years of experience in the communications industry, including writing for print and online publications, and design and editing. You can connect with Carrie on Twitter @carriecousins.

Read Next

Exciting New Tools for Designers, October 2023

This month, we have a whole bag of goodies for designers, developers, and designevelopers alike. (Yes, we did just make…

The 10 Most Successful Rebrands of All Time - Ranked

We’re all familiar with rebrands going wrong, but what happens when they go right? From McDonald’s health kick to…

3 Essential Design Trends, October 2023

Every now and then, website design trends can leave you scratching your head. This month’s collection includes some of…

Weekly Design News #2

Every Sunday, we round up the best stories from webdesignernews.com. This issue features UX principles to improve your…

24 Best Creative Portfolio Websites in 2023

For anyone working in a digital creative field, whether design, illustration, animation, video, or a combination of…

15 Best New Fonts, September 2023

Nothing upgrades your designs like selecting the right font. It’s all too easy to fall into the trap of using the same…

Weekly Design News #1

Every Sunday we’re rounding up the best of the previous week’s stories from webdesignernews.com, and in this issue #1,…

The 20 Most Controversial Logos of All Time (Ranked)

When you hire graphic designers to create your company's logo, what do you expect? Professional designs, culturally…

LimeWire AI Studio Generative Art App

If you’re looking for the most exciting way to launch a career in AI-generated art, then you’re in the right place.

20 Best New Websites, September 2023

Are you in need of design inspiration? Are you looking for the best websites designed in 2023 to pull ideas,…

The Dangers of Deceptive Design Patterns (And How to Avoid Them)

As web designers, our role in crafting user-friendly digital landscapes is critical. We are tasked with creating user…

10 Best Ecommerce WordPress Themes in 2023 [September update]

You plan to set up shop with an online store. You know there’ll be competition. And to compete with or beat that…