How to spot and fix the biggest UI problems

We are in the new „super-agile” era, an in many cases low-cost MVP’s are being built, that skip the Designer role for financial reasons.

There are great design systems and free libraries out there, so even the developers can create something that looks high-fidelity enough for initial user testing and idea validation.

Whether it is adapting a design system, or coding your own based on some inspirations, there are some problems you’re going to encounter along the way. I believe it’s important for developers to understand design, and the reason many don’t dive into it, is because of a big misconception:

I’m not an artist

UI Design is as far from art, as development. Obviously you can add illustrations to your project, but that’s the one piece of artwork in the entire process and it’s usually done by an illustrator, not the designer.

What is UI Design?

Interface design is closer to development than art. That is because it’s actually based on a strict set of rules and a heavy use of consistent number values. Understanding these rules will help you apply the right numbers in the right places and “fix your implementation”.

Rule 1: Spacing

Grid systems deserve their own, separate article, but there are some basics alignment tips and techniques you can use right now to move your project to the next level.

The main thing to remember is the rule of proximity. But to avoid “industry definition” let’s break it down into plain english:

The closer the objects are, the more they are perceived as a group. The farther apart they are, the more disconnected they become.

The distance between elements on our screen is thus one of the best way of building a clear, readable hierarchy. So if you have a clear group of items (like a product card) — everything within the card should be rather close together. Then the next card from the stack or carousel should be farther apart from the first one.

DIY formula

Luckily there is an easy formula to do this. Here’s a version of it for the 8-point grid:

And 10-point:

If you’re building components, use the first three values only. When setting up the general layout use the rest of them — but remember the rule — the more “connected” functionally the objects, the lower the spacing should be.

Another good example of this is how cards can be closer to one another, but farther away from navigation bars. It’s a clear way of showing the user what’s what.

Rule 2 — Alignment

If you go to the web right now — to any random website — chances are you’re going to see a button with a badly aligned label inside. This is likely the biggest problem out there, and it’s surprisingly easy to fix.

Let’s break it down into two main parts:

1. The label is not in the center of the button.

To fix this you must first determine, whether the button height and the text height are both odd, both even, or mixed. If one of them is an odd number, while the other is an even one, there is no way to align them in the center.

Most fonts work well enough with their values, so if the size is 16p it usually really is 16p high. Some typefaces, however don’t scale that well and 16p size can be anything from 15 to even 19,5. Try the number alignment method first and then check if it’s aligned optically.

To do that you need to use any visual design tool. You can try Figma, Sketch or even Powerpoint / Keynote. Just paste in a screenshot of your coded button and then create a square that starts from the font baseline to the bottom edge of the button background.

Now duplicate that same square and see if it fits just as well on top of that font. If there’s a gap on either side, it means that you need to optically align it. The easiest way is with increasing the font size, or decreasing te button height.

Keep in mind, however, that buttons should be big enough to use them comfortably. That’s above 44p high on mobile and 32p on the web.

2. Too little whitespace inside the button.

For the label to “breathe” and be readable it needs enough space on all sides.

The W-method

You can use grid values for this, but there’s one other, easy way to achieve readability. Just use the capital letter W (2x) on both sides, and 1 x W on the top and bottom.

If they fit well, it means the whitespace is big enough. Of course if you have full-length buttons you don’t need to shrink them down. Only use this rule if your buttons are small.

Rule 3 — Colors and fonts

The main thing you should do with both colors and fonts in any project is to simplify.

Go through all the screens and list out all the colors and all the fonts you can find.

If the list is full of very similar colors or very similar sized fonts — simplify it by picking one and replacing the other with it.

Many projects, especially later in their lifecycle accrue a lot of design debt. It’s good to clean it up whenever you can and systemize the front-end. Use common values and a small group of colors only, as the more seemingly similar options, the longer it takes your users to process the information.

Keep everything consistent and remove any extra chaos.

Summary

You don’t need to be a designer, to understand the basic principles behind how design works. Knowing just these simple rules will already make you a better developer.

Good luck!

This is a Guest post by Michal Malewicz. Michal is the co-founder of HYPE4 design driven software house. He’s also a design lecturer, the author of Designing User Interfaces eBook and co-author of the upcoming Frontend Unicorn ebook.