UI Design Principles

Learn to create beautiful and usable

interfaces from scratch

eBook by Michael Filipiuk

Hey there!

Michael here. Thanks for downloading 2 free chapters of my UI

Design eBook! Many people have asked me to share a sample and

that’s why I decided to share this preview.

This is me!

Great to see you!

This free version includes 2 chapters - Buttons and Icons. You will

learn why we use them, their different types and styles and many

other fantastic tips. I hope these chapters will be valuable to you and

you’ll be able to learn something new.

In return for these 2 chapters, all I’m asking for is your feedback. At

the end of this free version you will find my personal email address.

I would really appreciate if after reading these chapters you could

write me a short email with feedback. I’m constantly looking for ways

to make the eBook better, and your opinion is incredibly valuable to

me.

Thank you very much. Enjoy!

01
Buttons
A button is an interactive element that allows users to take actions.
Clicking (or tapping) them results in a specific action that is (or at
least should be) described inside the button. At some point, the
product will ask the user to take action - whether it's to create an
account or order some food, we need buttons for that.

Key content
- Button types in UI Design

- Button styles in UI Design

- How to design buttons properly (corner radius, size etc.)

- Button pairs and VIBs (Very Important Buttons)

+ many other fantastic tips!

02
Button types
In general, buttons can be grouped by button styles and button
actions. Button styling refers only to how it looks - the sizing, color or
a shadow. Button action refers to what action it performs. It’s quite
simple actually - more important buttons should stand out more so
that they can be found easier.

CTA (Call-To-Action)
CTA stands for Call-To-Action. As the name suggests, a CTA Button
(often referred to as just CTA) is expected to call the user to perform
some action after clicking it. CTAs are very common on landing
pages - for example "Create an account". After clicking it, the user
can expect that he will be asked to enter information to create an
account.

Learn anything from home

Get started

CTAs are on almost every landing page out there.

03
Call To Action buttons should stand out
You should style a CTA so that it stands out on the screen. You can
simply use a solid, Primary color to achieve that. You can also try to
add a drop shadow, but that’s fully optional. CTAs are usually the
biggest buttons, so keep that in mind.

Tasty pizza $6.99 Tasty pizza $6.99

Buy now Buy now

The button on the right looks like it wants to be clicked!

Height matters
CTAs should be very easy to tap on a mobile device, so it’s best to
keep the height between 40pt and 60pt, but not below 40pt.

Buy now Buy now

04
Primary buttons
Primary buttons are very similar to CTA buttons. In fact, they often
look exactly the same in terms of styling. However, the difference is
in the action - CTA buttons call the user to perform some action after
clicking it, while Primary buttons just help the user use the product
and perform an action for him.

Continue Download Save this file

A few examples of Primary buttons. Notice that none of them should require the user
to take any additional “action” - a Continue button will probably just move the user to
the next page, and a Download button will download the file.

Another good example of a Primary button is inside a form. Once the

user fills necessary inputs and wants to continue, he will usually find
a “Next step” or “Continue button”.
[email protected]

Password

·············

Next step

05
Secondary buttons
Secondary buttons are an alternative to the Primary button. These
can be buttons such as "Back" or "Cancel" button. These aren't
actions we necessarily encourage the users to take, but they might
still want to take it.

Back Next step Edit file Save file

As you can see above, the main actions are “Next step” and “Save file”. Users will
take these actions is most cases, but we should provide them with an alternative.

Secondary buttons often appear inside of forms, next to Primary

buttons. They make it easy for the user to go back and edit some
information if they entered it incorrectly for example.
[email protected]

Password

·············

Back Next step

Button pair like this shouldn’t appear in the first stage of filling the form, because you
can’t really go back from the first step.

06
Tertiary buttons
Tertiary buttons are buttons that the user might not really be looking
for all the time. These buttons are very situational. Let's say the user
is reading an article - he will see a range of Tertiary buttons such as
share or save. Considering that these are rather rare actions, they
don't stand out a lot.

Add contact Share article

Buttons that you see above won’t be clicked by every user. They’re not a part of any
specific process, such as creating an account. Notice that they are smaller than other
buttons - after all, they’re less important.

Buttons like “Bookmark” are often placed on article pages.

Article header
Here is some article text.
This article can be saved
using a Tertiary button
that is placed near it!

07
Button styles
In this part I want to focus only on styling buttons, and not when and
how they should be used.

Filled button
A filled button is filled with a solid color or a gradient.

Button text Button text Button text

Line button
A line button does not have a fill - just an outline.

Button text Button text Button text

Transparent button (not an official name)

This button style uses a light tint of the text color for background.

Button text Button text Button text

08
Text link buttons
Text link buttons are simply parts of text that are styled to make them
look clickable. It’s usually done by changing the color and increasing
the weight on words that can be clicked.

Here is some example body text. The user

can click this part to do something.

Icons inside buttons

Using icons inside buttons makes them easier to “scan” and in result
- understand. You can also use just an icon for easily understandable
actions.

Like photo Add to cart

Add to cart

Icons look great paired when paired with some button text. However, you can leave
just the icon if it’s common and well-known. If you wonder if an icon will be
understandable enough, just think if you’ve ever seen it in another product.

When to use which style?

In general, the more important the button is the more it should stand
out, so for CTAs and primary buttons filled style will work best.
Transparent and line styles work better for secondary and tertiary
buttons.

09
Corner radius
Adjusting the border radius of buttons can give it a different feel.
Sharp buttons with very low corner radius (or just 0) feel more
elegant and professional. More rounded buttons are more
user-friendly, and better for the eye as well.

Button text Button text Button text

Corner radius = 0pt Corner radius = 8pt Corner radius = 20pt

Mind the click / tap area of small buttons

Text links and icon buttons should have a larger tap area than they
actually are in size. They should have a small area around them that
is also clickable to reach them easier. Details like these make
buttons easier to use.

Text link Text link

I indicated the tap area with red color. On mobile, the tappable area
of any element should be at least 44x44pt. This way people with
larger fingers won’t missclick that often. Keep it in mind when
designing small, but interactive elements.

10
Button shadows

Adding a subtle shadow to your button can make it stand out more.

It usually works best for filled buttons, not so much for line and

transparent ones.

Button text Button text Button text

Button states

One of the things designers forget to design are styles for all button

states. Apart from just the initial state, you should also design a

hover, clicked and disabled states. Even though it's a small detail, it

gives the user feedback for his actions, which is essential for

designing a good product. Here’s an example:

Default state Default state

Hover state Hover state

Clicked state Clicked state

click!

Disabled state

11
Button width
A great height for a button is anything between 40 to 60 points.
What about the width? It depends on length of the text inside the
button. I recommend using horizontal padding of 32 points for web
interfaces, and full screen width for mobile interfaces.

Continue Continue

Continue Create an account

32pt 32pt 32pt 32pt

As you can see above, button width should depend on the width of the text inside of
it, at least for web interfaces. For mobile interfaces, in 99% of cases buttons cover the
whole width of the screen (excluding the margins).

Please keep in mind that the value of 32pt for padding for buttons is
not a golden rule. In many cases your grid system will influence the
width of buttons. It’s a common scenario when it comes to designing
forms. Take a look at an example on the next page.

12
 Log in
Username

tom_smith

Password

·············

Next step

Log in
Username

tom_smith

Password

·············

Next step

Button on the top has a horizontal padding of 32 points, but it’s not
aligned to other elements of the form. I personally think that it is fine
to use even a wide button like on the bottom in order to keep
alignment proper.

13
Button text size
Text inside buttons should be very easy to read, so I recommend
using a font size of 16pt. If you’re using 15pt or 17pt as your base font
size in your type scale, you can also use that value for buttons.
However, keep in mind that anything below 13pt can be hard to read,
and anything over 20pt is unnecessary and makes the button bigger.

Continue

Continue

Continue

Be consistent with corner radiuses of buttons

Make sure that buttons you use have consistent corner radiuses
throughout the whole design.

Continue Continue

Next step Next step

Download Download

14
VIBs - Very Important Buttons
Many products have something that I like to call a Very Important
Button - a button that has a very high degree of importance.

For example on e-commerce websites, when you buy something

there are usually many Primary buttons to go through the steps or
purchasing - entering your address, selecting a delivery and
payment method etc.

However, there's always one most important button to actually

checkout. It should be very clear that after clicking it, you order
something and will be charged. If a button for checking out has a
text like "Continue", the user has no idea that he will be charged
after clicking it, and that's bad user experience.

Continue Complete purchase

There are no strict rules used to determine if a button is very

important or not. In general, if the product is going to “take”
something from the user - for example charge his credit card - it’s
better to warn him, for example with text under the button.

15
Button pair positioning
It's quite common for buttons to come in pairs - for example inside of
forms - "Continue" button on one side, "Back" button on the other. It
can be confusing where each button should be placed. In short - the
button that is more important should be placed on the right side, and
less important on the left. This is especially true on mobile devices.
Around 90% of people are right-handed, so a button placed on the
right is easier to reach with their thumb.

Next step Back Back Next step

16
Icons
Icons are a crucial part of every interface. Most users “scan” the
content - meaning they don’t read every single bit, but they look for
something specific. Icons are important in this process, because
they let the users read less. In this chapter I’d like to go through
some important rules regarding using icons in UI Design.

Key content

- What’s an icon and why we use them in UI Design?

- Two types of icons in UI Design

- Different styles of icons in UI Design

- Tips on using icons

- Icon pack recommendations

17
What is an icon?
In simple words, an icon is an image used for communication
purposes that has a very high symbollic value. They provide the user
with a visual information that is (or at least should) be easy to read
and understand. If it wasn't for icons, we would need to use text to
communicate almost everything, which would require high effort to
read it.

A few icons. Can you go through them and think of what they mean?

Icons replace text

The most important purpose of an icon is to replace text. If you think
about it, every single icon can be replaced with a label of some sort -
some would be shorter, some would be longer. Icons are like a visual
language - same as you understand English, you can understand the
meaning of many icons.

Settings Filter Cart Save Send Delete Wi-Fi Messages

A few example “meanings” of icons (just from my own perspective).

18
Icons are all around you
Icons weren't born for UI Design purposes. They existed in our world
a long time ago. You can see them on a DSLR dial, on your
microwave and many other places in real life. A very common place
they also exist is on road signs. Think about it - before getting a
driver's license, driver needs to pass the test meaning that he
understands the meaning of the road signs. Imagine such a test
made for users, before interacting with any UI Design!

Icons can be found in many places in real life. Photo: John Gibbons, Unsplash

Just as icons used on real products should be simple, easy to

understand and remember - so do icons in UI Design. Their main
objective is not to look beautiful, but to be easy to understand.

19
Icons in UI Design - two types
In UI Design, there are two main types of icons - clarifying icons and
interactive icons. Both are used frequently.

Clarifying icons
The first type - clarifying icons - are meant to explain something, for
example a feature. A good example of them is for example
categories in e-commerce products - icons aren't necessarily
needed to interact with a category, but they make it clearer what is
included in it.

Tech shop

Cameras

Speakers

TVs

As you can see, these icons aren’t interactive. They just clarify what
each category includes in it.

20
Interactive icons

The second type are interactive icons - most commonly used on the

navbar. Users can interact with them to perform certain actions in the

product. For example a "Heart" icon on a product card can lead

adding that product to favorites.

Interactive icons are basically buttons. Some of these icons can also

be used without any label at all, but it’s better to keep them to make

sure they’re understood.

These icons work best if they're very simple and commonly known.

After all, the user might be scared if he wants to tap an icon to do

something, but he does not know what it will do. They should also

have a larger tap area than the icon itself - they're one of the

smallest elements in UI Design, but also the ones that the user

interacts a lot with. Always make sure that the tap area is at least

44x44pt, as mentioned in previous chapters too.

21
Icon styles in UI Design
The main icons styles used in UI Design are Filled icons and Line
icons. These are the most common icons out there. Filled icons are
"filled" with a color or gradient, while line icons only have a stroke of
a specific width. Nowadays there are also many other styles -
Duo-tone, broken or even "glassy" icons. They are rather a piece of
art which definitely look great, but in most cases it will be better to
stick with primary two styles.

Line Filled Duo-tone Broken Glassy

The first two styles you see above will work well in any situation.
They’re the most common styles out there, that are also very safe.
The remaining three styles are not used as frequently in real
products. That being said, they can be used, but they’re not as easy
to understand as Line and Filled icons. Also, it’s better not to mix
different styles. One exception can be the navbar:

It’s a common practice to use a

filled icon for the currently
selected screen on the navbar,
and line for the other ones.

22
Use icon packs, not icons
First of all, you don't need to create your own icons. That takes a lot
of time, especially considering that there are many free, high quality
icons on the internet. Second of all - don't pick icons from here and
there - use a full icon pack, such as Anron Icons, Koloicons or Iconly.
This way you're not risking that icons will be inconsistent. If they're
all from the same pack, they should all have the same styling.

All of these icons are from the same icon pack - Anron Icons. They
have a consistent styling, so I don’t need to modify the icons when
I’m designing, which saves a lot of time.

23
How to select & use icons in UI Design
In the remaining part of this chapter I will go through a few tips for
selecting and using icons in UI Design.

Use very simple icons

In UI Design, icons should be incredibly simple. Icons such as Home,
Search, Favorites or Settings are commonly used and
well-understood by most users - after all, they're used in almost
every digital product. By making them very complicated, we're kinda
forgetting their main purpose - replacing text.

Usually, icons from the same icon pack have the same level of detail.
Icons on the left could work okay if they were Clarifying icons, but
for those that are interactive, simple is always a better choice. That
being said, if for some reason you decide to go for these more
complicated ones, make sure you do it consistently, so you don’t mix
very simple and very complicated icons.

24
Use scalable icons
The icons you use in your UI Design will most likely appear in a
variety of different scales - from small mobile phones, through
tablets, all the way to TVs (depends on the product, but be
prepared!). This is why it's good to test them in many different sizes
before deciding to use them. It's another reason to pick simple icons
- they will look way better at smaller sizes.

The icon on the left looks good for the bigger sizes, but at smaller
ones it’s completely unreadable. The simpler icon on the right is
readable at all sizes, because its level of detail is smaller.

That being said - if you’re designing a product ONLY for large screen
display purposes, such as TVs, you can try going with icons with a
higher level of detail.

25
Use icons with consistent line widths
Line icons can have a line width that varies. Many icon sets
nowadays let you modify the stroke width to any value you like, so
take advantage of it and make sure it’s the same for all icons.

If all icons you use are from the same icon pack, they should have
the same line width. However, there will be scenarios in which you
might need an icon from another pack, just because the one that
you’re using does not include it. In that case, make sure to modify its
line width so that it fits your collection.

Use icons with consistent roundness

There are many icon styles out there, for example sharp and
rounded. Sharp are more serious and formal, while rounded are
more universal and user-friendly. Whichever you will go with, just
make sure not to mix different styles.

26
Pair icon line width with different font weights
If your icons have a line width that can be modified, you can try
pairing them with different font weights if there’s a label near it. This
is a very small detail, but it can make your design really delightful! If
you can’t get the perfect match, just go with a pair of width and
weight that are closest to each other.

Home Home

This is a nice detail, but it shouldn’t always be the priority. If you

need to modify the line width of an icon just to make it fit the weight,
don’t do it. It will lead to many inconsistencies.

This can also work really well inside text fields. If you decide to use a
text field with an icon, you can try making the perfect combination of
widths - icon line width, text font weight and text field box width. If
you can pull it off - great! But don’t try to do it if it’s going to result in
inconsistencies.

Text field, icon and text have very consistent line weights, which looks very good.

27
Icons replace text... or not
Even though icons are supposed to replace text, they don't have to.
In fact, they're much more understandable with a label under or next
to them. That means that if you have an icon that isn't very
commonly known, you should use it with a label so it's easier to
understand what it does.

$5912 $5912

This can make you wonder: “So why we use icons at all if we can just
use text?”. That’s a valid question - see, the same as people learn
what road signs mean, they learn what icons mean - except they
might need some help. Adding a label like on the right side makes it
way clearer for all new users. After they understand it, they don’t
even read the word “Income”. The icon is enough for them to
understand what the number means.

Most simple icons like Home, Search or Profile won’t need a label,
but it’s always safer to use them to avoid confusion.

28
All icons should be inside of a bounding box
Icons come in different shapes and sizes, but all of them should be
placed in a bounding box. This way the sizes and margins are
consistent and there are no half-pixels all over the place.

The blue box indicates bounding box of each icon (not to be

confused with tap area). Icons come in many different shapes, even
if they’re from the same icon pack, so some can be 16x24pt, and
some can be 12x22pt. The bounding box is usually 24x24pt, and
when you resize the icon, you actually resize the bounding box
which resizes the icon.

I know this might sound confusing. If you’re not an icon designer in

most cases you won’t have to worry about it. Just make sure that
you don’t accidentally drag the icon out of its bounding box.

In most design tools, the bounding box is basically a Frame.

29
Some awesome icon packs
As I mentioned before, in most cases you won't have to create your
own icons. Here are some amazing, consistent icon packs you can
get on the internet and save countless hours:

Anron Icons
This pack was created by my friend Anton Lapko, and it consists of
over 1700 icons in 3 styles. All icons have editable line widths and
corner radiuses, which makes it extremely customisable. This might
be the only icon pack you’ll ever need.

Check them out at anron.pro

Iconly 2
Another amazing pack I often use. This pack is smaller, but it
consists of all popular icons you might need in a modern look.

Check them out at ui8.net/piqodesign/products/iconly-essential-icons

30
Streamline Icons

This is the biggest icon pack out there. It consists of over 30,000

icons in 3 styles. It’s HUGE! I often use it for more “niche” products,

in which I need very rare and specific icons, which aren’t included in

the previous two packs. All of them have a customisable line width.

Check them out at streamlineicons.com

Feather Icons

It’s one of the first icon packs I’ve ever used. It’s not as big as some

of the previous ones, but it has all the essential icons with

customisable line width. I don’t use it that often nowadays. It’s free

though!

Check them out at feathericons.com

31
The End
And... that’s it! You just finished reading 2 free chapters I made for
you. I really hope you learned something new, or had at least one
“aha!” moment.

I’d really appreciate if you could write me some feedback for those
chapters at [email protected]. It can be long and descriptive or
short and simple. I’m really looking forward to hearing what do you
think!

If you liked those chapters...

...then I’m sure you’ll love the whole eBook. With over 340 pages, it
includes tons of fantastic tips, ideas and tricks to help you learn UI
Design from scratch or improve your skills.

Click here to get the eBook

UI Design Principles
Learn to create beautiful and usable
interfaces from scratch

eBook by Michael Filipiuk

32