small_Fcsqb5pWQAAzPIK.jpeg

thumbnail_Fcsqb5pWQAAzPIK.jpeg

Adobe acquires Figma, cue the memes 🤪

large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

Still can’t get a UX job? Give up.

large_featuredImage

medium_featuredImage

small_featuredImage

thumbnail_featuredImage

Sticking to UI/UX trends is a losing strategy

<a href="http://ift.tt/2ouSrGP">uxdesign.cc &ndash; User Experience Design &mdash; Medium</a> | Suleiman Ali Shakir <img alt="" src="http://ift.tt/2oKROoo">
It’s become popular to overlay text labels on background images. But the image could be anything. How does your user interface design accommodate that? Can text overlay remain readable always?
The last thing you’d want is your users straining to read such text. This is all the more important on mobile. Smaller screens and smaller text make it slightly harder to read.
But don’t worry. There are design techniques that can help make your text readable.
First, let me show you some design mockups that use text overlay.
<img alt="" src="http://ift.tt/2ouTkPA"><a href="http://ift.tt/2mPRrLg">Photography Portfolio by Winart Foster on Dribbble</a>
Here’s another.
<img alt="" src="http://ift.tt/2ouNIFb"><a href="http://ift.tt/2g5jgwU">Article Cards Alternate by Oliur on Dribbble</a>
A good eye will immediately notice the problem with these two designs. Take the second one with the sea waves. If the wave foam was on the lower half of the image, would that text be readable?
Let me try to recreate that design for you.
<img alt="" src="http://ift.tt/2ouP0Qi">Text with scrim overlay
How readable is the text now?
Alright, its not the same picture. But it’s still ocean waves.
The background image is outright disturbing. But the image is not to blame. After all, when you decide to overlay text, you must be ready for ANY image. Which means, the image could be anything.
<blockquote>Good design is when we factor in all possible scenarios.</blockquote>
Now don’t get me wrong. Those 2 designs are not bad in any way. In fact, I love the typography used in the second one. Both are well-designed interfaces by talented people. It’s just that, some interface designs (mockups) are only for aesthetic purposes.
Anyone who translates them into a working project will immediately recognise what’s wrong. The text displayed, does not account for its background images.
However these mockups are only examples. It assumes that whatever be the image, the text will be readable. But my design attempt just showed you that that’s not the case.
<h3>The 2-in-1 problem with text overlay</h3>
Now we could say that this pattern became overly popular thanks to Card design. I mean, most of the card designs include an image, with text overlaid on top. Not to say that its bad, but there are two things that are largely not considered.
<iframe src="http://ift.tt/2oKwXSk" width="480" height="500" frameborder="0"><a href="http://ift.tt/2ov0aER">http://ift.tt/2ov0aER</a></iframe>
When you overlay text on an image, you sacrifice two things:
<ol>
<li>Image clarity</li>
<li>Text readability</li>
</ol>
<blockquote>Readability is the ease with which a reader can understand a written text. It is a measure of how easily a reader can distinguish individual letters or characters from each other. — Wikipedia</blockquote>
Overlaying a text prevents viewing the image completely. Moreover, your text may not be readable.
The image can be anything.
Now, most of the examples above are mockups. Which means those are ideal scenarios. The text matches perfectly against its background. Things can immediately go wrong if your using white text over a whitish or light image. The same holds true for black or darker tones.
Now we know the mess we’re getting ourselves into. So let’s look at what we can do about it.
<h3>Text Overlay Solutions</h3>
There are different approaches to making our overlay text readable. I want you to understand that these are different solutions to a single problem. There is no single solution answer.
Moreover, deciding on what to use ultimately boils down to your personal preference. Or you can even decide upon one, depending on what fits your brand style.
<h4>1. Using a Scrim</h4>
<blockquote>A Scrim is a semi-transparent gradient layer that helps Text appear more readable against backgrounds.</blockquote>
A scrim is a solid to a transparent gradient that sits behind a Text Label. So for instance, your text label could be a constant white. Then, your scrim would be a gradient going from, say 40% black to transparent.
I leave the opacity percentage to you. Again that’s a matter of personal taste.
But a 40% black to transparent works really well. It’s not too evident and doesn’t disturb the image. It fades smoothly, giving the text label the contrast it needs, making it readable.
<img alt="" src="http://ift.tt/2oKkQos">Scrim — gradient overlay
Recommended Scrim guidelines:
<ul>
<li>30–70% opacity (40% is ideal)</li>
<li>100% to 0% opacity black</li>
<li>size: 50% of image height</li>
</ul>
These are not hard rules. But as you can see from the above design, these settings work well.
Also, Material Design talks about text overlay on Imagery <a href="http://ift.tt/2hAGwCW">in their guidelines</a>.
<img alt="" src="http://ift.tt/2oKznR3">Scrim gradient settings in Sketch
Advantages:
<ul>
<li>Very simple and commonly used solution</li>
<li>Increases contrast for better text readability</li>
<li>A subtle design change that is hardly noticeable</li>
</ul>
Disadvantages:
<ul>
<li>Sharp gradients can break the image’s cohesiveness</li>
<li>Can block the image if visibility is too high</li>
</ul>
By far, using a scrim is the most popular solution for solving the text overlay issue with images.
But wait, don’t go yet! There are other solutions which might suit your taste better.
<h4>2. Overlay the entire image</h4>
Like the scrim solution, but instead of a gradient, you’d apply a full 40% black to the whole image.
That’s right. Maybe the image isn’t important to you. The text label is your priority. Or maybe the text covers the entire image’s size.
In such a situation, using a scrim doesn’t make sense. Since the scrim is a gradient, your text becomes unreadable half-way across.
So since the text covers the whole image, the solution is to darken the entire image. In short, that’s a 40% opacity black on the image.
Advantages:
<ul>
<li>Useful for large text (headings) that cover the entire image</li>
<li>Useful when text is your priority and not the image</li>
</ul>
Disadvantages:
<ul>
<li>Can obscure the entire image</li>
<li>Could sacrifice image visibility</li>
<li>Makes the image appear as if it’s for cosmetic appeal only</li>
</ul>
Here is how Medium uses this technique.
<img alt="" src="http://ift.tt/2ouIZmx">Medium Series on Android
Notice that the images are a predominant part of the user interface. However, the text labels over them is what gives priority.
When I see want to click on a thumbnail, I do so by primarily seeing the text rather than the image. Hence the image here is only for visual appeal. So to allow text to stand out, the entire image is darkened.
Here’s another example.
<iframe src="http://ift.tt/2oKPca7" width="480" height="500" frameborder="0"><a href="http://ift.tt/2ouTOFu">http://ift.tt/2ouTOFu</a></iframe>
<h4>3. Color Overlay</h4>
This is like an overlay. But instead of using black or white to darken or lighten the image, we use a different color.
Setting a color overlay on an image is the perfect way to neutralize a busy image. It blocks out all the different colors, making the image monotone.
<img alt="" src="http://ift.tt/2oKOdqE">
Usually, the color of choice is the brand color.
Here is an example.
<img alt="" src="http://ift.tt/2ouYPxC">Playgong App by Deividas Graužinis
<h4>4. Soft gradients</h4>
Remember that to use this correctly, your text should have enough contrast.
Also, when you use gradients, don’t use visually jarring colors. Chose colors that work together in harmony.
You can use web tools such as <a href="https://coolors.co/">Coolors</a> and <a href="http://ift.tt/1vOPJGg">Kuler by Adobe</a>. These can help you generate color pairs that work well together.
<img alt="" src="http://ift.tt/2ouWPWf">
Here’s an example.
<iframe src="http://ift.tt/2oKwWhe" width="480" height="500" frameborder="0"><a href="http://ift.tt/2ov52tA">http://ift.tt/2ov52tA</a></iframe>
Advantages:
<ul>
<li>Better brand emphasis (if brand color used)</li>
<li>Single color tone allows room for better text contrast</li>
</ul>
Disadvantages:
<ul>
<li>Not suitable for pictures of people as it may not be recognizable</li>
</ul>
Here’s a great collection of soft gradients you can use.
<a href="http://ift.tt/2mtMdli">Soft Gradients (.sketch, .psd, .xd)</a>
<h4>5. Semi-Transparent Image</h4>
This technique involves using a semi-transparent image against a solid color background. It helps ‘calm’ the noisy background, so the text can stand out.
The technique consists of 3 layers (from the bottom):
<ol>
<li>Bottom — solid color</li>
<li>Middle — image (semi-transparent with 40% opacity)</li>
<li>Top — Text layer</li>
</ol>
<img alt="" src="http://ift.tt/2ouQtpL">
Advantages:
<ul>
<li>Reduces image noise allowing text to stand out</li>
<li>Makes the image monotone reducing color distraction</li>
</ul>
Disadvantages:
<ul>
<li>Image may lose its important details</li>
<li>Only suitable for images whose purpose is purely for eye-candy</li>
</ul>
<h4>6. Blur</h4>
Applying a Gaussian blur softens an image allowing text to become more readable.
<blockquote>Smoothing of images by reducing image noise and detail — Gaussian Blur</blockquote>
iOS folks will be familiar with this technique. iOS design principles use blur to denote depth. Whereas Android (Material Design) uses shadows to denote depth (elevation).
<img alt="" src="http://ift.tt/2oKK5Xx">16px blur on the left, and 4px blur on the right
NOTE: Consider using a Drop Shadow for increased text contrast.
Make sure you don’t blur the image too much that the underlying image is completely unrecognizable!
Advantages:
<ul>
<li>Helps reduce the ‘busyness’ in images</li>
<li>Softened images give text more priority</li>
</ul>
Disadvantages:
<ul>
<li>Completely sacrifices the image for text</li>
<li>Still doesn’t solve same color overlay issue</li>
<li>May not suit your product style. For instance, using blur in a Material Design world?</li>
</ul>
<img alt="" src="http://ift.tt/2ouQry2">Blur doesn’t solve same text and image color problem
<h4>7. Text Highlight</h4>
Here, we apply a background color to the text itself. This effect mimics the traditional way of highlighting text on paper.
<img alt="" src="http://ift.tt/2oKzmfX">Text with Highlighter effect
This technique works well when the design has minimal text and a spacious background.
Remember that the highlight color doesn’t always have to be black. The example on the right borrows the dominant color from the image. This creates a higher sense of belonging with the image.
Android folks will recall that the <a href="http://ift.tt/2ouUBpC">image’s dominant color can be extracted using the Palette API</a>.
Advantages:
<ul>
<li>Good text clarity against any background image</li>
<li>Good contrast</li>
</ul>
Disadvantages:
<ul>
<li>Choice of highlight color may make text feel disconnected from image</li>
<li>Can completely block the underlying image</li>
</ul>
<h4>8. Go Grayscale</h4>
Alright, this is more of altering the image than the text. But we can still use it to achieve what we want.
By using a grayscale image.
<img alt="" src="http://ift.tt/2oKMnWH">Greyscale image filter
However, remember that greyscale includes colors from the brightest white to the darkest black. These alone, are on the polar ends of vibrancy. Hence you might want to consider toning down the image first. You can do so via a mix and match with any other techniques mentioned here.
For example, here’s a grayscale image with text at the bottom. However, by default this wouldn’t look good. So we add a scrim at the bottom.
<img alt="" src="http://ift.tt/2ov5Nmf">Greyscale image with bottom Scrim combined
Notice how the scrim naturally blends very well with the image. The image is greyscale and our scrim is a black to transparent gradient. Hence the two techniques go hand-in-hand, quite well.
Also, in the previous image, I didn’t use a scrim. Instead I positioned the text on the top-left. This makes it readable as it sits over a less busy part of the image. That brings us to our next technique.
<h4>9. Color and positioning</h4>
Sometimes, no matter what, the image remains the same. Say, for example, a category page will use a constant header image depicting its category.
In such a situation, you know what image to expect. You can use this information to design your text. This can be the font, size, color or even positioning the text.
<iframe src="http://ift.tt/2oKZsza" width="480" height="500" frameborder="0"><a href="http://ift.tt/2ouTaHN">http://ift.tt/2ouTaHN</a></iframe>
Notice the smart positioning of text, away from images. Also, the calm pastel background colors are not distracting. Both work in favor of the text. It remains clear and stands out, despite the background graphic.
<h4>TL;DR — Use enough contrast</h4>
<blockquote>The state of being strikingly different from something else in close association. — Contrast</blockquote>
Did you notice? All the techniques discussed above are ways to increase text contrast. Contrast is what makes an element appear distinct from one another. There should be high contrast between text and image. It allows text to be readable.
There is also no need to sacrifice image visibility for text. Both can coexist together if we use the right technique. For instance, using a scrim allows text to be readable. At the same time, the image is visible as well.
As a general rule, using greyscale colors work well. Which means, white text against a dark background. Or black (dark grey) text against a light background always works best.
<h3>Conclusion</h3>
We looked at techniques that make text readable, without sacrificing the background image. Techniques such as the scrim are perfect examples of this. Or, using a color overlay can help reinforce your brand by using its primary color. This is especially useful when the image feels out of place in your design. Moreover, the blur technique is useful as well. But you will have to see if it aligns with your design style.
<blockquote>Remember that good design is thoughtful and knows how to balance aesthetic visuals with usability and clarity.</blockquote>
It is not enough to let people use your app. It must be easy and pleasing to use.
You can even mix and match two techniques. Your imagination is the limit. Color overlay with scrim anyone?
So what do you think about these techniques? Have I missed out anything? Or do you have something to add to this article? Tell me in the comments below.
Suleiman is an Android developer with an eye for design. He loves creating apps that people can use with ease. He actively writes such articles on <a href="http://ift.tt/2oH4NYR">his blog</a>. Say hi on <a href="https://twitter.com/Suleiman_194">Twitter</a> or <a href="http://ift.tt/2n9ToUp">LinkedIn</a>.
Originally published at <a href="http://ift.tt/2oKOc64">blog.iamsuleiman.com</a> on April 11, 2017.
<iframe src="http://ift.tt/2iFGGW9" width="800" height="400" frameborder="0"><a href="http://ift.tt/2h0f00F">http://ift.tt/2h0f00F</a></iframe><img src="http://ift.tt/2ouTbvl" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="http://ift.tt/2oKRNkk">Techniques to Display Text over Background Images</a> was originally published in <a href="https://uxdesign.cc">uxdesign.cc</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Techniques to Display Text over Background Images

Techniques to Display Text over Background Images

Top Stories

Top Stories