• Founder Drive
  • Posts
  • Get ahead of 99% UI/UX Designers as a Beginner using these Tips and Tricks

Get ahead of 99% UI/UX Designers as a Beginner using these Tips and Tricks

UI/UX Design Tips For Beginners to Level Up Their Designs

Introduction

A lot of you can create good looking stuff, but a lot of you can’t create awesome working experiences. Let me guess why, because you have too much freedom.

Designing a gentle user experience and good looking stuff is not an easy thing, and most beginner designers fail to accomplish good designs, because they don’t limit themselves, they just use everything that comes around.

They freely use Colors, Fonts and Icons. Not following a system of design, which ends up creating a complete MESS.

My goal of this post is to precisely cover the main aspects of UI design from a perspective of constraints - mostly LIMITING your design freedom.

Trust me, it’s good for you.

Here’s what we’ll cover:

  • Colors

  • Fonts

  • Icons

  • Spacing

If you follow these simple rules, you’ll progress a lot faster and without unnecessary mess and overdoing design.

Methodology

To make it clear and easy for you, I will use a very simple mobile app design as an example of the changes and constraints we will be using. That way we keep the learning process 100% consistent.

Colors

I know it’s tempting to try and use all the possible colors out there!

It’s tempting to use a “Red-ish” color for a background, make some buttons red, purple and green.

The example on the left doesn’t make sense because the colors don’t match, and create a feel of sensory overload. There’s just too much stuff going-on on your mind, all at once!

Rule 1 - Background

The only allowed background for you as a beginner should be either white or black.

But, you can try some other shades of the same color like, you can use #F4F4F4 and #1E1E1E for dark and light theme respectively.

Rule 2 - Text

If you picked a white background, you need to use a dark color for text. We won’t go with fully black though because that’s too much contrast.

Good Typography isn’t just about the fonts that you choose, it’s about how you actually use it

I’ll get to fonts in a minute, but here’s a heading, label and some body copy.

Rule 3 - Accent

Accent color is the more colorful, lively part added to our just created monochrome hues. As a beginner it’s best to set very strict rules for your accent colors.

They are:

  • Saturation: Between 60 and 90

  • Lightness: Between 40 and 50

Which means picking your color from this little white rectangle above. Then drag the hue slider to select a different base color with the same properties.

Personally, I would recommend beginners to just stick with a blue-ish accent color. Because, using some Red, Orange or Green accent colors could be a little hard and can easily make your designs look unprofessional if you don’t use them correctly.

Just check how close the accent color on the main call-to-action buttons is to one of our pre-selected hues. The other thing you should notice here is how little of that blue is actually in the design.

There can be a tiny bit more - when necessary, but generally if just the main action is accented visually it’s more than enough.

You don’t need your interface to be super colorful at first. That can come later, for now do it this way.

Buttons with Accent Colors

What if you have two button on the screen? Can they all be the accent color?

Please, NO!

Never use the exact same color for two button. Here’s what to do. First, "figure out whether one of the buttons is MORE important than the other.

In our case the first button is likely the main one. Then, use an outline button or a button with accent colored text and a light shade of the accent color for the background for the other secondary button.

Like this:

Typography

We already established the colors for your fonts, so now let’s talk typefaces. There’s a million choices and you constantly see social media posts saying:

“Top 10 Fonts to make your UI design look 10x better” or something like this

But you have to ignore all these types of posts!

Typography is very difficult. The more different typefaces you have, the more decision paralysis and there’s a BIG chance you’ll pick something that simply doesn’t work well with your design.

Rule 1 - Typefaces

Let’s take a step back and limit ourselves to only 4 FONTS. I will show you a list of typefaces — Just use 4 fonts out of all of them in your different projects.

But remember, only one font per project.

These are safe to use and look good for most interfaces. The list COULD be much bigger, but it doesn’t have to be. You don’t NEED your designs to be unique when you first start - you need them to be good. Once again - get good first, then experiment.

Rule 2 - Sizes

Here’s a guide for app design, using our example app.

For headings, you can use this simple system that I almost end up using in my every single project, because it’s just so good!

I use a similar scale for paragraphs, in UI design.

Basically, it’s a very simple system where I use 16px as the base size!

  • Extra Small - 12px

  • Small - 14px

  • Base - 16px

  • Large - 18px

  • Extra Large - 20px

Pretty simple, right? Yeah, this is why I recommend you to stick to this simple typography scale. It’s that simple!

As for the large font, in most cases going bigger than a 32 (or even 24) on a mobile app is completely unnecessary.

But, on web designs, you can use up to 64px for landing pages hero section’s headline

When working on web projects, you can mostly keep the same scale. When building a landing page however, you can add 4 points to the smaller sizes and even 8 points to the larger one.

Icons

Here the rule is even simpler. You need to ONLY use ONE icon set. Don’t mix and match between sets because that creates ugly inconsistencies.

You can either go with outline icons, or filled ones.

My favorite, free icon set is called Tabler Icons and has both filled and outlined icons available.

Another alternative could be Untitled UI Icons, A clean, consistent, and neutral icon library crafted specifically for modern UI design.

One thing to remember is that when you’re using outlined icons, the only way to ALSO add a filled icon to them is to signify a selected menu item. Like this:

NEVER mix outlined and filled icons (even from the same set) for elements that have equal status and importance (i.e. none of them are active tabs etc.)

Other than Tabler Icons and Untitled UI Icons, if you want to explore other options here’s a couple safe ones.

Of course you can try and go beyond that, and some other sets, but there’s a chance these sets are not as precise or have inconsistent icons inside and that will result in your design being a little bit worse in the end.

So not to overload your brain, pick just ONE of these sets and use it for all your projects in the first year or two of learning design. One less thing to worry about!

Spacing

Take a look at the screen on the left. The elements look all nice. Good fonts, proper icons, nice and clean colors. So what’s wrong with it?

Easy! Everything is too close together which makes our brain process the entire screen as one complex group.

Whitespace

Whitespace is the empty space between elements. It is essential for a good, readable interface. Sadly, most junior designers are afraid of whitespace - they feel like they really must !t as much content as possible on one screen.

Don’t do that

People are used to scrolling now - some do it for hours each day on social media. Scrolling is good! You need to let the on-screen elements breathe for them to be easy to understand.

About this, I found a really good quote by Jan Tschichold:

"White space is to be regarded as an active element, not a passive background."

So, white space or space should be as carefully considered as your images, buttons, or flashy animations. It should be even more considered than those things.

Now, there is a very practical way of approaching this when designing, and I call it "relationship advice" in UI design.

If you have a group of elements and you ask yourself, "What's their relationship?", you'll quickly notice that some elements have a closer relationship than others.

Let me give you a practical example:

In this group of elements above, the above section is more closely related to the buttons below than it is to the “Get Started” text below!

So, This would tell us that since the above section and the secondary buttons have a closer relationship, they should also be positioned closer to each other. To make it simple, let's use a multiplier for this relationship.

If the distance between the above section and the secondary buttons is x (12 pixels), the distance between the buttons and the “Get Started” section should be 2x (24 pixels).

This same rule can be applied to a lot of things in your UI, such as distances between call-to-action elements and hero texts, logos and links in navigation menus, etc.

8-point grid

Start with the 8-point grid. Once you get good you can explore a 10-point, or other, more complex ones coming from the golden ratio rules. For now 8-point should be your friend.

Within 8-point grid you have these options:

  • 4

  • 8

  • 12

  • 16

  • 20

  • 24

  • 32

  • 40

In your first, simple designs you can likely stick to these:

  • 8

  • 12

  • 16

  • 24

  • 32

More complex projects may require some of those extra values, but initially just these 5 should be enough.

Things to NOT focus on

Here’s what NOT to focus on at the beginning of your journey:

Figma Animations using Smart Animate

I know they look cool! I do! But in real work nobody defines production animations this way. The flashy way they’re presented can trick you into trying to learn them right now, very fast, but trust me - focus on static design first and get great at it - before trying to animate anything.

Auto-Layout

Another controversial topic. Many job offers list auto-layout as a requirement, everyone is praising how it’s the best thing to happen to design. My take is this:

Learn manual layout first and get great at it. THEN and ONLY THEN learn Auto-Layout.

That will give you that “eye for design” where you can spot if a layout works. And yes, auto layout sometimes messes up the alignment so it doesn’t AUTOMATICALLY make it great. You need to see when it fails and be able to correct it.

Components

This is another thing that really IS worth doing, but not when you’re learning. Once your UIs start looking well, by any means make components out of some of them for more consistency and reusability.

At first however, when you’re still tweaking the elements and learning how they work together it actually is slower to work this way.

Variables

And then the newest craze - variables. First of all, they’re free with a lot of limitations, so if you want to truly use them to your advantage you need to pay Figma. The other thing is that they’re really NOT necessary to know right now. You’re not working on design system just yet, you don’t need variables or tokens. What you need is to be able to make ONE mobile app screen that doesn’t look like total crap.

There will be time for all of these things later, but in your first year you should focus on nailing the actual UI design with as much MANUAL work as possible to grasp it and be able to feel the design by instinct.

Conclusion

That’s it for the article, be sure to subscribe to the newsletter if you found this post helpful. I post on this newsletter every week on Wednesday, and Saturday. I mainly focus on writing about Indie Hacking, UI/UX Design, and Web Development. If you like my work, you can check me out on other platforms. Thanks for reading!

Join the conversation

or to participate.