Table of Contents
Web design is obsessed with cards. What doesn’t use this pattern is, by many people, not considered modern. Do you agree with that? A lot of clients and designers do. The problem is that there is a lot that can go wrong during the process. Designing perfect card-based layout is not as easy as it sounds. In this article, we will discuss the last three biggest mistakes related to cards you must avoid. Let’s take a look what you can do to improve your card-related design skills.
No. 1-4 are in part 1.
No. 5: Focusing too much on visuals
One very common use of cards in web design is for layouts with imagery. The majority of examples of card-based layouts contains thumbnails. This is also why some people think that card pattern is good for galleries. As we discussed in the part one, this is not true. Layouts with cards are often not the best choice for galleries. Grid-based layouts usually work better. Anyway, let’s say that you work on layout that meets all conditions for using card pattern.
In this situation, focus too much of your attention on visuals. Don’t get me wrong. I don’t want to suggest that the visual should be anything less than perfect. What I mean is that you should not focus entirely on them. Cards usually contain only few elements. They are very minimalist by their nature. As a result, any defect is immediately visible. It is a paradox. There is only so few elements. Yet, so much can go wrong. And, when you focus on one thing, you may miss something else.
This is why you must focus on all elements in the card. Yes, visuals are important. However, the key to perfect card layout is polishing all elements. As the saying goes, the chain is only as strong as its weakest link. So, if the card contains some image make make sure it is perfect. Then, you have to move to other elements present on the card and the card itself. Remember that the image itself will not help you create perfect design. That image is only one link in the chain.
Work on the content of the card
What are the next items on the list you can improve? Is there any text? Make sure the text is readable and legible. Use proper font size, line height and line length. In addition, in case of big screens and TVs, double-check that the text is easy to read even from bigger distance. Keep in mind that bigger screen is not a reason for smaller text. It is actually the opposite. The bigger the screen the farther from it users can be. We hold mobile phones usually the closest to our eyes.
Doing so with your notebook, monitor or TV is difficult. Just try to hold any of these devices closer to your eyes because the text is small. Another thing related to text is its intelligibility. If you are the one creating the copy, make sure target group of people will understand it. Using wrong words or words that are hard to understand decreases your chance to communicate the message of the deign. And, perfect typography is not just about the content of the copy.
You also have to establish clear hierarchy. This means distinguishing top headings from subheadings and body text. Create natural flow that will lead people’s eyes through the content of the card. As a result, reading of the text inside the cards will be much easier. Next one. Do you use any icons? Are these icons legible and easy to understand? There is nothing wrong with reinventing the wheel. However, make sure to test set of your icons on other people.
If people can’t understand the icon, they will not know how to use it. As a result, they will not use the icon because they don’t want to make mistakes. If the imagery, typography and iconography of the cards is perfect, what’s next?
Taking care about the space
The next thing is balancing the white space in the card. Cards as elements don’t offer abundance of space. Depending on the type of content, you may have almost no space available at all. However, this doesn’t mean that you should throw in the towel. It also doesn’t mean that you should ignore the white space because you can’t do much with it. This is a false assumption. The fact that cards offer only limited amount of white space is a reason to make the best use of it.
This means that you have to take control of properties such as margins and padding. You can, and should, use them to make the layout of cards more spacious. Why is white space so important? In design, there are rules or laws called Gestalt principles. These principles are proximity, similarity, figure and ground, closure and continuation. For this moment, the principle we are interested in is proximity. When elements are placed close together, we tend to perceive them as a group.
Cards and space management
Sure, the content of cards is already close together. However, this doesn’t imply the content has a structure. On the micro level, there is still a lot we can do. First, we can use margins to increase the space between the elements with weaker relationships. Then, we can decrease the space between elements with stronger relationships. On blog card, we can decrease the space between card thumbnail and heading. Then, we decrease the amount of space between card heading and text.
This will establish stronger relationship between these three elements. If there are any icons for sharing, we can use margin to move them farther from the content. This will loosen the relationship between icons and the content. However, it will not disconnect them from it completely. It is still on one card. Gestalt and the law of proximity. We can also space all these elements evenly. This will loosen the connection between the elements and make them equal. This is type of spacing is used on cards on Pinterest.
Cards, white space and importance
I should mention that white space is not the best tool for increasing importance of certain elements. It is good if you want to make something more visible. In that case you increase the amount of white space surrounding that element of area. This will make that area stand out and it will become a focal point. If you want to change the importance of some element on the card, you should work with its size. Simply said, the bigger something is the more important it will become.
So, if you want to increase the importance of something, make it bigger. For example, let’s say that the heading of the card is most important element. Then, you should reflect this in its size. You should use bigger font size for it than for other text. Keep in mind that this doesn’t mean that the heading should be bigger than the thumbnail. Apply this principle to textual elements. Also, the same is true for the least important elements. These should be the smallest.
Importance and size
A better way to increase or decrease importance of textual elements on cards is by changing their color. In case of elements that are less important, you can use color with less contrast. What is less visible, is usually not so important. If you want to emphasize some text, use color with more contrast. One easy way to implement this is by using monochromatic color palette. Select base color and then adjust the amount of white. As a result you will get variations of your base color.
Let’s assume that your design has light background. Then, the element with the smallest importance will use the lightest variation of the base color. Meta information such as dates are a good fit. The variant in the middle can be used for the body text on the card. Finally, the darkest variant is for the heading of the card. When you do this, the heading will be the most visible element on the card. When user quickly scan the layout the headings will get the most attention.
There is one last thing I have to mention. This section is about not focusing too much on visuals. Even if you do perfect job on white space, size and contrast visuals will always fight for people’s attention. This is especially true if you use visuals with bright colors. In that case, don’t try to “fix” this by using even brighter colors for other elements on the cards. Otherwise, the result will be complete disaster. You don’t want to make your design look like a coloring book.
Here is my recommendation. First, you can decrease the saturation of colors on the image. Instead of trying to increase the contrast of colors of text, decrease the contrast of the image. You can also use black and white version of the image. The second option is to simply let it be. Sometimes, choosing to do nothing is the best choice we can do.
No. 6: Using poor visuals
Large imagery is one of the current trends in web design, just like layouts with cards. And, I’m convinced that, in the next year, both these trends will gain even more momentum. Therefore, we should discuss some best practices to use these two trends together for the best results. There are basically two practices to keep in mind when you work with visuals. Apply these guidelines to any design, not only cards. First, use only high-quality visuals.
Quality design requires quality visuals
You can’t create professional and quality website if you use cheap visuals. Seriously, visuals from stock image banks will not help you create jaw-dropping designs. Quality website requires visuals of the same quality. Even if you don’t use stock images great design is not guaranteed. A lot of clients will provide you with images that, unfortunately, suck. Sometimes, the quality of these images is even worse than those from stock image bank.
When you ask your client for custom images, you need to make sure that they are sharp and cropped properly. In the best case, your client should hire professional photographer. In the worst, you or someone else should invest some time in perfecting the photos. Every photo you use in the design represents you, or your client. It doesn’t matter if we are talking about photo of product or company headquarters. It still has serious impact on how people perceive your client.
Visuals and the message
The second guideline is to make sure all visuals are congruent with the message you want to communicate. Every design communicate some message. You can either strengthen or weaken this message by your choices about visuals. It is not just about quality of the visuals. It is also about the content. For example, if your client sells cosmetic products, forget about using images featuring computers, cities or crowds of people. You need images with some cosmetic products in it.
A few months ago, I worked with one Czech company selling teas. I will not mention the name due to non-disclosure agreement. Let’s just say that it is one of the biggest tea sellers on the Czech market. We decided to embrace visuals and use them as one of the most important elements. We also had to communicate company’s mission and vision. Therefore, we couldn’t use any image just because it was available. We had to intentionally filter our options.
It took a lot of time. However, the result were worth it. We helped the company strengthen its brand and brand awareness. We also increased the profit because more people started buying its products. Sure, there were many factors that helped us achieve this. We would never be able to achieve that without great copywriting, branding, flawless user experience and so on. However, choosing the right visuals helped us communicate the message of our client.
Design with personality
So, the first question you have to ask is, what message do you want to communicate? In order to make it distinct and unique you have to fill it with personality. And, visuals are one way to do it. Think about your design as a person. How would she look like? What style would she embrace? Person with interest in vintage or hipster style would probably not look the same as person with interest in cyberpunk style. Define the personality of the design.
When you clearly define the personality, you can start to think about the visuals. What environment and props should the visual contain? Vintage design should use visuals featuring vintage objects and create nostalgic atmosphere. On the other hand, this vintage setting is not the best choice for shop with cutting-edge electronics. In that case, common sense suggests using electronics and technology-related themes. Forget photos of smiling people as default finally.
Remember that every image in the layout has to have a purpose. Whether you are using cards or not, visuals must be connected to overall message. Any incongruence can be a reason for people to not to trust you. Without the trust, your design simply can’t succeed.
No. 7: Showing too many cards on a single page
Let’s talk about the last mistake related to layouts based on cards. It is showing too many cards on a single page. This is usually not a problem on mobile devices such as phones and tablets. There is not a so much screen real estate. Bigger screens, such as desktops and TVs, are a different story. If you decide to use card-based design here, plethora of cards will quickly become a problem. Another problem is how to solve this problem.
First, I would ask whether card is the best design pattern to use. We discussed this in the first part. Card pattern is great for mobile and tablets. It might not work as well on bigger screens. Also, it may not work with all types of websites. So, first consider this possibility. Card design pattern is not the right pattern for current situation. What if you decide to stick with it? I would suggest doing one of two things, or both of them. The first one is increasing the size of cards.
You are working with large screen. So, it is a good idea to increase the font size of the text inside the cards. This will also increase the size of the card. You can also enlarge the size of card thumbnail, if there is any. This might help you fit four or five cards into single line. My second suggestion is to make the width of the page fixed above certain resolution. In the end, this is also how the most popular front-end frameworks Foundation and Bootstrap.
Cards and fixed layout
Nobody says that your layout must be full-width on large screens. This can be a very bad idea because you don’t know how far will manufactures go the next year. There are already screens you can use as a wall replacement. If you want to reduce the number of cards displayed at once, you will have to make them big as human head. Even if you do so, someone can create a bigger device. What will you do then? This is just not sustainable. Embrace layout with limited width.
I completely forgot to tell you why showing too many cards on a single page is a mistake. It is simple. It creates a mess. Also, it can be overwhelming for people. Imagine a higher number of elements fighting for attention. People will not know what card to focus on first. This is what will happen when you stack too many cards on a single page, or in a single row. Make reading of the content easier, not harder. Serve it in smaller chunks. Another situation when less is more.
Closing thoughts on cards in web design
This is the second and last part of this mini series. I hope that this, and previous, article will help you avoid the biggest mistakes in creating card-based layout. In addition, I hope that it will be easier for you to create perfect layouts featuring cards. Card as a design pattern is a trend with strong momentum. There is no sign suggesting that it is on the decline. It is rather the opposite. So, it is a good idea to take some time and learn how to work with it in the right way.
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
