7 Rules for Creating Gorgeous UI
Whether it is for a website, an application or SaaS software, the concept of a user interface is becoming more and more complex for companies. Users are becoming less and less tolerant and expect a platform to be efficient and intuitive. The user experience, more commonly known as UX Design, has become an essential element to be taken into account, it is even decisive in the implementation of any platform and any inbound marketing strategy. Graphics, design and experience come together to offer a unique experience to the Internet user, which is at the heart of the desires.
Here, we present 7 rules for creating gorgeous UI.
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.
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.
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 layout before 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 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.
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
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)
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 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.
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.