QUICK START:

THE PRINCIPLES OF UI/UX

DESIGN & LAYOUTS

PREPARED BY: MASEEHULLAH KATHRADA

www.itvarsity.org
Page 2 of 20
 INTRODUCTION

UX, UI, & LAYOUTS

WHAT ARE THEY?

UI, UX, and layout work together to shape the experience people have with
a digital product. They form the foundation of how websites, apps, and
other digital tools are designed, influencing both how they look and how
they function. Even the most beautiful app can be frustrating to use if the
UX is poor, and a great UX can be let down by a confusing layout. That’s
why understanding the fundamental concepts and how they connect is
essential for creating digital products that people love and enjoy using.

USER EXPERIENCE (UX)

UX, or User Experience, is about how it feels to use your app, whether the
product is easy to use, clear, and enjoyable. It goes beyond design, it’s
about usability, accessibility, and user delight.

USER INTERFACE (UI)

UI, or User Interface, focuses on the visual parts of a product, what users
see and interact with, like buttons, menus, and colors. It's about making
the product look good, functional, and intuitive to use.

LAYOUT

Layout brings it all together by organizing elements on the screen in a

way that makes sense and helps guide the user’s journey. A good layout
makes your product easy to use, navigate, and creates order. A bad
layout causes confusion and frustration for your users.

Page 3 of 20
 SECTION 1

GRID SYSTEMS

A grid system is a structure made up of rows and columns that helps

designers organize content on a page. It acts like an invisible framework
that keeps everything aligned and evenly spaced. Grids help create clean,
balanced, and professional-looking layouts by providing consistency and
visual order. They help align text, images, buttons, and other elements so
everything feels structured and easy to follow.

GUIDELINES

§ Start with a standard grid like an 8px or 12 column grids.

§ Use columns to structure and align your content.
§ Be consistent with column widths and spacing between columns.

NOTES

§ Designing without using a grid often leads to messy and

inconsistent layouts.
§ Don’t overcomplicate your grid with too many columns or irregular
spacing.

An example of a website’s layout using a grid system

Page 4 of 20
A 12 column responsive grid layout with varying column widths

A 4 column grid layout with varying row heights

Page 5 of 20
 SPACING & WHITESPACE

Spacing refers to the amount of space between elements on a screen like

text, images, or columns. Whitespace, also called negative space, is any
area that doesn’t contain content. It doesn’t have to be white, it just
means empty space. Together, spacing and whitespace create breathing
room in your design. They make layouts feel open, clear, and easy to scan.
Good use of space helps users focus, understand relationships between
elements, and avoid feeling overwhelmed.

GUIDELINES

§ Use whitespace to create visual breathing room, avoid clutter, and

improve readability.
§ Be consistent with paddings, margins, and spacing rules throughout
your design to keep it clean and balanced.

NOTES

§ Padding refers to the space inside a container, between the content

and its border.
§ Margin refers to the space outside a container, between it and other
elements.
§ Too little spacing can make your content feel crowded and hard to
read. But overusing whitespace can make your design feel
disconnected or unfinished.
§ Inconsistent spacing breaks your visual flow and alignment.

Page 6 of 20
Examples showing how a designer might space elements in a layout

Page 7 of 20
 ALIGNMENT

Alignment is the way elements line up with each other on a page or

screen. It creates visual connections between items and helps users make
sense of the layout. When elements are aligned, they feel more organized
and easier to navigate. Clean alignment leads to cleaner design, poor
alignment leads to confusion and visual noise.

GUIDELINES

§ Use your grid to help you align elements and maintain consistency.
§ Align related items to show connection.

NOTES

§ Placing things randomly or using inconsistent alignment can make

your work feel messy or disjointed.
§ Using too many alignment styles causes confusion and using just
one can make your design feel generic.

How would you choose to align the body text on the elephant page?

Page 8 of 20
 HIERARCHY

Hierarchy is the visual arrangement of elements to show their importance.

It tells users what to look at first, second, and last. Strong hierarchy helps
people navigate content quickly by emphasizing key elements and de-
emphasizing less important ones. Without hierarchy, everything competes
for attention and users may not know where to start.

GUIDELINES

§ Be intentional about the order of your content. It’s your job to create
a reading flow for your users.

NOTES

§ You can create hierarchy using size, weight, font, colour, contrast,
spacing, and placement.

Users usually scan in patterns like F-shaped or Z-shaped reading paths

Page 9 of 20
 CONSISTENCY

Consistency means using the same design patterns, styles, and behaviors
throughout a product. When things look and behave the same way, users
don’t have to relearn how to interact with each part of your design. It
builds trust, makes navigation easier, and improves the overall user
experience.

GUIDELINES

§ Create your own design system or style guide to maintain uniform

design patterns across your product.

NOTES

§ Inconsistency can break your design and make things feel chaotic.

Page 10 of 20
 SECTION 2

COMPONENTS

Components are reusable building blocks in UI design. They are made up

of one or more UI elements like text, buttons, or icons, that are grouped
together to perform a specific function. Think of them like LEGO pieces, you
can use them again and again across different parts of your design while
keeping everything consistent. Common components include things like
buttons, cards, navigation bars, modals, and dropdown menus. Once
designed, a component can be reused in multiple places without
redesigning it from scratch.

GUIDELINES

§ Design your components to be modular and reusable.

§ Each component should do one job, and it should be obvious what
that job is.

NOTES

§ Avoid redesigning the same component multiple times. Think about

creating a master version with variants or different states.
§ Don’t overcomplicate things. Avoid adding too many elements,
functions, or styles to a single component.

Page 11 of 20
Examples of different user interface components

Page 12 of 20
 ELEMENTS

Elements are the basic visual parts of a user interface. These include
things like text, icons, colors, images, links, and such. Elements are the
“atoms” of design, they combine to form components, which then build
up a full layout or interface. Each element plays a specific role in helping
users understand content, interact with the product, and navigate
through it.

GUIDELINES

§ Avoid clutter and use only what you need. Everything on the screen
should have a purpose and serve a function.
§ Your priority is clarity and consistency.
§ Desing from simple to complex. Start with clean, functional elements
before adding extra decoration or flair.

NOTES

§ Don’t give your users decision fatigue by overloading their screens

with too many elements to looks at.
§ Nobody likes complication. Try to keep things simple.

Page 13 of 20
 TYPOGRAPHY

Typography is the style, arrangement, and appearance of text in a design.

It includes things like the font you choose, the size of the text, how it’s
spaced, and how different levels of information are styled, like headings or
paragraphs. Good typography helps users read, scan, and understand
content quickly. In UI design, typography isn’t just about looks, it directly
affects usability, readability, and how professional or trustworthy a
product feels.

GUIDELINES

§ Use a limited number of typefaces. Usually between 2 to 3 is all you

need.
§ Choose typefaces that are legible and that best suits your product,
message, or brand.
§ Alignment, contrast, and size are very important when displaying
text. Use best practices and keep it consistent.

NOTES

§ Using too many fonts or styles creates a messy, unprofessional feel.

§ Any text that might be hard to read or understand should be
redesigned. Legibility comes first.

One of the best places to find, test, and learn about fonts is
www.fonts.google.com

Page 14 of 20
 BUTTONS

Buttons are interactive elements that allow users to take action, like
submitting a form, saving a setting, or navigating to another page. A
button should clearly look clickable and tell the user exactly what it does.
Buttons are often the most important elements on a page because they
drive interaction and movement through a product.

GUIDELINES

§ Make buttons look like buttons by using familiar shapes, icons, clear
labels, and visual cues like shadows or outlines.
§ Use action-oriented labels like “Submit”, “Next”, “Save”, or “Start
Now!”.
§ Design different types of buttons with visual states that can be used
across your work. Like primary or secondary buttons and disabled,
hover, or active states.

NOTES

§ Unclear labels or hard to find buttons could leave your users feeling
lost.
§ Don’t forget to think about your mobile users.

Page 15 of 20
 COLOURS

Colour in UI/UX design is used to create emotion, highlight important

elements, organize content, and guide the user’s attention. It’s more than
just decoration, colour plays a big role in how usable, readable, and
accessible a design is. Designers use colour palettes (sets of primary,
secondary, and neutral colours) to keep a visual style consistent across a
product and with a brands identity.

GUIDELINES

§ Stick to a limited colour palette, usually a few brand colours,

neutrals, and accent colours. Then use them appropriately and be
consistent:
o Primary colours for main actions like buttons or headings.
o Accent colours to draw attention to alerts or highlights.
o Neutral colours for backgrounds, text, or dividers.
§ Use contrast for readability. Light text on dark backgrounds and dark
text on light backgrounds.

NOTES

§ Poor use of contrast makes text, especially smaller text, almost

impossible to read.
§ Too many colours can look chaotic, unprofessional, or childish.
Remember there is such a thing as too much icing.

Check out www.coolors.co to help you design colour palettes

Page 16 of 20
 VISUALS & IMAGERY

Visuals and imagery refer to any graphics used in a user interface such as
photos, illustrations, icons, diagrams, and videos. They support the
content, help users understand information more quickly, and add
personality to the design. In UI/UX design, visuals are not just decoration,
they must serve a clear purpose and align with the overall tone and
function of the product.

GUIDELINES

§ Good visuals enhance communication and reduce the need for long
explanations. Use visuals that support your content, not distract
from it.
§ Use imagery that is relevant and high-quality.
§ Be consistent in style when using illustrations or icons. They should
be consistent across your design and with your brand.

NOTES

§ Don’t overload your interface with too many visuals.

§ Poor quality images and inconsistency breaks your design flow.

Page 17 of 20
 MENUS

Menus are navigation tools that help users find their way around a
website, app, or interface. They organize links or options into a list or
structure so users can easily move between pages, features, or sections.

GUIDELINES

§ Keep menus simple and clear with related items grouped together.
§ Place menus where users expect them to be.
§ Hide menus under a dropdown or hamburger menu on mobile to
free up screen space for content.

NOTES

§ Menus play a critical role in usability. A confusing or cluttered menu

can make users feel lost or overwhelmed.
§ Avoid having too many menu items or overly nesting menu items.
§ Menu labels can absolutely not be vague or ambiguous.

An example of a responsive menu

Page 18 of 20
 PROXIMITY

Proximity refers to how close or far apart elements are from one another.
In UI/UX design, grouping related items together helps users understand
what information belongs together and what is separate. This is a key
principle in creating visual clarity and structure.

GUIDELINES

§ Good proximity reduces confusion and guides the user’s eye

through the interface in a logical, intuitive way.
§ Group related items close together and separate unrelated items
with whitespace or dividers.
§ Try combining proximity with hierarchy.

NOTES

§ Don’t create a scattered mess.

§ And don’t clump everything together.

A simple example illustrating the law of proximity

Page 19 of 20
Page 20 of 20