Cards, as an element of web design, are a relatively modern element of web design (as far as we can talk about modern and outdated in this field). They are a container in which we place several short and related elements. These could be an image, a title, a short text for the title and a button to share or to enter an article (another page) and get more information.
Cards are named so because they generally resemble playing cards.
Cards have 4 main characteristics:
- Group related information
- Provide an abbreviated form of information and refer, via a link, to the full text
- They look like real playing cards. Because they often have rounded corners and are taller than they are wide, enclosing related information in one place, cards strongly resemble playing cards.
- They allow for adaptability of design
Style
The cards you use on your site should have similar styles, while still allowing for some variation – cards that lead somewhere when clicked (via a link) should be distinguishable from those that simply group information.
The style of the cards should follow the style of the site and your brand.
Spacing
It is important when considering the design to imagine what distance there should be between the different cards if you decide to use them as an element of your design.
Choose a distance between the individual cards that you can easily divide into 4 or 5. For example, 20px, 40px, 100px.
The internal distance (padding) is also important. It will determine how far the internal elements will be from the borders of the card.
Adaptability
It is important to consider the structure of your site, but also the individual elements, such as the cards of different resolutions. Responsive design is crucial to the success of your site, especially in this day and age where most people use their mobile phones to access the internet.
For mobile designs, the approach should be “top-down” to avoid cluttering the rows. Also, some elements can be removed when using a mobile device.
Content hierarchy
Like any form of content, what will be found in the maps of your site should also follow a clearly visible structure. The content of the map should be arranged in such a way that if there is a link to another page or some action, all the information should be presented before it, so that users can make a conscious and correct decision about whether or not they want to take advantage of your offer.
