Now next we're going to talk about a particular pet peeve of mine. 1
So this is something that I've seen done wrong a lot of times by user interface designers. 2
And fundamentally it's actually a problem that you have to solve rather than a design issue. 3
So this is when you have text showing up on images especially images that change. If that text does not 4
have enough contrast with the background image such as over here with the 'us', you can't see it. 5
And something that can't be seen no matter how beautiful it is nobody will be able to appreciate what 6
you're writing, what you're saying, what you're trying to convey because they can't see it. 7
So how do you make text visible on your images? 8
Well the easiest option is obviously using a block background so using a high opacity background just 9
for the text. 10
So such as in black or in color or whatever it is, it makes the text stand out from the background image. 11
Now some of you might think "It's kind of ugly. 12
You know, what are the other ways?" 13
Well there's actually quite a few clever ways. 14
Now obviously the easiest way is that if you can control the background image i.e. if it's never going 15
to change then you can adjust the color of the text as well as the color of the image background to 16
make it stand out. 17
I mean this is a single design case because your image is not changing. 18
But what do you do if that image has to change? 19
Well you can have a colored overlay to your image that sits between your text and your image. 20
It's almost like putting a veil on that image to make it stand out a bit better from the text. And you 21
can do that quite easily whether in Photoshop, Sketch or in code by simply applying a single blank overlay 22
with say 20% opacity. Just enough for your text to stand out without obscuring the image behind. 23
And Google does this in the Android apps by applying a colored overlay that just gives enough contrast 24
to the text for it to stand up from the image. 25
Now you can also go for a gaussian blur that provides contrast between the blurry image and the sharp 26
text that can also make your text stand out. 27
But a really clever way that I've seen designers do it is like this where you apply an overlay to the 28
image that starts off with 0% opacity at the center midline. 29
And then as you move downwards through the image there's a graded opacity so i.e. the overlay gets more 30
and more opaque 31
the further you go down. 32
So this is especially useful if you know that your text is going to be placed in a fixed position relative 33
to your image. 34
So if it's always going to be at the bottom of your image, you can make the overlay super opaque at the 35
bottom say 20% and then 0% opaque at the middle so that you don't obscure or change the 36
image while making your text appear sharp. So those are some of the simple ways to do it. 37
But the thing that's really important in this situation is testing testing testing. 38
Make sure you try out many different images that could possibly pop up, you know, a really white image 39
or a really black image and make sure that it looks good and it does the job each time.