Course Blog Newsletter Subscribe

7 Rules for Creating Gorgeous UI (Part 2)

Originally posted on Medium.

This is the second part in a two-part series. You should read the first part first.

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:

  1. Light comes from the sky (see Part 1)
  2. Black and white first (see Part 1)
  3. Double your whitespace (see Part 1)
  4. Learn the methods of overlaying text on images
  5. Make text pop— and un-pop
  6. Only use good fonts
  7. 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.

Otter Surfboards. Hip and Instagrammy, but a bit difficult to read.

There are all sorts of problems and caveats with this method:

  1. The image should be dark, and not have a lot of contrast-y edges
  2. The text has to be white — I dare you to find a counter-example that’s clean and simple. Seriously. Just one.
  3. Test it at every screen/window size to make sure it’s legible

Got all those? Great. Now never change the text or the image, and you should be good to go.

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.

The Aquatilis website – definitely worth a visit.

Method 1: Overlay the whole image

Perhaps the easiest method to put text on an image is to overlay the image. If the original image isn’t dark enough, you can overlay the whole thing with translucent black.

Here’s a trendy splash image with a dark overlay…

Read the rest on Medium.

The Top 5 Free Fonts for UI Design

Subscribe to the Design Newsletter. Get original design articles every month... or six. Oh – and a bonus PDF of high-quality free fonts.

Over 20,000 subscribed. No spam. Unsubscribe anytime.

You Might Also Like: