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.
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.
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.
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.
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:
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.
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