7 Rules for Creating Gorgeous UI
OK, first things first. This guide is not for everyone. Who is this guide for?
- Developers who want to be able to design their own good-looking UI in a pinch.
- UX designers who want their portfolio to look better than a Pentagon PowerPoint. Or UX designers who know they can sell an awesome UX better in a pretty UI package.
If you went to art school or consider yourself a UI designer already, you will likely find this guide some combination of a.) boring, b.) wrong, and c.) irritating. That’s fine. All your criticisms are right. Close the tab, move along.
Let me tell you what you’ll find in this guide.
First, I was a UX designer with no UI skills. I love designing UX, but I wasn’t doing it for long before I realized there were a bunch of good reasons to learn how to make an interface look nice:
- My portfolio looked like crap, reflecting poorly on my work and thought process
- My UX consulting clients would rather buy someone’s skills if their expertise extended to more than just sketching boxes and arrows
- Did I want to work for an early-stage startup at some point? Best to be a sweeper
I had my excuses. I don’t know crap about aesthetics. I majored in engineering– it’s almost a badge of pride to build something that looks awful.
“I majored in engineering — it’s almost a badge of
pride to build something that looks awful.”
In the end, I learned the aesthetics of apps the same way I’ve learned any creative endeavor: cold, hard analysis. And shameless copying of what works. I’ve worked 10 hours on a UI project and billed for 1. The other 9 were the wild flailing of learning. Desperately searching Google and Pinterest and Dribbble for something to copy from.
These “rules” are the lessons from those hours.
So word to the nerds: if I’m any good at designing UI now, it’s because I’ve analyzed stuff — not because I came out the chute with an intuitive understanding of beauty and balance.
This article is not theory. This article is pure application. You won’t see anything about golden ratios. I don’t even mention color theory. Only what I’ve learned from being bad and then deliberately practicing.
Think of it this way: Judo was developed based on centuries of Japanese martial and philosophical traditions. You take judo lessons, and in addition to fighting, you’ll hear a lot about energy and flow and harmony. That sort of stuff.
Krav Maga, on the other hand, was invented by some tough Jews who were fighting Nazis in the streets of 1930s Czechoslovakia. There is no art to it. In Krav Maga lessons, you learn how to stab someone’s eye with a pen and book it.
This is the Krav Maga of screens.
Here they are:
- Light comes from the sky
- Black and white first
- Double your whitespace
- Learn the methods of overlaying text on images
- Make text pop— and un-pop
- Only use good fonts
- Steal like an artist
Let’s get to it.
Rule 1: Light Comes From the Sky
Shadows are invaluable cues in telling the human brain what user interface elements we’re looking at.
This is perhaps the most important non-obvious thing to learn about UI design: light comes from the sky. Light comes from the sky so frequently and consistently that for it to come from below actually looks freaky.
When light comes from the sky, it illuminates the tops of things and casts shadows below them. The tops of stuff are lighter, the bottoms are darker.
You wouldn’t think of people’s lower eyelids as being particularly shaded, but shine some light on those suckers and all of a sudden it’s demon girl at your front door.
Well, the same is true for UI. Just as we have little shadows on all the undersides of all our facial features, there are shadows on the undersides of just about every UI element you can find. Our screens are flat, but we’ve invested a great amount of art into making just about everything on them appear be 3-D.
Take buttons. Even with this relatively “flat” button, there are still a handful of light-related details:
- The unpushed button (top) has a dark bottom edge. Sun don’t shine there, son.
- The unpushed button is slightly brighter at the top than at the bottom. This is because it imitates a slightly curved surface. Just as how you’d need to tilt a mirror held in front of you up to see the sun in it, surfaces that are tilted up reflect a biiiiit more of the sun’s light towards you.
- The unpushed button casts a subtle shadow– perhaps easier to see in the magnified section.
- The pushed button, while still darker at the bottom than at the top, isoverall darker– this is because it’s at the plane of the screen and the sun can’t hit it as easily. One could argue that all the pushed buttons we see in real life are darker too, because our hands are blocking the light.
That was just a button, and yet there are these 4 little light effects present. That’s the lesson here. Now we just apply it to everything.
Here is a pair of iOS 6 settings— “Do Not Disturb” and “Notifications”. NBD, right? But look how many light effects are going on with them.
- The top lip of the inset control panel casts a small shadow
- The “ON” slider track is also immediately set in a bit
- The “ON” slider track is concave and the bottom reflects more light
- The icons are set out a bit. See the bright border around the top of them? This represents a surface perpendicular to the light source, hence receiving a lot of light, hence bouncing a lot of light into your eyes.
- The divider notch is shadowed where angled away from the sun and vice versa
Elements that are generally inset:
- Text input fields
- Pressed buttons
- Slider tracks
- Radio button (unselected)
Elements that are generally outset:
- Buttons (unpressed)
- Slider buttons
- Dropdown controls
- The button part of a selected radio button
Now that you know, you’ll notice it everywhere. You’re welcome, kid.
Wait, what about flat design, Erik?
iOS7 made a stir in the tech community for its “flat design”. This is to say that it is literally flat. There are no simulated protrusions or indentations— just lines and shapes of solid color.
I love clean and simple as much as the next guy, but I don’t think this is a long-term trend here. The subtle simulation of 3-D in our interfaces seems far too natural to give up entirely.
More likely, we’ll see semi-flat UI in the near future (and this is what I recommend you become proficient in designing). I’m going to go ahead and call it “flatty design”. Still clean, still simple, but you’ll have some shadows and cues for what to tap/slide/click.
As I’m writing this, Google is rolling out their “Material Design” language across their products. It’s a unified visual language that– at its core– seeks to imitate the physical world.
An illustration from the Material Design guide shows how to convey different depths using different shadows.
This is the sort of thing I see sticking around.
It uses subtle real-world cues to convey information. Key word,subtle.
You can’t say it doesn’t imitate the real-world, but it’s also not the web of 2006. There are no textures, no gradients, no sheens.
Flatty is the way of the future, I think. Flat? Psh, just a thing of the past.
Rule 2: Black and White First
Designing in grayscale before adding color simplifies the most complex element of visual design– and forces you to focus on spacing and laying out elements.
UX designers are really into designing “mobile-first” these days. That means you think about how pages and interactions work on a phone before imagining them on your zillion-pixel Retina monitor.
That sort of constraint is great. It clarifies thinking. You start with the harder problem (usable app on a teeny-weeny screen), then adopt the solution to the easier problem (usable app on a large screen).
Well here’s another similar constraint: design black and white first. Start with the harder problem of making the app beautiful and usable in every way, but without the aid of color. Add color last, and even then, only with purpose.
This is a reliable and easy way to keep apps looking “clean” and “simple”.Having too many colors in too many places is a really easy way to screw up clean/simple. B&WF forces you to focus on things like spacing, sizes, and layout first. And those are the primary concerns of a clean and simple design.
There are some cases where B&WF isn’t as useful. Designs that have a strong specific attitude— “sporty”, “flashy”, “cartoony”, etc. — need a designer who can use color extremely well. But most apps don’t have a specific attitude except clean and simple. Those that do are admittedly much harder to design.
For all the rest, there’s B&WF.
Step 2: How to add color
The simplest color to add is one color.
Adding one color to a grayscale site draws the eye simply and effectively.
You can also take it one step up. Grayscale + two colors, or grayscale + multiple colors of a single hue.
Color codes in practice — i.e. wait, what’s a hue?
The web by and large talks about color as RGB hex codes. It’s most useful to ignore those. RGB is not a good framework for coloring designs. Much more useful is HSB (which is “basically synonymous” with HSV or HSL).
HSB is better than RGB because it fits with the way we think about color naturally, and you can predict how changes to the HSB values will affect the color you’re looking at.
If this is news to you, here’s a good primer on HSB colors.
By modifying the saturation and brightness of a single hue, you can generate multiple colors— darks, lights, backgrounds, accents, eye-catchers— but it’s not overwhelming on the eye.
Using multiple colors from one or two base hues is the most reliable way to accentuate and neutralize elements without making the design messy.
A few other notes on color
Color is the most complicated area of visual design. And while a lot of stuff on color is obtuse and not practical for finishing the design in front of you, I’ve seen some really good stuff out there.
A small toolbox:
- Never Use Black (Ian Storm Taylor). Talks about how totally flat grays almost never appear in the real-world, and how saturating your shades of gray– especially your darker shades– adds a visual richness to your designs. Plus, saturated grays more closely mimic the real-world, which is its own virtue.
- Adobe Color CC. An awesome tool for finding, modifying, and creating color schemes.
- Dribbble search-by-color. Another awesome way to find what works with a particular color. Talk about practical. If you already have one color decided, come look at what the world’s best designers are doing/matching with that color.
Rule 3: Double your whitespace
To make UI that looks designed, add a lot of breathing room.
In Rule 2, I said that B&WF forces designers to think about spacing and layoutbefore considering color, and how that’s a good thing. Well, it’s time we talk about spacing and layout.
If you’ve coded HTML from scratch, you’re probably familiar with the way HTML is, by default, laid out on the page.
Basically, everything is smashed towards the top of the screen. The fonts are small; there’s absolutely no space between lines. There’s a biiit of space between paragraphs, but it isn’t much. The paragraphs just stretch on to the end of the page, whether that’s 100 px or 10,000 px.
Aesthetically speaking, that’s awful. If you want to make UI that looksdesigned, you need to add in a lot of breathing room.
Sometimes a ridiculous amount.
Whitespace, HTML, and CSS
If you, like me, are used to formatting with CSS, where the default is no whitespace, it’s time to untrain yourself of those bad habits. Start thinking of whitespace as the default— everything starts as whitespace, until you take it away by adding a page element.
Sound zen? I think it’s a big reason people still sketch this stuff.
Starting with a blank page means starting with nothing but whitespace. You think of margins and spacing right from the very beginning. Everything you draw is a conscious whitespace-removing decision.
Starting with a bunch of unstyled HTML means starting with content. Spacing is the afterthought. It has to be explicitly stated.
Here’s an illustrative music player concept by Piotr Kwiatkowski.
Pay particular attention to the menu on the left.
The vertical space between the menu items is fully twicethe height of the text itself. You’re looking at 12px font with just as much padding above and below it.
Or take a look at the list titles.There’s a 15px space between the word “PLAYLISTS” and its own underline. That’s more than the cap height of the font itself!And that’s to say nothing of the 25 pixels between the lists.
The left sidebar shows generous spacing in between lines of text, and more.
Piotr was conscientious about putting in extra space here, and it paid off. While this is just a concept he put together for the fun of it (as far as I know), as far as aesthetics go, it’s beautiful enough to compete with the best music UIs out there.
Good, generous whitespace can make some of the messiest interfaces look inviting and simple— like forums.
You can find plenty of argument that, say, the Wikipedia redesign leaves out key functionality to using the site. But you can’t say it’s not a good way to learn!
Put space between your lines.
Put space between your elements.
Put space between your groups of elements.
Analyze what works.
OK, that wraps up Part 1. Thanks for sticking around!
I’ll be talking about the last 4 rules:
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
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:
- Light comes from the sky
- Black and white first
- Double your whitespace
- 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 justdoesn’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.
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.
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 Firebug 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.
And while a black overlay is simplest and most versatile, you can certainly find colored overlays as well.
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.
iOS 7 has really made background blurring a thing recently, though Vista used it to great effect too.
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 sayfalse! 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.
Also notice that the Medium collection thumbnails use a slight text shadow to further increase legibility. Those guys are good!
The net effect is Medium can layer just about any text on any image and have a readable result.
Oh, and another thing— why does the image fade black at the bottom? For the answer to that, see Rule 1— light always comes from the top. To look most natural to our eye, the image has to be slightly darker at the bottom, just likeeverything else we ever see.
Advanced move: mix the blur with the floor flade… introducing The Floor Blur.
Bonus Method: Scrim
How does the Elastica blog have a readable headline on top of a dynamic image every single time? The images are:
- Not particularly dark
- Kind of contrast-y
Yet it’s difficult to describe why the text is so legible. Take a look:
Answer: the scrim.
A scrim is a piece of photography equipment that makes light softer. Now it’s also a visual design technique for softening an image so overlaid text is more legible.
If we browser zoom out on the Elastica blog, we can more clearly see what’s going on.
There is a gradiated-opacity box around the “145,000 Salesforce Users Come out to Celebrate…” headline. It’s easier to notice against the solid blue background than against the contrast-y photos above it.
This is probably the most subtle way of reliably overlaying text on images out there, and I haven’t seen it anywhere else (but it is pretty sneaky). Mark it down, though. You never know when you’ll need it.
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)
- 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)
There are a few other options that are possible for drawing your attention, but not particularly used or recommended:
- Underline. Underline means links nowadays, and it’s not worth trying to force it to mean anything else, if you ask me
- Text background color. Not as common, but the 37signals website had this as link styling for a while
- Strikethrough. Back off, you 90s CSS wizard, you!
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 this 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. 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 size, color, and alignment— 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.
Contents Magazine is a good case study in up/down-pop.
- The article titles are basically the only non-italicized page elements. In this case, lack of italicization more effectively draws the eye (particularly in combination with the bold font-weight)
- The author’s name is bolded in the byline— making it stand out from the normal-weight “by”
- The small, low-contrast “ALREADY OUT” text stays out of the way— but with its uppercase type, generous letter-spacing, and large margins, you can see it the moment you look for it
Selected and hovered styles
Styling selected elements and hover effects are another round in the same game— but more difficult.
Usually, changing font-size, case, or font-weight will change how large of an area the text takes up, which can lead to seizing hover effects.
What does that leave you with?
- Text color
- Background color
- Slight animations— raising, lowering, etc.
One solid option: try turning white elements colored, or turning colored elements white, but darkening the background behind them.
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– itcould if you were better. But hey, let’s keep on trying and make ourselves better.
Rule 6: Use Good Fonts
Some fonts are good. Use them.
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 it.
I recommend you download them all right now, and then go through your downloaded fonts as you start the visual design for your project.
Ubuntu (above). Plenty of weights. A bit more distinctive than necessary for some apps— perfect for others. Available on Google Fonts.
Open Sans (above). An easy-to-read, popular font. Good for body copy. Available from Google Fonts.
Bebas Neue (above). Great for titles. All-caps. Available from Fontfabric— which has an awesome “Bebas Neue in use” gallery.
Montserrat (above). Only two weights, but good enough to make the cut. Definitely the best free alternative to Gotham and Proxima Nova, but nowhere near as good as those two. Available on Google Fonts.
Raleway (above). Good for headlines; perhaps a bit much for body copy (those w’s!). Has a really sweet ultralight weight (not pictured). Available onGoogle Fonts.
Cabin (above). Available on Google Fonts.
Lato (above). Available on Google Fonts.
PT Sans (above). Available on Google Fonts.
Entypo Social (above). This is an icon font, and yes, once you use Entypo, you will see it everywhere, but the social icons are pure gold. Don’t feel like recreating a zillion social media logos in little colored circles? Sweet, me neither. Available at Entypo.com.
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.
- Typekit. If you are on Adobe Creative Cloud (i.e. subscription Photoshop or Illustrator, etc.), then you have free access to a ton of amazing fonts. And yes, Proxima Nova is included.
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? Here are the resources I have found absolutely the most useful while designing for clients. Listed in descending order:
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 should follow my work on dribbble here. Here are a few more people for you to follow as well:
- Victor Erixon. Has a very distinct personal style– and it’s great. Beautiful, clean, flat designs. Dude’s been a designer for like 3 years and is already top of the game.
- Focus Lab. These guys are “Dribbble celebrities”, and their work lives up to the reputation. Really diverse; always top-notch.
- 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.
I haven’t the slightest idea who “warmarc” is, but his pinboard of phone UI had been ridiculously useful to me trying to find disparate examples of beautiful UI.
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.
And, in the spirit of this section, the title “Steal Like an Artist” was lifted from an eponymous book that I have not read, mostly because the title seems to sum up anything that the pages might contain.
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 lookgood. I don’t want UI to seem like it takes magical art school skills to do decently. Just observation, imitation, and telling your friends what works.
Anyhow, this is just what I’ve learned so far, and I am always a beginner.