7 Rules for Creating Gorgeous UI — Part 1 (Updated for 2019)

7 Rules for Creating Gorgeous UI — Part 1 (Updated for 2019)

Go to the profile of Erik D. Kennedy
A non-artsy primer in digital aesthetics

Introduction

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.

The Rules

Here they are:

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

Let’s get to it.