How to make the right UI design decisions?

Disclaimer: This will be a long guide but I ensure it’ll be worth reading

Have you ever sat in front of a blank screen, wondering where to start? Have you ever felt stuck on a call with stakeholders when asked, ‘Why did you make this design choice?’ Have you ever struggled to achieve that perfect Dribbble-like feel in your UI?

If YES to any of these questions, you’re in the right place. This guide is for you. It may be long, but it will cover key aspects to help you on your visual design journey.

Why it’s important to learn UI design?

UI design is a subset of the UX field and a crucial step where our ideas come to life, showcasing the full vision and behavior of the product. In UI design, every decision and object placement must have clear, subjective reasoning. It’s essential to understand why certain decisions were made.

Design is a powerful language; aesthetically pleasing designs evoke a sense of security and trust in users. This guide aims to explain key concepts that will help you create visually appealing and effective interfaces.

1. Don’t start with the shell

When you start on a new cool idea take a functionality-first approach instead of design first, that will help you focus on core details and leave out those extra details behind.

For example, say you’re building a flight booking service. You could start with a feature like “searching for a flight”. Your interface will need: a field for the departure city, destination city, departure date, return date, and button to perform the search.

2. Don’t hang up on low-level decisions

When working on a feature try to first keep it as a low-fidelity version so that you can focus on other meaningful scenarios instead of hanging up on shadows, icons, colors, etc.

These details can always come later the goal is to first get your idea right. By designing in grayscale, you’re forced to use spacing, contrast, and size to do all of the heavy lifting. It’s a little more challenging, but you’ll end up with a clearer interface with a strong hierarchy that’s easy to enhance with details later.

3. Choose a personality

In design, each layout has a unique personality. For instance, a banking website typically aims for a secure and professional tone, while an emerging startup might opt for a playful and inviting aesthetic.

Below are some of the major things to consider while setting up the right personality:

• Font choice: Typography is crucial for the feel of a design. For elegance, try a serif typeface. For playfulness, opt for rounded sans serif. A neutral sans serif suits a plainer look.
• Colors: Understanding color psychology can be quite beneficial. While relying solely on psychology might not always be practical, as personal aesthetics play a significant role, it is useful for justifying your choices. For example, blue often evokes feelings of safety and familiarity, gold conveys luxury and sophistication, and pink brings a playful, soft vibe.
• Border radius: This might sound like a tiny small piece but it does have a huge impact on the overall feel, a small border radius is pretty neutral, and doesn’t communicate much of a personality on its own a large border-radius starts to feel more playful, while no border-radius at all feels a lot more serious or formal. Whatever you choose, it’s important to stay consistent.
• Language: While not a visual design technique per se, the words you use in an interface have a massive influence on the overall personality. Using a less personal tone might feel more official or professional. while using friendlier, more casual language makes a design feel friendlier.

4. Limit your choices

The more choices you have to decide on, the more agonizing the process will become. When you’re designing without constraints, decision-making is torture because there’s always going to be more than one right choice. So to avoid the situation, define systems in advance. Systemize everything the more systems you have in place, the faster you’ll be able to work. You’ll want systems for things like font size , font weight, line height, color, margin, padding, width, height, shadows, border radius, border width, opacity, spacing… and anything else that saves your time.

5. Emphasize by de-emphasizing

Sometimes you’ll run into a situation where the main element of an interface isn’t standing out enough, but there’s nothing you can add to it to give it the emphasis it needs. When you run into situations like this, instead of trying to further emphasize the element you want to draw attention to, figure out how you can de-emphasize the elements that are competing with it.

6. Identify correct white spacing

Spacing is also a crucial aspect of a UI which makes or breaks the overall look and feel of it. Too little spacing may feel cluttered, and too much spacing may feel out of balance. To achieve that perfect balance use spacing systems to not always eyeball the right number for margins and paddings. Figma’s variables are useful to achieve that consistent look.

A better approach is to start by giving something way too much space, then remove it until you’re happy with the result. If you want to make sizing decisions easy, make sure no two values in your scale are closer than about 25%. Here’s an example of a fairly practical scale built using this approach:

7. Proximity is important

Avoid ambiguous spacing. When groups of elements are separated by a border or background color, it’s obvious which elements belong together. Without visible separators, it’s not as clear. For example, in a form with stacked labels and inputs, if the margin below the label matches the margin below the input, the elements won’t feel connected. This forces the user to work harder to interpret the UI and increases the risk of input errors. The solution is to increase the space between each form group to clarify which label belongs to which input.

This issue also arises in article design with insufficient space above section headings and in bulleted lists where the space between bullets matches the line height of a single bullet. It’s not just vertical spacing; horizontal layouts can have this problem too.

Whenever you’re relying on spacing to connect a group of elements, always make sure there’s more space around the group than there is within it — interfaces that are hard to understand always look worse.

8. Keep your line length in check

When styling paragraphs, it’s easy to make the mistake of fitting the text to your layout instead of trying to create the best reading experience. Usually, this means lines that are too long, making text harder to read. For the best reading experience, make your paragraphs wide enough to fit between 45 and 75 characters per line.

9. Use shadows to convey elevation

Shadows are more than just a flashy effect. They position elements on a virtual z-axis to create depth. Small shadows with a tight blur radius make an element feel slightly raised, while larger shadows with a higher blur radius make an element feel closer, drawing more attention.

Like color, typography, spacing, and sizing, defining a fixed set of shadows speeds up your workflow and ensures consistency. You don’t need many shadows — five options are usually enough. Use shadows to convey elevation: start with your smallest and largest shadows, then fill in the middle with progressively larger ones.

As an object gets further away from a surface, the small, dark shadow created by a lack of ambient light slowly disappears. Shadows can have two parts, so if you’re going to use the two-shadow technique in your projects, make sure you make that shadow more subtle for shadows that represent a higher elevation.

10. Don’t scale up icons

Everything has an intended size. If you’re designing something that requires large icons, like a “features” section on a landing page, you might instinctively enlarge your SVG icons. While vector images maintain quality when resized, icons designed for 16–24px will look unprofessional when blown up to 3–4 times their intended size, appearing lacking in detail and disproportionately chunky.

If small icons are all you have, try enclosing them in a shape with a background color. This keeps the icon closer to its intended size while still filling the larger space.

11. Use fewer borders

When you need to create separation between two elements, try to resist immediately reaching for a border. While borders are a great way to distinguish two elements from one another, they aren’t the only way, and using too many of them can make your design feel busy and cluttered.

12. Think outside the box

Most people have preconceived notions about how certain components should look. However, just because we’ve been conditioned to believe there’s only one way to design something doesn’t mean it’s true.

For example a dropdown menu, you might imagine a white box with a subtle drop shadow and a list of links stacked inside. But who says a dropdown must be a boring list of links? It’s just a floating box on the screen — you can do anything you want with it. Break it into sections, use multiple columns, and add supporting text or colorful icons. Do something fun with it! The possibilities are limitless.

And that’s the end of it. We’ve covered some basic principles from the book Refactoring UI , but there are many more valuable tips and in-depth insights in the book itself.

I hope this guide helps you make better UI decisions and gives you the confidence to start your next design project.

You can find Maryam's bog on Medium , alongside many more. Happy reading!