THE SECRETS TO EFFECTIVE CARD-BASED DESIGN

07 Dec 2015 | By Ann

Topics: Card based design


Nowadays card-style interface is a popular and user-friendly option for all types of digital design on varying device sizes.

A card should serve as a holder for a particular piece of content such as content link, signup, video player, and so on – that users want to interact with. One card equals one action.

Simple ways to design card-style interface

There is not a magic formula for the perfect card, but there are some design choices you can make that encourage every user to click.

1. Use a black and white outline

Begin with a black and white outline. The entire card can serve as a link, so think about – what parts of it will be a click. Consider the elements like spacing, images, and typography etc. Also think about how you would utilise it from this stage such as place of “click here” button, its pattern and working etc.

2. Use exaggerated spacing

Use larger white spacing between the elements, it will increase the readability. You might need, to begin with, double the spacing you may normally consider between elements. Gutters should be extra wide and line spacing could use the extra room as well. The additional space can utilise to create an open design and organise the content more clearly. The card has a constrained canvas and ought to fit on a single screen on a phone, and 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.

3. Add natural colour and shading

Next, give the colour and shading to the design – keeps it natural looking and copy reality in the shadows and styles of the design. The card would follow:

  • 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 centre of the design.)
  • One card equals one bit of information.

4. Create simple layers and typefaces

Use simple layering to create a unified card style for the entire interface. When it comes to typography, avoid super thin or condensed options because they can be tougher to read. It’s better, if you choose sans serifs as fond style.

Most cards work best with two typeface options – something for the main body and another for the headline or call-to-action. Remember to include the contrast between typefaces and contrast between the background and text elements for each card.

5. Limit UI elements

Keep the limited number of user interface elements throughout the design, for example, buttons throughout the design. You might not even need a button at all in a card-style design. Keep the shape and design simple.

Previous Next

subscribe our newsletter

BACK