7 Rules for Creating Gorgeous UI — Part 2
A guide to visual aesthetics, written by a nerd
NOTE: For the updated, complete version of this article, please go here.
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:
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 four.
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
Got all those? Great. Now never change the text or the image, and you should be good to go.
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.
If you hop into dev tools and remove the overlay, you’ll see that the original image was too bright and had too much contrast for the text to be legible. But with a dark overlay, no problem!
This method also works great for thumbnails or small images.
Method 2: Text-in-a-box
This is dead simple and very reliable. Whip up a mildly-transparent black rectangle and lather on some white text. If the overlay is opaque enough, you can have just about any image underneath and the text will still be totally legible.
You can also throw in some color — but, as always, be judicious.
Method 3: Blur the image
A surprisingly good way for making overlaid text legible is to blur part of the underlying image.
Blurring the background removes hard edges, meaning the edge-finding algorithms in our brain can latch onto the text.
You can also use the out-of-focus area of a photo as the blur. But beware— this method is not as dynamic. If your image ever changes, make sure the text is always over the blurry bits.
I mean, just try to read the subheader below.
Method 4: Floor fade
The floor fade is when you have an image that subtly fades towards black at the bottom, and then there’s white text written over it. This is an ingenious method, and I have no idea who did it before Medium, but that’s where I first noticed it.
To the casual observer, it appears that these Medium collections are displayed by plastering some white text over an image— but in response to that, I say false! There’s ever-so-subtle a gradient from the middle (black at 0% opacity) to the bottom (black at, ehhhhh maybe ‘bout 20% opacity).
Difficult to see, but definitely there, and definitely improving legibility.
Rule 5: Make text pop— and un-pop
Styling text to look beautiful and appropriate is often a matter of styling it in contrasting ways— for instance, larger but lighter.
In my opinion, one of the hardest parts of creating a beautiful UI is styling text— and it’s certainly not for unfamiliarity with the options. If you’ve made it through grade school, you’ve probably used every method of calling attention to or away from text that we see:
- Size (bigger or smaller)
- Color (greater contrast or lesser; bright colors draw the eye)
- Font weight (bolder or thinner)
- Capitalization (lowercase, UPPERCASE, and Title Case)
- Italicization
- Letter spacing (or— fancy term alert— tracking!)
- Margins (technically not a property of the text itself, but can be used to draw attention, so it makes the list)
In my personal experience, when I find a text element that I can’t seem to find the “right” styling for, it’s not because I forgot to try caps or a darker color— it’s because the best solution is often getting right a combo of “competing” properties.
Up-pop and down-pop
You can divide all the ways of styling text into two groups:
- Styles that increase visibility of the text. Big, bold, capitalized, etc.
- Styles that decrease visibility of the text. Small, less contrast, less margin, etc.
We’ll call those “up-pop” and “down-pop” styles, in honor of designers’ favorite adjective. We won’t call it “visual weight”, because that is boring.
Lots of up-pop going on with the “Material Design” title. It’s big; it’s high-contrast; it’s very bold.
The items in the same site’s footer, on the other hand, are down-popped. They’re small, lower-contrast, and a less bold font-weight.
Now the important part.
Page titles are the only element to style all-out up-pop.
For everything else, you need up- AND down-pop.
If a site element needs emphasis, apply BOTH up-pop and down-pop styles — but slightly MORE up-pop. This will prevent things from being overwhelming, but allow different elements the visual weight they should have.
The impeccably-designed Blu Homes website has some big titles, but the emphasized word is lowercase— too much emphasis would look overpowering.
These numbers on the Blu Homes site draw your eye with their large size— but notice that they’re simultaneously downplayed with a very light font-weight and lower-contrast color than the dark gray.
The small labels below the numbers, however, while gray and small, are also uppercase and very bold.
It’s all about the balance.
I’ll leave you with this: styling text is hard.
But every time I’ve thought “Maybe this text just can’t look right”, I’ve been wrong. I just needed to get better. And to get better, I just had to keep trying.
So I offer you this bit of consolation: if it doesn’t look good, don’t worry– it could if you were better. But hey, let’s keep on trying and make ourselves better.
Hey, PS: if you want to learn a ton more about styling text, check out Learn UI Design. I cover it in detail there.
Rule 6: Use Good Fonts
Some fonts are good. Use those fonts.
Note: There are no strategies or things to study in this section. I’m just going to list some nice free fonts for you to go download and use.
Sites with a very distinct personality can use very distinct fonts. But for most UI design, you just want something clean and simple. That’s right, buddy, put down the Wisdom Script.
Also, I’m only recommending free fonts. Why? This is a guide for folks who are learning. There’s more than enough out there at the zero-dollar price point. Let’s use them.
1. Work Sans
Sometimes you’re designing something that needs a modern, clean font, but with juuuust a bit of fun. Work Sans fits the bill perfectly. Slightly quirky; totally underused.
And it’s going to remain underused for a while. You can’t get the italics for this font on Google Fonts (though the normal style is there). Therefore, most designers will avoid using it for a body font.
Work Sans’s wide letterforms means it works even at very small sizes — a great property for any mobile app typeface.
Get it at: Google Fonts (no italics), Font Squirrel (includes italics)
2. Roboto
An incredible, clean, all-purpose font. While it is the default font of Android, it’s still underused (and free!) for iPhone and web apps.
Beautiful, works everywhere, and comes with a gadzillion weights.
Get it at: Google Fonts
3. Metropolis
Ever since web 2.0, fonts like Gotham and Proxima Nova have exploded in popularity. And like many design trends, it was with good reason — they’re fantastic. I mean, using Proxima Nova will feel like cheating at design, it’s so nice.
Unfortunately, those fonts are also super expensive (well, one is sort of free with Adobe Fonts) and Metropolis is probably the single best free alternative.
Pro-tip: When choosing any font, it’s always best to take a look at uppercase, sentence-case, and the full range of weights.
Compare the two shots above — same exact font, two different feels. Beginning designers underuse uppercase. If you want to level up your design game, start exploring uppercase.
Get it at: Google Fonts
4. Source Sans Pro
One thing I like about Source Sans is it makes a great choice when you’re tempted to go with the incredibly overused Open Sans or Lato. Resist the urge!
Source Sans has a lot of the same strengths as Open Sans or Lato — neutral character, just a touch of humanity (rather than cold, stark geometric letterforms), and it works great for user interfaces.
For easy pairing, check out its sisters: Source Serif and Source Code Pro.
Get it at: Google Fonts
5. IBM Plex Sans
After decades of using Helvetica, IBM finally released its own typeface family, Plex.
I love Plex for being slightly quirky and kind of technical feeling. I guess that’s IBMs brand anyways? Nailed it, guys.
Get it at: Google Fonts
6. Feather Icons
While many popular icon sets (ahem, Font Awesome) have overly rounded and bubbly shapes that don’t pair well with clean, simple design, Feather Icons is a hugely under-appreciated antidote.
Get it at: SVG set, partial icon font
I’ll leave you with a few resources:
- Beautiful Google web fonts. This is an awesome showcase of how good Google Fonts can look. I’ve returned to this simple page for inspiration at least a dozen times.
- FontSquirrel. A collection of the best fonts available for commercial use, and totally free. Nice that someone’s putting together a good, free selection apart from Google Fonts.
- Adobe Fonts. If you are on Adobe Creative Cloud (i.e. subscription Photoshop or Illustrator, etc.), then you have free access to a ton of professional fonts. Even better than what I recommended above: Proxima Nova, Adelle Sans, DIN, Freight Text, and more.
- Learn UI Design. Looking for more great fonts? My user interface design course has a font recommendations list with over 60 fantastic free (or free-through-Creative Cloud) fonts, covering all types of fonts (serifs, slabs, monospace, handwritten, etc.), and including notes on where each font works best.
Rule 7: Steal like an artist
The first time I sat down to try and design some app element— a button, a table, a chart, a popup, whatever— was the first time I realized how little I knew about how to make that element look good.
But as luck would have it, I haven’t had to invent any new UI elements yet. That means I can always see how others have done it and cherry-pick from the best.
But where should one cherry pick? Some ideas:
1. Dribbble
This invite-only “show and tell for designers” site has bar-none the highest quality of UI work online. You can find great examples of almost anything here.
In fact, you can follow my work on dribbble here. Here are a few more people for you to follow as well:
- Jamie Syke. Posting new UI basically ALL THE TIME. Consistently top-notch stuff. Huge breadth of experience and designs. What can I say? Easy follow.
- Balkan Brothers. It seems to be this weird dribbble truism that the closer the designer is to Russia, the more adept at colors they are. These Croat designers are fantastic with keeping flat interesting. Always great gradients, colors, and shadows.
- Elegant Seagulls. If you’re ever thinking “man, how do I make something more interesting than a standard Bootstrap grid?”, just browse a few of their shots. There’s your answer.
- Cosmin Capitanu. An awesome wildcard. He makes things that look crazy-futuristic without being garish. Really good with colors. He doesn’t really focus on UX though— which is also a criticism of dribbble at large.
2. Pttrns
A directory of mobile app screenshots. The nice thing about Pttrns is the whole site is organized by— wait for it— UX patterns. This makes it very nice to quickly research whatever piece of interface you’re currently working on, be it a login page, a user profile, search results, etc.
I’m a firm believer that every artist should be a parrot until they’re good at mimicking the best. Then go find your own style; invent the new trends.
In the meanwhile, let’s make like thieves.
Conclusion
I wrote this because I would’ve loved to see this a short time ago. I hope it helps you. If you’re a UX designer, do a nice mockup after you’ve sketched the wireframes. If you’re a dev, take your next side project and make it look good. I don’t want UI to seem like it takes magical art school skills to do decently. Just observation, imitation, and recording what works.
Anyhow, this is just what I’ve learned so far, and I am always a beginner.
If you’re still with me, you’ve read two articles totaling over 5,000 words and seen scores of illustrations and screenshots. But I’m not dead yet, so it ain’t over.
If you liked this, check out Learn UI Design, a complete video course for developers, UX designers, and entrepreneurs who want to learn interface design. The content there is the same style of stuff you’ve read above — practical strategies and analysis, not the useless theory that dominates so much internet design writing.
And you should also hop on board my design newsletter for more writing like this (if you can stand it).
