You don’t have to be a designer to know that products sell better in prettier packages. Even if your product is the most technically efficient on the market, it’s far less likely to be successful if it is ugly or difficult to navigate,
Take Reddit, for example. If you’re a Redditer, you likely spend a lot of your day rolling your eyes at Buzzfeed articles crawling across your Twitter or Facebook feed, all based on sub-reddits you scrolled through days ago.
“This is old news!” you say. “It isn’t even original content!”
But here’s the thing—for the average user, Buzzfeed is a far more aesthetically-pleasing and user-friendly platform. Most users are willing to accept Buzzfeed’s outdated content in order to avoid sorting through a messy and disorganized site.
So, how do you create a design that meets your end user’s aesthetic expectations, especially if you aren’t a natural designer? Here are our ten simplest and best tips for creating beautiful UI.
1. Embrace White Space
Look at some of the most successful interfaces around—Google, Facebook, Buzzfeed… What do these designs have in common? That’s right, they all have a ton of empty white space.
In fact, when you think you have a final design that you’re happy with—take the amount of white space you see and double it. Yes, I’m serious. Double it. Lots of fresh, clean, blank white space is tantamount to a great design.You can very rarely go wrong with adding white space to simplify your design.
2. Light From Above
There’s a reason that kids around the campfire used to shine flashlights up at their faces as they told ghost stories. They did that because it is unnatural and creepy looking.
When it comes to lighting, you want your design choices to blend in with what your user is used to seeing in everyday life—and that means light should come from above. Whether you’re applying shadows to a button to create a 3D effect, or darkening one edge of an image or text box—imagine a very slightly angled light source coming from above your design, and keep that consistent source in mind for all of your shadow effects.
3. Choose Great Fonts
Just put a quarter in, and any designer will go on and on and on to you about the importance of font choices. We won’t bore you here, but suffice it to say that it’s hard to stress the importance of a simple and legible font choice enough.
Please, please resist the temptation to choose a “unique” font for your UI to “show your personality.” Just don’t. There are plenty of other ways to emphasize personality in your design. A crazy font does not need to be one of them.
If you don’t know where to start, Arial and Helvetica are classic staples that won’t steer you wrong. To change it up a bit, Open Sans and PT Sans (both available on Google Fonts) are great bets. And Bebas Neue is a great attention grabbing font for titles and buttons.
Regardless of which font choices you go with, it’s important to stay consistent. Use the same font at the same size, weight, and color throughout your UI, unless you’re making a deliberate contrast choice (as you’ll see in rules four through six!).
4. Use White Text Over Images
In the overwhelming majority of cases, if you’re overlaying text on an image, you’ll want to use a white font. Unless the image portion that you’re overlaying is white or very nearly white, this will almost always be true. Colors besides white are both hard to read and likely to clash with the colors in the image. If you look at most well-designed platforms, you’ll find that white text is the absolute standard in image overlays.
5. Blur Images Behind Text
Another easy tip for overlaying text on images is to blur the image, or at least the portion that will serve as the background to your text. This will make the text background “go away,” making the foreground text much easier to read.
6. Use Contrast to Draw User Attention
As you create your design, think about where you want to draw your user’s eye. What do you want them to see first?
Once you’ve determined your focal point, choose one or two contrasting elements to make the focal point stand out from the rest of your design. Examples of this contrast might be a different font size, color, or weight—or using a different font altogether.
(Note: Remember that you’re choosing one or two of these elements to create contrast. Not all of them!)
It’s okay to choose more than one focal point, but you’ll want to prioritize in your mind the order in which you want your user to see different elements. The first priority should be the most contrasting form your pre-dominant design, with lower priority focal points being more similar to the rest of the interface.
Take this blog post as an example. To draw your attention to the title, we use a bold typeface, all caps, and larger font size than the rest of the blog text. This blog also has subheadings that we want you to notice, but that shouldn’t grab your attention before the title. So for the subheadings we use a bold typeface, but keep the font size the same as the rest of the article.
Go Forth and Design Beautifully!
No matter how non-aesthetically minded you are, we hope these tips will be simple and actionable enough for you to apply to your product’s interface. And remember—any time you’re unsure of a design decision, borrow (within reason) from the best. Great products have interfaces that visually integrate well together, all while standing out as their own distinctive brand.