The Complete Guide to an Effective Card-Style Interface Design

Card-style architecture is one of the biggest things in web design, and mobile design in particular. From apps to responsive websites, the card-style format is popping up everywhere.

And for good reason. Mobile card design looks nice, works well on a variety of devices and creates distinct organization and a method for content delivery. That’s why many large, well-known brands are using the card format and many smaller design and development groups are following suit.

The Ultimate Designer Toolkit: 2 Million+ Assets

Envato Elements gives you unlimited access to 2 million+ pro design resources, themes, templates, photos, graphics and more. Everything you'll ever need in your design resource toolkit.

Explore Digital Assets

What is Card Design?

mobile cards

mobile cards
mobile cards

Card design styles for mobile and desktop websites is defined by 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.

But as with any design technique, there are plenty of ways to break the rules. The basic principle behind the idea is to give a burst of information in a way that is easy to see and digest all at once. Popular social media sharing sites such as Twitter and Pinterest use this format to group images and posts.

What’s nice about a digital “card” is that it can be manipulated in a variety of ways. They can appear stacked individually (as is often the case for mobile design) or fall into a grid for larger screens. Cards can be short or tall and designed to adjust according to the content held within.

Card-style design is also popular for responsive frameworks because designers can add and collapse columns of cards to fit the shape and size of the screen. While most designers design cards with a fixed width and allow card height to remain variable.

How Cards Can Work for Your Project

mobile cards

Cards are a trendy option because of their flexibility and wide range of use. (It also helps that some of the most popular websites in the world have used some form of card in recent design iterations – Google, Microsoft, Facebook, Twitter, Pinterest and Buzzfeed, to name a few.)

But do you want to use a card-style concept? This design technique has quite a few pros:

  • It makes content easy to digest.
  • There are a lot of design styles that work in this format, from flat to embellished.
  • Cards work well in responsive frameworks.
  • The format has a look and feel that is organized and provides structure for a lot of information.
  • It works well for many different types of content.
  • Card-style designs are practically made for sharing on social media.

Design a Great Card

mobile cards

mobile cards

mobile cards

The best card design is simple. It also features a rich content experience. For a successful card-style project, both of these elements must be present. But there are plenty of other design techniques that can add to functionality and aesthetics as well.

The great thing about cards is that there isn’t really a pure set of design rules you have to follow. Basic principles of good design are all you need to understand to start making a card-style project.

Use Plenty of Space

Space is a common factor in card-style design projects. In particular, plenty of white space. Giving each individual element room to be seen, read and understood is important. This is especially true in a block that will often contain a “mini design” of its own. Think of it this way: If each card in your project contains an image, headline, main copy text, call to action button and sharing button or link, there are a minimum of five elements to work with in a space of about 600 pixels wide.

Having plenty of space around each element provides users with time to visually reset when looking from one element to the next or from card to card. Including plenty of padding between elements will also help bring focus and attention through the card in a way that works with the content hierarchy.

One Piece of Information Per Card

We’ve already determined that card will contain multiple elements within a design, but each should focus on only one bit of information or content. Follow the one idea per block concept to that the image and all supporting text are unified.

This idea can make content that might be dramatically varied work in the same space, seeming intentional and organized. It gives users the opportunity to pick and choose the parts of your content portfolio they want to consume and share.

Select a Clear, Crisp Image

The image is king of the card design space. You need a great image – and it needs to be great even when small – to draw users to each individual card. (Remember this is a crowded internet space.)

If you don’t have an image, go for art-style type or create text that can’t help but draw users in? (Remember the llama “escape” in late February that went viral thanks to great headline writers.)

Use Simple Typography

Opt for simple typefaces in simple and easy to read colors – blacks and grays are popular – that stay out of the way of the design. Medium to round sans serifs are popular for readability and a neutral design feel.

Limit the number of typefaces as well. For most card projects a single typeface is enough. Consider using a bold variation, but in most instances size differences are all you need to make the most of text. (While you are at it, make sure to limit the number of words as well. One thought per card.)

Include an Unexpected Detail

While card style interfaces are often straightforward, adding an unexpected detail can give it just the right amount of flair. Consider a cropped or corner cutout, angled edge or 3D effect to add emphasis to cards.

Other techniques such as color overlays or hover effects can be equally pleasing. Also consider adding an effect to only the most significant bits of content so that every card is not quite equal in terms of visual weight.

Create an Open Grid

This one might be the toughest concept to get your head around, depending on how your design project comes together. Just as important as the design of each card is the “outside” space between each element.

Create a grid framework that includes some type of contrast with each card. Design the framework so that spacing is consistent from card to card and so that there is plenty of room between each element. This might come even more into play when thinking about where breakpoints might fall in a responsive framework with fixed-width cards in particular.

Consider Usability

A card should be more than just a design element; it should help a user accomplish some type of action. From reading a story or article to signing up for a e-newsletter or making a purchase, the card interface should provide an easy interaction.

Consider how these interactions work as well. Go beyond the click. Many design projects featuring cards will be consumed on mobile devices. Consider interactions that use taps and swipes rather than traditional clicks. Ensure that buttons or actions are easy to see and perform, including having enough room between objects to touch with ease and without activating the wrong element.

Conclusion

Card-style design projects are fun, trendy and functional. Using some of the basic tenets of design will help you create a card deck that is aesthetically pleasing and functional.

The No. 1 idea to keep in mind is simplicity. Everything about a card design should be easy to read and understand. Good luck with your project!