18 Answers How to correctly use the cards in web design.
parallax background

18 Answers How to correctly use the cards in web design.

23 most frequent mistakes of web page design.
August 24, 2017

Cards — symbol of the modern web design.

The small unit with the most important information that functioned as the link to the page with a product or a post. Cards allow to quickly view and filter information. Wrote a manual how effectively to use cards in the web design. This Article will be useful to all who work with content on the website.

Card — an info unit, an element of the interface which works as the preview of more detailed content. The card contains key information and serves as the link to the page with more detailed information.

Now cards are used everywhere — when we choose air tickets, thumb through cards of posts in a tape of social networks, when we order a lunch on the food delivery website, scroll the website with news. Usually they are placed on the screen in the group — by a tile or by a list of equivalent content units.

Why do we use cards during creation of the website?

The main advantage of a card — universality. It is suitable for any theme and a case, for different platforms and devices. Correctly designed card (in which the logic of content is traced) improves UX of the website or applications.

Advantages of cards:

1. Intuitivism. They are understood by the user. As in life, cards is a visual hint for our brain which interprets this element as integral unit of information.

2. Information is easily processed. Cards is the information broken into small pieces. Such presentation is appreciated by people as saves their time, helping them quickly understand the essence. Eat the elephant one bite at a time.

3. Appeal. The design with cards is often sated with video, pictures. It attracts users who perceive images more willingly, than the text, and they are the majority.

4. Are suitable for sympathetic design. Cards can be twisted somehow: the rectangular shape fits into different orientations and into any sizes of screens (it is possible to scale in all directions). It means that users have one experience on all devices.

When do you need a card?

Thematic blocks. Cards well suited if on your page there are a lot of equivalent elements. On the online store website it is convenient to group thematic blocks — headings — by cards: outerwear, footwear, bags, skirts.

Interactive content. It is suitable to use cards for short actions with one button. It can be the button “buy”, ” learn more” and others.

When people look through, but don’t look for. Cards are convenient for viewing of information. For example, when future customer looks through a portfolio, he has no task to find some specific project. He scans all works to get an idea about the performer’s level.

The ideas for use of cards

General principle: that which is possible to present in the list form, easy to transfer to a format of cards.

What can be shown by cards:
• A series of articles on the main blog page
• List of vacancies
• Works in a portfolio
• Questions and responses (FAQ)
• Services of the agency
• The directions for travel agency
• Real estate objects on the developer website
• The table of contents for recipes
• Numbers of mini-hotel or hostel
• Styles at dancing school
• Navigation according to longrid

Cards among us

A person has always been surrounded with cards as physical carriers of data. A card for birthday, exchange of business cards at a business meeting, a driving license and card game Durak — all these cards have one thing in common: we quickly read out from them a certain message.

A web card, as well as its material analog, gives the user the most necessary information. Cards are well perceived at the intuitive level because this format is familiar to us.

When the cards are out of place?

Strict order. When it is necessary to arrange content one after another, cards won’t suit — they, on the contrary, emphasize equivalence of content and make objects similar in appearance.

Gallery of images. Pictures are actively used in cards, but when you bring the person on the page with gallery of photos — for example, from last party, cards will complicate information perceiving. It is simply better to place pictures on a grid that it was easier for eye to acquire content.


Rules of card design:

Cards can be different:

With the background image. Over the picture which occupies all field of a card the text settles down. Such cards can be interactive: if to guide the cursor — the background picture slightly increases or becomes brighter. It is possible not to add the text over the photo, and to make an emergence element — when putting the mouse cursor the text appears.

The image and the text — separately. The heading is under the picture or a row. Such cards can settle down in columns or on couples at one level. Instead of the picture also the icon can be used. There is a wide card, for example, when it is necessary to draw attention to one product. It occupies almost all width of the field, at the same time the image is at the left, and the caption — on the right.

Only text. Extremely laconic card: heading and caption. This type can be used, for example, for the section with tariffs where it is necessary to give quickly information, without distracting attention of the user.

1 How many cards shall be in the same row
The quantity of cards in the row depends on content. If there is a lot of elements and their value is minor, it is possible to place them on six cards.

The element is more significant, the card is larger.

The advice of the designer
If cards are located in several rows, at a stage of content preparation try to correct quantity of elements that it will be a multiple of 12 — 1, 2, 3, 4, 6.

2. Optimum size of images
 The optimum size of images for cards depends on quantity of cards and the desired height.

The advice of the designer
Don’t use the images of the smaller size, than a card — they will stretch and will be “soap”. It is better to reduce very big images — it will reduce page load time.

3. Typographics
The text — an important element of a card. The heading on the background of or on the picture has to be read without efforts. It is better to choose rather large and bright print. The subtitle is inferior to heading in the sizes and style of writing; at the same time it anyway has to be read easily.

The text on a card should be minimum: only very best important to interest, carry away and motivate to go further.

The advice of the designer
If for all website you use a font with thin typing, make it normal on a card (400) or semi-bold (500) — it will improve readability.

4. Visual effects
The easy shadow on card perimeter visually highlights it on the screen and lets know that all card is the one big button.

If the image serves as a card background, it is recommended to use filters to it — it will muffle details of the image and the text will be better read.

Other reception — to add microanimation. If to choose “increase” in the column “animation of increase with a point of a mouse”, then at mouseover the image will be zoomed in a little. Such effect invites the user to click on a card.

The advice of the designer
If on a card the text is superimposed on the photo, then don’t use the photos with fine details and numerous colors — there will result semiliquid mass. Effective reception (which improves readability) — to make the monochrome or two-color image and to apply a color filter from the top.

5. Buttons on a card
The card allows to take one or several actions. On each action there has to be the button or an icon, for example, “to keep for later” and “to buy” (for the website of online store).

Card — is frequent (but not always) the button in itself: if you click on it, you will go to the page. It is possible to enter one CTA button (“call-to-action”) which gives a “tip” to the user. For example, the caption “learn more” invites to click on a card.

Few more tips how to work with cards

Any card consists of text and graphic elements. It is possible to display action buttons on a card or the card itself can work as the reference: we click on it — and we get on the page linked to it.

One card — one idea. There can be many different elements on a card, but all of them have to form one clear object. It has to be the integral piece of content for the user.

Don’t spare the white space. Each card — a separate element of content. In order the user could acquire well all content, you should not stint on the white space around and between the cards.

Limit the content size. The card shall contain the most important information. The card can lead to a page with the detailed information, but itself shall reflects only the idea. A lot of information just will not be located in it, and content will be understood less well.

Make beautifully and simply. The picture — the king in design of cards, qualitative pictures draw attention of users. At the same time a card design itself shall be simple: we advise to use basic typographics that the text to be read easily.

Create hierarchy inside a card. The hierarchy of content in the card itself helps to control attention of the user. Place the most important content above a card. Use separators when you obviously should to designate boundary between content.

Take into account the tasks of the website and product. What content to show to the user – it depends on the purposes of the website and business. We need to locate directory elements in clothing store or to make a card an appeal to a reservation of tickets? Cards for different purposes will be different.

The card — an excellent method to tell fast stories and to visually provide information. No matter, what business you have — tourist bureau, law firm or wood fired pizza delivery service. On any website and in application the card puts information in order and helps the user to get the first impression.

1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 5.00 out of 5)

Share this with friends.