FUNDAMENTALS OF

CREATING A GREAT UI/UX

!
Elisa Paduraru
© 2022 Creative Tim

All rights reserved. No part of this publication may be reproduced in any

form or by any means - graphic, electronic, or mechanical, including
photocopying, scanning, recording, or information storage and retrieval
systems - without the express permission in writing of the publishers.

ISBN 978-973-0-36036-3
 1,800,000+
Developers and Designers around the world

3,650
Days of continuous learning and improvements

20,000+
Hours of experience

200
Designed and Coded Digital Products

5
Products included in the Github Vault
for 10.000 years code archive

CREATIVE TIM UI BOOK

Preface
We are Creative Tim and we help developers and web designers avoid
mundane work and focus on the interesting and innovative part of their
job.

We believe in the power of giving back! We are proud to sponsor schools,

universities, hackathons and be part of events where we can teach people
how to become better developers, designers, and entrepreneurs.

Since 2014, we noticed that developers were always “reinventing the

wheel” when working with clients, and ended up creating the same items
over and over again for their websites. We aimed to create a few standard
components, like login and register modals, calendars, wizards, headers,
and footers.

According to recent market development, people are using more and more
resources like kits and templates.
Even so, the templates should be implemented correctly in order to be
functional and contribute to a positive user experience.

After 8 years of crafting the next generation's web design tools, UI Kits,
Admin Dashboards, and Mobile App Templates, we decided to write a UI/
UX book guide based on our collective experience.

This book aims to teach developers and designers the basics of a design
that demonstrates great UI / UX. We believe that these fundamentals
should be considered a “must-have” of knowledge that you should have
before implementing elements.

The book is complex and structured in several parts. We’ll start with “The
Evolution Of Design”, and continue with a deeper understanding of the
concepts of UI/UX in “UI/UX Design Guide. We then will move on with
user interface analysis in a theoretical way. In the third part, you will learn
the nitty-gritty, like how to correctly create small elements such as
typography, buttons, inputs, images, and others. In the fourth part, we will
examine the elements that pull sections together. In the fifth part, we will
illustrate some concrete examples of pages. And in the last part, you will
find examples of websites of some companies and brands that respect these
rules.

My name is Elisa Paduraru and I am Chief Designer at Creative Tim. I

want to thank my teammates: Alexandru Paduraru, Alexandra Murtaza,
Rares Toma, Beniamin Marcu, Stefan Moldovan, Cristina Neculai, and
Dragos Costin; and our partners: Zoltán Szőgyényi, Robert Tanislav, Vlad
Mihalache, Fredy Craciun, Andrei Iordache, Eugen Tudorache, Stefan
Condurachi, and Adrian Chirilov for their continuous support and
feedback, which helped us write this book. Also, I want to thank the artist
Paul Virlan who created the book’s cover design and Danny Ivan for
amazing 3D images.

Thank you for reading!!

 PART I
The Evolution Of Design
13

1. The History of Graphic Design 14

2. The Chronology of Important Movements in Web Design 16

PART II
UI/UX Design Introduction
25

1. UI Design - How Things Look 26

2. UX Design - How Things Work 29
3. What Do UI/UX Designers Do? 31
 PART III
The Anatomy of the Elements
35

1. Grid and Layout 36

2. Typography 43
3. Colors 51
4. Gradients 66
5. Shadows 70
6. Buttons 76
7. Forms 85
8. Icons 96
9. Images 103
10. Illustrations 109
11. Navigation 115
 PART IV
An Eye for UI/UX Design
121

1. Navbars 122
2. Headers 126
3. Features 135
4. Cards 143
5. Content 153
6. Teams 161
7. Logo Areas 166
8. Stats 171
9. Charts 174
10. Tables 179
11. Maps 184
12. Widgets 188
13. Frequently Asked Questions (FAQ) 193
14. Contact Us 198
15. Footers 201
16. Sidebars 205
17. Wizards 212
18. Timelines 217
19. Reviews and Testimonials 219
 PART V
Real-Life Applications
223

1. About Us Page 224

2. Profile Page 227
3. Blog Post Page 229
4. E-commerce Page 231
5. Rental Page 234
6. Application Page 237
7. Sign Up Page 240
8. Sign In Page 241
9. Policy Page 242
10. Chats & Messages Page 244
11. Categories Page 246
12. Admin Templates 249
 PART VI
Great Website Designs
253

1. apple.com 254
2. airbnb.com 258
3. about.instagram.com 261
4. stripe.com 264
5. revolut.com 267

PART VII
End Credits
271

1. Bibliography 272
 PART I
The Evolution of Design
 The Evolution Of Design

1. The History of Graphic Design

a. The First Typography System

Right from the start, humanity has displayed a knack for communicating
through visuals. Egyptian hieroglyphs were one of the first writing systems
and it was used in Ancient Egypt. This system combined logographic,
syllabic, and alphabetic elements, with a total of 1,000 distinct characters.
Cursive hieroglyphs were used for religious literature on papyrus and
wood. Each picture or symbol served one of these three functions:
representing the image of a thing or action, standing for a sound or the
sounds of one, to as many as
three syllables, and clarifying
the precise meaning of adjoining
glyphs. Writing hieroglyphs
required some artistic skill,
limiting the number of people
who chose to learn it. Only
those privileged with extensive
education, the pharaoh, nobility,
and priests were able to read and
write hieroglyphs.

b. The First Logo

The world’s first logo is the coat of arms, used as a symbol to represent
family houses or territories. Scholars theorize that the practice had become
popular during the Crusades, when soldiers from different countries

14
 The Evolution Of Design

and houses used it as a symbol (or you can also use “sigil”) to tell
everyone where they came from. Particularly, the family oat of arms or
crest was placed on armor and battle flags. Like logos, a house’s coat of
arms aimed to represent the people’s values, characteristics and styles.
Later, these emblems took on more practical purposes, such as wax seals
to denote authenticity.

c. Graphic Design

The term “graphic design” appeared for the first time in 1922. In the article
“New Kind of Printing Calls for New Design” (Boston Evening Transcript,
1922), the book designer William Addison Dwiggins first used the term
“graphic design” to describe exactly what his role was in structuring and
managing the visuals in the book design. From day one, designers were
struggling to explain to non-designers what, exactly, they did.

In 2000 web design, developers started creating multiple versions of

websites to be viewed on different browsers and devices. While this
technique worked, it was time-consuming and impractical. Devices and
browsers were constantly evolving and having multiple versions meant
that updates had to be made separately – desktop, tablet, and mobile.

15
 The Evolution Of Design

2. The Chronology of Important

Movements in Web Design
1987. Adobe Photoshop

Photoshop was developed in 1987 by two brothers Thomas and John

Knoll, who sold the distribution license to Adobe Systems Incorporated in
1988. This program, at that time called “Display”, caught the attention of
his brother John, an Industrial Light & Magic employee, who
recommended that Thomas turn it into a full-fledged image editing
program. Thomas renamed the program “ImagePro”, but the name was
already taken. Later that year, Thomas renamed his program Photoshop
and worked out a short-term deal with scanner manufacturer Barneyscan to
distribute copies of the program with a slide scanner; a "total of about 200
copies of Photoshop were shipped" this way. Photoshop was initially only
available on the Macintosh platform. In 1993, Adobe chief architect
Seetharaman Narayanan ported Photoshop to Microsoft Windows. The
Windows port led to Photoshop reaching a wider mass-market audience, as
Microsoft's global reach expanded within the next few years. In 1995,
Adobe purchased the rights for Photoshop from Thomas and John Knoll
for $34.5 million so Adobe would no longer need to pay a royalty for each
copy sold.

16
 The Evolution Of Design

1993. The First Landing Page

Adam Clark Curry is a podcaster, announcer, Internet entrepreneur, and

media personality, known for his stint as VJ (video jockey) on MTV and
being one of the first celebrities personally to create and operate websites.
He ran the first unofficial landing page site for MTV in 1993. This was a
big difference from just a few years before. According to a study by MIT
researcher Matthew Gray, by the end of that year, there were 623 websites.

1995. The origin of the term “User Experience”

The term User Experience was probably first heard in public at the CHI '95
Conference Companion on Human Factors in Computing Systems held on
May 7-11, 1995, in Denver, Colorado. The combination of the two words
"User" and "Experience" first appeared in a presentation by Donald
Norman, Jim Miller, and Austin Henderson of Apple Computer entitled
What You See, Some of What's in the Future, And How We Go About
Doing It: HI at Apple Computer, particularly in the sentence: “In this
organizational overview, we cover some of the critical aspects of human

17
 The Evolution Of Design

interface research and application at Apple or, as we prefer to call it, the
User Experience.”

1998. Design is Kinky

Design is Kinky was founded by Andrew Johnstone

and was one of the first design community websites.
The website regularly presents graphic works,
photographs, expert articles, or profiles of artists who
have decided to publish their work online. In 2018,
the project Design is Kinky closed its operations.
Now, if you check the Design is Kinky website they
have a “re-launching soon“ message.

1999. The Practice of Simplicity

Jakob Nielsen is a web usability consultant human–computer interaction

researcher. He was named the “the Guru of Web Page Usability” in 1998
by The New York Times, and the “King of Usability” by Internet
Magazine. Jakob published a revolutionary book: Designing Web
Usability: The Practice of Simplicity. The book became one of the basic
handbooks in the field of web usability and the emerging field of user
experience design (UX).

18
 The Evolution Of Design

2005. Youtube Launch

In 2005, Chad Hurley, Steve Chen, and Jawed Karim,

were employed at PayPal. Soon after resigning, they
worked together to launch the YouTube website for
publishing and sharing video files. The first video called
"Me At The Zoo” was uploaded to YouTube on 23
April, 2005 by one of the co-founders. It was a short
video from the San Diego zoo. Not long after, in
November 2006, YouTube was purchased by Google for
$1.65 billion.

2009. Dribbble

Dan Cederholm and Rich Thornett founded the

Dribbble design community portal. Graphic designers,
illustrators, web designers, typographers, and other
related creative professionals can share their work on
Dribbble in 1600x1200px. Dribbble is currently the
largest community website for designers.

2010. Google Fonts

Google launched an open-source web font library,

Google Web Fonts, now called Google Fonts. Fonts are
hosted on Google's servers, and the library now has
nearly 900 font families that users can use on their
websites for free.

19
 The Evolution Of Design

2010. Flat Design

Microsoft launched Windows Phone 7, a mobile phone whose user

interface was created using flat design. The new visual style received
positive feedback, and Microsoft used flat design elements in the design of
the Windows 8 graphics interface. Flat design has also gained considerable
popularity among web designers and has become one of the major visual
trends in web design after 2010 along with skeuomorphism and material
design styles.

2010. Sketch

Sketch is a vector graphics editor for macOS

developed by the Dutch company Sketch B.V.,
formerly named Bohemian Coding. It was first
released on 7 September 2010 and won an Apple

20
 The Evolution Of Design

Design Award in 2012. It is primarily used for designing the user interface
and user experience of websites and mobiles and does not include print
design features. Sketch has more features for prototyping and
collaboration. Being only available for macOS, third party software and
handoff tools should be used to view Sketch designs on other platforms.

2014. Material Design

Google introduced a new graphic style called Material Design at the

Google I/O conference. Since 2015, Google has redesigned most of its
applications and services using the consistent visual style of Material
Design. According to Google's definition, Material Design is a “visual
language that synthesizes the classic principles of good design with the
innovation and the possibility of technology and science.”

21
 The Evolution Of Design

2016. Adobe XD

As a response to the rising popularity of Sketch, at the

Adobe Max conference in October 2015, Adobe
announced that they were developing a new interface
design and prototyping tool under the name "Project
Comet”. A beta version of Adobe XD was released for
Windows 10 on 13 December 13, 2016. On October
18, 2017, Adobe announced that Adobe XD was out
of beta.

2016. Figma

Figma started offering a free invite-only preview

program on December 3, 2015. It saw its first public
release in 2016. On October 22, 2019, Figma
launched Figma Community, allowing designers to
publish their work for others to view, duplicate, and
adapt.

2019. Neumorphism

A Medium Post by Michal Malewicz credits the name to Jason Kelley,

from new + skeuomorphism. This user interface style is characterized by
flat design, combined with soft shadows and highlights.

22
 The Evolution Of Design

2021. Glassmorphism

Glassmorphism is a term used to describe UI design that emphasizes light

or dark objects placed on top of colorful backgrounds. A background-blur
is placed on the objects, allowing the background to shine through, giving
it the impression of frosted glass. Glassmorphism is the newest trend in UI
that is rapidly becoming popular among designers. While its brother,
Neumorphism, did not win as many fans, this trend will definitely grow. It
is characterized by a glassy look that is based on a combination of shadow,
transparency, and background blur. It can work great if it’s used the right
way, even larger companies like Apple and Microsoft are using it.

23
The Evolution Of Design

24
 PART II
UI / UX Design
Introduction
 UI/UX Design Introduction

1. UI Design - How Things Look

a. Formats

A UI (User Interface) deals with the application's graphical layout, which

includes buttons, screen layout, animations, transitions, micro-interactions,
and so on. In short, UI is all about how things look.

UI design includes the following formats:

Graphical User Interface (GUI): GUI design involves how users interact
with the visuals and digital control panels of a system. The computer's
desktop is an example of a GUI.

Voice-controlled Interface (VUI): VUI design deals with the interaction

between a user and a system using voice. Smart assistants like Bixby for
Samsung mobile devices and Siri for iPhones are examples of VUIs.

26
 UI/UX Design Introduction

Gesture-based Interface: This is mostly used in virtual reality (VR) and

other gesture-based design scenarios, which deal with the engagement of
users within 3D spaces. Here is an example of our fully coded simulation
of the Soft UI Admin Dashboard in VR:

b. Characteristics

For good UI Design, you should take these characteristics into

consideration:

The design should be focused on helping users complete tasks quickly

with minimum effort. Completing tasks should be a seamless experience.

It should be enjoyable, satisfactory, and free from frustration.

27
 UI/UX Design Introduction

The UI Design should communicate the brand value of the company/

organization.

28
 UI/UX Design Introduction

2. UX Design - How Things Work

a. UX Process

UX (User Experience) Design deals with how users interact with the
system. Logical navigation and how smooth and intuitive the experience is
all fall under UX design. In short, this type of design helps users have a
positive experience. To get a feeling of the UX process, here are the main
steps:

Interaction Design deals with how users can complete their tasks
effortlessly by using the interactive components of a system (page
transitions, animations, buttons, and so on).

User Research involves conducting extensive research, collecting

feedback and ideas from new or existing customers, understanding end-
user needs, and making design decisions based on these parameters.

29
 UI/UX Design Introduction

Information Architecture involves the organization of information and

content that users need to do their tasks. This requires a UX designer to
understand the relationship between different sets of content and present
them in the most understandable way possible.

b. Practices

For good UX Design, you should follow these practices:

• The product should be easily usable, logical, and self-explanatory.

• The product should solve the users’s problem.

• The product should be accessible and usable to a wide range of people.

• The product should create a positive experience for the user, allowing
them to complete tasks without frustration.

30
 UI/UX Design Introduction

3. What Do UI/UX Designers Do?

a. What Are the Disadvantages of a Combined UI/UX

Role?

Having a combined UI/UX role is almost like wearing two different hats at
the same time. While most organizations advertise a UI/UX role as a
single, combined job, the UI and UX designers have different skill sets.
Their main focus, way of thinking, and method of prototyping a product
differ greatly.

A combined UI/UX role requires constant switching between

conceptualization and visualization, which is often difficult and can reduce
the amount of attention that each discipline requires.

b. How Do UI/UX Designers Work Together?

31
 UI/UX Design Introduction

While UI design and UX design require very different skill sets, they are
both important components that must work in harmony to give the best
experience to end users.

A UI design might be beautiful, but it can be clunky and confusing to

navigate without a good UX design. On the other hand, the user
experience of a product can be flawless, but it is nothing without a good-
looking user interface.

Any frontend development and design process should start with

understanding the needs of the user. UX and UI designers should work in
collaboration with other developers, managers, and product owners to
understand what the end product should be able to do, how it should feel,
and what it should look like.

UX designers are generally involved in the earlier phases of a product

design since they need to design the flow of activities that take place when
a user needs to solve a problem. This process involves analytic and project
management activities.

32
 UI/UX Design Introduction

Later, a UI designer builds on the aesthetics and interactions based on the

models provided by the UX designer. Given this, it is safe to state that UX
and UI go hand in hand. And while there are instances when the same
person does both, one design principle cannot exist without the other.

33
UI/UX Design Introduction

34
 PART III
The Anatomy of the
Elements
 The Anatomy of the Elements

1. Grid and Layout

a. About Grid

One of the most important foundations in UI/UX Design is the grid. This
grid is created through a set of horizontal and vertical lines, so the screen
is divided into columns and rows. With a consistent spacing between
elements like buttons, cards, paragraphs, the page or the application has a
structure and an alignment. In addition to clarity, the grid makes the design
responsive and facilitates the design process.

Columns

The vertical areas of a grid are columns. These are flexible and can be used
in pairs of 6 or 8, but most UI/UX designers are using 12 columns. Do not
use values like 7, 9 or 11 for column amounts because these values are
divisible only by themselves.

36
 The Anatomy of the Elements

Rows

The horizontal areas of a grid are rows. However, this type of grid is not
used often in web design.

Gutters

The empty spaces that divide columns and rows are gutters.

37
 The Anatomy of the Elements

Margins

The space which is outside of columns, rows, and gutters are margins.
Large margins and healthy spacing between sections of content allow your
user to pause and breathe as they are scrolling through your website.

Modular

The modular grid is the area of intersection between a column and a row.

38
 The Anatomy of the Elements

b. What is Fluid Grid?

A Fluid Grid allow a designer to change elements based on the screen

size. More accurately, column width changes based on screen width, while
margin and gutter widths are fixed. This type of grid is recommended for
responsive interfaces.

For example, this header is set on a fluid grid, so it looks like this on a 12
columns grid.

It looks like this on a 6 columns grid.

39
 The Anatomy of the Elements

c. What is Fixed Grid?

The size of the margin has the feature to change based on screen size. In
this situation, columns and gutters have fixed values. If you are designing
form areas or articles, you should use this grid type, because it is
unnecessary to stretch this content.

d. For Desktop

The common size which designers choose to use is with 12 columns grid.
Most design tools have the option to set the grid, but if it doesn’t, you have
to calculate the values. For this, there are many online tools that can help
you calculate your grid values. Try to use 12pt, 14pt, or 16pt for gutters
and 160pt or 180pt for margins.

When you start to design all elements, it is important to use a grid for these
too. Most screen sizes are divisible by 8, so with the 8pt rule, all the
dimensions of elements must be a multiple of 8, like 16, 24, 32, 40, and so

40
 The Anatomy of the Elements

on. This rule will create consistency in design but also reduce
implementation time.

e. For Mobile

Most of the mobile screens use an 8pt grid. Margins are defined with a
fixed width of 16px, but some apps use 20 or 24px. The recommended
value for the gutters is also 16px. Less than 16px is usually not enough to
keep elements visually separated but, maybe 8px might work in some
situations. The text sits on a baseline grid which is set to 4px.

41
 The Anatomy of the Elements

f. How it Works for Text

The text should be aligned based on its baseline. When you have to align
two or more pieces of text with each other, the alignment is done
according to the first lines of text. When you align them based on the
baseline of their first, visually, it becomes clean.

Take a look at these cards.

42
 The Anatomy of the Elements

2. Typography

Typography is how text is arranged within a design. It is the process of

making the text fit in an aesthetically pleasing way that does not
compromise its legibility. When using typography, the designer is not
designing the actual letters, he is working with existing typefaces and
fonts.

a. Typeface vs. Font

A typeface is the lettering design (Open Sans, Helvetica, Roboto, etc.) that
has a collection of related fonts, while a font is a specific style within that
typeface (Regular, Italic, Light, SemiBold, Bold, etc).

The choice of a typeface must be made according to legibility, the ability

to be scalable and according to the variety of several weights.

43
 The Anatomy of the Elements

b. Typeface

There are three typeface categories, Sans Serif, Serif, and Script. For UI/
UX Design, the last one, Script, is the most avoided because it is the
hardest to read, especially if that typeface is a primary text.

Serif comprises the small features at the end of strokes within letters. Serif
typefaces and their fonts tend to have a sophisticated and classic feel.

Sans serif typefaces are, in contrast to serif typefaces, typefaces

that don’t have serifs. The printing industry refers to typefaces without
serifs as sans serif, from French “sans” meaning “without”. They tend to
communicate a more relaxed and informal presence.

44
 The Anatomy of the Elements

The choice of a typeface must be made according to legibility, the ability

to be scalable, and according to the variety of several weights.

c. Line Height and Line Length

The line height and the font size are inversely proportional. A short line
height is appropriate for large texts and a taller line height for small texts.
The line height for small text multiplies the font size by 1.6. For example,
the font size is 16pt, the result is 25.6, so it can be rounded to 26pt. This is
not valid for large text, which is bigger than 32pt. For larger text,
multiplying by 1.3, or 1.1 can look great.

Line length is the distance between the left and right edges of a text block.
Shorter lines are more comfortable to read than longer lines. As line length
increases, your eye has to travel farther from the end of one line to the
beginning of the next. If the lines are too short, the text becomes

45
 The Anatomy of the Elements

disjointed, but if they are too long, the content loses rhythm as the reader
searches for the start of each line.

e. Letter Spacing

The letter spacing is the space between letters in text. The main purpose of
letter spacing is to improve the legibility and readability of the text. When
you set a font size, its value is by default 0. Sometimes it is not ideal to try
to be artistic with setting higher values. If you have too tight or too wide
text, it can simply be just too difficult to read. Even if you think it looks
good, people will struggle reading it, and that will ruin their experience. In
most cases, its value can remain set to 0.

46
 The Anatomy of the Elements

However, there are situations where adjustments are needed. For example,
when capital letters are next to each other, their space is too tight.
Therefore, to achieve better readability, space needs to be increased. This
is a process generally referred to as kerning.

In general, the fonts are well designed; you can be sure that they are well
calibrated and you will not have to make major adjustments to them.
Besides this, the default Material Design and Apple guidelines for their
typefaces are very useful.

47
 The Anatomy of the Elements

f. Align

The text-align property is used to set the horizontal alignment of a text. A

text can be left or right-aligned, centered, or justified.

Approximately 90% of humans are right-handed, and most languages read

the written word left to right, so the most alignment used is left. Even
though the center alignment looks great because it is symmetrical, it is
difficult to read when there are many rows.

The justify alignment is recommended for articles and blogs because it is

much easier to read a section with a lot of text. This alignment needs
special attention because it could have a lot of gaps between words. For
this situation, hyphenation is the solution that can reduce these gaps.

48
 The Anatomy of the Elements

A “rag” is an informal term used to describe an uneven margin for a

vertical column of type. When this is too obvious, it is very difficult for the
reader to move from one line to another.

c. Type Scale

The type scale is a combination of 10 or more styles that are supported by

the type system. It contains reusable categories of text, each with an
intended application and meaning. The main objective of having a type
scale is to have a consistent set of text sizes ready to use.

49
 The Anatomy of the Elements

For creating your specific type scale, in the beginning, it is necessary to set
a base size which can be 14pt or 16pt. The next step is to multiply and
divide the base size by 1.618, so the type scale will have a structure related
to the Golden Ratio. Avoid texts smaller than 12px, they are difficult to
read.

There are many online tools that can help you create your own scale. All
you have to do is set the base. So, take a look at this example of a scale
that works well for most projects.

This one will help you to have consistency in design and to have a great
user experience. Be careful when you reduce the dimensions, and try to
avoid using more than 3 font sizes for a section. Take a look at this
example.

50
 The Anatomy of the Elements

3. Colors
Color can set the basic mood, tone, concept, and connotation for a brand or
product. Research conducted by the Institute for Color shows that users
take about 90 seconds to assess the quality of online products. From 62%
to 90% of people's product assessments are color-influenced on the
subconscious level.

The right color selection will always improve the display of elements. It
can also increase the strength of those elements such as calls-to-action, as
it can enhance customer navigation capabilities. At the subconscious level,
it can fulfill aesthetic user needs, and can stimulate intuitive interactions.

a. Color Ways

Colors can be noted down in different ways, and the most common ones
are Pantone, CMYK, HEX, and RGB. However, in Web Design, the only
ones used are HEX and RBG.

Pantone

51
 The Anatomy of the Elements

CMYK

HEX

RGB

52
 The Anatomy of the Elements

RGBA

Hue
Hue refers to the origin of the colors we can see. It doesn't have any
adjustments on the original color.

Saturation
Saturation is how colorful or vivid a color appears. It is a hue with
different saturation values, more exactly, 0% saturation is grey, and 100%
saturation is an intense color.

53
 The Anatomy of the Elements

Lightness
This is the way to compare how close the color is to white or to black. For
example, 0% lightness is pure black, 50% lightness is the chosen color,
and 100% lightness is pure white.

Tints of color
Increasing the lightness of a color will create color versions by adding
white.

Shades of color
Decreasing the lightness of a color will create color versions by adding
black.

54
 The Anatomy of the Elements

HSB and HSL

HSB (Hue, Saturation, Brightness) and HSL
(Hue, Saturation, Lightness) are not the same.
For the same color, there are differences
between the color values. At the extreme top
right, the Brightness is 100 in HSB, while the
Lightness is 50 in HSL.

b. Don’t use Pure Black

Pure black is not recommended in Web Design. Pure black text on white
backgrounds can cause eye strain when users read the text over an
extended period. White has 100% color brightness, and black has 0% color
brightness. This disparity in color brightness creates intense light levels
that overstimulate the eyes when reading text.

Instead of black text, it is recommended to use dark gray text on a white

background, so the change in brightness is not that prominent. This
prevents overstimulating the retina and allows users to read for a more
extended period.

55
 The Anatomy of the Elements

Same situation for using a pure black background with white text. A pure
black background removes all light emitting from the screen. This makes
the eyes work harder and open wider since it needs to absorb more light.
When this occurs, the white letters can bleed into the black background
and cause the text to blur. This effect is known as “halation” and it
especially affects users with astigmatism.

A balance of contrast between the text and the background color is an

effective way to make your text safe for the user’s eyes. If you’re unsure
about your color contrast, you can use an online color contrast checker to
find an optimal range that works for you. It shows you when your color
contrast is too low based on accessibility guidelines.

56
 The Anatomy of the Elements

c. Create a Color Palette

The color wheel is known as the fundamental method to choose colors for
every aspect of life, for clothes, furniture, art, or buttons. This is an
important tool that helps every UI Designer to create color palettes. The
colors used on a design should not be chosen randomly; it should have a
meaning visually and for the user.

Complementary Palette
Complementary colors are placed on opposite
sides on the color wheel. This combination
provides a high contrast, high impact color, and
together are prominent.

Analogous Palette
In this scheme are three colors that are side by side
on the color wheel. To balance an analogous color
palette, choose one dominant color, and use the
others as accents.

Split-Complementary Palette
Split-complementary color scheme uses one
primary color and the two colors that are on the
right and left side of the primary's complement.

57
 The Anatomy of the Elements

Triadic Palette
This scheme contains three colors that draw a
shape of a triangle on the color wheel. This
provides a high contrast color scheme and creates
boldness.

Rectangular Palette
This color scheme uses four colors made from two
pairs of complementary colors. All four colors
create a contrasting combination.

Monochromatic Palette
This scheme contains a primary color with its tints
and shades. This color palette is easy to apply in
projects for balanced and clean design because it
provides a subtle and delicate color combination.

A color palette with colors chosen appropriately could attract readers and
customers or could keep them staying longer on your website.

Create your own color palette

For a complex color palette, which contains all the necessary colors, just
follow these rules:

58
 The Anatomy of the Elements

Rule 1: Set the Primary Color

Generally, this color will be like a leitmotiv,
which will be used for elements like buttons,
icons, typography, cards, headers and others.
It doesn't have to be a color from the color
wheel.

Rule 2: Choose a Secondary Color

In a design, it is necessary to have a secondary color to guide the users to
secondary actions. This color could be the primary color’s complementary
or a neutral color like a shade of gray.

Rule 3: Set Attention Catching Colors

These colors are strongly suggested in order to communicate with the user.
They are used, for example, to send the user a notification if the input he
filled in is incorrect. Green indicates success, blue - information, orange -
warning, red - danger/error. These colors appear in elements like
notifications, alerts, modals, inputs etc.

59
 The Anatomy of the Elements

Sometimes the primary color could be green, blue, orange, or red. In this
situation, the notification color should have a different hue or saturation
but still be green, blue, orange, or red.

Rule 4: Create Tints and Shades of Colors

For a correct chromatic organization in the project, it is necessary to have
the tints and shades of the chosen colors in the color palette. It could be
used for cards, backgrounds or filters over images.

The tints of colors are created by changing the lightness value of each
color. In the first place there are the unchanged colors, and down with each
row the colors have 20% more of lightness on each row. The percentage
value could be 10, or 5, depending on how light you want the tint to be.

60
 The Anatomy of the Elements

The shades of colors are created by changing the lightness value of each
color, but, in this case, subtracting 20% of lightness on each row. Same as
the tints, the percentage value could be 10, or 5, depending on how dark
you want the shade to be.

Rule 5: Create the Gray Palette

In this situation, primary color is in the category of cold colors, so all the
greys will be cold. On the other hand, if the primary color is warm, all the
greys will be warm.

61
 The Anatomy of the Elements

For a completely neutral gray palette, set the saturation to 0. In this case,
the neutral colors are more appropriate and will improve the look and feel
of your project.

Firstly, create the darkest gray from primary color, or more specifically;
saturation could be set to 20 and lightness to 10. For finishing the gray
palette, add 10% lightness to the darkest gray at each new gray created,
until white is obtained.

Rule 6: 60 - 30 - 10
The Golden Ratio Effect refers to the 60% - 30% - 10% rule.

60% is a dominant hue, usually it’s a neutral color.

30% is for the secondary color, complementary or another shade of gray.

10% is for the accent color.

62
 The Anatomy of the Elements

Extra: Tips and Tricks

Another way to create a color palette is to be inspired by nature. Nature’s
color palette is so various and also includes tints and shades. For a clean,
natural, and well-proportioned design, it is advisable to use natural colors,
because the user sees it daily and his eyes are accustomed to those colors.

63
 The Anatomy of the Elements

d. Contrast

Contrast helps users to distinguish various text and non-text elements.

Higher contrast makes the imagery more comfortable to see, and reducing
contrast can give a flatter tone to images.

Always check the contrast ratio.

Check contrast-ratio.com for easily calculating the color contrast ratios.

e. Colors in Dark Mode

With the increase of user’s screen exposure time, dark mode design has
emerged as a friendly alternative to white screens that can tire eyes.
Therefore, its adoption has expanded a great deal, making it normal for
users to expect to have a Dark Mode option on your site or application.
Indeed, Dark Mode is better for reducing eye strain due to light text on a
dark background. It minimizes flickering and blue light, which can harm
our eyes, especially when we spend long hours on the Internet late into the
evening.

64
 The Anatomy of the Elements

From the perspective of the color palette, the tints will make a greater
contrast in the dark than the shades.

65
 The Anatomy of the Elements

4. Gradients

a. About Gradient

A gradient is the gradual blending from one color to another or more.

Gradients make everything look more real because real life is not made of
flat objects with flat colors. Gradients can be found in typography, buttons,
cards, headers, illustrations - on almost all UI elements.

b. Gradient Types

Linear Gradient
This gradient is a transition between two or more colors. It can be oblique,
horizontal, or vertical. The lightest color is recommended to be at the top
because naturally the light comes from above. Use it for square or
polygonal shapes.

66
 The Anatomy of the Elements

Radial Gradient
This gradient has a color starting in the centre point of the shape and the
other colour on its edge. If the right colors are chosen well, this gradient
creates an awesome 3D effect. Use it more for round shapes.

Angular Gradient
Also known as Conic Gradient, this gradient creates an angle. The color
function changes relative to a center point, the defined start and end edges.

67
 The Anatomy of the Elements

c. Create a Gradient

Always try to use soft color transitions to get a smooth gradient. Avoid
using more than three colors in small shapes and make symmetry between
color stops.

If the gradient is created with a primary color and its tints or shades, it is a
safe area of color, but the gradient could also be created with primary and
complementary colors. In this situation, using only the two colors, a
greyish color will appear between them, which is not aesthetic. To avoid
the greyish color, it is necessary to add a new color, more specifically, a
color between them from the color wheel.

68
 The Anatomy of the Elements

Another way to create awesome gradients is use themes inspired by nature.

Same as the color palette, the gradients are already in nature.

d. Morph Gradient

Now that we know how to create gradients, we can create a special one, a
morph gradient using two types, radial gradient and linear gradient. Follow
the steps.

69
 The Anatomy of the Elements

5. Shadows
a. Why is shadow important?

Naturally, the shadow is created by the presence of the sun. Our eyes are
used to seeing three-dimensional objects that include shadows and
lighting. Without the use of shadows, the design doesn't look so real
anymore.

According to Material Design, objects can be stacked or attached, but they

cannot pass through each other. Instead, they create shadows and reflect
light.

Most interfaces are layered and placed on the z-axis. The shadows indicate
the hierarchy of elements, their depth, directions of movement, surface
edges and sometimes they also help users to understand that one object is
above another.

In UI/UX Design the elements could be without shadow, with drop shadow
or inner shadow.

Without Shadow

70
 The Anatomy of the Elements

Without shadow, the element looks like it is on a background.

Drop Shadow
The drop shadow creates the effect that the element is elevated from the
background. Depending on the shadow values, it could be closer or very
high compared to the background.

Inner Shadow
The inner shadow creates the effect that element is sunken into the
background. This type is sometimes used for the input fields to make it
clear to the user that it is a space that needs to be filled. This effect can also
be seen in Neumorphism Design.

71
 The Anatomy of the Elements

b. Create Shadows

Firstly, a shadow can be created by setting values for the x-axis, and y-
axis. Depending on these values, the shadow can be placed at the top,
bottom left or right of the element. Also, blur value and opacity value are
important for a deep or soft effect.

Try to avoid placing the shadow at the top of the element. The sun is not
positioned down to create this type of shadow so naturally the user's eye is
not used to seeing this.

Notice the difference when the light comes from below and when it comes
from above:

Image courtesy of Toni Oprea Image courtesy of Natasha Tirtabrata

72
 The Anatomy of the Elements

There are no exact values for shadows because they are directly
proportional to the size of the element. For a natural and non-tiring design,
set a high blur value over 30, and a low opacity value, below 20%.

Regarding the color setting, it’s not recommended to use pure dark colour.
Instead of this, you can use a darker gradient of a color palette. For a
playful effect you can use the element’s color.

73
 The Anatomy of the Elements

For a more realistic effect, it is recommended to use several shadow values

on the same element. Therefore, to create a pleasant shadow, it must be
created in layers.

c. Shadows for Dark Mode

White shadow is a common mistake in dark mode. By using the white

shadow, it creates a strong contrast between the element and the
background. As a result, it does not fit properly and becomes tiring. For
dark mode is recommended to use a darker shade of element’s color and a
tint, lighter shade, of the background.

d. Realistic Shadow

For a more remarkable effect, you can create realistic shadows. Follow the
next steps.

74
The Anatomy of the Elements

75
 The Anatomy of the Elements

6. Buttons
a. About Buttons

Over time, people have become accustomed to miscellaneous devices such

as a radio, fax machine or doorbell, which have buttons that cause you to
press them to generate an action.

Likewise, in web design, buttons are interactive elements of a User

Interface, and convey instructions or call to actions. The buttons should
look interactive without requiring the user to do anything besides click on
the desktop screen or tap on the mobile screen. The element’s interactive
look depends on its shape, size, color, shadow, and label.

b. Button Shapes

The article “Why Rounded Corners Are Easier on the Eyes” mentions that
some experts say that rectangles with rounded corners are easier on the
eyes than rectangles with sharp edges because they take less cognitive
effort to visually process. The shape corners create focus outside the
rectangle, while the rounded corners create focus inside the rectangle

76
 The Anatomy of the Elements

which, in this situation, generates more focus on label and action.

The most common shape of buttons is square and square with rounded
corners. The rounded corners are created by setting the value for border
radius.

c. Button Sizes

The size of a button builds the hierarchy between elements. For a great
User Experience, Material Design principles recommend that touch targets
should be at least 36px by 36px and Apple, in Human Interface
Guidelines, recommend a minimum action area of 40px by 40px.

77
 The Anatomy of the Elements

Wide
Don’t make the button too wide or too narrow. For web, the perfect
padding is 32px. For mobile, the size could be extended for full screen
width.

Height
Don’t make the button too high or too low. For web and mobile, the
perfect padding is 18px.

Text Size
The perfect text size for web and mobile is 16pt. It could be more than
that, but a smaller size can affect the UX.

78
 The Anatomy of the Elements

d. Button Styles

Colors and styles communicate the importance of an action. They create

the hierarchy of buttons which informs the user about the button’s level of
importance / can influence the user's behaviour.

e. Button Colors

Color is one of the most important aspects of a human’s visual

surroundings. With the help of color, the user can anticipate what
information the button will transmit. Blue is for info, green is for success,
yellow is for warning and red is for danger/error.

f. Button Functions

79
 The Anatomy of the Elements

The same as the color palette, the most important action is guided to
“primary button”, a secondary action has a “secondary button”, and the
action with a reduced impact is a “tertiary button”.

In some situations, all choices can be equal and the hierarchy is not
necessary so that the user's choice should not be influenced.

80
 The Anatomy of the Elements

The consistency between buttons is essential, so it is relevant that primary,

secondary, and tertiary buttons have common elements like border radius,
typography, and shadow.

g. Button States

Default State
In this case, the button does not change at all. It is interactive and enabled.

81
 The Anatomy of the Elements

Focus State
This state is visible when the user has highlighted the button using a
keyboard or other input method.

Hover State
This state is visible when the user has placed a cursor above the button.

Active State
Active or pressed state is visible when the user had clicked or tapped on
the button.

Progress State
This state is used when an action is not performed immediately and
communicates that the button is in the progress of completing the action.

Disabled State
This state is used when the button is currently non-interactive, but it can be
enabled in the future.

h. Button Positions

According to the predictability of the human eye, there are certain points
of interest and the user's eye is formed to find them because there are the
same patterns and trends. For this reason it is important to place the button
where the human eye is used to finding it.

82
 The Anatomy of the Elements

The most common Layout Scanning Patterns are F-Pattern and Z-Pattern.

The placement of the buttons comes as an indication of the user's behavior,

not to confuse him. If the button is in the area where user’s eyes can’t

83
 The Anatomy of the Elements
catch them, other visual aspects such as color and size might not work
efficiently.

It is natural that the button which moves you forward should be on the
right, and the button which moves you backward should be on the left.

Also, getting a visual difference between primary and secondary actions

can help the user to think less.

If a website does not want the user to delete the account, they will often
switch these buttons.

84
 The Anatomy of the Elements

7. Forms
A form is an UI component which contains elements like buttons, inputs,
dropdowns, radio buttons, toggle buttons, checkboxes, and sliders.

a. Inputs

An input is a text field component whose design should be accessible,

efficient to fill in, and provide a clear opportunity for interaction. It is the
most common element built with a label, rectangle, and a placeholder text.

85
 The Anatomy of the Elements

It is important that the input is not confused with another element. The
border or line that gives the user the indication that that element contains a
space that needs to be filled in is very useful. A Wall-of-Text list of inputs
can scare off the user very easily. Therefore, for a friendly experience, and
also for time efficiency, it is very intuitive for the user to have an example
text in the placeholder, thus the user takes less time to complete the input.

Inputs Styles

86
 The Anatomy of the Elements

The input styles can be outlined or underlined. Generally, users prefer

inputs with rounded corners, these being the most common. The last inputs
,which are underlined, are popularized by Material Design. They are not so
often used, but they look more attractive.

The right icons inside text fields are recommended because they make
completing the input more intuitive.

Inputs States

Text fields must be able to change their appearance according to user

interactions. The user will understand the result of their input through
feedback. A message that will notify the user about the result is an
excellent way to communicate. The notification can be an error displaying
87
 The Anatomy of the Elements

that the form was completed incorrectly, for example, “Please enter a valid
email address.” or a success icon, indicating that the form was completed
correctly.

About Error
Don't just tell users that something is wrong; describe specifically what is
wrong and how they can fix it. That is what makes an error message that
adds value to users who need guidance.

88
 The Anatomy of the Elements

Inputs Width
In some cases the inputs should have a certain width because the text fields
are limited. Using a smaller width for these fields is a better way of
structuring these elements, and it seems much more orderly.

89
 The Anatomy of the Elements

b. Dropdowns

From the point of view of the structure, the dropdown is an input with an
icon. However, functionality is very different because their placeholder
indicates a list, and the icon, which is a chevron, suggests that the user has
to choose.

A dropdown is active by displaying the list of items from which the user
must choose, according to his preferences. This kind of selection is
recommended when there are more than 4 items.

90
 The Anatomy of the Elements

The presence of a scrollbar helps to avoid a very long list, but at the same
time conveys to the user that there are several options to choose from.

Another feature that could determine a complete user experience would be

the integration of the search into the dropdown. In this way, the user will
find the option he is looking for much faster.

c. Radio Buttons (Single Select)

91
 The Anatomy of the Elements

Like dropdowns, the radio buttons are used to make a choice from a list.
Radio buttons are used when there is a list of two or more options that
are mutually exclusive and the user must select exactly one choice.
Therefore choosing a non-selected radio button will deselect whatever
other radio button was previously selected in the list.

d. Checkboxes (Multi Select)

Checkboxes are used when there are lists of options and the user
may select any number of choices one, or several. Each checkbox is
independent of all other checkboxes in the list, so selecting one box does
not deselect the others.

92
 The Anatomy of the Elements

Interaction Area
Because these UI elements are small, to be accessible, it is essential to set
a click area for desktop and a tap area for mobile. On desktop, the mouse
cursor is accurate, making it easier to interact with these elements.
However, on mobile, the measure by a typical fingertip size should be at
least 48px, and the interaction area should be larger than that.

e. Toggle Buttons

The Toggle Button is a UI element that has two mutual states, such as ON /
OFF, LIGHT / DARK, ACTIVE / INACTIVE. The design and
functionality of this control is based on a physical switch that allows users
to turn different settings on and off.

93
 The Anatomy of the Elements

Avoid creating a toggle that includes the text “ON” and “OFF” within the
graphic itself. It makes it harder for users to decode the current state. Use
a contrasting color to denote the state.

Most of the information is collected through forms, but for it to be

relevant, it must be filled in by the user correctly and patiently. So when
there seems to be a long list of inputs, a user may abandon the form. A
trick, in this case, would be to divide the inputs into categories, and these
in turn to steps.

94
The Anatomy of the Elements

95
 The Anatomy of the Elements

8. Icons

Nucleo Icons

Icons are simple symbols used in various contexts that can communicate
something. According to studies, most people perceive images faster than
words, so icons must be easy to recognize and understand for a great user
experience.

a. Styles

96
 The Anatomy of the Elements

The most common styles are Outline Icons, Glyph Icons, and Duo-Tone
because they are the easiest to view and understand. Gradient Icons and
Frozen Icons have a more remarkable effect, but they can become tiring to
watch if they appear in sections too often. Finally, 3D icons became
famous in 2021 and look spectacular only in large sizes.

Avoid using multiple icon styles in the same project; lack of consistency
can confuse the user. Instead, choose an icon pack that uses a style; thus,
all icons follow a similar design. There are many libraries with icons
packages; you have to choose the one that suits your needs.

b. Functions

Depending on the purpose, the icons can have three functions: to clarify, to
be interactive or to decorate.

Clarifying Icons

97
 The Anatomy of the Elements

These are the icons that illustrate the text near them. This trick activates
multiple elements of perception in a single interaction, providing better
recognition of features. People who instantly understand the icon will not

pay much attention to the text. The same will happen to those who have
problems with the rapid recognition of icons, they will pay more attention
to the text. Its effect decreases the risk of misunderstanding or
misinterpretation.

Interactive Icons
These icons appear in interactive areas, and their primary purpose is to do
the action symbolized by them. Thus, icons of this type are directly
involved in the interaction process and are the essential supporters of
navigation. For example, you can click or tap and respond to the user's
request, illustrating a function.

98
 The Anatomy of the Elements

Decorative Icons
This type of icon offers more aesthetic appeal. It is one of the features that
can attract, retain users and add a positive user experience. Decorative
icons are often used as illustrations.

99
 The Anatomy of the Elements

c. Use correctly icons

Easy to understand
The icons must be as simple as possible. When they contain too many
details, their meaning can be interpreted differently,
making it difficult for the user. Therefore, the simpler it is, the greater the
user experience is.

Scalable and Flexible

The icon must be able to maintain its integrity and readability in different
sizes and resolutions.

For an easy and correct scaling of the icon sizes, they must be in a box,
precisely in a frame. Depending on what the icon illustrates, it can be of
various sizes, so once the frame size has been set, all icons need only to be

100
 The Anatomy of the Elements

adjusted in the frame space. The frame is usually 16x16px, 24x24px, or

32x32px; if necessary, other sizes. One you resize the frame, the icon will
be resized.

Consistency
To have consistency, the first thing to consider is the color palette. Using
no more than three to four colors keeps the design clean. The second thing
is about line widths. Icons’ line width must be the same for all of them and
appropriate for the text lines’ width.

101
 The Anatomy of the Elements

The information used in the article “Why Rounded Corners Are Easier on
the Eyes” at the Buttons Chapter can also be applied to icons, so we can
say that rounded icons are more user-friendly.

Resources for free icons:

https://icons8.com
https://materialdesignicons.com
https://nucleoapp.com/free-icons
https://www.figma.com/community
https://worldvectorlogo.com/

102
 The Anatomy of the Elements

9. Images
The human brain processes images 60,000 times faster than it does text. In
fact, 90 percent of information transmitted to the brain is visual. Since we
are visual by nature, we can use this skill to enhance data processing and
the impact of a design.

Images should have a focus point, so they can be cropped without losing
context. A rule of thumbnail is that: “If it’s hard to interpret on a small
screen, it’s probably not the best photo.” As always, test your images in
different screen sizes and aspect ratios.

103
 The Anatomy of the Elements

a. Image Quality

Image quality is essential for providing high-quality user experiences in

product design. If an image looks blurry or fuzzy, it signals low quality to
the user. This is a major red flag and reflects poorly on the brand and the
products.

Before uploading the images onto the website or application, an important

step is to compress the images. When the images are compressed, they
load much faster on the site.

104
 The Anatomy of the Elements

b. Consistency

Consistency is what generates perfection. Find a style that reflects your

audience and create simple guidelines that showcase like a moodboard.
When using stock imagery, you want to ensure that your source has a
similar style for future images to use. Finding image collections can ensure
consistency in style, color tones, and balanced visual composition.

c. Suggestive

Using images that do not match the context can confuse the user. You
should know very well the concept of the brand, so that you can use a
more serious or playful choice of images that is appropriate to the brand.
The image must be relevant and evoke the right feeling, depending on the
topic and theme of the website or application.

105
The Anatomy of the Elements

106
 The Anatomy of the Elements

d. The Typography on Images

In general, the images do not have the necessary consistency for the text
that is written on them. In such situations a filter must be applied to the
image; it is usually black, or another primary color. Depending on the
brightness of the image, the filter can use opacity between 50% and 80%,
enough to observe the details of the image.

107
 The Anatomy of the Elements

e. The “Rule of Thirds”

The “Rule of Thirds” is a rule for composing. The guideline proposes that
an image should be imagined as divided into nine equal parts by two
equally spaced horizontal lines and two equally spaced vertical lines, and
that important compositional elements should be placed along these lines
or their intersections. Aligning a subject with these points can create more
tension, energy, and interest in the composition than simply centering the
subject.

At the end of this chapter, for a positive user experience, I recommend that
the images should be as human as possible. The presence of humans
provides confidence, nature offers a state of calm, and the presence of
animals gives a playful state. On the other hand, avoid harsh, cold images
that do not convey a positive feeling.

Resources for free high resolution images:

https://unsplash.com
https://www.pexels.com
https://pixabay.com

108
 The Anatomy of the Elements

10. Illustrations
a. About Illustrations

Psychologists claim that people need about 1/10 of a second to get a

general perception of a visual scene or element, but that speed is indeed
impossible for textual items.

All elements of an illustration, lines, shapes, colors, facial expressions, or

dynamics of curves, have a significant impact on igniting emotions.
Studying user behavior and factors that influence emotional appeal,
designers can make illustrations a powerful tool. This can connect an
experience to user's emotions from the first seconds of interaction.

Since 2021, 3D illustrations have become popular, so to have a trendy and

attractive design, try to integrate them.

109
 The Anatomy of the Elements

As images, illustrations explain something, and they can replace the

pictures.

b. How to Use Illustrations

Details
Avoid placing illustrations in small spaces and small sizes. In order to
avoid hard to understand illustrations, the details must be visible. Suitable
for small spaces are those illustrations that replace the clarifying icons.

110
 The Anatomy of the Elements

Consistency
The illustrations are based on a story, so consistency is needed. Although
they appear in different sections, the illustrations used in a website or an
application do not have to be different. It is essential to understand the
narrative thread from consistency in color tones to the part of the same
character in different poses or locations.

When talking about icons, there are libraries with illustrations, and there is
no need to learn how to draw illustrations.

111
 The Anatomy of the Elements

Not Always
The illustrations are a good idea but not always, sometimes the actual
images are more suitable. The user needs to see the product exactly as it is
in reality, not a drawn sketch or a 3D render.

c. Where to Apply Illustrations

Hero Images

112
The Anatomy of the Elements

Onboarding

Empty States

113
 The Anatomy of the Elements

Error Pages

These are the most common areas where illustrations can be found.
Obviously, it is not necessary to be only on these pages; usually, they can
appear wherever an image can be used.

Resources for free illustrations:

https://iradesign.io
https://blush.design
https://drawkit.com/
https://www.figma.com/community

114
 The Anatomy of the Elements

11. Navigation
Navigation plays an essential role in how users interact with/use the
website or application. Therefore, navigation design is essential because it
is the basis of the user experience. Navigation elements can be linked
texts, linked icons, or buttons.

a. Types

Menu
The Menu presents all the main pages around which the content is
organized. Depending on where it is positioned, it can be:

• header menu - the first element on the website menu;

115
 The Anatomy of the Elements

• lateral menu - on the left or right part of the interface;

• footer menu - at the bottom of the page.

116
 The Anatomy of the Elements

Also, depending on the interface’s complexity, it can be simple,

or with dropdowns. The presence of a down arrow tells the user that there
are several categories to choose from.

117
 The Anatomy of the Elements

Breadcrumbs
Breadcrumbs are necessary for small websites with more than two pages.
They need to be accurate to be effective. For this type of navigation, the
links must be highlighted enough for the user to understand the hierarchy
of the pages; otherwise, they can confuse the user.

Tabs
Tabs create navigation only on small devices such as mobile. They appear
at the bottom of the screen and are placed on the most important screens in
the application, which must not be more than 5. If there are more than 5,
they will become too small, and make it difficult for the user to tap on
them.

118
The Anatomy of the Elements

119
 The Anatomy of the Elements

b. Consistency

Avoid over-detailed navigation, which can confuse the user, and prioritize
the main pages. Instead, the interaction should have a direct interchange, a
clean design, and responsive compatibility.

120
 PART IV
An Eye for UI Design
 An Eye for UI/UX Design

1. Navigation Bar
The navigation bar can be a Top Navbar type for the websites or Side
Navbar, most often for dashboards.

a. How to Design

When you have to design a navigation bar, you need to pay attention to the
following aspects.
Border Radius

122
 An Eye for UI/UX Design

Remember what was said about the sharp objects? Try to avoid them and
add a border radius greater than 6px. Your navigation bar will look more
friendly.

Consistency
Don’t forget about consistency. For example, the button inside the
navigation bar should have the same border radius as the navigation bar.

Icons
The navigation bar can contain icons or not, depending on how minimalist
you want the design to be. By adding icons, it can be much more intuitive
for the user.

123
 An Eye for UI/UX Design

If you choose to use icons, never use the same color as the text. Instead,
add an opacity between 50% and 60% for visual harmony.

Margins
The links should breathe, so adjust the margins as appropriate. Margins
smaller than 12px can confuse the user. If you have multiple links and only
small margins can fit, try to prioritize the links so that they can breathe.

124
 An Eye for UI/UX Design

Also, the content must be suitably framed in the navigation bar, and the
surrounding margins must be equal for a visual balance. Avoid setting
them smaller than 16px.

b. Choose a Style

The navigation bar can be created in different styles. Once you choose a
style, be consistent and use it on all pages of the project. Avoid making it
higher than 80px, so it will not influence the focus of the header section.

125
 An Eye for UI/UX Design

2. Headers
The header is a strategic part of the page that properly implemented, can
convince the users to spend more time on the website. The users,
especially those who are on the website for the first time, do not inspect
everything. They scan over it, so the page should include the elements that
catch their attention and satisfy them to stays on the website.

The Layout Scanning Patterns F-Pattern and Z-Pattern, from the Button
Chapter, are also helpful in the header's design.

Typography
An essential element of the header is the typography. Avoid using too
much text. The title should not contain more than 10 words, and the
appropriate size according to the typography scale is H1. Under the title is
usually a description which could be H5 or H6. It is essential to create and
respect the hierarchy.

126
 An Eye for UI/UX Design

a. So, What Should a Header Include?

The header should not contain all the elements and sections that you want
your user to see. The header section would be overloaded with information
and this must be avoided. Usually, each page has its header with its
specific purpose, and the information included must be shared accordingly.

Brand’s Elements
The essential elements of a brand will help the user to remember and
recognize it. The logo and the brand name are a “must-have,” other
elements that you can add depending on what the website presents are the
slogan, a description about the company and its mission, product images,
or photos of the team.

127
 An Eye for UI/UX Design

Call to Action
The button in the header is essential and aims to redirect the user to the
main element of the website, such as a product, item, or service.

Search Section
If the website has several categories, options, or products, help your user
with a search section integrated into the header. This section is very
suitable for travel or booking websites.

128
 An Eye for UI/UX Design

Subscription Section
By integrating a subscribe section, you can enlarge your database and keep
your users updated with the activity on the website. However, be careful
not to spam them.

Social Buttons
If the website also has activity on social media platforms such as Twitter,
Instagram, Facebook, and LinkedIn, social buttons will help the user find
these accounts more easily. These buttons are typically found on the
bottom part of the website.

129
 An Eye for UI/UX Design

Download/Buy Buttons
The integration of the buy or download buttons directly in the header helps
the user perform an action faster.

130
 An Eye for UI/UX Design

b. Choose a Style

Similar to the navigation bar, headers can be created in different styles.

Once you choose a style, be consistent and use it on all pages of the
project.

Background Image
For this style, the image resolution must be appropriate, and sometimes the
addition of a black filter with opacity could be necessary. When choosing
the image, do not forget that it is the first thing the user sees, and it should
convey emotion.

131
 An Eye for UI/UX Design

Side Image
Similar to the background image, even if it is only visible in half of the
header.

Carousel
This style of header helps to integrate more information content without
tiring the user. Thus, using a dynamic header can create a positive
experience.

132
 An Eye for UI/UX Design

Background Video
Integrating a video on the background of the header can capture the user’s
attention quite quickly. But, first, make sure it is at the proper resolution.

Waves Effect
This style is also dynamic, which creates a smooth transition to the next
section.

133
 An Eye for UI/UX Design

Blur Effect
Because Glassmorphism has become a trend, and if you like frozen icons,
you can also integrate this effect into the header for consistency.

When designing the header, try not to cover the entire visual area; showing
a part of the next section may arouse the user's curiosity to scroll.

134
 An Eye for UI/UX Design

3. Features
As it is called "Features," this section is dedicated to the features of the
product, service, application, or what is presented on the website.

a. How to Design

Center-Alignment

135
 An Eye for UI/UX Design

When you have a short description, like two lines, align to center. In this
situation, the text with center-alignment looks great and can be read
without difficulty.

Left-Alignment
If you have descriptions longer than 2 lines, the text should be left-aligned.
Thus it is not difficult to follow the text when the user ends up reading it.

136
 An Eye for UI/UX Design

Consistency
When a few descriptions are too long, rewrite the content and simply
highlight the idea of the text.

137
 An Eye for UI/UX Design

Content Area
Usually, the features section has a title and a description. Avoid using the
exact width of the content area.

138
 An Eye for UI/UX Design

Details
If there are short features of 4-5 words, avoid the classic bullets and add
some checkmarks that create more value.

Also, the icons fit and look very clean.

139
 An Eye for UI/UX Design

b. Choose a Style

Simple
This is simple style that shows just text content.

With Icons
This style is the most common. Be careful when choosing icons; they
should illustrate the text and help avoid user confusion. You can return to
the Chapter 8 Icons from The Anatomy of the Elements, to read more
about icons.

140
 An Eye for UI/UX Design

With Logos
Similar to icons, depending on the text, they can be replaced by logos.

With Image
In this style, the image can also be replaced with illustration.

141
 An Eye for UI/UX Design

With Links
If you choose this style, make sure that the links have a proper contrast.

142
 An Eye for UI/UX Design

4. Cards
Cards have a significant impact on your website or mobile application. If
they are designed suitably, they can improve the UX considerably. Cards
work well for many sections of a page and have multiple uses. They can
contain images, descriptions, files, charts, videos, and much more.

a. How to Design

Create Visual Hierarchy

Visual hierarchy creates focus on the essential information. For example,
place the main content at the top of the card and use the typography's scale
to highlight it. Also, the white space and contrast can separate content
areas that need more visual separation.

143
 An Eye for UI/UX Design

Control the Content

The card should include only necessary information. Avoid adding too
much content to a card because it can become extensive or too lengthy.
However, if you need to add more text, make sure it is correctly framed on
the card.

Integrate Link
The integration of several links in the card can affect the card's purpose,
that of being a link itself. However, a single link can be helpful to make it
clear to the user that he can find more information.

144
 An Eye for UI/UX Design

Call to Actions
The presence of buttons in the cards is expected, so the functions of the
buttons must be obvious without confusing the user about which is the
primary button and which is secondary.

145
 An Eye for UI/UX Design

With Image Inside

When you integrate an image in the card, make sure that it is perfectly
framed, for example, the margins of the image above, left, and right must
all be equal. Another essential detail is border radius; the border radius of
the image must be smaller than that card’s border radius.

With Image Raised

Similarly, when using a card with an image inside, a raised image follows
the same rules. The text will always have margins with few pixels in
addition to the image's margins, to avoid an optical illusion of misaligned
elements.

146
 An Eye for UI/UX Design

Responsive
Cards can easily scale down to any resolution owing to the fact that their
squared shape fits in any grid system. Instead of being swiped horizontally,
you can enable vertical scrolling for smaller screens.

147
 An Eye for UI/UX Design

Consistency
If the content is not controlled, misalignments may result in an unsightly
website. On the other hand, the consistency in the framing of the cards
creates a clean design and easy-to-read information. Take a look at these
cards,

and now at these.

148
 An Eye for UI/UX Design

b. Choose a Style

Blog Card
Create your blog cards simply. They have a consistent and repeated
structure but use different images and font sizes to represent the card's
most essential elements.

149
 An Eye for UI/UX Design

Booking Card
A simple style, just content.

Profile Card
It should include only the necessary information, avatar, name, and social
links. Let your Profile Page offer the complex details about your profile
instead.

150
 An Eye for UI/UX Design

Pricing Card
Regarding the pricing card, the main elements are the buy button, the
price, and the features. Make sure these elements are used consistently.

151
 An Eye for UI/UX Design

Background Card
For this card style, the contrast needs to be appropriate, and the text on the
image needs to be visible.

Card with a Colored Shadow

For a more remarkable effect, you can add a colored shadow to the image.

152
 An Eye for UI/UX Design

5. Content
The good content is considered a good User Experience.

User Experience Model by Corey Stern

The CUBI Experience Model, which is an acronym describing its four

components; Content, User Goals, Business Goals, and Interactions, is
powerful in its declaration of content as a main component to an overall
user experience.

153
 An Eye for UI/UX Design

a. Use Meaningful Content

The content should guide the design, but at the same time, the design
should guide the content. Therefore, despite the saying “content first,” the
content should be created not just first, but considered before, during, and
beyond a project.

Typography
Make content easy to understand for users by choosing and using the
correct typography. The information is presented properly through visual
weight and hierarchy.

Value
Choose clear words, a call to action should easily be identified and create a
value proposition. Content should help users to quickly grasp the brand
voice, tone, and messaging.

Responsive
The experience follows the progressive enhancement as the screen size
decreases or increases. Try to limit content to only the most important so
that it can be easily read on small devices.

User’s Needs
Meet the expectation of the users by delivering user-centered design, and
focusing on the user's needs and expectations.

b. Content Areas

Below, I will add the most helpful content areas. Obviously, these areas
can be modified and adjusted depending on the content you have to insert.

154
 An Eye for UI/UX Design

With images
Descriptions that are too long can clutter up the page quickly. Consider
reformulating long texts by emphasizing the main idea. When you create
an album with images, even if they have different sizes, make sure that
there is the same distance between them. Also, you should match the
images between them to have a well-organized section, like in the Tetris
game.

155
 An Eye for UI/UX Design

With text and image

For text areas, use line-height correctly. In this example, I used font-size
16px so the most suitable line-height is 26px. Don't forget to highlight the
call to action with the right colors that pass the contrast test. Also, the
image integration must enhance the section, so its size must match the text.

156
 An Eye for UI/UX Design

Articles
You can create a visual hierarchy using different text sizes from the
typography scale. To have consistency, use at most 3 sizes. You should
also use the appropriate line-height.

157
 An Eye for UI/UX Design

Logos
The presence of the large companies’ logos inspire confidence and
credibility for the user. They should be noticeable, but try to avoid creating
too much focus on that area. Instead, the titles regarding the features can
be better highlighted.

158
 An Eye for UI/UX Design

Comments
Create a group of elements with proper spacing. The focus on icons can be
minimized by adding an opacity of 50%. Similarly, the “like” icon should
be red only on the active state. Also, for this type of content, it is much
more intuitive for the user to click the “Reply” button on the right.

159
 An Eye for UI/UX Design

Blog
Titles always look better when you highlight them. A section with a lot of
information, such as an article, needs to have proper paragraph structure. If
the text blocks are too close to each other, it becomes difficult for the
reader to understand.

160
 An Eye for UI/UX Design

6. Teams
In general, almost all pages have a section where they mention their team.
People are important, so the sections with information about them must be
done correctly.

This section should display elements such as an image with the person,
name, position, and the social buttons for his accounts, and maybe a
favorite quote.

a. How to Design

Faces

161
 An Eye for UI/UX Design
For this section, avoid artistic images. The purpose of this area is to see the
members of a team or the leaders of a company. Therefore, the photos
which present a human's face will have more credibility than an artistic
image that allows the interpretation at the user's discretion.

Contrast
Another essential detail is consistency. Images that dissolve somewhat into
the background, create an unpleasant effect. Instead, you should use

162
 An Eye for UI/UX Design

images that make a good contrast. You can use soft shadows to outline the
image or use a filter with enough opacity to see the details of the picture.

A Team Member’s Name is Important

The person's position is an element that can appear, but it is not the most
essential. Because you have created a section where the user wants to read
about the team, the focus must be on the members' names.

163
 An Eye for UI/UX Design

b. Choose a Style

With Description
For this style, try to keep the description brief.

With Stats
Stats added to team cards create value, so use this style if you have content
to complete this section.

164
 An Eye for UI/UX Design

With Social Buttons

Social buttons are very common in this section. They can be considered an
individual style, but can also appear in all team styles, creating complexity.!

165
 An Eye for UI/UX Design

7. Logo Areas
In general, almost all pages have a section where they mention their team.
People are important, so the sections with information about them must be
done correctly.

In this section will appear elements such as an image with the person,
name, position, social buttons to his accounts, and maybe a representative
quote.

a. How to Incorporate Corporate Logos

Colored
Colored logos are logos exactly as they are presented by brands. Before
using a brand logo, make sure you use it correctly as the brand requires.

For example, Google offers a guide with the "do" and "don't" situations to
use their logo.

Google’s Brand element guidelines

166
 An Eye for UI/UX Design

Gray
There will be situations where gray logos will fit better. If the brand does
not already offer such a variant of the logo on gray, you can create it by
decreasing the color saturation level. In this way, you do not risk changing
the concept of the logo.

Scalable
The logos in small sizes are difficult to notice. Make sure the logo is
scalable and has the right size for the context.

167
 An Eye for UI/UX Design

b. Where to use Corporate Logos

Header Section
Most often, the logos are in the header section. This is the first section that
the user interacts with, so the presence of logos offers credibility and
professionalism.

Footer Section
The logos also can appear in the pre-footer area to inspire confidence and
site credibility.

168
 An Eye for UI/UX Design

Jobs Section
Specifically, for a section that lists job opportunities, avoid using gray
logos. This is a situation where you will want to use colored logos. This is
because people looking for a job will better recognize the company logo.

169
 An Eye for UI/UX Design

Review Section
The presence of logos in a review section establishes credibility. The user
can create an opinion about a product or service much faster if he has read
some reviews provided by users of the product.

Although their presence is essential, do not create too much contrast, and
avoid pure black. Use a light gray instead.

170
 An Eye for UI/UX Design

8. Stats
The stats section is a section that creates a positive user experience by
incorporating numbers in a playful way. Here you can integrate statistics
about the number of projects, products, customers, working hours,
reviews, sales, or others. Sometime, this information can influence the
user; for example, it can help him make a buying decision faster.

a. How to Design

Size
As I said, this information is valuable, so avoid a small size for texts. For
example, according to the typography scale, you could use H1, H2, or H3.

171
 An Eye for UI/UX Design

White Space
There are many numbers, so the text must breathe. Use the white space to
have a clean section.

b. Choose a Style

With Gradient
The gradient over text creates a more enticing effect.

172
 An Eye for UI/UX Design

With Icons
Icons in this context have a decorative role. Do not use icons instead of
titles. For the user, it should be easy to understand what the stats refer to;
otherwise, they should read the description and then make a summary.

With Growth
Using this style of stats, you can show the user the historical growth of the
website or application.!

173
 An Eye for UI/UX Design

9. Charts
Charts are the most common components for dashboards. They provide
complex data and statistics, so their design must be easy to understand
without confusing the user. In addition, charts contain several elements, so
each part has a valuable role.

a. Styles

174
 An Eye for UI/UX Design

b. How to Design Charts

Readable Charts
The user must easily read the information from a chart without looking for
extra explanations. Therefore, avoid creating abstract charts with a fancy
design because their usefulness is essential.

For bar or column charts, offer the possibility to sort the data ascending or
descending. Thus, the user can follow the information much more clearly
in this way.

175
 An Eye for UI/UX Design
Useful Details
Additional information can add value to the chart. You can use tooltips
with expanded details but avoid using them as substitutes for essential
elements in a graph. These details will appear on hover action.

Keep away from 3D

Although the 3D design is currently trendy, this does not mean that you
should apply it in just any component. In this situation, it is not suitable,
only if it is a virtual application.

176
 An Eye for UI/UX Design

Grid Lines
The grid line has the role of keeping the connection between the data and
the axis. Thus, visually, the user's eyes can highlight the areas he is
interested in following.

No Lorem Ipsum
Create charts suitable for real situations. Avoid using lorem ipsum in
charts. For example, the developer who implements this design will find it
challenging to structure the data that you intended to display properly.

177
 An Eye for UI/UX Design

The Importance of the Legend

The legend has the role of structuring the chart information, and it is useful
when there are more than 2 reports.

Colors
Choose colors for reports that can be easily distinguished, have proper
contrast, and use them to differentiate the data in the chart.

178
 An Eye for UI/UX Design

10. Tables
Charts are the most common components in dashboards. They provide
complex data and statistics, so their design must be easy to understand
without confusing it. In addition, charts contain several elements, so each
part has a valuable role.

a. Styles

Simple Form
The most common and easy to read layout, this style contains the only
horizontal line.

179
 An Eye for UI/UX Design

Zebra Stripes
This style helps the user’s eye to follow the row depending on the
background color. Thus, it is appropriate for data-heavy tables.

Grid Line
This style contains horizontal and vertical lines, and it is recommended
that you use it only for tables with a lot of information. However, I suggest
using it rarely, because heavy data tables are complicated to follow. One
option would be to divide the data into two or more tables.

180
 An Eye for UI/UX Design

b. How to Design

To have a table that contains easy-to-read data, be easy to understand, and

compare the data in it, consider the following alignments.

Align Left the Textual Data

The user's eye is accustomed to reading the texts from left to right, so to
capitalize on this habit, keep the textual data aligned to the left.

Align Right the Numeric Data

The only way to effectively compare numeric data is to view it right-
aligned. Thus, the information in the table is much easier to read.

181
 An Eye for UI/UX Design

Align Center Icons or Badges

Icons and badges will generally be about the same size, so align center to
create consistency.

Line Height
Avoid condensed rows, even if you have a lot of table data because small
white spaces inhibit the reader. It is not necessary to put all the information
on a single table page; you can use the pagination, making everything
cleaner, more spacious and tidier.

182
 An Eye for UI/UX Design

Functions
For a positive user experience, you can integrate a filter that will allow the
user to view only the information they are specifically looking for. Also,
another essential function would be to sort the data by applying an arrow
in the table header so that the user can sort by ascending or descending, or
a search input.

183
 An Eye for UI/UX Design

11. Maps
As of late, Maps have become an indispensable element in sites and
especially in applications. Their purpose is to help the user find a location,
specific directions, or explore the area.

a. Styles

Google Maps
The most commonly used map is the "Google Maps." It is complex , yet
it’s easy to find restaurants, streets, hotels, and landmarks.

184
 An Eye for UI/UX Design

Vector Maps
If the site has a more minimalist design and "Google Maps" does not seem
to fit, you can use a more straightforward and simpler map that isn’t as
detailed. The main focus is only on the areas of the user's interest.

b. How to Design

Typography
Because the map also has a functional purpose, not only aesthetic, it is
essential to be clear and transmit the information the user needs. An
element that underlies the map is typography. The text is about 70% of the
map, so you must choose the typeface appropriately. In addition, it must be
easy to read, without letters with special effects.

185
 An Eye for UI/UX Design

Avoid Information Density

Avoid illustrating too much information that does not seem necessary.
Instead, focus strictly on the information sought, without confusing the
user with other details.

186
 An Eye for UI/UX Design

Light and Dark

Consider creating both light and dark variants. For example, for the user
who prefers a dark theme, it is better suited to have the dark version of the
map. On the other hand, another user-friendly function would be to show
the light map's version during daytime and allow the users to change to the
dark version, if desired.

187
 An Eye for UI/UX Design

12. Widgets
Widgets are the elements that look like some cards, only that they have
several active functions within an application or a dashboard.

a. How to Design

Easy to read and understand

Because they are small elements, widgets must contain information that
the user can read and understand quickly.

Applicable
The information in the widget must be relevant to the user. It usually
contains information that the user checks daily, so avoid text that is too
long or images that are too large.

188
 An Eye for UI/UX Design

Customizable
Widgets are elements that contain information chosen by users, so they
must be easy to modify and adjust according to their preferences. For this
reason, it is necessary to add some features for the settings.

Size
There are three sizes: small, medium, and large. Choose the right size
depending on the content. Avoid choosing wide if the content you have fits
better into a small widget. The most significant focus should be on the
content.

189
 An Eye for UI/UX Design

b. Styles
The most common widget styles are:

Widget With Icons

Widget with Calendar

190
 An Eye for UI/UX Design

Widget with Timeline

Widget with Chart

191
 An Eye for UI/UX Design

Widget with a To-Do-List

Widget with a Music Player

192
 An Eye for UI/UX Design

13. FAQ (Frequently Asked Questions)

A Frequently Asked Questions (FAQ) list is often used in articles,
websites, email lists, and online forums, where common questions tend to
recur. The purpose of a FAQ is generally to provide information on
frequent questions or concerns; however, the format is a useful means of
organizing information, and text consisting of questions and their
respective answers may thus be called a FAQ, regardless of whether the
questions are actually frequently asked.

The FAQ has become an important component of websites, either as a

stand-alone page or as a website section with multiple subpages per
question or topic. Embedded links to FAQ pages have become
commonplace in website navigation bars, bodies, or footers.

The FAQ page is an important consideration in web design, in order to

achieve several goals of customer service and search engine
optimization (SEO), including reducing the workload of in-person
customer service employees, improving site navigation, and linking to or
integrating within product pages.

193
 An Eye for UI/UX Design

a. How to Design

Line Height
This section contains a lot of text, so make sure you use the correct font
size and line height. If the line height is too small, it won't be easy to read
the entire section.

194
 An Eye for UI/UX Design

White Space
Use the white space to create a clean section. Choosing the proper distance
between the questions will help the user to read the headings.

195
 An Eye for UI/UX Design

Separating Lines
These lines help to frame the text and highlight the question. They are not
always used, but they help structure the content.

196
 An Eye for UI/UX Design

Icons
The icon is an essential element, and in this section, it has an active
function. It helps to convey to the user that that area is expandable, and he
can find helpful information.

197
 An Eye for UI/UX Design

14. Contact Us
The “Contact Us” is one of the most important section or page on any
website or application. It is typically one of the most visited site pages for
most companies, because it is the only one that helps to create a
connection between the user and those responsible for the site.

a. How to Design

Find the Required Information

As "Contact Us" implies, the essential information that must be on this
page is comprised of contact methods such as an address, telephone

198
 An Eye for UI/UX Design
number, or an official email. Try to offer the user as many contact options
as possible.

Contact Form
A Contact Form is like an email within the website or application. In this
way, the user sends a message with questions or feedback, leaves contact
details, and then is contacted by someone from support. Therefore, the
contact form must contain all the necessary elements to accomplish this
function.

The placeholders in this situation can be very helpful.

199
 An Eye for UI/UX Design

Please keep in mind that Contact Forms with too many fields to fill out,
may overwhelm the user and cause them to abandon the form. Consider
carefully what information you really need from the user as a first contact.

Terms and Conditions

In certain situations, because the company will process the user's data, do
not forget to allow the user to read the terms and conditions and then
decide for himself if he agrees.

200
 An Eye for UI/UX Design

15. Footer
If a user scrolls through the entirety of your homepage, and still cannot
find what he is looking for, the website’s footer becomes a last chance. The
purpose of a website footer is to help visitors by adding information and
navigation options at the bottom of web pages.

a. How to Design

Simple
A simple footer basically has links to the main pages of the website. Make
sure they are presented in order, and the space between them is
appropriate. If the space is too small, the user may become confused and
may miss an important link.

It would help if you also created a hierarchy using different fonts.

201
 An Eye for UI/UX Design
Copyright
For this element, use the current year and the copyright symbol. It is a
small detail that can easily protect against website plagiarism.

With Social Buttons

Although many designers avoid using social icons in the footer because
they are afraid that users are redirected to Facebook or Instagram and do
not return, it is good to have a connection between these platforms.

202
 An Eye for UI/UX Design

With Subscribe
Despite the myth that users never get to see the footer, once they do get to
this section, it is recommended to provide a call-to-action. More precisely,
after the user has viewed the whole website and is interested in more
content, he can subscribe.

With Settings
Integrating country-specific settings can create a positive user experience.
For example, in some situations, such as an e-commerce website that has
integrated prices, make sure that the user can choose the currency for
better conversion.

203
 An Eye for UI/UX Design

The Company’s Mission

The footer is a great place to present the company’s logo, mission, and
values.

With Latest Articles

If the website is active in content marketing on social media, you can
create an area to promote this by publishing the latest posts directly in the
footer.!

204
 An Eye for UI/UX Design

16. Sidebars
The sidebar is an essential part of the navigation process. It appears most
often in dashboards and can be shown either on the left or the right side of
the screen. However, it is generally shown on the left and the right for
users who read from right to left.

As a Navigation Bar, its purpose is to help users find the pages they are
looking for more easily.

a. About Sidebar

Important Links
Because it is like an open menu, it should display only the main pages and
integrate into them the secondary ones.

205
 An Eye for UI/UX Design

Multi Level Dropdown

Depending on the complexity of the website, you can integrate several
links. Make sure you create a correct hierarchy between links that do not
confuse the user. It also adds an icon to suggest to the user that he can
extend the link.

206
 An Eye for UI/UX Design

Responsive
The sidebar has a responsive function. You can resize it depending on the
screen, without affecting the content. You can also offer a collapsible and
expandable feature, thus allowing the user to see the content on the right
more extensively.

207
 An Eye for UI/UX Design

b. How to Design

Insert the Logo

For an aesthetic effect, you can integrate the logo or the application's name
in the first section of the sidebar. However, most of the time, that area is
also functional and refers to the main page.

208
 An Eye for UI/UX Design

Appropriate Icons
By choosing the appropriate icons for the links, the user can speed up their
visually scanning and find what they need quickly. Avoid too much focus
on the icons and use a lighter color or 60-70% opacity compared to the
text. The icons should be aligned to margin to create a consistent space.

209
 An Eye for UI/UX Design

Active Link
Indicates the active link so that the user knows which area he has accessed.

Group of Links
It would help if you structured links into groups to improve the user
experience. The structure creates a hierarchy, and the content can be easier
to read.

210
 An Eye for UI/UX Design

Appropriate Padding
Even if the links are based on one or at most two words, avoid small
paddings.

Light and Dark

If the dashboard has the dark version, don't forget to adapt the sidebar as
well.

211
 An Eye for UI/UX Design

17. Wizards
A wizard is a form that guides the user through a series of steps that he or
she must complete, in order to achieve a goal. The purpose of the wizard is
to reduce errors by making the user follow succeeding steps. For example,
in onboarding processes, a user must enter a set of information to begin
using an application. For an easy flow, you can implement a wizard.

a. How to design a Wizard

Accessibility

It would be helpful to visually indicate where the user is in the process, by

numbering steps or highlighting the direction of their workflow.

212
 An Eye for UI/UX Design

You probably don't need a wizard if there are less than 2 stages. If there
are more than 10 stages, it can become a tedious process for the user to
complete, so you should consider streamlining them.

213
 An Eye for UI/UX Design

Action Buttons
Include navigation buttons for the next and previous stages. Avoid writing
the title of the previous or next in the button title. Keep it simple:
"previous" and "next" are clear enough. Allow the user to select the next
step only after all the compulsory inputs of the stage have been completed.

214
 An Eye for UI/UX Design

Explanations
The user must know the purpose of each set of inputs at each stage.
Therefore, this description will assist him in completing the form
successfully.

215
 An Eye for UI/UX Design

Limited Access
Access to other website areas, which could confuse the user, and thereby
making it challenging to complete the form, as it may be blocked by
wizards. If the user's access is limited to this narrow scope, he can focus
more on completing the wizard.

216
 An Eye for UI/UX Design

18. Timelines
The timeline is a component used in web design to indicate to the user a
history of activities. Based on a chronological axis, you can often use it to
provide information about the stages that a project, product, or user has
gone through or will go through.

a. How to design a Timeline

Structure
This component has a simple structure, the chronological axis where the
stages are placed, and each step has a date, title, and description. From
here, depending on the design and the complexity of a step, you can add
icons and badges.

Padding
Avoid slight padding, which can confuse the user and make it challenging
to identify steps.

217
 An Eye for UI/UX Design

Simple
If you don't have many details to add, keep the timeline simple, clean, and
easy to understand.

Badge
Badges are like labels and help the user to follow structured steps,
according to shared characteristics.

218
 An Eye for UI/UX Design

19. Reviews and Testimonials

Regardless of the theme of the website or application, the feedback
received from users has a substantial impact on new ones. In addition, the
inclusion of a review section provides veracity which improves the user
experience.

a. About Reviews

The Power of the Stars

219
 An Eye for UI/UX Design

Star-shaped icons are often used to rate and review a product or service,
there are usually 5, and the rating is easy to understand. Avoid highlighting
ratings and reviews in different colors depending on the grade. Instead, be
consistent and use a color. The average user will grasp the concept that 5
stars is an excellent evaluation, and 1 or 2 stars is less than stellar.

Also, don't forget to prepare a design version in case the users don't agree
to attach their profile pictures.

b. About Testimonials

The Power of the Word

Testimonials are based on more complex user feedback. He or she has
expressed their opinion in broader and more personal terms. Given that the
user has taken the time to provide this useful feedback, it is appropriate to
give him credit and use quotation marks and italic font style.

220
 An Eye for UI/UX Design

Sometimes you can give up the italic font, but the quotes are essential; the
big ones can create a unique visual effect.

221
 An Eye for UI/UX Design

If the people who give testimonials represent the opinions of large

companies, do not hesitate to use the company logos. Then, testimonials
become official and have a more substantial impact on the mind of the
reader.

222
 PART V
Real-Life Applications!
 Real-Life Applications

In this part of the book, I will present examples of web pages on the most
common topics. Although obviously, my suggestions on the structure are
subjective. You can modify it depending on the content.

UI Kits
1. About Us Page

1. Header

This section should have a navbar with all the website links, the page's title
with a website description, and a call-to-action button.

2. Features

224
 Real-Life Applications

In this section, the user can read more about the characteristics of the
products or services offered.

3. Team

A human connection is created when the user “meets” the team and can
view real images of the members.

4. Stats

Knowing some statistics about the website gives confidence to the user.

225
 Real-Life Applications

5. Subscribe

Offer the user the opportunity to subscribe to receive more information

about products, new content, promotions, or other news.

6. Footer

The last section is the footer, which contains the website links and the
copyright.

226
 Real-Life Applications

2. Profile Page

1. Header

The header must contain an avatar, the person's name, and an

autobiography for profile pages. Then, depending on the workflow, you
can add, for example, a follow or friend request button.

2. Content

In this section, you can integrate the author's projects, for example, blog
posts, image galleries, his products, and more.

227
 Real-Life Applications

3. Connection

Add a contact form that allows the user to contact the author for other
projects or provide feedback.

4. Footer

The last section can also contain social buttons for the author's accounts.!

228
 Real-Life Applications

3. Blog Post Page

1. Header

The header of a blog post should be clean and straightforward. Keep in

mind that the page will contain a lot of text, so don't keep the user on the
header for too long.

2. Content

Stylize the content for excellent readability, create a hierarchy of texts and
set the appropriate line height.

229
 Real-Life Applications

3. Other Articles

This section allows the user to navigate the website and also recommend
other articles.

4. Prefooter and Footer

Here we’ve provided the user a slight suggestion, asking them to share the
article through their social platforms. This can improve user engagement.

230
 Real-Life Applications

4. E-commerce Page

1. Header

The header should be simple. Try to avoid text blocks that are too long,
and feel free to use a catchy image for the background. This allows the
user to preview a small part of the next section, encouraging them to scroll
down further.

2. Products

This section provides product information with high-resolution images,

title, description, and price.

231
 Real-Life Applications

3. Filter

This section integrates a filter that will help the user search for products
according to price, size, color, material, brand, and others.

4. News

You can integrate blog articles for a more complex website. Here the user
can find information about trends, new designers, fashion shows, or others.

232
 Real-Life Applications

5. Prefooter and Footer

The last section of the page allows the user to subscribe to receive
promotions, discounts, or information about new products that the shop
will launch.

Also, in the footer, you can incorporate Latest Posts section, bringing in
content from social media. For example, you could display an Instagram
feed. This could highlight posts by customers who have recently made
purchases and have shared product images with their followers, thereby
developing social proof credibility.

233
 Real-Life Applications

5. Rental Page

1. Header

Choose a background image that creates a pleasant visual impact. Then,

add the search criteria to make a simple transition to the next section.

2. Places

Create cards that provide complete information about the house or place.
Avoid too long descriptions and add a call-to-action button on each card to
allow the user to book, buy, or see more details.

234
 Real-Life Applications

3. Reviews

Reviews are essential for this page because new customers can make better
decisions based on feedback from an existing customer base.

4. Frequently Asked Questions

In this section, you can add the most common questions to clarify certain
misunderstandings in advance.

235
 Real-Life Applications

5. Contact Us

If the client has a specific question, offer him or her the possibility to
contact the company by completing a Contact Us form.

6. Footer

The last section is the footer, which contains the website links and the
copyright.

236
 Real-Life Applications

6. Application Page

1. Header

Use a mockup to present the application as accurately as possible.

2. Features

Shows the application, such as the features and options included.

237
 Real-Life Applications

3. Integrations

If the application has integrations with other platforms, this section

informs the user which other products that have been integrated, so that
they may achieve certain functionality in the application.

4. Pricing

In the pricing section, the client can find several variants. Highlight the
benefits of each pricing plan so that the user can choose what suits him.

238
 Real-Life Applications

5. Testimonials

Also, you should add feedback from existing customers.

6. Footer

The last section is the footer, which contains the website links and the
copyright.

239
 Real-Life Applications

7. Sign Up Page

The user has two ways to access the Sign-Up page:

1. The first way is to have the user register through other accounts such as
Facebook, Google, GitHub, or others.

2. The second way is the classic one, in which the user will fill in the form
with name, email, and password.

Because the user’s personal data will be processed, do not forget to present
the Terms and Conditions with which he must agree by checking a
checkbox.

Also, if the user already has an account, provide a link for redirection to
the Sign In Page.

240
 Real-Life Applications

8. Sign In Page

The Sign In page appears to the user when he already has an account
created on the website or application. Therefore, it is essential to have a
form to log in again, such as an email address and password.

Also, for a positive user experience, you could offer the user the possibility
to save his credentials through a checkbox or a toggle with a “Remember
Me” function.

The user can reach this page without already having an account, so a link
to redirect him to the Sign-Up page is helpful.

9. Policy Page
241
 Real-Life Applications

Policy Pages or Terms and Conditions Pages usually contain a lot of

information. Therefore, the text should be written simply and
understandably, so that it is easy for the user to read.

You can also integrate a menu with titles of essential parts of the page such
as “Cookies,” “License,” or others. For more straightforward navigation,
you can create a dynamic menu.

For example, the user can click on a title from the menu, and his page
scrolls to the section that interests the user. It also highlights in the menu
the title corresponding to the section that the user reads. You can
accomplish this by using anchor links in your titles.

242
 Real-Life Applications

10. Chats & Messages Page

Header

Choose a suitable image for the background. For this section, the button
that sends the user to messages and chat window is essential.

243
 Real-Life Applications

Chat Window

In the window chat section, display message history as well as live

conversations. For a positive user experience, you can create a search that
allows him to search for people or specific messages by keywords.

Footer

The last section is the footer, which contains the website links and the
copyright.

244
 Real-Life Applications

11. Categories Page

Header

245
 Real-Life Applications
Integrating the carousel into the header becomes dynamic and can display
more content than a static header. Present the main categories and avoid
using text sections that are too long. The slide is active, and it will change
in a few seconds, so add text that the user can read in that timeframe.

Content 1

For the first content section, you can add articles with images, text
preview, and author. Then, in this section, allow the user to subscribe by
completing a short subscription form. Also, providing a history with
activities on the website can be helpful for the user.

Content 2

246
 Real-Life Applications

For the second content section, you can present the thumbnails of the
categories with titles on them. To not overload the website page,
pagination is a way to use the space efficiently, and speed up the site. This
way the user has the choice to display more information in a category that
particularly interests them.

Also, for better navigation, allowing the user to filter the content by certain
tags and categories can be helpful too.

Content 3

For the third content section, you can present the categories in columns
like a newspaper style. It is a more specific style that allows the display of
a greater volume of content. That said, make sure there is consistency in
the size of the text and images.
247
 Real-Life Applications

Footer

The last section is the footer, which contains the website links, the option
to change language, and perhaps monetization, in the form of ads. You can
also integrate a subscription form, and last but not least, don't forget the
copyright information we discussed earlier.

Dashboard
12. Admin Templates

a. Analytics

248
 Real-Life Applications

For an analytics dashboard, the presence of charts is essential. They show

the most precise information about sales, customers, stocks, and more.
Also, the tables can help the user to track a great deal of data more
efficiently.

b. Projects

The coordination of projects and teams is based on a transparent

organization. In this dashboard, each card represents a project with the
assigned team. Details about the deadline and project's progress contribute
to more efficient management.

249
 Real-Life Applications

c. Stats

Stats are pretty similar to analytics. However, depending on the domain,

the content of the cards differs. The most useful elements are widgets and
charts. Usually, stats are used to present reports, so you should allow the
user to export the content to another format, such as Excel or PDF.

d. Edit Product
250
 Real-Life Applications

Most of the time, a product that appears on a website is edited from an

internal dashboard. This dashboard shows cards to set product information
such as images, links, prices, and more.

251
 Great Website Designs

PART VI
Great Website Designs

252
 Great Website Designs

1. apple.com
Apple Inc. is an American multinational technology company specializing
in consumer electronics, computer software, and online services. Apple
was founded in 1976, and since then, its website design has changed.

a. Website Evolution

1996

2004

253
 Great Website Designs

2010

2021!

254
 Great Website Designs

b. Design

Let's look at the design of today's website (2021).

Gradients and Rounded Corners

In principle, their design is simple, minimalist with a focus on products.
They avoid square corners, and the shadows of the cards are very smooth.

In 2021 gradients were a trending design style, and you can see their
integration on texts and buttons.

255
 Great Website Designs

White Space
They have a diverse range of products, so the focus on them is essential.
The background is simple, and the white space helps to shape the area of
each product.

Glassmorphism
The glassmorphism is another web design style trend for 2021, and the
stylization of the navbar in this way looks special.

256
 Great Website Designs

2. airbnb.com
Airbnb, Inc. (original name - AirBedandBreakfast.com) is an American
company that operates an online marketplace for lodging,
primarily homestays for vacation rentals, and tourism activities. The
company was founded in 2008.

a. Website Evolution

2009

257
 Great Website Designs

2016

2021

b. Design

Let's look at the design of today's website (2021).

258
 Great Website Designs

Complex Search

They have a complex search with many options and filters for a great user
experience. They also avoid square corners.

Focus on Images
The images have a high resolution and the shadows are very smooth. The
big typography is also a trend that makes the design clean and minimalist.

259
 Great Website Designs

3. about.instagram.com
Instagram is an American photo and video sharing social networking
service founded in 2010.

a. Website Evolution

2011

2018

260
 Great Website Designs

2021

b. Design

Let's look at the design of today's website (2021).

Typography with Gradient

261
 Great Website Designs

Colored Shadows

The colored shadows create a unique effect when the section does not
contain many elements, as in this case.

Gradients on Background

Also, the gradients used as a background make the design simple and
catchy.
262
 Great Website Designs

4. stripe.com
Stripe is an Irish-American financial services and software as a service
(SaaS) company founded in 2009.

a. Website Evolution

2014

2018

263
 Great Website Designs

2021

b. Design

Let's look at the design of today's website (2021).

Animations

They have a dynamic gradients palette for a unique effect.

264
 Great Website Designs

Glassmorphism

Also, in some sections, there are elements with glassmorphism.

265
 Great Website Designs

5. revolut.com
Revolut is a financial technology company that offers banking services,
and was founded in 2015.

a. Website Evolution

2016

2019

266
 Great Website Designs
2021

b. Design

Let's look at the design of today's website (2021).

Glassmorphism

The navbar has the effect of glass.

267
 Great Website Designs
Rounded Corners

The cards have rounded corners creating a pleasant effect.

3D Elements

The 3D elements are also a trend for 2021, and their use creates volume
and a unique design.

268
 End Credits

PART VII
End Credits

269
 End Credits

1. Bibliography
Articles
1. Alexandra Murtaza; 27.01.2021, “18 Web Design Trends for 2021”;
[https://www.creative-tim.com/blog/web-design/web-design-trends/].
2. Alexandru Paduraru; 12.07.2021, “UI/UX Design Guide: What are
Designers, and How Are They Different Than UX Designers?”;
[https://www.freecodecamp.org/news/ui-ux-design-guide/].
3. Anthony; 17.08.2011, “Why Rounded Corners Are Easier on The
Eyes”; [https://uxmovement.com/thinking/why-rounded-corners-are-
easier-on-the-eyes/].
4. Anthony; 08.05.2018, “Why You Should Never Use Pure Black For
Text or Backgrounds”; [https://uxmovement.com/content/why-you-
should-never-use-pure-black-for-text-or-backgrounds/].
5. Donald Arthur Norman, Austin Henderson, Jim Miller; 07.05.1995,
“What You See, Some of What’s in the Future, And Now We Go About
Doing It: HI at Apple Computer”; Chi’95 Mosaic of Creativity -
[https://www.researchgate.net/publication/
202165701_What_You_See_Some_of_What%27s_in_the_Future_An
d_How_We_Go_About_Doing_It_HI_at_Apple_Computer].
6. Harris Eisenberg; 15.08.2014, “Human Process Visual Data Better”;
[https://www.t-sciences.com/news/humans-process-visual-data-better].
7. Monica Galvan; , “How to use a grid in web design”; [https://
www.flux-academy.com/blog/how-to-use-a-grid-in-web-design].
8. Shane P Williams; 12.07.2019, “Building a design system - where to
start?”; [https://uxdesign.cc/building-a-design-system-where-to-start-
part-4-typography-5065b8d360c].
9. Tarsa Bakusevych; 07.04.2020, “Button Design - UI component
series”; [https://uxdesign.cc/button-design-user-interface-components-
series-85243b6736c7].

270
 End Credits
10. Tupik; 08.02.2019, “User Experience:10 Big Reasons to Apply
Illustrations in UI Design”; [https://uxplanet.org/user-experience-10-
big-reasons-to-apply-illustrations-in-ui-design-196aab6185c2].

Wikipedia
11. https://en.wikipedia.org/wiki/Adobe_Photoshop
12. https://en.wikipedia.org/wiki/List_of_websites_founded_before_1995
13. https://en.wikipedia.org/wiki/Adobe_XD
14. https://en.wikipedia.org/wiki/Rule_of_thirds
15. https://en.wikipedia.org/wiki/FAQ
16. https://en.wikipedia.org/wiki/Apple_Inc.
17. https://en.wikipedia.org/wiki/Airbnb
18. https://en.wikipedia.org/wiki/Instagram
19. https://en.wikipedia.org/wiki/Stripe_(company)
20. https://en.wikipedia.org/wiki/Revolut

Official Sites

21. https://www.creative-tim.com/
22. https://about.google/
23. https://about.instagram.com/
24. https://material.io/design/environment/elevation.html
25. https://www.canva.com/colors/color-wheel/
26. https://iradesign.io/

Icons 3D
https://kukla-kit.wannathis.one/
271
 End Credits
Texts:
http://www.kanye-ipsum.com

Images

1. Boston Public Library, 23.01.2020, Unsplash - https://unsplash.com/

photos/fcyB3TjwAOo
2. Campaign Creators, 20.06.2018, Unsplash - https://unsplash.com/
photos/gMsnXqILjp4
3. Christin Hume, 14.07.2017, Unsplash - https://unsplash.com/photos/
OQ2OjujcP9o
4. Collins Lesulie, 22.08.2019, Unsplash - https://unsplash.com/photos/
0VEDrQXxrQo
5. Dirty Scan, 21.10.2019, Unsplash - https://unsplash.com/photos/
JVRPGBnCL2s
6. Dilon Mangum, 19.09.2017, Unsplash - https://unsplash.com/photos/
9489sFfgk4c
7. Fun J, 08.02.2021, Unsplash - https://unsplash.com/photos/
6L4jcwgDNNE
8. Gioia M., 25.09.2021, Unsplash - https://unsplash.com/photos/
qPQa6DuAr00
9. Jake Nackson, 31.01.2020, Unsplash - https://unsplash.com/photos/
IF9TK5Uy-KI
10. Jessica Felico, 25.05.2018, Unsplash - https://unsplash.com/photos/
QS9ZX5UnS14
11. Joel Mott, 22.01.2019, Unsplash - https://unsplash.com/photos/
LaK153ghdig
12. Johannes Andersson, 26.08.2016, Unsplash - https://unsplash.com/
photos/UCd78vfC8vU
13. Kenny Timmer, 10.02.2021, Unsplash - https://unsplash.com/photos/
V-bW-TDTo2c

272
 End Credits
14. LYCS Arhitecture, 19.07.2018, Unsplash - https://unsplash.com/
photos/kUdbEEMcRwE
15. Library Of Congress, 27.01.2020, Unsplash - https://unsplash.com/
photos/tqpsi_BPfCI
16. Luke Stackpoole, 16.02.2018, Unsplash - https://unsplash.com/photos/
eWqOgJ-lfiI
17. Mikita Karasiou, 11.08.2018, Unsplash - https://unsplash.com/photos/
mMzVTy2V1Do
18. Mohammad Metri, 25.11.2018, Unsplash - https://unsplash.com/
photos/E-0ON3VGrBc
19. Natasha Tirtabrata, 05.07.2018, Unsplash - https://unsplash.com/
photos/YFEMVpsuu9Q
20. Pixasquare, 08.04.2018, Unsplash - https://unsplash.com/photos/
4ojhpgKpS68
21. Ralph Kelly, 07.02.2019, Unsplash - https://unsplash.com/photos/
z9fFOzL5L_Y
22. R ARHITECTURE, 20.09.2020, Unsplash - https://unsplash.com/
photos/2gDwlIim3Uw
23. Spencer Davis, 10.08.2020, Unsplash - https://unsplash.com/photos/
naFHFLV5cqU
24. Stefan Stefancik, 05.12.2018, Unsplash - https://unsplash.com/photos/
QXevDflbl8A
25. Toni Oprea, 09.10.2017, Unsplash - https://unsplash.com/photos/
oDJ7UQXnCxE.
26. James Day - www.jamesdayart.com

273