Navigate back to the homepage

How to spot and fix the biggest UI problems

Michal Malewicz
July 12th, 2020 · 4 min read

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

Well spaced image on the left, and a chaotic one on the right.

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:

1 qe70feh7gvv2bgpdwrbbow

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:

1 kny9vqk6ps2t3s4ptel qw

And 10-point:

1 jf7esgyqskorwzwadd d6a

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.

Label  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.

Properly aligned using square method

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.

The W-method

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

Good use of color and fonts on the left, and chaos on the right.

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.

1 r77egkezgpm2 4igufo3rq

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.

Join our email list and get notified about new content

Be the first to receive our latest content with the ability to opt-out at anytime. We promise to not spam your inbox or share your email with any third parties.

More articles from Lunadio

Full-stack founders. Who are they?

If you are a solo founder you need to understand multiple domains. You need to know how to design, build, and sell a product.

July 5th, 2020 · 5 min read

How to create effective social proof

Social proof as a secret weapon of landing page. This blog post summarizes important parts of effective social proof for your landing page.

June 28th, 2020 · 7 min read
© 2020 Lunadio
Link to $https://twitter.com/lunadioLink to $https://instagram.com/teamlunadioLink to $https://www.facebook.com/lunadioteam/Link to $https://www.linkedin.com/company/lunadio