The Basics

of UI Design
Quick and clear UI design tips to create
intuitive, engaging, and stunning interfaces.

Hamad Tanveer
 The Author

About me.
What is success.
My name is Hamad, and I’m from Islamabad, Pakistan.

You might know me from social media, or as a mentor at

Uxcel, but there’s more to my journey than what I share online.

I’ve worked with international companies and gained a lot of

experience in UI/UX design. Every project helped me grow and
improve my skills.

After learning so much, I decided to write this book. It’s for

fresh and junior designers who want to understand the basics
of UI design.

Everything is explained in simple and easy words to help you

start your design journey.

I hope you find it helpful. Enjoy!

50,000+ followers

Introduction 01
Intro to UI/UX Design 04

Fundamentals of Design 16

Introduction to Figma 51

UI Design Elements 75

Wireframing 113

Auto Layout 120

Grid System Basics 130

Design Handoff Process 139

Color Scheme 147

Figma Variables 157

UX Portfolio Guide 167

Table of contents 02
 Chapter 1

Intro to UI/UX Design

Intro to UI/UX Design explains the differences between UI
designers (focused on visuals) and UX designers (focused
on user experience).

Introduction 03
 Chapter 1

UX vs UI: What's the

Difference?
UX (User Experience) and UI (User Interface) are both important
in design, but they are not the same. People often mix them up.
Both are needed to create good products, but they focus on
different things.

UI is about how things look and work. It includes things like

colors, buttons, text, and icons. It makes sure everything is easy
to see and use.

UX is about how people feel when using a product. It’s about

solving problems and making things simple and smooth for the
user. UX focuses on what the user needs and creates a product
that works well for them.

Think of it like a house. UI is the walls, floors, and windows the

things you can see and touch. UX is the design of the rooms, the
safety of the stairs, and how easy it is to move around the house.
Both are needed to make the house a good place to live.

When UX and UI work together, you get a product that is both

useful and easy to enjoy.

Introduction 04
 Chapter 1

Why is it important to know

the difference?
If you don't understand user experience (UX), your designs will
be like art with no meaning. UX focuses on how users feel and
interact with your product.

It makes sure your design solves their problems and gives

them a good experience.

Without a good user interface (UI), your design is like a blank

page with no story. UI makes your product look good and easy
to use. It includes things like buttons, colors, and layout.

If your product doesn’t have good UX or UI, it won’t reach its

goals. Both are needed for your product to be successful.
They are linked and cannot work without each other.

Learning both UX and UI design at the same time helps you

understand the full picture.

When both designers work together, it makes the design

process better. This teamwork creates a product that people
will enjoy using.

Introduction 05
 Chapter 1

What is User Experience

Design (UX)?
UX design is about how people interact with products, like
websites, apps, or even everyday items.

It combines knowledge from psychology, business, research,

and design to make things easier and more enjoyable for users.

UX designers focus on improving experiences, like making a

website checkout simpler or creating apps that are easier to
use.

It’s all about helping users have a better experience with the
product.

Introduction 06
 Chapter 2

Fundamentals of Design

Design fundamentals include key concepts such as layout,

typography, color theory, composition, balance, contrast, and

visual hierarchy.

Fundamentals of Design 07
Intro to Color Theory

Color theory is one of the most important visual elements in UX

design. It can influence how people feel and react. Choosing the

right colors for a product can improve user satisfaction and even

increase conversions.

To understand color theory, you need to learn about the color

wheel, color space, and how colors affect emotions. For

example, some colors make people feel calm, while others might

make them feel excited.

Color theory is a mix of science and art. Creating the best color

combinations takes practice and requires both knowledge and a

good sense of intuition. With time, you can master this skill.

Fundamentals of Design 08
 Color wheel

The color wheel is a circle that shows different color hues and

their relationships. It includes primary, secondary, and tertiary

colors and was first introduced by Sir Isaac Newton in 1704.

Designers use the color wheel to create color schemes and

palettes. It helps them understand how colors work together to

make balanced and harmonious designs. Usually, it has 12 hues:

3 primary, 3 secondary, and 6 tertiary colors.

There are two types of color wheels: subtractive and additive.

Subtractive color wheels, using cyan, magenta, and yellow, are

for printing. Additive color wheels, with red, green, and blue, are

used for digital designs like websites and apps.

Fundamentals of Design 09
 Warm colors

Warm colors like red, orange, and yellow create feelings of

energy, passion, and warmth. Think of a glowing sunset or a

cozy fire these are great examples of warm tones.

The idea of warm colors became popular in the 18th century,

introduced by Irish poet Oliver Goldsmith.

Warm colors are strong and vibrant, especially when used in

their pure form. They can make designs feel lively and exciting

as accents. However, if used too much, they might feel

overwhelming. Finding the right balance is key to using them

effectively in designs.

Fundamentals of Design 10
 Chapter 2

Design principles

Design principles include all those ideals that are referenced and

respected throughout the design process to make better design

decisions.

Fundamentals of Design 11
What are design principles?

Design principles are basic rules that help designers make

designs look good and work well.

These principles act like a guide to organize and arrange design

elements. They show how to use these elements to reach specific

goals.

Design principles give helpful tips and best practices. They make

the design process easier and help create effective designs.

By following these principles, designers can ensure their work not

only looks appealing but also communicates the right message to

users.

Fundamentals of Design 12
Unity design principle

To create unity and harmony, design elements should work well

together in shape, size, color, and alignment.

Unity helps make a design clear and easy to understand. When a

design has unity, it feels organized and looks high-quality.

Websites from the 90s often used too many colors, fonts, and

styles, which made them look messy. This was called brutalism, a

style that aimed to look rough and chaotic.

While it worked for its time, the lack of unity made users focus on

each part separately, making it hard to understand the main

message.

Fundamentals of Design 13
Alignment design principle

Design elements should follow the alignment principle, meaning

they should be arranged along a common line. This can be edge

alignment, such as top, bottom, left, or right, or center alignment.

Proper alignment creates a clean, balanced, and organized look,

making the design feel professional and easy to understand.

Good alignment reduces visual clutter and helps users focus on

the content or message.

However, breaking alignment can add creativity or a dynamic feel

to the design. While this can make the design more engaging, it

should be used carefully. Poor or random alignment may confuse

users and harm the design’s usability.

Fundamentals of Design 14
 Chapter 3

Introduction to Figma
Master Figma's core functions from the ground up. Explore
the basics and beyond to elevate your design journey.

Introduction to figma 15
What is Figma?
Figma is a cloud-based tool used for designing user interfaces
and creating interactive prototypes.

It allows real-time collaboration, meaning designers and teams

can work together on the same project at the same time.

With automatic version control, Figma saves every change,

making it easy to track progress and revert to previous versions.

It also allows feedback directly on the design, simplifying the

review process and improving communication.

Introduction to figma 16
Figma Vocabulary
To begin using Figma, it’s important to understand its key terms.
These include the basic tools, features, and processes used in
the platform.

Learning these terms will help you navigate Figma more easily
and make designing smoother.

A good understanding of the terminology also improves

teamwork, allowing you to collaborate effectively with others.
This makes your design process faster, more efficient, and more
enjoyable.

Projects
A project in Figma is a way to organize and manage your design
work. Think of it like a folder on your computer. Just as you use
folders to group related files, in Figma, projects group related
design files together.

Each project can hold multiple design files, called Figma files. For
example, if you’re designing a website, you might have one
project for it. Inside this project, you could have different Figma
files for the homepage, contact page, and about page.

Projects also make collaboration easy by allowing team members

to view or edit files. However, only owners, admins, or team
members with editing rights can create projects.

Introduction to figma 17
To create one, go to the file browser, click on your team name in
the sidebar, and select "+ Project" in the menu bar.

Files
A file in Figma is like your workspace where you design and
create. Think of it as a blank canvas or a document where all your
ideas come to life.

For example, if you're working on a website, you might have a

separate file for each webpage you design.

Each file holds all your design elements, like text, shapes, images,
and layers. You can also create interactive components and
prototypes within the same file. It’s where you do the actual
hands-on work of designing.

Introduction to figma 18
 Chapter 4

UI Design Elements
Explore the elements that shape intuitive, consistent, and
visually captivating UI experiences

UI Design Elements 19
What is a UI element?
UI elements are the building blocks of an app or website. These
are things like buttons, text fields, and checkboxes. They help
users interact with the app or website.

For example, a button lets users click to do something, and a text

field allows users to type information. These actions help users
get things done on the site or app.

UI elements are made to be simple and easy to understand. When

things are easy to use, users can quickly figure out how to
interact with them.

Consistency is important in UI design. When buttons, text fields,

and other elements are used the same way, users can understand
how to navigate without confusion.

Designers combine these elements to create a user-friendly

interface. A good design makes it easy for users to complete their
tasks quickly.

In the end, UI elements make apps and websites easy to use.

They help users interact and get the results they want.

Good UI design helps users feel comfortable and confident while

using an app or website. When UI elements are well-designed,
users can focus on their tasks instead of struggling to figure out
how things work.

UI Design Elements 20
Intro to UI Buttons
Buttons are very important and common in every user interface.
They come in different shapes and sizes.

Buttons are used for forms, calls to action, sign-up forms, log-in
links, and many other places on websites or apps.

There are 3 main types of buttons based on how users interact

with them: primary, secondary, and tertiary. Visual hierarchy
helps decide when to use each type.

Designers need to understand the best time to use these

different buttons.

UI Design Elements 21
Primary button
Primary buttons show what the interface wants users to do they
should stand out from other buttons, especially if they are close
to each other.

Primary buttons are often used as call-to-action buttons, like

"Submit" on forms.

To style primary buttons, use bright, bold colors to make them

noticeable. Choosing a color that is different from the rest of the
interface helps, especially for call-to-action buttons.

Pro Tip! Don’t use too many primary buttons on a page too many
can confuse users.

UI Design Elements 22
 Chapter 4

Intro to UI Sliders
Discover the different types of sliders and their usage in UIs

UI Design Elements 23
Track
Sliders are an easy way for users to pick a value or range within a
set limit. They work like a path that guides the user, just like a
railroad guides a train.

When users drag the thumb along the slider track, they get
instant feedback. This helps them choose the value they need
without confusion.

The horizontal line of the slider shows the range of options

available. It makes the interaction clear and simple to understand.

Sliders are easy to use and also save space on the screen,
making them a great choice for modern designs.

UI Design Elements 24
Thumb
A thumb is the small handle on a slider that users drag to change
its value. It moves back and forth along the slider track to help
users pick their desired option.

On mobile devices, the thumb’s touch area should be large

enough to make it easy for users to grab and move. A small
thumb can frustrate users, especially if they have trouble with
fine movements.

Designing a slider with an easy-to-use thumb is especially

important for people with motor disabilities. A larger touch area
ensures everyone can interact with the slider comfortably and
without any issues.

UI Design Elements 25
Tick
A tick is a small line or dot on a slider track that shows specific
points or values. It helps users understand where they can move
the slider.

Ticks are useful when you need a rough estimate. For example, if
you’re planning a vacation and setting an approximate budget,
ticks guide users without requiring exact precision.

When exact values are important, like choosing the number of

rooms or guests, ticks become clear markers. They make it easier
for users to pick the correct option.

Adding ticks to sliders makes them easier to use and helps users
interact with them more confidently.

UI Design Elements 26
 Chapter 4

Intro to UI Inputs
Understand the different types of form inputs and when
to use them

UI Design Elements 27
Password input
Text inputs are used to collect different kinds of data from users.
They are designed to fit the specific type of information needed.

Password inputs are a special kind of text input. Unlike regular

inputs, they hide what the user types, usually with dots or
asterisks. This keeps the password private.

It’s helpful to let users reveal their password if they want to check
it. This can prevent mistakes when entering passwords.

Pro Tip! Add a helper text near the label to guide users about
password rules. This helps them avoid errors.

UI Design Elements 28
Search input
A search input is a text box that lets users search for content on
a website or app. It helps users find specific information quickly.

As users type, search inputs often show suggestions to make it

easier to select what they're looking for. This feature speeds up
the search process.

The magnifying glass icon is commonly used with search inputs

to show users it’s for searching.

Placing the icon before the text inside the box helps users
recognize it right away.

UI Design Elements 29
Placeholder
Placeholder text helps users understand what kind of information
they need to enter in a text box. It disappears as soon as the user
starts typing their own content.

On complex forms, disappearing placeholders can cause

problems. If a user gets distracted or switches tabs, they may
forget what the placeholder said and have to delete what they
typed to see it again.

To avoid this, use placeholders along with labels that explain

what information is needed. Also, make the placeholder text a
lighter color so users don’t confuse it with the data they’ve
entered.

UI Design Elements 30
Calendar input
Calendar inputs are text fields that help users select dates
easily. Some allow typing the date, while others provide a
dropdown calendar to choose a date.

These inputs are useful when users need to enter dates for
tasks like booking tickets or scheduling appointments. They
make the process quicker and more accurate.

To avoid confusion, calendar inputs should include placeholders

or masks to show the correct date format. This helps users
know exactly how to enter the date.

UI Design Elements 31
 Chapter 5

Wireframing
Learn how to create wireframes to your design workflow to
ensure exceptional user experiences in UX design.

Wireframing 32
What is a Wireframe?
A wireframe is a basic layout plan for a website or app.

It visually outlines where key elements, like buttons, text, images,

and menus, will be placed.

Wireframes are simple and focus on structure rather than detailed

design, helping you plan how everything will work together.

They are essential for organizing the layout and ensuring the
design meets both user needs and project goals.

By focusing on functionality, wireframes make it easier to identify

and fix problems early in the design process.

9:41 9:41

Welcome back! Create an account

Login below or create an account Enter your account details below or log in

Email Username
[email protected]

Password Date of Birth

●●●●●● MM / DD / YYYY

Email
Sign In

Forgot Password
Password

Q W E R T Y U I O P
A S D F G H J K L
Z X C V B N M Sign In
123 space return Forgot Password

Log in screen Account creation screen

Filled Empty

Wireframing 33
Why Use Wireframes?
Wireframes help you plan the layout and functions of an app or
website.

They let you focus on how everything works together without

worrying about the final look.

By starting with wireframes, you can save time and fix issues
early, avoiding big mistakes later.

They also make it easier to share your ideas with teams or clients,
so everyone agrees on the structure before starting detailed
design work.

Wireframing 32
Wireframe Benefits
Wireframes are a key step in designing websites or apps.

They help you plan where things like buttons, images, and text
will go.

By making wireframes, you can test your ideas early and find
problems to fix before building.

This saves time and money because fixing mistakes is easier in

the planning stage.

Wireframes focus on how the website or app works, without

thinking about colors or fonts, making the design simple and
easy to use.

Wireframing 33
 Chapter 11

UX Portfolio Guide
This chapter will guide you in creating your first UX portfolio,
helping you showcase your skills, pick the right projects, and
impress clients and employers.

UX Portfolio Guide 36
How to Create a UX Design Portfolio?
A UX design portfolio is like a highlight reel of your best work,
showing clients and employers that you’re the right designer for
them.

Building a portfolio can be tough, especially if you’re not sure

where to start or what to include. But don’t worry, we’re here to
guide you step-by-step.

Your portfolio should showcase your skills by explaining past

projects. Choose the best format for your portfolio whether it's a
website, slide deck, or physical artifacts.

This is your chance to shine, not just with your designs but also
how you present them. While creating a portfolio can be
challenging, this guide will help you through it.

UX Portfolio Guide 37
Why a Portfolio is Important
A UX portfolio is a collection of your best work, usually shown
online. It’s not just about the final designs; it should also explain
your thinking and approach to each project.

A strong UX portfolio shows three things:

1. Your technical UX skills, like user research, prototyping, and

testing.

2. Your understanding of the UX design process, from research to

design and validation.

3. Your problem-solving and design-thinking skills, showing how

you find solutions.

It should look good, be easy to understand, and show your

experience as a UX designer. This is your chance to show hiring
managers and clients that you have the skills to do the job.

UX Portfolio Guide 38
 The Author

Thank You Note.

I want to say a big thank you to everyone who read my book.
It has been an incredible journey, and I’m so grateful for your
support.

I know how tough it can be when you’re starting your design

journey, and that’s why I put so much effort into creating a
book that covers everything you need to grow and become a
pro.

I hope this book helped you, inspired you, or taught you

something new. Your support and feedback mean a lot to me
and keep me motivated to create more.

If you found this book helpful, feel free to follow me on social

media. Your support means so much to me and motivates me
to keep making resources for you.

Thank you again for being part of this journey. I truly

appreciate each one of you.

With all my thanks,

Hamad

Thank You Note 39