Originally posted on Medium
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.
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 (see Part 2)
- Make text pop— and un-pop (see Part 2)
- Only use good fonts (see Part 2)
- Steal like an artist (see Part 2)
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, is overall 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
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.