Fucking Designers Guide to UI

I know it's tempting to try and use all the possible colors out there! After all, why would they give us millions of them if they didn't want us to use it.

It's tempting to use a "Salmon-Pink" for a background, make some buttons red, purple and green.

 

It's so lively now, right?

Well... no.

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 sh*t going on all at once!

There are ways to make a design like this work with a "Salmon-Pink" background, but they're difficult and NOT something you should be doing in your first one or two years of learning.

Rule 1 - Background

Here's your first rule. Your backgrounds should be BLACK or WHITE, with two potential "off" colors outlined below if you want to use lighter cards on top of that background.

 

  

Use only these colors for the background until you get comfortable with matching colors well.

 

  

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.

I'll get to fonts in a minute, but here's a heading, label and some body copy. I used a BAD, funny font here on purpose so you don't focus on typography just yet - just text colors.

Heading <- 1

some longer paragraph text copy <- 2

label <- 3

 

  

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.

I'll get to fonts in a minute, but here's a heading, label and some body copy. I used a BAD, funny font here on purpose so you don't focus on typography just yet - just text colors.

Heading <- 1

some longer paragraph text copy <- 2

label <- 3

 

  

Accent

Accent color is the more colorful, lively part added to our just created monochrome hues. As a junior 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.

Accent

But don’t worry, I created a handy guide for the most popular accent colors you can start with. You can slightly modify the values, but remember to keep within the box. There will be time for out of the box colors later.

 

  

Accent

Just check how close the accent color on the main (Select) button 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.

 

  

Accent vs buttons

What if you have two buttons on the screen? Can they all be the accent color? Please, NO!

   

Never use the exact same color for two buttons. 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 text link) for the other option. Like this:

 

  

In some rare cases the two buttons may actually be just as important. Then use the darker text-fill color for the button background.

 

  

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:

If you're a graphic designer that can be good. But if you're doing Ul design (and if you're reading this chances are that's exactly your path) then you ...

... need to ignore those 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 Ul. Let's take a step back and use a method many of my students have been practicing for years now. I will show you a list of typefaces - pick JUST 4 from them and ONLY use these 4 in your projects, but only ONE of them per project. Four will give you enough variety between projects and it will be safe to use.

List of typefaces

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.

• Plus Jakarta Sans
• Inter
• Satoshi
• Poppins
• Ubuntu
• Fira Sans
• Figtree
• Lato
• Muli (or Mulish)
• Open Sans
• PT Sans
• Source Sans Pro

There are also Native fonts for iOS and Android mobile operating systems. If you're working on Apps that use many standardized components, you can also add those two fonts to your selection.

• SF Pro (iOS)
• Roboto (Android)

Or, if you want to play it SUPER safe, just use those two, depending on which platform you're designing for.

Sizes

Here's a guide for app design, using our example app. There are just 4 sizes on this screen: 12, 14, 18 and 32. This is a very good set for most mobile apps. If you like precision in numbers you can also go: 12, 16, 20, 24

Size range

Now let's talk small and big sizes. I picked 12 and 32 in the example design for a reason. The design is made using an 8 point grid (more on that later) and 12 = 1.5 × 8 while 32 = 4 × 8.

Can we use fonts smaller than 12? I'd recommend NOT. The only exception is a bottom navigation menu with tabs - in that case you can use a 10 for the labels.

  

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

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.

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

  

Consistency

Take a look at our example screen. We are using filled icons only, with one size (the exception is the hotel stars icons which are 120% bigger). This creates consistency and looks great!

Icon sets

The first set, that I recommend to everyone is Tabler Icons, but if you want to explore other options here's a couple safe ones.

• tabler-icons
• iconoir
• remixicon
• phosphoricons

• iconscout

Of course you can try and go beyond that, find some other sets, but there's a chance those 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!

Matching

When you go with a set that's not on the list, check whether the icons within that set are even consistent. Look at this star icon. What do you see?

Now look at the cog icon. Notice how the corners on that icon are all rounded and friendly? The star and the cog don't match in this configuration.

You can manually edit the star icon by going into the vector editing mode, selecting just the five edges and rounding those corners a little. Like this:

Take a look at this screen. The elements look all nice. Good fonts, proper icons, matching photos, some nice glass effect. 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

This 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 fit as much content as possible on one screen.

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.

Condensed layout (like the one on the left) can fit more things on one screen but are VERY difficult to read and process. Always add enough space for natural groups to form.

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:

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

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

Now use this rule to decide which ones to use where.

Spacing example

Here's our screen with defined spacing based on an 8-point grid. (12 is 8 x 1.5). As you can see everything follows these rules - almost without exceptions.

Those spaces are what matter here. They divide the groups so your brain can jump to read the next one easier and faster.

Use whitespace this way in ALL your projects.

This is a guiding force behind how we process layouts. Or in simpler words: how we understand stuff on the screen. It is ESSENTIAL to know well.

Experienced designers manage to design the right hierarchy without even thinking. If you're a beginner though it's really good to use the hierarchy strips exercise for most of your projects. I created the hierarchy strips method to figure this out, called Hierarchy Strips, and you can find out more about it in this video.

Hierarchy is all about the rule of proximity which is the first Gestalt Law that designers should focus on.

It says: Objects placed close to each other are automatically perceived as a group. Placing them farther apart will give the impression that they don't belong together anymore.

Hierarchy strips

When I apply hierarchy strips to the main groups, I can then decide their importance and based on that define the spaces between the elements.

Those spaces are what matter here. They divide the groups so your brain can jump to read the next one easier and faster.

How to practice?

The strips method starts from the top down and uses the green strip for the very top, moving more and more towards the red. All strips should be clearly annotated on the side too.

How to practice?

That division of the interface can happen either at the first sketching phase, or even before you start drawing any actual rectangles.

You can think about the groups first, specify the spacing between them and then start putting it all together.

The lack of hierarchy that comes from different (in both style and function) groups being too close together is one of the biggest issues designers face nowadays.

Nail this and you'll do great!

Skip for now

Now let's talk about FOMO, mostly fuelled by Figma's advocates. Now this chapter is going to be controversial so brace yourself.

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.

Skip for now

Components
This is another thing that really IS worth doing, but not when you're learning. Once your Uls 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 Ul design with as much MANUAL work as possible to grasp it and be able to feel the design by instinct.

Practice!

The best way to practice is by recreating common Ul patterns, starting from the simplest ones and then progressively increasing difficulty.

This can get overwhelming very fast.

What I found out works the best is doing one Ul challenge every single day for 2-3 months. That's enough time and commitment to truly see progress at the end.

Another thing is time commitment. If you treat design like a daily thing, it becomes a part of your life and it rewires your brain to be more design oriented.