We’re talking about rules for designing clean and simple UI without needing to attend art school in order to do so.
Here are the rules for the second part of the topic:
[to read Part 1]
- Learn the methods of overlaying text on images
- Make text pop— and un-pop
- Only use good fonts
Steal like an artist
Rule 4: Learn the methods of overlaying text on images
There are only a few ways of reliably and beautifully overlaying text on images. Here are five— and a bonus method.
If you want to be a good UI designer, you’ll have to learn how to put text over images in an appealing way. This is something that every good UI designer does well and something every bad UI designer does piss-poorly— or just doesn’t do, in which case you’ll have a huge leg up after reading this section!
Method 0: Apply text directly to image
I hesitate to even include this, but it is technically possible to put text directly on an image and have it look OK.
There are all sorts of problems and caveats with this method:
- The image should be dark, and not have a lot of contrast-y edges
- The text has to be white— I dare you to find a counter-example that’s clean and simple. Seriously. Just one.
- Test it at every screen/window size to make sure it’s legible
I don’t think I’ve ever used text directly on top of an image for any professional project, and it’s really mentioned here as a sort of “control” method. That being said, it’s possible to do to really cool effect— but be careful.