Creating The Perfect UI/UX Design - (Part 1)

by Pranjal Kaushiley Content Writer

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 my 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 endeavour: 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 colour theory. Only what I’ve learned from being bad and then deliberately practising.

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:

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 the 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 appears to 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 bit 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.

Elements that are generally inset:

Text input fields
Pressed buttons
Slider tracks
Radio button (unselected)
Checkboxes

Elements that are generally outset:

Buttons (unpressed)
Slider buttons
Drop-down controls
Cards
The button part of a selected radio button
Popups

Now that you know, you’ll notice it everywhere. You’re welcome, kid.

Wait, what about flat design?
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 colour.

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.

This is the sort of thing I see sticking around.

It uses subtle real-world cues to convey information. Keyword, 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 colour 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 colour. Add colour last, and even then, only with a purpose.

This is a reliable and easy way to keep apps looking “clean” and “simple”. Having too many colours 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 colour 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 colour
The simplest colour to add is one colour.

Adding one colour to a grayscale site draws the eye simply and effectively.

You can also take it one step up. Grayscale + two colours, or grayscale + multiple colours of a single hue.

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 colours 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 colour
Colour is the most complicated area of visual design. And while a lot of stuff on colour 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:

Learn UI Design. Shameless plug: this is a course I’ve created, and it contains 3 hours of video about designing with colour (and 13+ hours on other topics in UI design). Check it out at learnui.design.
Colour in UI Design: A (Practical) Framework. If you liked this section, but want to hear more about colour (as opposed to just black and white), this is your article. And guess who wrote it!
Never Use Black (Ian Storm Taylor). Talks about how totally flat greys 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 greys more closely mimic the real-world, which is its own virtue.
Adobe Color CC. An awesome tool for finding, modifying, and creating colour schemes.
Dribbble search-by-colour. Another awesome way to find what works with a particular colour. Talk about practical. If you already have one colour decided, come look at what the world’s best designers are doing/matching with that colour.

Rule 3: Double your whitespace

To make UI that looks designed, add a lot of breathing room.

In Rule 2, I said that B&W forces designers to think about spacing and layout before considering colour, 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 bit 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 looks designed, you need to add in a lot of breathing room.

Sometimes a ridiculous amount.