

Or, using a color overlay can help reinforce your brand by using its primary color. Techniques such as the scrim are perfect examples of this. We looked at techniques that make text readable, without sacrificing the background image. Or black (dark grey) text against a light background always works best. Which means, white text against a dark background. At the same time, the image is visible as well.Īs a general rule, using greyscale colors work well. For instance, using a scrim allows text to be readable. Both can coexist together if we use the right technique.

There is also no need to sacrifice image visibility for text. There should be high contrast between text and image. Contrast is what makes an element appear distinct from one another. – Contrastĭid you notice? All the techniques discussed above are ways to increase text contrast. The state of being strikingly different from something else in close association. Both work in favor of allowing the text to stand out in addition to the graphic. Also, the calm pastel background colors are not distracting. Notice the smart positioning of text, away from images. It fades smoothly, giving the text label the contrast it needs, making it readable. It’s not too evident and doesn’t disturb the image. Again that’s a matter of personal taste.īut a 40% black to transparent works really well. Then, your scrim would be a gradient going from, say 40% black to transparent. So for instance, your text label could be a constant white. Using a ScrimĪ Scrim is a semi-transparent gradient layer that helps Text appear more readable against backgrounds.Ī scrim is a solid to a transparent gradient that sits behind a Text Label. Or you can even decide upon one, depending on what fits your brand style. Moreover, deciding on what to use ultimately boils down to your personal preference. I want you to understand that these are different solutions to a single problem. There are different approaches to making our overlay text readable. So let’s look at what we can do about it. Now we know the mess we’re getting ourselves into. The same holds true for black or darker tones. Things can immediately go wrong if your using white text over a whitish or light image. The text matches perfectly against its background. Now, most of the examples above are mockups. Overlaying a text prevents viewing the image completely. It is a measure of how easily a reader can distinguish individual letters or characters from each other. Readability is the ease with which a reader can understand a written text. When you overlay text on an image, you sacrifice two things: Not to say that its bad, but there are two things that are largely not considered. I mean, most of the card designs include an image, with text overlaid on top. Now we could say that this pattern became overly popular thanks to Card design. But my design attempt just showed you that that’s not the case.

It assumes that whatever be the image, the text will be readable. The text displayed, does not account for its background images. It’s just that, some interface designs (mockups) are only for aesthetic purposes.Īnyone who translates them into a working project will immediately recognize what’s wrong. Both are well-designed interfaces by talented people. In fact, I love the typography used in the second one. Good design is when we factor in all possible scenarios. Which means, the image could be anything. After all, when you decide to overlay text, you must be ready for ANY image. The background image is outright disturbing. But the image is not to blame. Understanding the relationship between colors and how they interact on the color wheel is the key to successful design.Alright, its not the same picture. The color wheel contains warm colors (red, yellow, orange) on the left side and cool colors (blue, green, and purple) on the right. Working with the color theory wheel is the best way to start when choosing your logo colors. Lucky for you, there’s actually a science to it called color theory that’ll make it easier for you to select your brand colors. Picking the right color combinations can be tricky business. It’s especially important when developing a brand identity, and brand assets like a logo. FedEx: purple and orange.Ĭolor is a powerful tool to engage people’s emotions and pique their interest. If you close your eyes right now and think of three famous brands, chances are you’ll be able to conjure up the company’s logo colors right away. Our brains are hardwired to react to and remember color combinations.
