THIS BOOK EXISTS

Hi! I’m Michal Malewicz and I’ve been a designer for

over 25 years. I worked and still work with some of the
world’s largest brands and nearly 60,000 people learn
from my books and courses.

This book is something else though. Consider it the anti-

tips and constraints for junior designers in their !rst or
second year of learning. Basically safe rules to follow.
 What’s inside?

This is by no means a large book. It doesn’t have to be.

I value both my time and yours. My goal 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 6
Fonts 15
Icons 20
Spacing 25
Hierarchy 30
Practice and next steps 35

If you follow these simple rules, you’ll progress a lot

faster and without unnecessary !ller.
 THINGS FIRST

I share a lot of free techniques and methods on my

social channels. Including new ideas to learn faster and
be!er. Don’t miss out and follow me on all of these:
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.
“I have 16 MILLION colors and
I’m not afraid to use them”

— A clueless designer
Colors
I know it’s tempting to try and use all the possible colors
out there! A"er 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 bu$ons red, purple and
green.

It’s so lively now, right?

Well… no.

The example on the le" 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 di#cult and
NOT something you should be doing in your !rst one or
two years of learning.
Rule 1 - Background
Here’s your !rst rule. Your backgrounds should be
BLACK or WHITE, with two potential “o%” 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.

Allowed bg colors Extra alternatives

#FFFFFF #000000 #E2E2E2 #2E2E2E

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
some longer paragraph text copy
label

Allowed text colors on light backgrounds

1 2 3
#2E2E2E #4E4E4E #6E6E6E
Rule 2 - Text
On a dark background we go with a similar scheme, but
the colors are of course much lighter.

The progression is a li$le steeper here (more di%erence

between the lightness levels) than in the light mode
version, but trust me - it works great.

Using a fully white color on a fully black background

can be too much contrast, and thus not a great choice.

Heading
some longer paragraph text copy
label

Allowed text colors on dark backgrounds

1 2 3
#E2E2E2 #C2C2C2 #A2A2A2
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 li$le white

rectangle above. Then drag the hue slider to select a
di%erent 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.

#CF1717 #F27C0D #F2C70D #B5D926

#33CC34 #21C4AF #0BCCF4 #0B6FF4

#0A3FC2 #6019E6 #BF19E6 #E6198F

Accent
Just check how close the accent color on the main
(Select) bu$on is to one of our pre-selected hues.

The other thing you should notice here is how li$le 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 !rst.
That can come
later, for now
do it this way.
Accent vs bu!ons
What if you have two bu$ons on the screen? Can they
all be the accent color? Please, NO!

Publish project Save dra"

Never use the exact same color for two bu$ons. Here’s
what to do. First, !gure out whether one of the bu$ons is
MORE important than the other. In our case the !rst
bu$on is likely the main one. Then, use an outline bu$on
(or a text link) for the other option. Like this:

Publish project Save dra"

In some rare cases the two bu$ons may actually be just

as important. Then use the darker text-!ll color for the
bu$on background.

Publish project Save dra"

 “I found this cool font that
looks like from a Sci-Fi Movie!”

— A clueless designer
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 UI design (and if you’re
reading this chances are that’s
exactly your path) then you …

… need to ignore those posts.

Typography is very di#cult. The more di%erent

typefaces you have, the more decision paralysis and
there’s a BIG chance you’ll pick something that simply
doesn’t work well with UI.

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
!rst start - you need them to be good. Once again - get
good !rst, then experiment.

Plus Jakarta Sans Figtree

Inter Lato
Satoshi Muli (or Mulish)
Poppins Open Sans
Ubuntu PT Sans
Fira 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 x 8
while 32 = 4 x 8.

Can we use fonts smaller than 12? I’d recommend NOT.

The only exception is a bo$om navigation menu with
tabs - in that case you can use a 10 for the labels.

Discover Purchased Wishlist Pro!le

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.
 “They’re beautiful and full of
detail, just like li!le paintings!”

— A clueless designer
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 !lled ones.

My favorite, free icon set is called Tabler Icons and has

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

NEVER mix outlined and !lled icons (even from the

same set) for elements that have equal status and
importance (i.e. none of them are active tabs etc.)

Favorites

Se$ings
Consistency
Take a look at our example screen. We are using !lled
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 !rst set, that I recommend to everyone is Tabler
Icons, but if you want to explore other options here’s a
couple safe ones.

h$ps://tabler-icons.io
h$ps://iconoir.com
h$ps://remixicon.com
h$ps://phosphoricons.com
h$ps://www.untitledui.com/icons
h$ps://iconscout.com/unicons

Of course you can try and go beyond that, !nd 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 li$le 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 !rst 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 con!guration.

You can manually edit the star icon by going into the
vector editing mode, selecting just the !ve edges and
rounding those corners a li$le. Like this:
“I need to "ll the entire screen
with stu#, that’s good design!”

— A clueless designer
Spacing
Take a look at this screen. The elements look all nice.
Good fonts, proper icons, matching photos, some nice
glass e%ect. 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.

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 le") can
!t more things on one
screen but are VERY
di#cult 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:

4 8 12 16 20 24 32 40

In your !rst, 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.

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

4 8 12 16 20 24 32 40
Spacing example
Here’s our screen with de!ned spacing based on an
8-point grid. (12 is 8 x 1.5). As you can see everything
follows these rules - almost without exceptions.

12

32
32

16

16

24
24

12

12

Those spaces are what ma$er 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.

“Who needs hierarchy when
I have nice gradients?”

— A bad designer
Hierarchy
Hierarchy is a guiding force behind how we process
layouts. Or in simpler words: how we understand stu% 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 !gure this out, called
Hierarchy Strips, and you can !nd out more about it in
this video.

Hierarchy is all about the rule of proximity which is the

!rst Gestalt Law that designers should focus on.
Group 1 Group 2 Group 3

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 de!ne the spaces between the elements.

Navigation

Where are we?

Categories

Product info

Decision making info

Those spaces are what ma$er 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.

Main navigation
So the user is never lost

The “what”
Product name is big and clear

The “juicy visual”

Beautiful image convinces users
that it’s something they need.

Extra info
Visual, scrollable list for ingredients.

Provide options
Let the user personalize their
experience further.

Final action
What we want the user to do
How to practice?
That division of the interface can happen either at the
!rst sketching phase, or even before you start drawing
any actual rectangles.

You can think about the groups !rst, specify the

spacing between them and then start pu$ing it all
together.

The lack of hierarchy that comes from di%erent (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!

 “Now I get it!”

— A good designer
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
de!nes production animations this way. The &ashy way
they’re presented can trick you into trying to learn them
right now, very fast, but trust me - focus on static design
!rst and get great at it - before trying to animate
anything.

Auto-Layout
Another controversial topic. Many job o%ers 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 !rst 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 UIs start looking well, by
any means make components out of some of them for
more consistency and reusability. At !rst 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
!rst 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.
 HOW TO LEARN UI?

The best way

Practice!
The best way to practice is by recreating common UI
pa$erns, starting from the simplest ones and then
progressively increasing di#culty.

This can get overwhelming very fast.

What I found out works the best is doing one UI 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.

The more you do it, the easier it is to absorb and re-

absorb new knowledge. Here’s WHERE to do it:

Join the SquarePlanet

FREE Daily UI Challenge
10,000 designers are in!

Start now!
Learn faster
You can learn even faster with our PRO subscription of
just $6 per month (parity pricing available!). The
subscription gives you GUIDES for all the challenges and
access to exclusive learning materials.

Guides are a game changer in how you approach each

challenge. They give you a whole breakdown of the best
approach, most common mistakes and tips on achieving
an amazing result much faster.

Become a PRO
Exclusive materials
We prepared exclusive playlists on the most important
topics like UX basics, portfolio and UI design levels so you
can learn at your own pace with structured, well
categorized resources coming from industry
professionals.

All PRO plan members are also featured on the main

page so their work and portfolio gets more exposure and
gain a special 30% discount on all our future paid
courses.
Next steps
Use this book’s guidelines for daily practice of your UI
design skills. Remember to also think about problem
solving - and WHY each of those UI elements is there.
There is a tendency from juniors to just put stu% on a
screen because it looks nice. That’s not design, that’s art
and it’s not what you need to be doing.

Think about the WHY constantly.

I try to share as much as I can (with lots of

examples) on my YouTube channel, so make
sure you’re subscribed and have clicked that
noti!cation bell icon!

Join h$ps://hype4academy.com for more free stu%!

I also share smaller tips on Twi!er and Instagram.
You can however progress even faster with some of my
academy materials. Let me guide you through them.

What I do is a No-BS approach, no jargon, no !ller, just

the facts - o"en going against what’s o#cially being
said in the industry, based on my experience with a lot of
real world projects.
Books
I have two paid books that have been purchased nearly
10,000 times already and have been used by some of the
biggest American universities.

Designing User Interfaces is the biggest

original book on UI design. By original I
mean others copy from this book, and
everything that’s in there is wri$en by me,
directly from my brain and experiences.
I of course mention well known methods
and laws of design in there, but also some
of my unique twists and techniques.

No BS Guide to UX is an UX oriented book

that’s best to be taken AFTER taking a UX
course (for example a"er you !nish the
Google UX Course). This book, based on
my agency experience, outlines which UX
process methods are used and which are
so rare, you can even skip them. I also try
to explain many UX concepts in simple
language, without any industry jargon.
Courses
My video courses actually do make a di%erence.
Thousands of people are taking them and I get emails
saying people !nally get jobs a"er months of not even
ge$ing email replies. But if you want to jump into them,
it’s best to do it in the right order. Here’s that order:

Mobile App UI part 1

For beginners this is the best place to
start, as not only does it cover all you
need for mobile app UIs but also handles
many fundamentals, complete basics
and my very own Red Square Method.

Mobile App UI part 2

This one is optional if you want to level up
the mobile game, but you can learn many
of these high !delity techniques also from
my Web Courses.
Web Design 1 - Saas Products
Once you grasp the mobile app UI
basics it’s time to learn design for a
bigger canvas. It’s surprising how many
designers skip web and only learn
mobile apps. Great way to stand out!

Web Design 2 - Landing Pages

Landing pages are a mix of UI and
graphic design - very visual, with lots of
decorations, it’s something very few
designers can do well. In this course I
share all my techniques and tricks to
make awesome LPs, including
Typeframing and adjusted RSM.

Web Design 3 - Responsive Design

Final part of the Web Courses group is all
about making your web design
responsive. It also answers popular
questions - why you shouldn’t go “mobile
!rst” and how to do responsive design for
both typical web apps and complex
landing pages. All of this comes from
years of making web projects for some of
the largest brands in the world.
 The Boring UI Course
A"er you learn how to create apps
and websites, it’s time to take
another step towards a more
professional design process.

This is my number one course, a

total bestseller!

Why is it “Boring”?
The title re&ects how many of the UI elements are
pre$y well de!ned already (maybe a li$le boring, but
functional) and how to create a full UI library that you
can either use for all your projects (with tweaks) or
later, turn into a full on Design System.

I cover the basics of components (in both Figma AND

Sketch) and almost all building blocks of a modern UI
are dissected and explained in detail.

I also talk about another one of my own methods -

Hierarchy Strips - which is essential for you to put
together a good interface from those building blocks.

Boring Part 2
The AutoLayout Course is also out now!
UI Case Study
This is one of the most important courses
I ever made. It shows you, with examples,
how to write a detailed case study, how to
do some basic research and how to frame
everything so it’s interesting to recruiters.
Hundreds of people already got a job
a"er this course.

Present your work

Great design on it’s own is of course
necessary, but how you present it can
make a huge di%erence too. In this course
I share some methods to visualise even
the boring things like the low-!delity
wireframes, all the way to the !nal UI.

Don’t be boring
Final part of the portfolio set, it focuses on
how to create exploratory case studies,
show your problem-solving skills and a
true design side. The best way to stand
out is to make things that are truly
interesting. Case studies that even non
designers would !nd a good read.
 Future Designer + AI
This course is an optional one.
AI is here to stay, but as designers we
shouldn’t fear it, but instead analyse
and !nd out how it can be used.
The summary: AI is not yet useful!

I made this course as optional (meaning not everyone

needs it) to calm the fears of many designers and show
them which skills they should focus on to ma$er in the
changing reality.

For now however, if you grasp the mobile and web

design, components basics and you can also make a
great case study out of it, you should be !ne going
forward without any AI use.
 Michał Malewicz’s

FUCKING
GUIDE TO UI
Wri!en in 2023 by
Michal Malewicz

All rights reserved. Copying parts of this book without credit will end up with you having a BAD
time. Don’t do it. Respect copyright and the hard work that went into it. If you want to write
books, don’t copy content, just write from your own brain :)