Design For Developers

Design for
Developers
Panduan tentang aturan dan formula desain dasar
untuk membuat komponen, warna, dan tipografi yang
terlihat bagus.
Aa
SAN SERIF
Colors Fonts UI Components
By Adrian Twarog & George

Moller
CONTENTS
Toasts 154 Imagery 364
Breadcrumbs 160 Spacing 366
Tables 166 Components 368
Lists 176 6. Implementation 370
Tooltips 182 Creating The Logo 372
Cards 188 Creating The Color Palette 376
Foreword 4 Capitalization 58 Accordions 194
Creating The Typography 380
Letter Spacing 60 Imagery And Iconography 384
Introduction 6 Tabs 202
Line Height 62 UI Elements 388
Iconography 208
1. Color 8 Font Size 64
Avatars 218
Color Theory 8 Font Weight 68 7. Design System 398
Primary Colors 10 Legibility 70
4. Visual Hierarchy 226 Final Thoughts 438
Secondary Colors 12 Text Hierarchy 74
Visual Patterns 230
Tertiary Colors 14 Typography Schema 76
How To Alter
Hue / Color Wheel 16
Visual Hierarchy 232
Color Temperature 18 3. Component Design 78
Size & Text 234
Saturation 20 Spacing 80
Buttons 240
Tint 22 Baseline Units 82
Inputs 244
Tone 24 Grids & Columns 84
Color 252
Shade 26 Buttons 86
Contrast 268
Selecting Colors 28 Borders 88
Proximity 280
Monochrome Color 30 Shadows 90
Alignment 292
Analogous Colors 32 Icons 92
Consistency 302
Complementary Colors 34 Labels 94
Negative Space 316
Triadic Colors 36 Dividers 96
Visual Harmony 328
Color Psychology 38 Forms 98
Color Weights 40 Inputs 100
5. Design Process 348
Contrast 42 Checkbox 108
Color Schema 44 Radio 114 Wireframe 350
Textarea 120 How To Create

2. Typography 46 Toggle 128 Aesthetic Wireframes 352
Dropdowns 134 Styleguide 358

Bold 52
Submit Button 142 Colors 360
Italics 54
Badges 148 Typography 362
Underline 56
FOREWORD
This book is for people who love to create websites and
applications that are easy to use, and importantly to also
look great.
Here you will find a beginner’s step-by-step guide to using

the design formula to help you create your own user inter-
faces or UI. You will learn how to select colors, and use lay- Adrian Twarog is an Australian George Moller is from Uruguay
outs and components to great effect. Designer and Developer with with more than a decade of ex-
over 10 years of experience perience in Frontend Engineer-
in the business of Marketing, ing and building user-friendly
Our primary mission is to help you stand out. We want to solutions for Commerce and
Website creating and Applica-
give you all the tools and skills to go out there and create tion Development Education platforms.
fun, great looking websites and apps that people love using
and will keep coming back to. Youtube: Twitter:
youtube.com/adriantwarog @_georgemoller
We cannot wait to see what you create and come up with! Twitter: LinkedIn:
adrian_twarog linkedin.com/in/mollerjorge
AdrianTwarogandGeorgeMolle Email:
hello@adriantwarog.com
Medium:
medium.com/@_jmoller
r
WEBSITE DESIGN
HIERARCHY OF NEEDS
INTRODUCTION
5Website Design
Wireframing
Style Guide
This book is structured to develop your foundational skills,

Web Design
and then to build upon these with each chapter. As you
learn more design concepts and skills, your overall ability to
judge and create aesthetically effective designs will continue
4 Visual Hierarchy
to grow and improve.
Consistency Spacing
The first chapters focus on the basics of color,
typography, and layout, which are the building blocks of Proximity Alignment
later chapters on components and user interfaces.
The later chapters will combine everything, covering visual 3 Components

hierarchy, wireframing, and designing a website or
Buttons Forms Icons
application. We will bring it together to showcase how the
combination of subtle design aspects can result in a
Labels Dividers Alerts
well-balanced and nicely crafted website or application.
1 Color Theory 2 Typography
Colors Contrast Hue Typeface Size Weight
Tone Shade Tint Height Bold Serif

COLOR
THEORY HAVE NO FEAR OF
Color theory helps us understand colors. In this chapter
we will cover:
PERFECTION
•
•
Primary, secondary and tertiary colors
Color hues and temperature
YOU WILL NEVER REACH IT.
• Saturation — Salvador Dali
• Tint, shade and tone
• Analogous and complimentary colors
• Color psychology
• Color weights
• Contrast
After completing this section, you will be able to do the
following with colors:
• Create color schemas

• Pick harmonious colors
• Spot ineffective color selections
• Understand the meaning behind color selections
RED
BLUE YELLOW
PRIMARY
COLORS YOU CAN’T USE
UP
— Maya Angelou
Color theory starts with the primary colors, which can

be used to mix and form all other colors.
CREATIVITY
The primary colors are red, blue and yellow.
They are part of a color wheel created by Isaac Newton

in 1666. The wheel is still used today to help select color
palettes, mix colors, and to construct color harmony.
This color wheel helps pick harmonious colors better than
THE MORE YOU USE
THE MORE YOU HAVE
what is generally selected using RGB for HEX.
— Joel Spolsky
RED
PUrpLE OrangE
DESIGN FASTER THAN IT
ADDS
BLUE
GREEN
YELLOW
VALUE COSTS
SECONDARY COLORS
Primary colors can be mixed to obtain secondary colors:
orange, purple, and green.
Using 2 colors in close proximity on the color wheel helps

generate a visual balance known as color harmony. Using
colors further away on the wheel will fracture that
harmony.
Mixing colors will also help you build a color wheel to assist
you with selecting complementary and analogous colors.
RED — Steve Jobs
DESIGN IS NOT JUST WHAT IT

MAgENTA VERMILLION
LOOKS LIKE
PURPLE ORANgE
VIOLET AMBER
BLUE YELLOW
TEAL CHARTR...
GREEN
TERTIARY COLORS
Tertiary colors exist between our primary and secondary
ones. They include: vermillion, amber, chartreuse, teal,
violet and magenta.
These colors form the basis of our color wheel that will
be used to define color temperature and hue in the next
section. DESIGN IS HOW IT WORKS
COLO
DOES NOT ADD A PLEASANT QUALITY TO
HUE / COLOR WHEEL
DESIGN
Hue is the specific color that we are targeting. When we
change our hue, we are essentially rotating our color
wheel.
The color wheel is the expanded version of our primary,

.
secondary and tertiary colors.
Adobe provides a great color wheel where you can select

your colors:
https://color.adobe.com/
IT REINFOCES IT
— Wassily Kandinsky, Painter and Art Critic
COLOR TEMPERATURE — Paul Cézanne
WE LIVE IN
A
WARM
Color temperature
refers to the warmth or
coolness of a color.
Following nature, color

COOL
temperature is easy to Warm colors tend to
identify, with reds, stand out and are
oranges and yellows often used also to
being warm, and blues, show warnings or
greens and purple essential interactions.
being cool. Adding blue
or yellow to a color will
adjust its temperature.
Cool colors are more
Used side by side, we
general, and blend into
can help the user better
the background. They
identify what to focus
can make up the
on. Warmer colors will
framework of a layout,
always demand more
its passive options or
attention than cooler
general interactivity.
colors.
R O S
A F
I
N C
B H
O A
W O
SATURATION
The saturation of a color is determined by how pure it is.
Adding white, black or grey will reduce its saturation.
— Lilly Pulitzer
A pure blue color may be too intense, which is why we
often add tone, tint and shade to balance the colors out.
I AM A BELIEVER THAT
COLOR
As a rule, when selecting a
color, pick from inside the
dashed square.
AFFECTS
These colors are safe and
comfortable for most eyes,
as more saturated colors
can come across as harsh.
PEOPLE’S
MOODS
COLOR
LIKE
FEATURES
FOLLOW THE
CHANGES OF
TINT THE
Adding or removing white from color changes its tint. As a
result, it also lightens its saturation.
EMOTIONS
The tint will lighten colors, allowing subtext or descriptions
— Pablo Picasso
to carry less priority.
DO
Do use tints on text or components to arrange or reflect their order.
Do apply tint to the descriptive text under titles.
Do apply tint to buttons or other components so they blend further into the background.
COLORS
SPEAK
ALL
LANGUAGES
TONE — Joseph Addison
Adding or removing grey from color changes its tone, and

as a result, it also dilutes its saturation.
Colors with more tone and less saturation can feel calmer
and relaxing on the eyes.
DO
Do add a slight tone to colors as good practice.
Do use tone to blend items into the background.
Do apply tone to reduce the priority of components such as buttons.

SHADE
Adding or removing black from color changes its shade.
As a result, it also removes its saturation.
The shade will darken colors, allowing for stronger contrast

COLOR
IS ONLY BEAUTIFUL
and increased priority.
WHEN IT MEANS
DO
o add shade to header/title text that requires priority.
o apply shade to the background when using hover effects for components or buttons.
o use ensure colors have a bit of shade added, so they do not come across oversaturated.
SOMETHING
— Robert Henri
I FOUND I COULD SAY THINgS WITH
COLOR & SHAPES
THAT I COULDN’T SAY ANY OTHER WAY
SELECTING THINgS I HAD NO WORDS FOR.
— Georgia O’Keeffe
COLORS
Picking well-balanced colors is essential when building
any website or application. There are a few tricks to
successfully selecting harmonious colors.
By using the color wheel, we can identify

complementary primary and secondary colors that will
work well together using the following:
• Monochromic colors
• Analogous colors
• Triadic colors
• Tetradic colors (Double complementary)
• Analogous complementary colors

MONOCHROME COLOR IN CERTAIN PLACES HAS
COLOR THE
By using a single color and a mix of tint, tone, and

shade,
you will be able to create several color variations.
GREAT VALUE
OF MAKING THE OUTLINES AND
STRUCTURAL PLANES SEEM MORE
ENERGETIC
These options will have different levels of saturation. The
darker shades can be used for titles and buttons, while the
lighter tints for backgrounds and borders.
— Antoni Gaudi
50% 25% Primary 75% 50%
Shade Shade Color Tone Tint
Example 1 Example 2
ANALOGOUS THE BEST
COLORS COLOR
ON
Picking multiple colors that look good together is done
by selecting the colors next to the primary color. For IN THE WHOLE WORLD, IS THE
example, green has neighboring colors of blue and
chartreuse. THAT
We can select 3 analogous colors to use, mix, and LOOKS
match using this method. GOOD
ON
YOU
— Coco Chanel, Glamour,
50% #1 Primary #2 85% vol.103
Shade Analogous Color Analogous Tint
Example 1 Example 2
ALL COLORS
COMPLEMENTARY ARE THE
FRIENDS
COLORS OF THEIR
Alternatively, we can pick 2 colors that work together by NEIGHTBORS
selecting their counterparts. These complementary colors AND THE
LOVERS
are located on the opposite side of the color wheel.
Blue works with orange, red with green. We can then

adjust the tint, tone and shade to complete our color
selection. OF THEIR
25%
Shade
Comple
mentary
Primary
Color
25%
shade
50%
Tint
OPPOSITES
— Georgia O’Keeffe
TRIADIC COLORS
Example 1 Example 2
To select 3 colors with strong contrast, you can use the

triadic combination by selecting them on a triangular
arrangement based on the color wheel.
These triadic colors have two primary options, and a

secondary color that is often used for backgrounds.
Primary Primary
Secondary
Color Color
AlTriadic e AlTriadic e
ternativ ternativ
Triadic
Background
COLOR IS LIKE
COOKING
THE COOK PUTS
IN
MORE OR
LESS
THAT’S THE
DIFFERENCE
— Josef Albers
Danger
Powerful
Creativity Warning
Imagination Important Friendly
Young Success
Courage Highlight
Nobility Fun
WHAT IS Luxury Expression
COLOR
PSYCHOLOGY?
Colors convey different meanings depending on their use
and juxtaposition. This is why alerts are usually displayed in
red and confirmation buttons in green.
Inspiring Friendly
Mystery Moving
Clear Power Creative Inviting
Clean Business
Simple Authority
Understanding the meaning of each color can allow you to Bright ure
colors Fina
create better websites and applications by selecting the like
color that best reflects the message you want to convey . greens, ncia
yellows l
and Loy
Using different background colors can also play a vital pinks S al
part in how people visualize a website’s authority. can
bring a e
c
Details
Highlight
Positive
Info
Energic
more vibrant youthful vibe to a website, while dark Communication Safe Positive
blues Trust Stable Education
and blacks can come across as business or corporate.
Balanced
FOR COLOR WEIGHTS AND THEIR USE
LIGHT MODE
HOW TO USE
weights, for Backgrounds
example 100
becomes 800. Labels
COLOR Primary Color
WEIGHTS Secondary Shade Button
Hovers
Like fonts, colors can have weights ideally ranging from Overlays
options like 100,200... to 700,800.
Text
The lower values indicate lighter tints, while the higher
values add more shade, bringing it closer to black.
When picking website colors, it is essential to define

the weights that will later be used for the style guide.
Color weights can then be used as a reference for

headers, backgrounds, buttons and hover effects.
Swapping to dark mode means inverting the order of

Text Overlays Seconda 300 Labels
400
Button Hovers ry Tint 500 Backgrounds
600
Primary Color Tags
700 DARK MODE
800
DO
Do use lighter weights between 100-300 for backgrounds, buttons or labels.
Do use standard weights of 300-600 for text, high- lights, labels and headers.
Do use darker weights between 500-800 for headers, backgrounds and button hovers.
ACCESSIBILITY &
CONTRAST ON THE WEB
WCAG (Web Content Accessibility Guide) 2.0 provides
best practice guidelines to ensure that the color contrast
between foreground (text) and background is appropriate
USING by using a ratio. This ratio depends on the size and weight
of the text being used.
CONTRAST This difference in the brightness between two colors is

indicated with a ratio between 1:1 (lowest possible contrast;
white text on white background) and 21:1 (highest possible
contrast; black text on white background or vice versa).
Using the right amount of contrast between different
components ensures they will be easily visible. As a rule of thumb WCAG establishes a minimum ratio of
4.5:1.
Contrast can be applied by adjusting the opacity and
weight of a single color and its alternative element. Avoid
closing matching amounts. FAIL PASS
Text Text
Ratio 4.03:1 `
Contrast can also occur between 2 different colors and how Ratio 4.57:1
they are juxtapositioned. Blend colors that can be Text
easily distinguished when used together. Ratio 2.01:1
A tip to see if you are using enough contrast for your Correct contrast ratio. This allows fo
website is to view the website in greyscale. text to be read on the screen easily.
Insufficient ratio for readability
COLORS
Using triadic color options, the selection
of purple, green and orange work well
as primary, secondary and tertiary
colors. Select base color as white or
black for text.
WEIGHTS
CREATING YOUR
OWN
COLOR
• Providing information on using each color
We will also add a usage guide for applying these colors with text,
buttons, and components in later chapters.
SCHEMA
The color schema is the first part of building a style
guide. These colors will then be a reference when
creating the visuals for buttons, headers, links and
content.
The elements of an effective color schema include:
• Picking primary, secondary, etc colors
• Having a base color for general text (white, black)
• Defining color weights for each color

Defining colors with their weights and HEX values
will help you select and use them correctly in the
future.
Primary Secondary Tertiary Base
100 #ffbee5 #ff9fda#ffbee5

#de6ec3 #ff9fda#ffbee5
#de6ec3 #ff9fda#ffbee5
#de6ec3 #ff9fda #de6ec3
#9c4796 #9c4796 #9c4796 #9c4796
200
300
400
500 #901b79 #901b79 #901b79 #901b79

#7c0057 #68003e
#7c0057 #68003e
#590029 #7c0057 #68003e
#590029 #7c0057 #68003e #5900
#590029
600
700
800
Aa
SAN SERIF
HOW TO USE
TYPOGRAPHY
Understanding typography helps us effectively use fonts
Typography
and sizing for headers, paragraphs, buttons etc. We will
cover:
is an art.
• Typefaces and fonts
•
•
•
•
Serif and sans serif
Bold, italics, underlines and caps
Letter spacing and line height
Text color and contrast
Good
•
•
Sizing fonts and headers
Font weights
typography
•
•
Legibility & readability
Hierarchy
is Art.
After completing this section, you will be able to do
the following things with typography: — Paul Rand
• Create your own typography schema

• Select fonts that are work together
• Recognise ineffective use of font
• Understand how to use varied font
TYPEFACE TYPEFACE
A typeface is a group or
collection of related fonts. Roboto Typography
A popular typeface is
When creating a website or
application, we often pick
Roboto which is commonly
used on many websites. is two-dimensional
architecture,
one or two typefaces, one Due to its overuse, it is
for our headers and one for recommended to use a
paragraphs. In CSS, we another typeface for a
refer to this as a font-
family.
more unique feel, like Open
Sans.
based on experience
and imagination, and guided by rules and re
FONT FONTS
A font is a specific type of Roboto Thin
style based on its typeface. Roboto Light
Styles can include weights,
italics, weights, etc. Roboto Regular
Today there are dozens of Roboto Text
font variations for every
typeface. For example,
Roboto Medium — Hermann Zapf
weights can have thin, light, Roboto Bold
regular to bold and black.
Roboto Black
A
SERIF DO
Typography has 2 types Do use serif font for
of serifs: serif and sans headers text
serif. Serif fonts have Do use serif for hero
more decorative strokes text
(referred to as “tails” or
“feet”) at the ends of Do set serif
letters, while sans serif primarily for larger
fonts do not. text abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
DO SERIF
A
SANS SERIF Do set paragraphs to use sans serif fonts.
Do set small text in labels with sans serif.
On the web and in Do use sans serif for mobile applications.
applications, we use sans
serif font families as they
are easier to read.
The exception is when

we have large headers
or decorative text for
hero banners. DON’T abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
Don’t use sans serif for large text as it reduces style, flair and emotion.
Always opt for using sans
serif when possible. SANS SERIF
BOLD
For websites and applications, we recommend only
Life
bolding the essential text in your paragraph. This can be
for a link, or to emphasize an important message, or a
warning.
Overuse of bold text can make sentences and websites
overwhelming for users.
Bold text is useful when using smaller font sizes, or on

lies in
buttons or backgrounds with strong contrast.
being
Don’t
m of one or two
we might useToo
boldmany
DO
useitems
bold bold too often in texts
bolded when
is to identify links orcertain
boldedtext
DON’T
textis on a page
a link will dilute the emphasis or importance of the text.
or not.
Bold
It might
, we could bold also‘Login’
the word overwhelm
but not the ‘forgot password’ link.
the user.
— Robert Frost
ITALICS
Italics are generally reserved for testimonials, references,
or to emphasize a statement in a paragraph so that it
stands out.
Avoid using italics where possible. Use regular text where
you have a label or
DO DON’T BE
hasize a statement, feeling or expression, or to add character
Using to ayour
italics for full para- OR ITALIC
text. graph makes it very difficult to read and you can lose the message you wish to convey.
NEVER REGULAR
Submit
Do use it on one item to make it stand out.
Do use it for quotes or testimonials.
Don’t use italics for buttons.
Don’t use italics on everything line/text.
Don’t use italics links, they are difficult to spot.
If you can design one thing, you can design everything.

- Massimo Vignelli
DIFFERENT TYPES
OF UNDERLINE
There are many types of underline that can be used to add
UNDERLINE
some creativity to important elements or when hovering
over a hyperlink.
Default Underline
In the early days of the internet, underlined text was pre-
dominantly used to representat hyperlinks. .
Double Underline
Today, the design preference is to underline text to add
emphasis to important text.
Dotted Underline
Hyperlinks are now often represented by using different
text color or weights.
Wavy Underline
DON’T DO DON’T DO
a, there could be many
Usehyper-
a different
linkscolor
in a single
for hyperlinks andthat
paragraph underlining
can be overwhelming.
for a core statement to have a much better effect.
. Do use underlining for emphasising text. Important Header Title
In situations where you do have a hyperlink, apply the underline on the
Don’t overuse underlines on large text.
Do use underlining for the hyperli

AA
CAPITALIZATION
TITLES CAN OFTEN BE SAFE TO USE ALL CAPS
Use capitalization to DRAW ATTENTION to significant text.
When styling for a blog or information rich page, you can

capitalize titles or header text, but not paragraphs or body
text where it might be overwhelming. DO
Do consider capitalizing some headers and titles to make them stand out.
Capitalization is safe to use for components like buttons, Do occasionally capitalize buttons or labels to emphasize or draw attention to them.
labels, and toasts when alerting for important messages.
DON’T DO
ENTENCE WRITTEN IN CAPS WILL APPEAR UNPRO-Having
FESSIONAL.
an alert or warning needs attention for the user, WARNING them of a delete.
se all caps for a full sentence. Do use it on one item to make it stand out. LOGIN SMALL LABEL ATTENTION
AB
L a r g e Header
LETTER SPACING DON’T

Don’t have letters for headers spaced too far apart.
Letter spacing is the space between each letter. It Don’t reduce letter spacing to the point where there is no gap betw
often does not need to be changed for regular font
sizes.
Consider changing the letter spacing when you increase

the font size. As a general rule, use less spacing between
letters in larger font sizes.
Large Title Text
Places to consider adjusting letter spacing include:
• Hero section
• Banners
• Large titles
DO
• Headings Do reduce letter spacing for text above +64px by a small amount such as -0.025em or -1p
Do use consistent letter spacing throughout the design.
• Large font families
This enables text to be read more easily and allows more
room for other components like banners or headers.
DON’T
A Don’t set line height >1.75 for paragraphs
B “Too much line height will cause the text to feel too far apart to be readable.
LINE HEIGHT PARAGRAPHS

Leading is the technical term for the line height of text.
TITLES / HEADERS
Good line height gives more space for paragraphs and less DON’T Headers use less leading
for headers, making them visually easier to read. Don’t set line height
>1.25 for large text
Poor leading can give the appearance that the content
is disjointed, which may make the content more difficult
to follow and users to quickly lose interest.
As line height increases by default relative to size, it is

recommended to reduce the line height with increasing text
Titles should fit closely
size. Consider the – DO Regular paragraphs should have just enough line heig
Do reduce line height to around 1.15
• Size of the font. Larger fonts require less leading Do set paragraph body line height to 1.5
• Length of the lines. Longer lines need more leading
• Amount of text. More text needs less leading
• Purpose of the text. Most headlines require less

leading than paragraphs or body text
aa
FONT SIZE
FONT
FONT SCALING
SIZE
When creating sizes for H1, H2, etc, use the Modular Scale
system to calculate font sizes for your text.
It is based on the harmonious relationship of sizes, making

it easy to find the right px amounts quickly.
Font size for a website must be readable no matter
the device or viewport.
There is no “ideal” or “perfect” font size, but a good elements.

starting point is 16px. From there, you can adjust as
needed based on the specific font you are using and the
Header 1
overall design of your website. For example on larger
screens you can even increase this to 18 or 24px.
Header 2
Header 3
Remember that not all fonts are created equal. Some fonts
Header 4
are easier to read at smaller sizes, while others are more
Header 5
difficult. Consider –
Regular paragraph, avoid using lorem
ipsum as filler text.
• The amount of text on the page: If there is a lot Small labels, placeholder text above inputs, or other small
of text on the page, it may be necessary to alerts.
increase the font size to make text more readable.
• The target audience: If the website is aimed at

TIPS
To learn more about the Modular Scale and how it uses the golden selection to idtentify th
older users, it may be necessary to use a larger options for headers and text, visit the link below. https://www.modularscale.com
font size.
• The website’s overall design: Increase the font

size if the website has a lot of other visual
Use 3.125em / 50px for H1 Use 2.618em / 42px for H2
Use 1.931em / 30px for H3
Use 1.618em / 25px for H4 Use 1.194em / 19px for H5

Use 1.0em / 16px for body P Use 0.667em / 11px for small
FONT SIZE FONT SIZE
PARAGRAPHS HEADERS
Start with using a larger paragraph font size for The header font size looks best when it does not break a
desktop devices and then reduce the size only slightly line. It undergoes a large reduction of size, up to 50%, for
for tablets and mobile devices. smaller device viewports, compared to paragraphs (which
reduce by only about 25%).
DESKTOP TABLET MOBILE DESKTOP TABLET MOBILE

Tablets offer an option between desktopMobiles
and mobile. Slightly
have limited shrink
space, font sizes
reduce to of
the size keep thetodesign
fonts closely related to
keep content
Desktop screens are larger, wider and closer to people’s faces,the
so desktop
ensure version for users readable. Large Header 1
you use larger fonts. It will make text easier for people to read and absorb the content that is provided to them.
Medium Header 2
Smaller Header 3
Large Header 1 Large Header 1 Medium Header 2

Smaller Header 3
Medium Header 2
Smaller Header 3
18-24 px with 0% 16 px 10% 14 px 64 px -0% 30 px-50% 25 px -20%

reduction reduction 25% reduction reduction reduction
reduction
DON’T
Don’t start with small desktop fonts of below 16px.
Don’t use excesively large font sizes of above 30px for text.
DO DON’T DO
Do use font size for body paragraphs between 18-24px. Don’t set header size to be the same asDoparagraph
use largertext.
font size for desktops and tablets.
Do reduce font size for smaller viewports by 10-25%. Don’t oversize headers so that a line break occurs.
Do significantly reduce header sizes for smaller device
aaa
FONT Thin
WEIGHT Light
Font weight is more than just bolding text. Fonts like
Roboto provide a variation of weights, including light,
regular, medium, and black. You can utilize font weight in
Regular
headers for different effects or to make specific text
stand out.
DO When the size of font gets
smaller, it can become more
difficult to read.
Small text like labels, toasts or on buttons, benefit from being in bold so that they are easier to read.
Do increase font weight on
small text.
The larger the font
Do reduce font weight as The less weight needed
text size increases. to look good.
Do combine font weights
in large text to make Use combinations to your advantage!
certain words stand out
DON’T
Don’t overuse bold on large text.
Overwhelm Don’t use very light weights on small text.
large &
loud
T m
e B
x o
t l
M d
e B
d l
a
i c
u k
In the previous sections we covered the use of types of
font, font size, spacing, weight and color. Together, these
aspects combine to create legible aesthetics.
Good legibility therefore involves:

• Using easy to read fonts for the user.
• Consideration of the user’s age and any vision
LEGIBILITY
impairments.
• Using capital letters to emphasise important text.
• Using darktextcolors forlightbackgrounds,

Legibility is ensuring text is as easy to read as possible. andvice versa.
Good legibility is essential in web design and user • Avoid using busy patterns of text behind busy
interfaces because it helps users locate the information images.
they need and navigate the website or app more easily. It
can also reduce frustration and increase user satisfaction
with the overall experience.
A number of factors affect legibility. These include: the type

of device being used, the user’s age, and any vision
impairments they may have. For example, using a larger
font size may be necessary for older users, or avoid
clashing font and background colors for those with color-
blindness.
Poor legibility
Using incorrect font families, weights, siz-
ing, contrast and spacing.
DON’T Typography
Don’t use the same sans-serif font for your headings and paragraphs.
Don’t overdo contrast or spacing to try and fit all the text into a small area. is two-dimensional
architecture,
Don’t set the color or contast too low for text.
based on experience
and imagination, and guided by rules and rea
Great legibility
A good sentence needs to be large enough, with good contrast and line height.
DO
Do use sans-serif font that is smaller with only subtle contrast or opacity to the header.
Do use serif for titles so that it stands out from the descriptive text under the title.
— Hermann Zapf
User Login
Keep things simple for users
without too many instructions
Username
TEXT HIERARCHY
Password
Submit
Taking hierarchy into consideration involves thinking about If you have forgotten passwords can be reset by
clicking here.
how each piece of the text relates to the others around it.
This is important for legibility and findability, which in turn

support usability and learnability for user experience.
TIPS
Size communicates hierarchy. The most important
The goal is to make it easy for users to find the pieces of information are usually larger, while the
information least important are smaller.
they need, when they need it.
Position the most important pieces of text are
For a login form, this would mean that the form fields and usually at the top of the page, while the least
the submit button are at the top of the hierarchy, and the important are at the bottom.
less important details (like the forgot password link) are at
the bottom. Colorful text stands out from the others is seen
first, while the least important are in a color that
blends in.
Bold or underlined text is also seen first.
Indentation of text is also seen first.

tT
EXAMPLE STYLE GUIDE
TYPOGRAPHY
CREATING YOUR OWN
TYPOGRAPHY SCHEMA Header 1
Roboto Light, 50px, 1.25 line-height #FFF
To create a typographic schema, first choose a typeface or

set of typefaces to use for the foundation of your schema.
Header 2
Roboto Regular, 40px, 1.33 line-height #FFF
Next select a few key text elements (such as headings,
body text, and captions) and define how those elements
Header 3
should look. Roboto Bold, 32px, 1.5 line-height #EEE
Decide on a few additional rules, such as line height and Regular paragraph, avoid using lorem ipsum as f
spacing, that will give your schema a consistent, profession- Desktop, Roboto, 24px, 1.5 line-height #EEE
al look. Consider the –
• Typeface: pick a font for headers and paragraphs.

Regular paragraph, avoid using lorem ipsum asparagraph,
Regular filler text.
avoid using lorem ipsum as filler
• Sizing: decide on your H1-H6 and body text sizes.
• Spacing: define your line height and letter spacing.

Tablet, 18px, 1.25 line-height Mobile, 16px,
1.15 line-height
• Examples: provide styled examples for typography
and its use (see next page).
There are four main aspects to consider when designing
components –
• Usability: How easy it is to use the component..
COMPONENTS • Aesthetics: The visual appearance of the component.
• Functionality: The way the component works.
The building blocks of any website are components. • Accessibility: The ability for everyone to use it.
These can be small and simple (like a button), or large and
complex (like a carousel).
No matter their size or complexity, all components should

be designed with the same care and attention. They
include:
• Space, base units • Forms MAKE IT

• Grids
• Buttons
• Badges
• Cards SIMPLE
• Borders • Alerts / Toasts
BUT
SIGNIFICANT
• Shadows • Tables
• Icons • Breadcrumbs
• Labels • Tabs
— Don Draper
• Dividers • Lists
TIPS
SPACING If you are unsure how much white space to use, start your design w
It is easier to remove white space when it is abun- dant than to add
Spacing, or a spatial system, is the amount of room

or pixels inside, outside, and around elements.
Although spacing is technically not a component, it is

critical to ensure that all components are consistently
designed.
Spacing applies to margins, padding and distance from el-

ements and sections. To make a design look good, having
predictable spacing is necessary.
• Consistency: Having all elements adhere to the

same spacing rules creates a cohesive design.
• Margins and padding: These define the amount of

space around elements.
• Distance: used in visual hierarchy and to draw atten-

Define spacing early on in your project, and use the standards set for negative spacing, components, typography and icons.
tion to certain elements. Be Set
consistent
and use thewith
space how
sytem you apply spacing throughout your project. If one button has 30
you create.
• Accessibility: The ability for everyone to use it.
• Gutters: These are the spaces between columns in a Set space the same for all comopnents.
grid system.
5 POINT SPACING
Five unit increment variations are used for all spacing options.
SPACING 0 10 20 30 40 50 60
BASELINE 5 15 25 35 45 55
UNITS
We
like can set a baseline unit to be applied to elements
4 POINT
grids, keylines, padding and more.
We use increments of this baseline unit to ensure consistent

spacing throughout the design.
SPACING
Four unit increment variations are used for all spacing
Common spacing options include 4 point and 5 point options.
systems, where a component has increments of 4, 8, 12, or
5, 10, 15 set for spacing.
0 8 16 24 32 40 48
4 12 20 28 36 44
DON’T 16 px
DO
Submit
Discard 8 px
Inconsistent spacing can look unprofessional. Using 4 point system, spacing can be consistent.
Don’t use variable spacing (eg. 1,3,11,9) for each side element Do use increments of (4, 12, 24) for equal spacing on top, bottom, left, right.
TIPS
12px
Submit Discard
36px
e between elements. Use 12 px of space between buttons and other elements.
s of 4.
SPACING 12 COLUMN DESIGN
GRIDS & COLUMNS
Grids and columns should have consistent spacing
based on the baseline units. These keep things aligned
correctly and positioned asthetically.
Twelve column design is often used for websites and a

repeating grid structure is used for applications.
Men
u
When placing elements on the page, place them within

the grid or columns. Use baseline units to set gutters as HEADER & MENU CALL TO ACTIONS
well.
Logo 1 2 3
DON’T
13px
6px
FEATURE #1 FEATURE #2
Inconsistent width between elements can appear clumsy.
Don’t manually set widths for elements on a single row
Description Img Img
4 px
DO 4 px NEWSLETTER FOOTER
Title & Form Sitemap Logo
Using 3 columns provides consistent sizing to provide a clean look.
Do use pre-set column sizing to keep elements width and gutters uniform
B
Button
B
B
B
B
B
BUTTONS TIPS
For effective button spacing - set 1 EM padding for the top and bottom, and 2 EM
Buttons are elements that when pressed, allows the user to

perform an action. The design of a button depends on the
priority of the resulting action and will determine how
visible it should be on a website or application. DO DON’T
The 3 main types of buttons are: Button Button
• Primary button Small buttons can be difficult to click for

Change the font size and padding using EM values
This button is the main action you want a user to Don’t use less than 14px for the font sizes on button tex
Do resize font size together with button padding to retain legibility on different viewports .
take.
• Secondary buttons
Alternative actions a user can select.
Primary buttons use vibrant colors and are
• Tertiary buttons
Passive actions which are rarely used. Primary larger to signify the main action you want a user
to take. Avoid having multiple primary buttons on
a page.
Design considerations for buttons should include ample
space for users see and select them. This means having Secondary buttons use more subtle colors and
often have smaller and lighter backgrounds to
more padding around text, along with clear colors that reflect they are alternative actions users can take.
contrast against the background of a website or application Secondary
to make the button stand out. Tertiary buttons use simple outlines or no
background because they are the least important
Tertiary actions users take.
NAVIGATION
BORDERS
Apply a border to specific text (border bottom) to show an active item on a header m
HomeAboutFeaturesContact
Use borders to help separate information or content.

FORMS
You can apply borders to buttons, sections, Use borders to help show active forms or to place focus on inputs.
containers, First Name... A|

menus and other elements. However, too many borders can
cause the user interface to feel overwhelming.
DON’T DO
CURVES
Border radius adds curves to a border. If your design uses this asthetic, you can appl
Too much color or focus takes attention away from content.
A subtle border color allows attention to remain on content.
Email Address... Signup
Don’t make borders too light or dark in contrast to theirDo reduce the opacity or color of a border to allow content to be more in focus.
background
NO BORDERS
TIPS
When in doubt, do not add borders. Less is is always more.
ontent or sections you have,Keep

the more
borders
borders
light can
and help
simple
to to
separate
ensure them.
they help separate information sparingly. First Name... First Name...
Set only minimum use of borders when possible. One line can do better than a whole border box.
SHADOWS DEPTH WITH SHADOWS
Shadow is an effectAdd
weshade or tone
can apply to the box backgrounds
to components to draw to emphasize components. Creating darker and heavier shadows with an offset on t
attention to them. Adding shadow to an element also adds
depth to allow it to stand out.
Often, the darker and larger the shadow, the more depth. box-shadow:
0 Depth
Shadows should be applied gradually in minimal amounts. 0px 0px 0px 0px rgba(0,0,0,0);
You can also consider removing any component borders as

box-shadow:
the shadow will work to outline the element. 1st Layer of Depth
0px 5px 10px 0px rgba(0, 0, 0, .15);
Shadow can be applied to:

2nd Layer of Depth box-shadow:
0px 7.5px 15px 5px rgba(0, 0, 0, .45);
• Hover effects over a button to indicate it is an action
• Show a form is active and ready for input when clicked
• Cascade or overlap elements, with important elements at
the DON’T DO
• Separate different sections of the user interface. Harsh Shadows Subtle Shadows
Use online resources to improve your shadows. The

following site by Brumm is an excellent resources to Don’t set opacity of shadows to full and use them with Do use light shadow without a border. A box shadow opacity of a
borders.
create shadows: https://brumm.af/shadows

TIPS
ICONS
Add icons to forms requiring text input.
For example, have a user icon next to the username input.
Set icons next to text inputs to provide users with additional context.
Add icons to elements like action buttons or labels (see Username

next section) to provide your user visual information on 1
what the button does or what the label means.
Password
Only add icons to aspects of the interface that you want #
your user to notice. Avoid overusing icons, as too many can
cause the interface to become overwhelming.
Submit 3
In some instances, you can remove text entirely & use
icons.
DON’T 2
DO
Info: Missing password input
Save
Save
TIPS TIPS
Icon is used to signal data is missing and
Nothat
iconthe
wasuser’
added
attention
to the issubmit
required.
button as too many icons can be ov
Discard Set appropriate icons for labels to give user visual information
Set icons
on only
action
when
required.
required. Too many can make a page feel clustered.
Don’t have different sized icons.
Don’t use icons larger or smaller than font.
Discard
Do use
Don’t use low contrast icons that are hard to see on a element similar style and keep the size the same as the text. (ie 18px font = 18px height icon)
background.
Do space icons around 1em away from text equally.

Info Label: Make sure you read this label before the comments below.
DO
LABELS
Ensure that information based labels are read first by placing them before content. Messages such as a successful change, or requirements for a
Do place information based labels above content that it refers to.
Labels provide feedback to your user on what is

happening on the interface.
Labels remain hidden until they are needed to alert the user
DON’T
When an error occurs, add warning labels below the item with the error. This allows the the element in focus to stay in position, while other
that their attention is required, or if the user has to
complete specific tasks. Warning: Read this after an error to keep attention on element.
Don’t add warnings at the top or bottom of a page, but next to the element they are related to.
Keep labels placed next to the item they are related to

and ensure the right color provides meaning.
Error something has happened that the user needs to know
Success action has been competed successfully.

TIPS
When in doubt always provide more information to a user. Labels can be used for almost all situations user interaction. Pick the right color, write a
Information that the user should be aware
Info: Notify of.with additional methods or context for their interactions.
the user
Set the right color for messages, with useful information that helps the user.
The 3 common types of labels are – error, success and

information. Pick the correct label for the the message you
wish to display.
SINGLE LINE
DIVIDERS A single line is the perfect divider to separate content. Reducing the line’s
opacity ensures it does not stand out too much as a diver to ensure focus re-
mains on the content.
A divider can be used to separate content, including

the content in the same section.
COLOR
Dividers can take numerous forms, including: Use color to divide sections apart, especially in forms. This can allow you to
group certain inputs together.
• A single line • Negative space Firstname Lastname Country City
• Color • Shadows
Examples of where dividers are used include separating the

login from the register button, or group inputs in forms.
NEGATIVE SPACE
SHADOWS
Simply add space between content
DON’T DO
Adding box shadows as a divider
to divide them. If 15px is the between content is a subtle
standard gap, using 30 or 45px approach with similar results to
Purchase Product Purchase Product can be used to divide the sections. using color or negative space.
SizeSmall SizeSmall
ColorRed ColorRed
VariationKids VariationKids
Do add dividers where there are lots of grouped elements.
Do add extra spacing between the divider and the elements.

Don’t cluster lots of information together without dividers.
Don’t add dividers when there is no additional content such as below.
Firstname Lastname Firstname
Country City
Firstname
Country
City
FORMS
A form has several components that often lack style
when using on a browser.
The components of a form should have similar style to

each other and the layout of the site itself. Form
THE FUNCTION OF DESIGN
components can include:
IS LETTING DESIGN
FUNCTION
• Input • Radio
— Micha Commeren
• Checkbox • Textarea
• Button Groups • Submit
When forming the user interface, consider how to allow in-

formation to be easily read.
Labeling inputs and grouping sections can have a greater

impact on the form itself than style or colors applied.
FORM
INPUTS Label
Placeholder
The text input components are form fields that are Full name
provided for user input of text information. Jane Doe
They are made up of three main UI elements:
Enter your first and last name
• Label that titles the input item
Input
• Input itself for entering the information
• Helper text to provide context or assistance for info Helper text
The design for a input form is best presented when you

combine all three elements together.
STATES INPUT STYLING
You can enhance their design by removing the border in place
DEFAULT VALID for a background color. This should be shaded darker than it’s
respective background. This allows you to futher shade the
The default or active state The valid state is used to background on hover, and focus states.
is when you haven’t clicked indicate the users that they
an input field and it is have provided valid informa-
ready and waiting for
action.
tion. DON’T
Email Enter username...Enter email...
Email Strong colors on inputs can cause them to look like buttons.
janedoe@mail.com Don’t use overwhelming borders or colors for inputs.
name@mail.com
Don’t set the placeholder color to the same color as input text
Don’t use icons or labels inconsistently.
FOCUS INVALID
The focus state indicates The invalid state is used to DO
the user that the input is indicate the users that they Enter username... Enter email...
selected and that they can have provided invalid infor-
start typing. mation. A subtle background shade makes inputs stand out better.
Do use shade or tint for inputs that can increase on hover and focus state.
Do use opacity of at least 50% for placeholder text to make it passive.
Email Email Do add icons to all inputs, or remove from all inputs to keep consistency.
janedoemail.com
Email should be in the format of example@mail.com
DISABLED TIPS
The disabled state is when Adrian Adrian
Email Error: username already taken Confirmed: username available
the user should know that name@mail.com
it is there, but can’t Outlines and labels with color can provide additional details about the users informati
interact with it. Set colors in the border or background to indicate if a user input is correct or not.
Set corresponding label with the style change to acknowledge what happened.
INPUT HOVER & FOCUS
Apply a different shade or outline to an input on hover or fo-
cus allows the user to know it was selected.
Zip Code
DON’T DO
ZIP Code
DON’T DO
Don’t size text inputs larger than the expected content, in this example it’s too large for a Zip Code, also the user loses track of the field11400
because placeholder disappears afte
White hover input... Enter username...
Black focus input... Enter email...

Do size the container proportional t
Don’t dramatically change the style on hover, like having inputs go from white to black.
Do add
Don’t add extra styling elements like a border of 2px that changes
changes of onlyor5%
the height - 15%
layout offor
an tint or shade added to the background of an input color change.
input
Do take away styling that doesn’t change height or width, such as having the border color the same as background color.
BUTTONS VS INPUTS TIPS

The style for buttons and inputs can be confused if not
properly designed. Ensure there is specific differences Email
between
button anda
DON’T DO Instead of using the outline property to indicate the focus state, you ca
Username... Enter username...
Submit Form Enter email...
Don’t use the same style for borders or background forDo

a button
add changes
and input.
of only 5% - 15% for tint or shade added to the background of an input color change.
Don’t add extra styling elements like a border of 2px that
Do take
changes
awaythe
styling
heightthat
or doesn’t
layout ofchange
an input
height or width, such as having the border color the same as background color.
TIPS
SIZING Full Name
Jane Doe
Enter your first and last name
Most use cases don’t require more than 3 input sizes: small,
default and large. As a good rule of thumb you can use the Spacing between label, input and helper text should have a ratio of 2 / 1.
Spacing from label to input: 8px
following defaults: Spacing from input to helper text: 4px
SMALL DEFAULT
• Height / Horizontal
padding ratio: 2 / 1
• Height: 32 px (2 rem)
• Height / Horizontal
padding ratio: 2.5 / 1 DO
• Height: 40 px (2.5 rem) I Input with icon
• Horizontal padding: 16 px (1
I
I
• Horizontal padding: 16 px (1 I
rem) rem)
Full Name
When adding icon’s, apply the same 1em of padding between it and the text follow
Full Name Do use the same spacing between the left and right padding as applied for icons and text.
32px / Jane Doe 40px / Jane Doe
2rem 2.5rem
16px /
1rem 16px /
1rem
DON’T DO
LARGE Account Details
First Name Last Name Username Password Email
First Name
Last Name
Having too many inputs grouped together is overwhelming.
Login
Don’t add lot’s of inputs in a sequence with no space or grouping. Details
• Height / Horizontal Username
Password
padding ratio: 3 / 1
• Height: 48 px (3 rem)
• Horizontal padding: 16 px (1
rem)
Simple structure and layout makes a better user interface.
Full Name Do use labels and space to make inputs easy to see and enter.
48px / Jane Doe
3rem
16px /
1rem
FORM
CHECKBOX Ingredients Label to
The checkbox component is used to let the user select
one or more items from a list. group
Tomato checkboxes
It consists of three main elements:
Checkbox Onion
• Primary Label that titles the group of checkboxes
Lettuce
• Checkbox itself for that can be have three
states (checked, unchecked, or indeterminate),
• Checkbox label which should wrap the item and

explain what it is. Label
By using checkboxes, users can easily select multiple

items from a list without having to scroll through the
entire list.
DON’T
turn off notifications.pop-ups.
FORM CHECKBOX
STATES Don’t place multiple checkboxes on the same line Don’t write confusing eff
Don’t write the labels using lowercase and full stops
1. UNCHECKE 2. CHECKED
D
Tomato Tomato DO
Turn on notifications Enable pop-up
Do wrap the label around the clickable checkbox item
The input checkbox is The input checkbox is
Do frame the wording positively with labels Do start with a capital letter.
not selected, this is the selected.
default state.
3. INDETERMINATE
D
Tomato
When using multi-level checkboxes, the parent category

TIPS
may appear in an indeterminated state if only some of the Ingredients
child items are selected. This means that the parent Bacon
Lettuce Mushrooms
category is neither fully checked nor unchecked.
SIZING
16px / Tomato
1rem
8px / .5rem
Font-size 14px /
.875rem
When designing for mobile devices, it is important to

ensure that checkboxes are large enough to be easily
tapped with a finger.
Both the checkbox and its accompanying label should be

DESIGN IS THE INTERMEDIARY
larger than they would be on a desktop device. This will
make it easier for users to select the checkbox and com- BETWEEN INFORMATION
plete the desired action.
AND UNDERSTANDING
25px / 1.5rem
— Hans Hofmann
Tomato
Font-size 16px
/ 1rem
FORMS
RADIO Radio button group label
Radio buttons are a user interface element used to let the

user choose one and only one option from a predefined set
of mutually exclusive options.
Size
They are made up of three main components:

Radio button
input Small
• Group label to describe the group of options or Medium
provide guidance for making a selection
Large Radio button
• Input to indicate the appropriate state (by label
default, an option is selected)
• Label to describe the information you want to se-

lect or unselect.
The main difference between radio buttons and checkboxes

is that radio inputs allow the user to select only one item,
while checkboxes allow the user to select any number of
items.
STATES DON’T
What do you want on the burger?
DO
Select account type
cheese with bacon Mayonnaise User account
SELECTED Business account
The input is selected

Don’t have overflow to additional lines. Do let text wrap be- neath the radio bu
Medium Don’t use confusing negative statements and similar

Do start
Don’t forget to ensure the label wraps the whole
option
with
item mutually
Do include
options.
capital letter
to allow the input to
exclusive be click
options
Do use label tags as click targets
UNSELECTED
The input is not selected
Medium
TIPS
•
Have the most common option selected by d
When having less or equal than 5 options, us
Difficulty Difficulty
Easy Medium Hard Easy
Don’t Medium Hard
•
Do
SIZING
8px / .5rem
Size
Small
6px / .375rem Medium
BAD DESIgN SHOUTS AT 20px /
1.25rem
Large
YOU.
8px / .5rem
On mobile devices, it’s important to make sure that the radio
gOOD DESIgN IS THE SILENT inputs are large enough for users to easily tap with their
finger. To ensure a good user experience, both the radio
button and its associated label should be increased in size.
SELLER. Font-size 16px /
— Shane Meendering 1rem
Small
Medium
Large
24px / 1.5rem
FORMS
TEXTARE
Label Character indicator
A
Textarea inputs are used for freeform data entry, allowing Review your purchase 82/100
users to type in multiple lines of text. They are made up of
a number of elements inlcuding: This product has completely surpassed my exp
• Label to indicate the users the information
request- ed
• Character indicator to inform character limit and

how many are used
Leave your comments here
• Multi-line input to data entry
• Help text to give additional guidance about what Multi-line input

to write Help text
Unlike single-line input fields, textareas allow users to press

enter to create a new line.
INPUT VS TEXTAREA STATES
FOCUS VALID
The focus state indicates The valid state is used to
One-line field the user that the textarea indicate the users that they
Full name is selected and that they have provided valid infor-
Jane Doe can start typing. mation.
INPU Enter your first and last name Review your purchase 0/100 Review your purchase 82/100
This product has completely surpassed my expectat
INVALID
Review your purchase 82/100
This product has completely surpassed my expectations. Keep up the excellent work!
TEXTAREA The invalid state is used to

indicate the users that they
have provided invalid infor-
mation.
DISABLED
Multiple-line field Review your purchase 100/100
This product has completely surpassed my expectati
The disabled state is when

the user should know that
it is there, but can’t Maximum 100 characters
interact with it.

DON’T TIPS
Review your purchase
Email
When no text, make the message simply indicate te max numbe
Maximum 100 characters

Don’t use textarea for single-value text
Don’t make a full page width textarea on desktop This product has completely surpassed my As you type,
expectations. Keepadd
up theaexcellent
remainingwork! charac
Don’t rely on the placeholder text as label

Maximum 100 characters (8 remaining)

When you reach the limit, change the border to red; make any ex
DO
This product has completely surpassed my expectations
Maximum 100 characters (111 too many)
0/100
Do use textarea for longform text, like ratings

Do indicate users what is the maximum number of characters allowed
Do pick an appropriate size for the textarea
SIZING
When setting the size of a textarea, it’s important to make
sure that it is proportional to the expected answer. This
helps guide the user to provide the correct response. If the
textarea is too small, the user may be unable to provide the
full answer, while if it is too large, it may appear
intimidating or confusing.
Finding the right balance is key to ensuring a successful

LOOK AT
USUAL
user experience. As a good rule of thumb you can follow
this guidelines:
• Height: 100px (50 cols, 4 rows)
• Horizontal padding: 16 px THINGS WITH
UNUSUAL EYES
• Spacing between label, input and helper text
should have a ratio of 2 / 1
8px /
.5rem
— Vico Magistetti
This product has completely sur- 100px /

passed my expectations. Keep 6.25rem
up the excellent work!

4px / 16px / 1rem
.25rem
FORMS
TOGGLE Show average price
Toggle switches are digital on/off switches used to
control options. They consist of two main user interface
components:
Label Toggle switch
• Label is the name of the option that the user
wants to control
• Toggle switch to change the option state (on/off)
Toggle switches are a great way to give users the ability

to quickly and easily switch between different settings.
DON’T
STATES
Do you want to see average price?
NoYes
Don’t use “on” and “off” text next to labels asaverage
DO
they introduce
Show price unnecesary clutters to the UI
Don’t use question labels
Don’t include the text “ON” and “OFF” within thelabels
Do keep graphic itself.
short and direct
It makes ir harder for users to decode theDocurrent
use a state
high-contrast color to signal state change
ON
The toggle is turned on.
OFF
The toggle is turned off.
TIPS
Toggle switches should take immediate effect and should not require the user to click Save or Submit to a
SIZING
8px /
.5rem 18px /
1.125rem
Show average price 24px / PEOPLE

IGNORE
1.5rem
Font-size 14px /
.875rem 48px
/
3rem
8px / 22px /
DESIGN THAT
IGNORES
.5rem 1.375rem
26px /
Show average price 1.6rem
PEOPLE
Font-size 16px / 1rem
— Frank Chimero
48px
/
3rem
FORMS Label Container
DROPDOWNS Placeholder
Choose a country
- Select -
Dropdown arrow
Dropdown boxes and menus are a great way to present a

list of options to the user.
They consist of four main components:
• Label to describe the content of the dropdown
• Container that stores the list of options
• Placeholder to indicate what action should be taken
• Dropdown arrow to show that there is additional

information hidden inside the container.
SELECTED OPEN
This is how the dropdown should look like when an
This is how the dropdown should look like when is open:
option is selected:
Divider Scroll bar

Choose a country
Australia Choose a country
Afghanistan
Selected item
Albania
Algeria
American Samoa
Menu item / option Dropdown menu

ERROR DON’T
Turn on notifications?
DO
This is how the dropdown should look like when an error Yes
Choose a country
- Select -
occurs:
Douser
Don’t have a default option selected here, use may
a select when you have
be submitting five orthe
something m
Choose a country Don’t use dropdowns when you have lessDothanlist five
options alphabetically or in anot
options.
Do use a generic ‘Select’
- Select - Don’t increase cognitive load by adding unneces-
/ ‘Choose’sary
andoptions.
then the thing you want t
Please complete this field
Feedback text
TIPS
Choose a country
United
United Kingdom
United States
When having fewer options is not possible, consider using Type-ahead, so

SIZING OPEN
DROPDOWN Choose a country
- Select -
Choose a country 1px /
8px / 40px / .06rem
.5rem Afghanistan
40px / 2.5 rem
- Select - 2.5rem Albania
Width can Algeria
vary Font size: 16px / 1rem American Samoa

16px / 1rem
ERROR
Choose a country
- Select -
4px /
Please complete this field
.25rem
8px /16px /
.531rem1rem
FORMS
SUBMIT Button
Create Account
BUTTON
Submit buttons are an essential part of web design, as they
allow users to submit form data to a website.
Submit buttons are made up of two main components of

user interface: Label
• Label to describe an action
• Button that performs the action in the label once it is

clicked or tapped
When designing a submit button, it is important to make

sure that the label is clear and concise, so that users under-
stand what will happen when they click the button.
Additionally, the button should be designed in a way that is

visually appealing and stands out from the rest of the page.
SIZING DON’T
• Horizontal / vertical padding ratio: 2 / 1 SUBMIT Cancel
Don’t use text that is technical, like “Submit”.

Don’t make submit button similar to secondary action.
Don’t use all caps in a submit button, they decrease readability.
4px / .25rem Don’t be redundant and use copy like “Create new account”, it’s implicit that cre
Create Account
8px / .5rem
DO
Create Account
Cancel
Do describe exactly what the user is doing in their task.

Do keep a clear difference between the submit button and secondary actions.
Do put both primary and secondary actions at the bottom left of a form (the user
-left of a form).
TIPS
Your order: Your order:
GOOD DESIGN IS
1 Cappuccino 1 Cappuccino
1 Muffin 1 Muffin
1
Place order
2
Save for later
3
2
1
Save for later
Place order OBVIOUS

In this
The user first reads “Place order”, thenexample the
“Save for userand
later” reads “Save
then the for later”,
user’s eye then
has to
GREAT DESIGN IS
“Place order”.
go back Eye order”
to “Place movement stops there because is probably the actio
again.
TRANSPARENT — Joe Sparano
Cancel Loading
Always indicate submission progress. After submit on click add a spinner on a button.
BADGES Background
Badges are a useful UI element used to inform the user of
the status of an object or action that has been taken.
Licensed
They are composed of three main components
• Label that conveys the status of the object or action
• Background or container, to hold all the elements
• Icon (optional) for visual identification Icon (optional) Label

Badges can be used to indicate completion of a task,
progress towards a goal, or the current status of an
item. They are a great way to provide users with quick
and easily un- derstandable feedback.
TYPES OF BADGES INFORMATIVE
POSITIVE Incorporating informative badges into your web design can
be a great way to provide visual cues to users.
When designing positive badges, use a green When using badges, make sure to use a blue background
background color to signify success. color to help them stand out. The labels for the badges
should be clear and concise, such as “active”, “in use”,
Labels should be clear and positive, such as: approved, “live”, or “published”.
complete, success, new, purchased, or licensed. This will
help to reinforce the positive feedback and create a This will help users quickly understand the status of the
more enjoyable user experience. page or feature they are viewing.
Licensed Live
NEGATIVE TIPS
32
When creating negative badges, it is important to use a red
background color to clearly differentiate them from posi-
tive badges.
The labels should be clear and direct, such as “Error,” “Re-

A badge can be placed within a button or other it
jected,” “Alert,” or “Failed.” This will ensure that users un-
derstand the message being conveyed and take the appro-
priate action.
Rejected
DON’T
SHIPPED
DO SIZING
Shipped
Do use short and scannable text.
Do capitalize text.
SMALL
Don’t use more than one word whenever possible
Do keep badges (only in
smaller use two
size words
than for complex
buttons, as theystates like “Partially
can easily shipped”).
be confused by.
Don’t use all-uppercase as it decreases readability. The small size is the default and most frequently used op-
Don’t use semantic colors and labels incor- rectly. tion.
Don’t add interaction to a badge.
3px / .188rem
8px / .5rem Licensed
Font-size: 13px / .813rem
MEDIUM
Use larger sizes to create a hierarchy of importance on a
TIPS page.
5px / .313rem
Funny Dog Videos 10px / .625rem Licensed

Mon, Aug 2, 3:00 PM
Watched
Font-size: 14px / .875rem
Badges should be positioned to clearly identify the object they’re informing or labeling.
Inline notification
TOASTS Title
action
-ALERTS-
Icon
Toasts (or alerts) are notifications that provide feedback in-
formation to the user about a recent operation.
They should be used to inform users of updates or changes Notification title Action
to system status, and provide immediate feedback of an ac- The message text of this notification goes here.
10:08:00 AM
tion. This helps to build trust between the user and the sys-
tem, and can be used to communicate success or failure of
an action. They are made up of the following UI
components:
• Icon to inform the user of the kind of notification at a Time stamp Close button
glance
• Title to give users a quick overview of the notification Message

• Inline notification action (optional) is a ghost button
or link that address users to to a page with further de-
tails
• Time stamp (optional) to show the time the toast

notification was sent
DON’T
An error occurred TIPS
Name is a required field.
Success View Product

Your product has been successfully created.
10:08:00 AM
Don’t use toasts alerts for form validation. In line notifications do a better job for this.
Don’t make toasts a permanent part of the UI, they should dismiss after five second and also users should be able to close them before that time window.
Don’t use toasts for marketing information or up sell.
When creating a new resource use the CTA button to take them to the
Notification title 1 Action

The message text of this notification goes here.
DO
New release Update Notification title 2 Action
Version 3.1 is available. The message text of this notification goes here.
10:08:00 AM
Do use short and concise text. Notification title 3 Action

Do dismiss toasts automatically after 5 seconds on the screen. The message text of this notification goes here.
Do provide a close button.
Do provide information on how to resolve the issue by including any troubleshooting actions or next steps.
Only display two toasts at one time and when more than two, fade out
SIZING
• Width and height can vary based on content.
16px /
1rem
20px / Font-size: 13px /
EVERYTHING IS DESIGNED.
1.25rem .813rem
Notification title
The message text of this notification goes here.
10:08:00 AM
Action
FEW THING ARE

14px /
.875rem
DESIGNED WELL
— Brian Reed
BREADCRUMBS 1
Breadcrumbs inform users of their current location, and
enable them to quickly move up to a parent level or
previous step. C / / Shoes
Use this pattern when you have nested content organized ategories Women
in a hierarchy of two or more levels. Don’t use it if your
product has a single level navigation because it adds 2
unnecessary clutter.
They are made up of two UI components:

• Page link to direct users to the parent-level page
• Separator to distinguish between each page

DON’T TIPS
Home | Contact us
• When working on mobile where there is less room,
don’t clutter the UI with nested breadcrumbs.
Including the
Don’t replace the global navigation bar or the local nav- last level will suffice.
igation within a section with breadcrumbs, they
should always act as secondary navigation pattern.
Don’t make the breadcrumb corresponding to the cur-
rent page a link.
< See Toy Drones
Don’t use breadcrumbs for sites with flat hierarchies Silver Drone 2021 Model
that are only one or two levels deep.
Don’t use a separator other than “>” or “/”.
DO Description:
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.
Aenean commodo ligula eget
H ome / Women / dolor. Aenean massa. Cum sociis
natoque penatibus et magnis
Apparel dis parturient montes, nascetur
ridiculus mus.
Do use a short and concise text, ideally no more than
one word. Users should be able to anticipate
where they’ll get redirected to after clicking on
the link. Example of an e commerce site, if users land on a
Product-detail page, they may want to see other
Do make it clear that is a link that will redirect them product
out of the current page. options in that same category, so a breadcrumb linking up
Do include the current page as the last item in the to the parent level in the hierarchy will suffice.
breadcrumb trail.
Do use industry standards to separate links, “>” or

“/” are both valid.
SIZING
When choosing text sizing of the breadcrumb always make
them smaller than the base navigation so it takes less
priority.
E.g. If the main navigation is 18px the breadcrumb can be
14px.
Font-size: 14px /
.875rem
A DESIGNER
IS
Categories / Man / Shoes A PLANNER WITH
8px / .5rem
AN AESTHETIC SENSE
— Bruno Munari
TABLES
Header row
Search
Sorting
Tables are used to display groups of information across
rows and columns. Search product by name
Product Category Price Date modified

Use it when you need to display a collection of structured
data, and you want to provide sorting, searching, Avocado toast Breakfast $10.00 02/05/2021
pagination and filtering on this data. Hotcakes Breakfast $10.00 02/23/2021
They are made up of the following UI components: Tuna salad Lunch/Dinner $15.00 03/21/2021 Rows
• Search to find information faster Smoothie Snacks $15.00 04/02/2021
Beef stew Lunch/Dinner $25.00 04/17/2021

• Header row describes which type of element is dis-
played on every column Granola Snacks $7.00 05/14/2021
Rows per page 25 1-10 of

• Sorting to sort information 100
• Row checkbox to select different rows

Pagination
• Columns that group content by its type
Row checkbox
• Rows that contain data related to a single
Columns
element
• Pagination to control how table data is displayed

TEXT Dish
Filet Mignon
Garnish
Smashed potatoes
Category
Lunch/Dinner
Product Category Price Date modified Grilled chicken Salad Lunch/Dinner
Spring rolls x 12 - Snacks

Filet Mignon Lunch/Dinner $30.00 02/05/2021
w/smashed potatoes
• Use zebra striping when you manage large data tables as

• Column header text uses a medium weight font to differ- it makes them a bit more easy to follow.
entiate from row text.
• Font-size should be 14px.
Avocado toast Breakfast $10.00 02/05/2021
COLOR Hotcakes
Spring rolls x 12
Breakfast
Snacks
$10.00
$20.00
02/23/2021
05/22/2021
Filet Mignon Lunch/Dinner $30.00 02/05/2021 • Make a clear distinction when a row is hover or selected.
w/smashed potatoes
• Use opacity 100% for the header row, and 60% with the
same color for the rest of the rows.
Avocado toast Breakfast $10.00 02/05/2021
UX TIPS TIPS
Hotcakes Breakfast $10.00 02/23/2021
Spring rolls x 12 Snacks $20.00 05/22/2021
Search product by name
Hotcakes
Price: $10.00
Category: Breakfast
Make columns resizible when managing large amounts of information. Avocado Toast
Keep column headers fixed when scrolling down, and the first column should be locked if the users scrolls horizontally, this will help on giving context to the
Price: $10.00
Provide sorting and filtering for quicker access to data. Category: Breakfast
Smoothie
Price: $15.00
Category: Snacks
When working on mobile version of the table consider transforming the d

DON’T DO
GarnishCategory
Dish Product Category Price Date modified
Filet Mignon Smashed potatoes Lunch/Dinner Filet Mignon Lunch/Dinner $30.00 02/05/2021
w/smashed potatoes
Grilled chicken Salad Lunch/Dinner

Spring rolls x 12 - This is a very long text for this column
Loading more
Do give cells proper padding (white space), information is easier to sca
Do add clean contrast between the header row and the remaining rows
Don’t use unnecessary borders as they clutter the UI. Do keep text aligned to the left as it’s easier to read. Do keep numbers
Don’t use things like infinite scroll or load more, as this decreases usability. Use pagination instead.
Do use colors to mark significant data.
Don’t put similar data types in two different columns. If you have a dish with a garnish you can group those in one column.
Don’t try to fit entire text in column, when text is longer than the column width truncate it with an ellipsis. Show a tooltip on hover and provide the ability to r
SIZING SHORT
COLUMNS Filet Mignon
Hotcakes
Lunch/Dinner
Breakfast
$30.00
$10.00
02/05/2021
02/23/2021
32px / 2rem
Filet Mignon Lunch/Dinner $30.00 02/05/2021
w/smashed potatoes

EXPANDABLE
16px / 1rem 16px / 1rem
16px / Column width can vary

1rem Product Category Price Date modified
ROWS
Eclair Pastry $10.00 02/05/2021
Chocolate
DEFAULT 24px / 1.5rem

48px / 3rem
Filet Mignon
w/smashed potatoes
Lunch/Dinner $30.00 02/05/2021
PAGINATION
Width varies based on content and layout 16px / .875rem

48px / 3rem
Granola Snacks $7.00 05/14/2021
48px
Rows per page 25 1-10 of 100 123 10
/
3rem
16px / 1rem
LISTS Style
indicator
1. Directions
1.1. Stir together
Lists are vertical groupings of related content. List 1.2. Chill
items begin with either a number or a bullet.
1.3. Roll into balls
They are made up of three mainUI List 1.4. Serve
components: items
• Style indicator to indicate the style of the list, e.g.

Text
ordered or unordered
• List items with information quantity (numbers, bul-

lets, letters, etc) that can vary. A consistent format
helps the user to scan and read the content
efficiently and every list item must have text
• Text is the content of the list

EXAMPLES OF MORE SIZING
COMPLEX LISTS • Font-size: 14px.
CONTACT LIST UNORDERED LIST

A 1. Ingredients
Al Faber• Anjo Mekel
Albert Johnson• Anne Renkema - Honey
Alex Wesby• Anthony Brooks
Alton Mason• Arend Jan Julis - Creamy peanut butter
Andrew Smith• Arnold Berman
- Chocolate chips
B
- Old-fashioned oats
Bas Veenstra Bill Clark - Vanilla extract
Ben Campbell Bill Sheridan
Bernand Day Bob Penario
Bert Mellema Bouke Klomp
Bert Panman Bryan Davis
16px / 1rem
8px / .5re
m
MULTI-LINE LISTS ORDERED LIST

• Two-Line List • Three-Line List
2. Directions
2.1. Stir everything together
Search
adobe 2.2. Chill in the refrigerator for 2 hours
Marketing 2.3. Roll into balls
Adobe Illustrator
2.4. Serve. Enjoy!
You viewed 10 minutes ago
Productivity
4.5
Marketing Assets
You viewed 10 minutes ago
Adobe Photoshop
Productivity
4.5 16px / 1rem
8px / .5rem
DO
How to register for the conference:
Choose the day you will attend
Pick the workshops you wan to join
Enter your discount code (if you have one)
DON’T Do
Do
use indentation to specify a subset of a list item.
use bulleted lists when you don’t need to convey a specific order
How to register for the conference: Do use numbered lists when you need to convey a priority, hierarc
choose the day you will attend Do organize lists alphabetically of following a logical order.
pick the workshops you wan to join Do indent most types of lists after the lead-in.
enter your discount code (if you have one) Do indent stand-alone lists if it helps the user scan the list.
Don’t start lists with lowercase letter, always use uppercase.
Don’t add list item children at the same level as the parent.
TOOLTIPS
Price estimated
Tooltips are used to display additional information when

the user hovers over, focuses on or taps an element.
$23.OO
They should be used to add non-essential, useful informa-
tion. How is this price calculated?
They are made up of two main UI components: Container

Actual prices will be calculated
at the warehouse when we
• Container to hold the text mea- sure and package your
• Text to show additional information about the ele- Text items.
ment
DON’T
PRINT PRINT
Print
DO
Print+ P
Don’t use tooltips to restate visible UI text. Don’t display shadows on tooltips.
Don’t display rich information and imagery on tooltips. Don’t put UI components in tooltip. Print+ P Print+ P
Don’t crop tooltips.
Do include short, descriptive text.
Do use make tooltips appear on hover, focus or touch, and disappear
Do place them nearby the element with which they are associated.
Do reduce clutter by converting redundant text into tooltips.
Do use tooltips for interactive imagery.
Do add an arrow when several icons are in close proximity
Do align text to the center when it’s short.
Do add a shortcut key if it exists.
SIZING
• Width: 208px / 13rem
• Height can vary based on content
16px / 1rem 4px / .25rem
A USER INTERFACE IS LIKE

How is this price
16px
calculated?
16px /
1rem
A JOKE.
IF YOU HAVE TO EXPLAIN
/ Actual prices will be calculated
1rem at the warehouse when we
24px /
1.5rem
Browser edge
≥ 16px / 1rem
IT, IT’S NOT THAT gOOD.
— Martin LeBlanc
CARDS
Thumbnail
Header text Subhead
Cards are box containers that hold pieces of

information. They have content and actions about a
single subject.
Card layouts can vary to support the types of content

they contain, the only required element in a card is its
container.
Media
Some of the most common UI components are:
• Container that holds all card elements
• Supporting text (optional) e.g. a restaurant

description
• Buttons (optional) for actions
• Icons (optional) for actions
• Media (optional) like photos and graphics
• Thumbnail (optional) to display an avatar, logo or

Supporting Buttons Icons
icon
text
• Header text (optional) can be the name or a photo Container
• Subhead (optional) such as an artivle byline or a

location
SIZING TIPS
• Width and height can vary depending on content.
• Shadow value 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 3px 0

rgba(0, 0, 0, 0.04);
• Do adjust the layout of a card on different screen

sizes.
• Move the image/media to the left and make sure

to only crop the non-essential parts of it on larger
screens.
• On mobile, header and body text should be be-

tween 24px-28px and 16px -18px respectively.
• On desktop, the header and body text should be

between 34px-38px and 20px-21px respectively.
• Header, body text and main call to action

(button) should be displayed in a single column.
16px / 1rem
DON’T DO
Do use subtle shadows to indicate elevation on a card.

Don’t use large amounts of information in cards.
Do use dividers to separate regions in cards or to
Don’t use the same border radius from inner elements and the container.
indicate areas of a card that can be expanded.
Don’t center align text, it’s more difficult to read. Don’t use too dark shadows.
Don’t visually clutter the card, use appropriate white space between elements. Do use the appropriate heading level for your page. Up-
date heading level based on the content of your page to
make sure card headings are in the correct logical out-
line order.
Do make the whole card the primary action if no primary
CTA is available on the card.
Do maintain an appropriate hierarchy between media,

primary text, supporting text and actions. Keep primary
text larger and supporting text smaller.
Icon
ACCORDIONS
How can I pay for a course?
What if I don’t like a course I purchased?

An accordion is a vertically stacked list of headers that
re- veal or hide associated sections of content. All courses purchased can be refunded within 15 days. If you are not satisfied w
For steps on how to request a refund, please click here.
Panel
Some of the most common UI components are:
• Header that contains the section title and its control

for revealing the panel
Where can I go for help?
• Icon that indicates if the panel is open or closed
• Panel is the section of content associated with an

Header
accordion header
• Summary text (optional) that contain a summary

Trip nameCaribbean cruise
information of their content
Summary text
UX TIPS
What if I don’t like a course I purchased?
All courses purchased can be refunded within 15 days. If you are not satisfied with a course, you
For steps on how to request a refund, please click here.
ACCESIBLE DESIGN
Where can I go for help?
If you have a question about a course while you’re taking it, you can search for answers to your q
IS GOOD DESIGN Make sure to give people the capability to open multiple sections at
Don’t use accordions when users need most of the content on the pag
— Steve Ballmer
DON’T DO
What if I don’t like a course I purchased? What if I don’t like a course I purchased?
All courses purchased can be refunded within 15 days. If you are not satisfied with a course, you can request a refund.All courses purchased can be refunded within 15 days. If you are not satisfied with a course, y
For steps on how to request a refund, please click here. For steps on how to request a refund, please click here.
Where can I go for help? Where can I go for help?
Do place the icon at the end side of the header. Do make the icon wr
Don’t use other icons than the caret, this is the most familiar icon for users. Do rotate the caret when the accordion is expanded, otherwise keep
Don’t make only the caret icon be the expandable action target. Do make the contrast a bit lower of the summary information text.
Don’t place the icon at the start of the accordion header.
SIZING CONVERSIONS
24px
16px 16px 24px
4
8px Trip nameCaribbean cruise
rem px
16px
16px .5 8
1 16
64px Location
16px
1.5 24
2.25 36
3 48
16px
36p
x CANCEL SAVE
16px
4 64
16px
16px
Start and end dates
48px
Start: Feb 29, 2016 End: Not set
16px 16px 16px
24px
8px 24px
• Header must be shown as primary content
• Primary content font-size: 15px / .93rem, opacity 87%
• Summary text must be shown as secondary content
• Secondary content font-size: 12px/.75rem, opacity 54%
• Keep spaces between accordions consistent
• Header and caret must be vertically centered
• If the accordion has buttons, they must be shown when

it is expanded, at the bottom of the panel
TABS
Active
icon Inactive icon Container
Use tabs to allow users to navigate between views

that have the same context.
SAVED INBOX PROFILE
They are made up of two main UI
components: Active
tab
• Container that holds the tab item elements Inactive text label Tab item
indicator
• Tab item that can include icons and text. Text label
should be short
Active text label
• Active tab indicator as it name says, it indicates
which tab is active at the moment
DON’T UX TIPS
Don’t remove text labels in favor of icons. Don’t nest a tab within another tab.
Don’t place tabs below one another. SAVEDINBOX PROFILE
Don’t make the icon bigger than 40px by 40px.
DO Do design tabs that are parallel in nature.

Do add a swipe motion on mobile to enhance user experience when
Do make targets big enough to be easily tapped or clicked.
SAVEDINBOXPROFILE
Do place icons at the top of the label.

Do keep high contrast for the active tab elements and the tab indicator.
Do keep a low contrast for inactive tab elements between the text and background.
Do keep the text size of tab at 14px minimum with a line height of 24px.
Do wrap icons in a 40px 40px container.
Do vertically align and horizontally center the icon and text.
SIZING
8px /
.5rem
SAVED INBO PROFILE
DESIGN IS A
2px /
.125rem 16px
/
1px / 1rem
.063rem
FORMAL
• High contrast between foreground and background color
of text, icon and tab indicator.
• Although low contrast between foreground and

RESPONSE
background color of inactive tabs, both text and icons are
readable.
TO A STRATEGIC
• Font-size: 14px QUESTION
— Mariona López
• Active text font-weight: Semi Bold/600
• Inactive text font-weight: Regular/400

CONSIDERATIONS WHEN CHOOSING
ICONS
1.SIZE
A good rule of thumb is to start with a 24 x 24px grid
ICONOGRAPHY
and scale the icons from there.
Most use cases should be covered with three icon sizes,

if you need more you can use a number multiple of eight
to determine the size you want.
Icons are visual symbols used to represent features, func-
tionality or content.
20px 24px 32px 40px
Icons are meant to be read at a glance and are typically
created on a square (1:1). Note: When using large icons for representing features in
a website you can use 80 x 80px grid and you can
consider adding more detail as the grid is larger.
2. STYLES TIPS
Icons can have multiple styles: outline, solid, two tone, etc.
No matter what style you use, it’s important to keep consis-
Home
tency across a set of
Chat Profile Tasks
DO DON’T
Home Home Chat Profile Tasks
Chat Profile Tasks
Navigation items Buttons
Outline icons should be used for primary navigation allowing you to have
designed to be rendered at 24 x 24.
Solid icons should be used for buttons, form elements,

and support text, designed to be rendered at 20 x 20.
3. ICON & TEXT ALIGNMENT/STYLE 5. KEEP IT SIMPLE
When icons are used next to text, they should be Complex icons are best suited when they are rendered
center aligned and the same color as the text. at least on a 40 by 40px. Here is an example of how you
can go from a large, complex icon to a smaller simple
one:
DON’T DO
Store Store
6. TOUCH/CLICK TARGET
For smaller screens icons of 24px can use a touch target of
4. ICON CLARITY 48px (about twice the size of the icon).
For icons you should use icon fonts or svg, don’t use
images to display web icons as they lack in scalability. 48px / 24px / 1.5rem
3rem
DON’T Click/touch target
PNG For larger screens (desktop) icons of 20px can use a touch
target of 40px.
DO 40px / 2.5rem 20px / 1.25rem
SVG
Click/touch target
7. UNIVERSAL ICONS UX TIPS
Don’t change commonly understood icons. Home
Chat Profile Tasks
DON’T DO
Delete
Do remember your icon’s context and purpose. Your context can sign
Will they be implemented in an app’s interface, on a marketing websi
Do consider adding a label to the icon when possible, this makes th
Do consider adding a tooltip to icons that are not next to text, this w
An user might be The hamburger icon
confused about has become the stan-
what this icon does. dard to squeeze navi-
gation into a scrollable
overlay that is hidden
by default.
SIZING
If you set an icon to have a width and height of 1.5em
then you can change the size of it with the font-size
property of the parent container.
This helps by creating an inherent relationship between

the text and icon size. If you scale the text down or up,
the icon will resize accordingly.
1.5em / Inbox Font-size:

EVERYTHING YOU
24 x 16px / 1em
CAN IMAGINE
24px
1em
IS
REAL
1em = Current computed font size (16px)
1.6em/ Inbox Font-size:

32 x 20px /
32px 1em
— Pablo Picasso
1em
1em = Current computed font size (20px)

AVATARS
Image avatar
JD
An avatar is a graphical representation of a person
through a profile picture or image, an icon, or a string
with initials. Initials avatar
The most common avatar types are:
• Image avatar
• Initials avatar Icon avatar

• Icon avatar
USAGE SIDEBAR USER SETTINGS
Although avatars may appear in different places, the User settings are usually found on the lower left side of an
same image, initials or placeholder should appear for a application, and they often are represented with the
given object instance throughout the application. avatar user handler or email and a settings icons.
Here are different examples where an avatar may appear:

John Smith
john.smith@mail.com
TOOLBAR CONTACT
The avatar can represent
the dropdown selection for INFORMATION PROVIDING ADDITIONAL INFORMATION
a profile We can provide additional information to the avatar to in-
The avatar helps to stand
form of a certain action or behavior:
out unique data when
there is lots of information,
The indicators that show if the user
e.g. when viewing a large is online or offline.
list of contact information. These status indicators should live
in the lower right hand of the
avatar.
Preferences Theme
Sign out
Jane Doe Information by notifications and 3
Web Designer London visual feedback with a numbered
label.
These notificatoiin badges

should live in the upper right
hand of the avatar.
The extra icon can be shown for the

user to make an action.
DON’T UX TIPS
Edit photo
Don’t make assumptions and use gendered

Save photo
placeholder avatars.
Don’t make avatars square, is an industry standard to
use rounded avatars. When the user is adding a picture provide a basic
cropping tool, this will prevent the user from having
Don’t oversize avatars, make sure they have an appro-
to manually crop the image in an external tool.
priate size in relation to the context.
Make sure you position the face along the square
in the middle, and that the face doesn’t touch the
DO borders of the circle.
If you want to indicate prog-
ress (e.g. onboarding prog-
ress) consider using a prog-
JD FS GD MA ress bar around the avatar,
which serves as an indicator
of user’s achievements.
Do provide the users’ initials if they choose not to pro-
vide an image.
Cheryl
Do keep good contrast with the avatar background color, Gardner
when using an avatar with initials or icon.
50% completed
Do add a subtle gray border around the avatar, this helps
to determine the avatar boundaries when the avatar
background is the same as the app background.
SIZING LARGE
The avatar comes in three different sizes: • Suitable for profile pages.
• Minimum: 56px
SMALL
Robert May • Easily embedded
robert@mail.com (03) 9830 7761 in a contact list
and similar repet-
itive scenarios.
• Minimum: 24px
24px / 1.5rem 56px / 3.5rem
Katarina Brookes
MEDIUM
kbrookes@mail.com
• Appropriate for headers appbars.
• Minimum: 40px
40px / 2.5rem
VISUAL
HIERARCHY DESIGN IS
In web design visual hierarchy is used to rank design ele-
ments in the order you want your users to view them. THINKING
By properly laying out elements one can influence user’s
perceptions and guide them to desired actions.
MADE VISUAL
— Saul Bass
The purpose of visual hierarchy is that the end users find
each design element in the order of intended importance.
WHY IS VISUAL HIERARCHY

IMPORTANT?
Because a properly established visual hierarchy on a web
page can significantly reduce the amount of effort needed
by users to find what they are looking for. When done right
it removes friction and enhances usability of a product.
DON’T
DO
Do keep a clear hierarchy between text and images.

Don’t put together multiple elements with little to none space between them, this makes Do itmake
difficult
the to find clear
primary call focal points.
to action stand out so that users can clearly
Don’t clutter the UI too much, few users will be willing to parse through the visual clutter.
Do leave appropriate space between elements, this makes the page m
THE F PATTERN
The F pattern works best for information-heavy
websites. The design flows left-to-right, top-to-bottom,
and is very conventional.
VISUAL HIERARCHY
1 2
VISUAL
3 4
PATTERNS THE Z PATTERN

The Z pattern works best for websites that don’t have a lot
Users typically scan a website instead of reading every of information. It allows users to skim from your logo at the
word. To accommodate that flow, it’s important to build a top left, through your navigation, down to your first
visual hierarchy. important piece of information, and then across the page.
The two most popular ways to create a hierarchy are the 1 2
F Pattern and the Z Pattern.
You can use these visual patterns to position elements

across these lines in the relevance that we want. 3 4
E.g. company logo on the upper left as it’s the first thing
the users look at.
VISUAL HIERARCHY
HOW TO ALTER GOOD ART
VISUAL INSPIRES,
HIERARCHY? GOOD DESIGN
There are many factors that can play a role in visual
hierarchy, let’s take a look at some of them:
MOTIVATES.
• Size
• Alignment
• Text
• Consistency
• Buttons
• Negative space — Otl Aicher
• Inputs
• Visual harmony
• Color
• Contrast
• Proximity
You want the user eyes to see titles first, lead
ABC paragraphs second and less important sections last.
VISUAL
HIERARCHY
SIZE &
TEXT
Sizing is a very basic yet powerful principle that can give
elements more importance than others and help draw the
viewer’s attention towards a certain area or element.
The bigger the element, the greater are the chances that a
user will scan it first. People scan bigger things first.
The smaller the element, the more likely the user is going
to leave the element to scan it last. People scan smaller
thing last.
For text, we can significantly increase the importance of an

element by increasing its font size.
As a good rule of thumb, make sure the most important

text to stand out first and foremost.
BECAUSE OF THE GREAT
DESIGN;
GREAT DESIGN HELPS THEM
USE THE PRODUCT.
PEOPLE DON’T USE A PRODUCT — Viran Anuradha Dayaratne
DON’T DO
1 The user sees the name of the person first be
1 There is no clear hierarchy es-
tablished between the name, the occupation and years of experience.
The second element the

2 All seem to have almost the 2 users see is the occupation
same font size resulting in all having the same hierarchy. due to having the largest font size after th
The only difference in hierarchy

3 comes from the order of reading. Last, the users will see the
3 lead paragraph which has the smallest font
From top to bottom, first John Doe, second Senior Developer and last, years of experience.
TIPS
Use sizing to override the reading patterns we saw before.
In the above example we read the name of the person first although the years of experience come f
Following the same principles as before, in the following ex-
ample we placed the most important title first and made it
the largest on the screen with a font size of 40px.
Then, we placed the lead paragraph with a smaller font

size, followed by the sections’ titles and paragraphs with
the smallest font size on the screen.
DESIGN IS
Playlists for every moment. Title 40px
Get the perfect playlist for any mood. Every mix is carefully compiled, and each song ﬂows naturally from the one before.
Lead SIMPLE
THAT’S WHY IT IS SO
24px
Ac vi es
Sec on
21px
COMPLICATED
Everything deserves a soundtrack. And now everything has one - wheter it's cooking, running, dancing, working out, or kicking back.
— Paul Rand
Moods
Listen to music that matches your feelings, from relaxing to celebra ng and everything in between.
Sec on
VISUAL IF YOU FIND AN ELEMENT OF
HIERARCHY YOUR INTERFACE REQUIRES
BUTTONS INSTRUCTIONS,
THEN YOU NEED TO REDESIGN IT
Sizing can also be applied to buttons to not only distinguish
them from other elements on the page but also from each — Dan Rubin
other, as multiple buttons are often grouped.
For instance, a primary action button should be more

visually dominant than a secondary or tertiary action
button.
DON’T DO
Both buttons have the same size, although the “Save” button is more important and should be more prominent that th
In this example the “Save” button is
Full Name Full Name
Country Country
Region Region
+ Add Region
Add Region
Save
Save
A GRAPHIC DESIGNER
VISUAL HIERARCHY IS A MACHINE THAT
INPUTS TURNS COFFEE INTO
Inputs that should be seen by the user first should be
given a larger size while less important inputs should be
BEAUTIFUL, FUNCTIONAL
IMAGERY
smaller to not distract the users focus from the main
action.
— Lisa Manson
DON’T DO
By reducing the size of the search i
Both search input and email input have the same size which can prevent the user to focus on the primary acti
USE CASE 1
Let’s go ahead and improve the following landing page There is no clear hierarchy between the main title, paragraph, navigation lin
using the concepts we just learned.
Blog About Home

Contact me
Company Logo
Blog About Home

I build performant web apps Contact me
I’m John Doe, a fullstack developer with an eye for design. Company Logo
Enter your email address

I build performant web apps
I’m John Doe, a fullstack developer with an eye for design
Subscribe
Subscribe
Second, let’s put the users focus on the main call to action here
which is to subscribe to the newsletter. For that we are going
to make the email input be bigger than the “Search blog post”
input.
3
Great, now let’s go ahead and reduce the size of the “Contact me” button so that there is
a clear distinction between the main button “Subscribe” and the secondary action which is
“Contact me”.
Blog About Home

Contact me
Company Logo

I’m John Doe, a fullstack developer with an eye for design.
STYLES COME AND GO.
GOOD DESIGN IS A LANGUAGE,
NOT A STYLE.
Subscribe — Massimo Vignelli
THINKING ABOUT
VISUAL
DESIGN IS
HIERARCHY HARD,
COLOR BUT NOT THINKING
Color can be used to drive users’ attention to specific ele-
ments in the screen, therefore affecting the overall hierar-
chy of the design.
ABOUT IT CAN BE
DISASTROUS
— Ralph Caplan
HOW TO USE COLOR IN TEXT?
Texts that are more important should have a higher
contrast between it’s color and the background, body text
and less important sections should be given a lower
contrast.
To accomplish this you can choose a less saturated color

DO
for the body text and a more saturated color for the title.
DON’T
TIPS We Build Awesome Web & Mobile A
We Build Awesome Web & Mobile Apps
We cultivate expertise in every stage of product creation, resulting in extraordinary digital exper
We cultivate expertise in every stage of product creation, resulting in extraordinary digital experiences.
We Build Awesome Web & Mobile Apps

We cultivate expertise in every stage of product creation, resulting in extraordinary digital experiences.
Do make the title have a higher con
Don’t make the body text have the same color and contrast as the main ti
Within a title you can increase the hierarchy of a single word or phrase by choosing a different color with higher contrast.
HOW TO USE COLOR ON BUTTONS?
Buttons or actions that you want the user to see first
should have a clear contrast and different color than the
rest of the page. By doing so you will create a focal point
DON’T
on the action you want the users to complete.
Request Demo Watch Video
You can achieve this by giving more important buttons or

Don’t make secondary actions have the same color as a primary
actions a full background color that is the same as the
primary color of your palette of choice.
Give less important actions either a link style by underling

the text and making the color be the primary color, or an
alternative can be an outline or ghost button.
DO
Watch Video Request Demo
Do make the primary action have the primary color of your pa
Destructive actions should also be given a different By doing so there is a clear sense that the action is import-
color than the rest. ant and might not be possible to undo it.
You should use the red color for actions that can’t be In the next example, the delete account button color gives a
un- done, for example permanently removing an clear visual cue to the user that is an important action.
account.
DON’T DO
Delete Account Delete Account
Are you sure you want to delete your account? If you delete your account, you will permanently lose your profile, messages and photos.
Are you sure you want to delete your account? If you delete your account, you will perma
Cancel Delete Account Cancel Delete Account
Don’t make the destructive action button have a normal color like blue. Do use a red button to warn users they’re about to commit
When elements have the same color and layout, there is no A good example of this could be when we want to encour-
clear distinction between any of them, if you want to create age the user to pick a certain pricing plan, for that you can
a focal point you can use a different color to emphasize one change the background color of a specific plan to make it
of them. more prominent and eye catching.
DON’T DO
Do use a different color to establish a clear focus point and enc

Don’t make all the cards look the same, use a different color to emphasize the most popular plan.
Do use color psychology to convey different emotions on the u

something is luxurious or more corporate
suited.
USE CASE 1
Let’s change the “Contact me” button to be an

Let’s revisit our main landing page and see how we can outline or ghost button so that it doesn’t dis-
improve the overall hierarchy applying only colors. tract the user from the main action which is
“Subscribe”.
Blog About Home Blog About Home

Contact me Contact me
Company Logo Company Logo
I build performant web apps I build performant

web apps
I’m John Doe, a fullstack developer
with an eye for design.
Subscribe Subscribe
2
Let’s change the background of the main call to
action to a nice orange gradient to make it more eye
catching.
Let’s increase the contrast of the main title by
3 choosing a lighter shade of white.
We’ll do the opposite for the lead paragraph, by

choosing a darker shade of white.
This establishes a more clear visual hierarchy
GOOD
between the two, making a focal point in the
title.
Company Logo
Blog About Home
I build performant
Contact me
DESIGN
web apps
I’m John Doe, a fullstack developer
with an eye for design.
IS GOOD
BUSINESS
Subscribe
— Thomas Watson Jr.
Last, let’s create a focal point on the word

“performant” by changing it’s color to
the primary color of our palette.
4
WITHOUT COLOR WITH COLOR
Blog About Home Blog About Home
Contact me Contact me
Company Logo Company Logo
I build performant web apps I build performant web apps

I’m John Doe, a fullstack developer with an eye for dessiign. I’m John Doe, a fullstack developer with an eye for design.
Enter your email address Enter your email address
Subscribe Subscribe
DON’T DO
r- archy between the contact me and subscribe button, this creates con-
Do: We fusionaon
created which
focal action
point users
on the should button
subscribe focus first.
by changing its col- or and make it more prominent than
text have the same color, making it more difficult to figure out what to created
Do: We read first.
a clear distinction between the title and the paragraph by choosing a lighter shade of black for
Do: We highlighted the word performant to create a focal point within the title.
VISUAL
HIERARCHY
DESIGN ISN’T FINISHED UNTIL
CONTRAST SOMEBODY IS USING IT.
In web design, contrast is the practice of making elements — Brenda Laurel
look different from each other in order to make the
important elements eye-catching while others less so.
It can be used in color, size, space to stablish a clear visual

hierarchy between elements.
HOW TO USE CONTRAST IN COLOR? DON’T
Contrast in color is the most common use case, you can use
a different more contrasting color for a particular element, in Request Demo
order to make it stand out from the rest.
Don’t choose colors that don’t belong together, the green and red co
Don’t use heavy shades of color together, it makes it more hard to r
In this example our eyes are drawn to the lighter circle,

DO
because it has a higher contrast than the rest.
Request Demo
Do pick a foreground and background color with a contrast ratio of a
You can use this tool to check the contrast ratio:

https://webaim.org/resources/contrastchecker
HOW TO USE CONTRAST IN SIZE? DON’T
Contrast also helps create relationships between elements. This is a title This is a subtitle
This is the paragraph which usually
Elements that are most important or need to be looked contains more text than the title and subtitle.
at first should be given a bigger size, the contrary Don’t choose the same size for every text, this confuses the user on
applies for less important elements.
DO
In this example our eyes are drawn to the bigger circle, because
4x
2x 1x
This is a title
bigger elements are scanned first. This is a subtitle
This is the paragraph which usually contains more text than the title and
Do choose different sizes for title, subtitle and paragraph. This creat
HOW TO USE CONTRAST IN SPACE? DON’T
Space also can play an important role in organizing design Company
elements.
My website
By surrounding important elements with some extra blank
space you will draw more attention to that element and
make it stand out.
Don’t make the ui look too cluttered, this will prevent users
from finding what they are looking for faster.
DO
In this example the extra white space around the bottom right Company
circle makes our eyes focus on that section.
My website
Do increase the amount of white space and remove unnecessary elements,
UI.
HOW TO USE CONTRAST IN SHAPES? DON’T
You can use contrast in shapes by making elements stand
out by their difference in physical form.
When you want to make an element stand out you can

choose a different shape from the rest of the elements on
the page.
Don’t make all the cards look the same when one is hover over, inste
DO
In this example the eyes are drawn to the square shape
because its the only one different among all shapes in the
example.
Do increase the size or apply a skew to make the shape stand out.
TIPS
Company HomeAboutWorksContact us
A digital product design
THE DETAILS ARE

NOT THE
DETAILS, THEY
You can play around with the shape and rotation of a specific word in a sentence to create a focal point and awake a particular emotion on the user.
MAKE THE
DESIGN
— Charles Eames
DON’T
VISUAL HIERARCHY Don’t group together unrelated elements, this m
PROXIMITY
Logo
Users
Payments In the sidebar example, all seems to be part of t

Reports Log out
Proximity is the practice of placing related elements close

together and separating unrelated elements.
We can do this by using varying amounts of whitespace to

either unite or separate elements.
White space guides the user’s eyes in the intended direc-

tion, creates contrast and makes a lasting impression.
DO
Do use different amounts of white to consolidate
Logo
Users
Payments
ReportsIn the sidebar example we use less white space between the navig
Log outthey all belong to the same group.
We use more white space around the logo and log out button to separat
Whitespace separates the shapes into two distinct grouping

through the principle of proximity. Even when including
differing shapes within each group, these two groupings are
still clear.
HOW TO USE PROXIMITY IN FORMS? TIPS
Personal Information
Proximity plays an important role in how users scan form First name
elements.
By placing labels near corresponding form fields, you make Group 1

it much easier for users to scan the form.
Last name
DON’T
Account Information
Label Email
Don’t place labels far away from inputs, this makes it hard to associate a form group.
Label
Don’t use the same amount of white space between the label/input and the next label. Group 2
Password
Label
Do group related fields together, you can help users understand why
DO
Do place labels closer to relevant fields, this makes a form easily scannable and increase thein
The fields chances of successful
the above example completion.
are categorized into two groups (per
Do use more white space between form groups (label & input) to establish clear groups.
Label
Label
Label
HOW TO USE PROXIMITY IN TEXT? Titles related to specific paragraphs should be kept closer to
them, to give the feeling they all belong to the same group.
Proximity can be leveraged to create meaningful groups
when presenting basic text content.
Sentences should be grouped together in paragraphs sepa-

rated above and below by whitespace.
DO
DON’T Company HomeAboutWorksContact me
CompanyHomeAboutWorksContact me
Build next generation apps with our AI software
We are a group of dynamic developers that want to change the word with AI.
Let’s talk
Build next generation apps with our AI software
We are a group of dynamic developers that want to change the word with AI.
Let’s talk
Do keep the title and paragraph close together, this gives the user
Do space out the company logo and the navigation items, this clea
Don’t leave large gaps of white space between the main title and paragraph.
Don’t keep the company logo and main navigation items close together.
USE PROXIMITY IN LARGER LAYOUTS Use additional space buffer to separate groups. This will
help the user to scan the page and to identify different
groups.
Whenever you have different groups of elements you need
to make sure that the space within a group of them is
smaller than the space to the next group.
DON’T DO
Don’t leave the same amount of white space between group elements, this gives the impression thatgroup
Do space out every elements,
group is related
this willtomake
each itother,
easiermaking
for theituser
hardt
Do add buffer to the call to action and the aside menu.
HOW TO USE PROXIMITY IN PRODUCT This example of proximity applies better spacing and prox-
imity of elements to represent information in an easy to read
CARDS? format.
Product cards are a great group element to harness

the power of proximity.
DON’T DO
$ $ $
$ $ $
Do make the image, star rating, title, price, and

Don’t leave large mount of white space between “Add to Cart” buttons for each product be all in
the photo, star rating, title, price and add to cart close proximity. This conveys to the reader that all
button, this makes it harder to realize that they this information is related to one product.
all belong to the same group.
Do use proper whitespace to separate one product
Don’t leave small amounts of white space from another.
between product cards, it clutters the ui and
makes it harder to scan the different products.
USE CASE
Use proper spacing between navigation items to make it clear they are all part of the same group.
1
Blog About Home
EVERYTHING
Contact me
Company Logo

IS DESIGN.
Subscribe
EVERYTHING! — Paul Rand
2 3
Let’s close the gap between Reduce the space between

the title and the paragraph. the button and input to
make it clear they belong
to the same group.
VERTICAL ALIGNMENT
VISUAL HIERARCHY Vertical alignment refers to how elements align on the hori-
zontal (x) axis. When elements align on a horizontal line, you
ALIGNMENT
create vertical alignment.
Invisible horizontal lines that dictate vertical

alignment.
In web design alignment refers to how we position ele-
ments between each other.
Alignment helps to create order, organize elements, to

create visual relationships and improve the overall
readability of your website.
Proper usage of alignment can highly affect how our brains

scans content, so we can use it to make an impact in the
overall hierarchy of our site as well.
When you have different heights you can align all the
cards to the baseline of the heights card.
In this example our eyes are drawn to the lighter circle,

because it’s not properly align like the rest of the circles.
TOP OR BOTTOM VERTICAL ALIGNMENT The vertical alignment of items influences the behavior of
users causing them to miss visual cues such as in the exam-
ple below to see the search box.
When the height of two or more elements are
significantly different, it’s usually a best practice to
vertically align the content to either the bottom or top
DON’T DO
Search Search
Don’t have different starting points for the cards as it makes it more difficult for users toDoscan
aligna both
page cards
and find
to the
related
top. elements.
This makes it clear that although the
CENTERED VERTICAL ALIGNMENT HORIZONTAL ALIGNMENT
When the height of two or more elements are slightly Horizontal alignment refers to how elements align on the
different it might make more sense to vertically align vertical (y) axis. When elements align on a vertical line, you
them to the center instead of top or bottom. create horizontal alignment.
DON’T
LOGO
DO
LOGO
Invisible vertical lines that dictate horizontal alignment.

LEFT AND RIGHT HORIZONTAL ALIGNMENT As sections change from a website whether its navigation,
hero or call to action, keep a consistent container width to
ensure good use of horizontal alignment, because it makes it
For larger layouts to keep all the content horizontally align easier for users to scan the page.
it’s common to establish a max-width for the content to ex-
pand and pushing the components to either the left or right
side, often refer to as a container.
DON’T DO
Don’t make the container larger than the screen. Do keep them align with the navigation.
Don’t make the container larger than the 1200px. Do keep 30px of padding from left and right side.
CENTERED HORIZONTAL ALIGNMENT USE CASE
When you don’t have multiple elements or large amounts Let’s vertically align the company logo, the navigation items and the
of text you can make use of centered horizontal 1
alignment, keep in mind that in most cases text and
content should be align to the left.
TIPS
Company Logo Blog About Home Contact me
SUBSCRIBE
Subscribe to our newsletter and receive the latest updates and promotions I build performant web apps
I’m John Doe, a fullstack developer with an eye for dess
Enter your email address Subscribe

Subscribe
Let’s vertically align the email input with the

subscribe button to the base line.
VISUAL HIERARCHY
CONSISTENCY
Consistency in web design refers to keeping all of the ele-
ments (fonts, icons, imagery, etc.) the same throughout
the website.
This is important because a consistent site or app lets the DESIGN CREATES CULTURE.
user transfer knowledge they already had collected and ap-
ply it on other sections within your site or app. CULTURE SHAPES VALUES.
When a UI works in a consistent manner, it becomes
predictable (in a good way), which means users can
VALUES DETERMINE THE FUTURE.
understand how to use certain functions intuitively and
without instruction.
— Robert L.
Peters
Abstract representation of consistent elements

being displayed
CONSISTENCY IN COLORS For example, if your primary color is blue and primary
actions like save, add have that color, make sure to
make all primary actions look the same.
Keep colors consistent with their function (i.e., green
always means Accept and red Reject).
Colors usually mean something, within your website or

app try to keep the overall color scheme consistent by not
changing the meaning of your colors.
DON’T DO
Don’t change primary actions colors as they might confuse users on the meaning behindDo
that
make
action.
sure primary actions have the same color throughout your
CONSISTENCY IN TYPOGRAPHY
Consistent typography helps to create a complete and co-
herent website, this is why it’s crucial to set apart
headlines, bodies, and secondary texts by giving
them each a distinct typography.
A good rule of thumb is to stick to a maximum of two fonts

and use one for main headers/titles and the rest for the
body text.
DESIGN IS NOT A
DON’T
LOGO Home About us Contact
Don’t mix font families, weights or styles as it makes it difficult for the user to tell they all belong to the same group.
DO THING YOU DO, IT IS

LOGO Home About us Contact
A WAY OF
LIFE
Do keep fonts the same across elements of the same group, it makes it much more easier for the user to read a given section.
— Alan
Fletcher
CONSISTENCY IN LAYOUT AND LOCATION An inconsistent layout confuses users and makes it more
difficult to find what they are looking for. It’s harder for us-
ers to remember things that often change than things that
A consistent layout throughout an app or website makes doesn’t.
it easier for users to navigate and find what they are
looking for effortlessly. Removing components such as the sidebar might lead to
dead end pages, where the user is unable to return to a
Make sure to follow industry standards, e.g. people are known page.
used to finding a sign in button on the upper right corner
side of
a website. By doing so users will feel already familiar
with your app or website even if they haven’t interacted
with it before.
DON’T DO
Don’t remove the sidebar on specific pages, users are used to rely on it therefore removing it results
Do use in confused
the sidebar and
pattern forprobably
web appslost
onusers.
all pages to allow user
CONSISTENCY IN ICONS Having different styles, sizes or colors in icons can be mis-
leading for users as they might think they communicate
something different than the rest.
Icons are visually intuitive representations of actions or con-
tent of your website, keeping consistency across them en-
sures you always communicate the same thing.
DON’T DO
Export images
Export images
Home Dashboard Messages

Settings
Home Dashboard Messages
Settings
Do make sure to use either outline or solid icons for a given set.
Don’t mix icons styles as it affects the overall composition and aesthetics of the page. Do use outline icons for primary navigations.
Don’t use different colors within a given group of icons, the only case this would be acceptable is to highlight a particular state like hover or pressed.
Do use solid icons for buttons, form elements and to support text.
CONSISTENT COMMUNICATION The terms and vocabulary you use have to remain consis-
tent throughout your app or website to make sure the user
Primary actions, form submit messages, error messages, understands and feels familiar with the message.
every interaction with the user must be kept consistent.
DON’T
You post was added
Category added
DO
You post was saved successfully You category was saved successfully
Save post Add category
Save post Save category
Don’t change your vocabulary on messages or labels, it will be harder for the user to feel familiar with the app on the long term.
Do keep messages and labels consistent throughout your app or w
USE CASE
Let’s make the font family and style consistent in the navigation items, this will help to
1
Company Logo Blog About Home Contact me
CREATIVITY IS
I’m John Doe, a fullstack developer with an eye for design. INTELLIGENCE
HAVING
Enter your email address Subscribe
FUN.
— Albert Einstein
NEGATIVE SPACE IN TEXT
Space between text is important because it improves read-
VISUAL HIERARCHY ability and overall comprehension.
You can improve negative space in text by making use of
NEGATIVE SPACE margins between chunks of texts and line height between
lines of text.
A good amount of line height is going to depend on the size

Negative space refers to empty space between layouts,
of the font itself. There is not a unique number that works
text, images, sections and other visual components.
well for all text, but a good rule of thumb is of 1.5
times the font size, and then you can adjust accordingly.
It’s crucial to have an appropriate amount of negative
space as it increases readability and helps the users focus
on the content that is most relevant.
Negative space is usually composed by these three css

properties:
1. Margin
2. Padding
3. Letter spacing & line height
Negative space acting as a visual cue two

separate two groups.
DON’T
this decreases overall readability and aesthetics.
f negative space between lines and titles, there should be a closer gap between lines than the heading and the body text.
TIPS
You can use this tool to generate appropriate line heights given a font size:
https://grtcalculator.com/
DO
Do leave generous amounts of white space between heading, subheading and body text.
Do leave a balanced amount of white space between lines.
E.g. font-size 16px, line height 16*1.5 = 24px

NEGATIVE SPACE TO IMPROVE You can use negative space around an element, the more
negative space the more attention the element will get.
HIERARCHY
When used wisely, negative space can support visual hier-
archy by creating focal points.
Be mindful that too much or too less negative space

can disrupt the overall layout making the element look
apart from its own group.
DON’T
DO
Don’t leave too much white space as it makes elements look like they belong to different groups.
Don’t leave too little space between text and background images. Do surround elements with appropriate negative space to bring in
NEGATIVE SPACE AND CONSISTENCY Inconsistent white space leads to abrupt changes in the UI
that affect the overall flow of the page.
Using consistent white space across elements and layouts

is key to having a more aesthetic and balanced page.
DON’T
DO
Don’t have different amounts of white space for the same component as it looks like there are two different groups, one on the top and the other one at
Do keep the same amount of space between elements that belo

NEGATIVE SPACE TO DECLUTTER AND As a good rule of thumb never have elements touch the bor-
ders of external containers like cards. Unless for very spe-
IMPROVE OVERALL AESTHETICS cific cases, text and images should have a generous amount
of white space around them, it makes it easier to read and
Good use of whitespace helps to declutter your site or scan content.
app, so that users can focus on important elements and
read content easily.
DON’T DO
Don’t make elements touch or even come too close to the edges of the wrapper/container unless you are absolutely sure this will not disrupt reading and
Do leave a generous amount of white space around atomic elemen
NEGATIVE SPACE BETWEEN SECTIONS When building sections on a website or app it’s crucial to
know when to use large amounts of white space to
We know that negative space helps in bringing separate groups. e.g. if two sections talk about different
elements together, making them part of the same things and convey different messages it makes sense to
group, also large amounts of negative space make leave a larger amount of negative space between them.
elements feel far apart, which translates in separating
groups.
DON’T
DO
Don’t leave little to no negative space between different sections as it makes it look they all belong to the same group, which might confuse the user on w
Do keep larger amounts of negative space between different secti
SYMMETRICAL HARMONY
Symmetrical harmony occurs when everything on one side
mirrors the other side, therefore, the visual weight is distrib-
uted evenly.
Use symmetrical harmony when you want to convey a sense
VISUAL HIERARCHY of stability and orderly look.
Be mindful that too much symmetry can make a design look
VISUAL boring and dry.
HARMONY An abstract example showcasing symmetrical harmony.

Visual harmony in web design occurs when the elements
are arranged in a manner that the overall design feels
complete and cohesive.
Putting all the previous principles together won’t work if we

can’t find a balance/harmony that conveys a sense of
satisfaction.
Achieving visual harmony relies on the distribution of visual

weight, which is the perceived weight of elements, how much
each elements stands out in comparison to those around it.
DON’T
DO
Don’t over use symmetry as the site might become monotonous and boring. Do use symmetry in your designs when you want to convey a more
Don’t continuously space every section with the same symmetry, such us the post, the Do
herouse
text and actions.
alternative harmony layouts to create flow between section
ASYMMETRICAL HARMONY
Asymmetrical harmony happens when the elements are in-
tentionally arranged in an asymmetrical manner.
Use asymmetrical harmony when you need to create a

more eye catching focal point or when you want to create a
sense of movement.
DESIGN IS THE
An abstract example showcasing asymmetrical harmony.
One side of the composition might contain a dominant

SILENT EMBASSADOR
OF YOUR BRAND
element, which could be balanced by a couple or more
lesser focal points on the other side. Such as an image on
the left and text on the right.
— Paul
Rand
DON’T DO
Don’t have elements be presented in the same way trough out your page, mix them up Dofrom
use asymmetry
left to right in
toyour
makedesign to aesthetic.
it more convey a more modern and pla
Don’t continuously repeat section as that reduces the effect of aesthetic harmony can have and make the page repetitive causing users to lose interest.
RADIAL HARMONY Radial harmony can be helpful to make a certain element
stand out from the rest. Such as pricing pages where radial
harmony causes users to focus on the recommended pricing
Radial harmony establishes a focal point and balances the option.
rest of the composition around it. You can achieve this by
placing objects, colors, textures, illustrations around the
main focal point.
DON’T DO
Don’t display your elements without a clear balance, although this might be consider asymmetrical
Do use radialthere is no
balance clear
and pricingtocard
contrast, the auser
create should
focal point focus
in thethe
ce
ACHIEVING HARMONY THROUGH COLORS
Harmony in colors can be achieved by sticking to a simple
rule: use a baseline color ratio of 60% for the primary color,
30% for the secondary color and 10% for the accent color.
DON’T DO
Don’t mix multiple colors, specially opposite colors as they often contribute to a cluttered and unbalanced
Color palette: interface.
#ff008e (30%) #cdcdcd (60%) #6da5db (10%)
Do use an appropriate amount of different colors (ideally 2 or three

ACHIEVING HARMONY BETWEEN TEXT Harmony can be achieved by correctly placing text and im-
ages so that one doesn’t overpower the other.
AND IMAGES One way to do this is by finding empty spaces in your main
Harmony can be achieved by correctly placing text and image and placing your text there, let’s take a look at an ex-
images so that one doesn’t overpower the other. ample.
DON’T DO
Do reposition text and image in a manner where both coexist in a

Don’t position text that overlaps heavily between the image content which cause to lose the harmony between the text and the image.
There is no perfect ratio for the amount of text that should If the text block is larger than the image, maybe is time to
go with any given image, this highly depends on the break it into smaller chunks with smaller images.
component you are building, remember that balance and
harmony can be found when either overpowers the other,
let’s take a look at another example.
DON’T DO
Don’t place large amounts of texts next to images. Do balance the visuals and text for any given component.
VISUAL WEIGHT 2. Color: some colors are perceived as weighing more than
others. Red seems to be heaviest while yellow seems to
be lightest.
In web design visual weight refers to the perceived
amount of weight an element has.
It’s a powerful concept to understand in order to achieve
harmony.
DON’T
When applied correctly visual weight can help us create fo-
cal points to draw the user’s attention to.
The main things that affect visual weight are:
1. Size: larger elements carry more weight than smaller

elements.
DON’T While the red color makes the user focus on the whole section, it reduces the u
DO
DO
3. Density: mixing elements together into the same space
gives more weight to that space.
GOOD DESIGN ENCOURAGES

A VIEWER TO WANT TO
LEARN MORE
— Alexander Isley
DESIGN PROCESS
The design process is a set of steps that are aimed to get
an end result/product that feels an looks better, interfaces
that feel more intuitive and help you to get a better overall
understanding of the problems to solve.
In this section we will have a look at:
• Wireframing
• Styleguide
• Prototyping
After this section you will have a solid understanding on

how to:
• Create wireframes for page-specific content, layout

and navigation required to support tasks a user
wishes to complete.
• Make visual design guidelines that will serve as the

base of your prototype.
• Convert your wireframes into high fidelity prototypes.

WIREFRAME
Wireframes are usually simple, low fidelity layouts that
helps to understand where navigational elements, texts and
graphics will be placed.
Once the wireframe is complete, it should convey a compre-

hensive skeletal view of the entire web application.
Wireframes are great at keeping our mind focus on solving

one and only one problem at a time.
Some of the advantages of working on a wireframe first are

to:
• Clarification: Get a clear idea of where elements are
going to be placed on the screen.
• Usability: Get a clear sense if the usability of the

product, by pointing out flaws on the architecture.
• Save time: Find issues early on the process and solve

them quickly, iterate fast.
• Validation: make the business rules and interactions

are visually supported.
HOW TO DON’T
CREATE AESTHETIC HomeAboutPricesLogin
WIREFRAMES?
The perfect tool
We have created software for each employee of your team.
Analytics API
our API manager can help you connect it safely and get the latest statistics.
Cloud storage
You can store your projects without leaving our product
Remember the purpose of a low fidelity wireframe is to

just sketch out a rough outline of where we think text
and graphics will be needed to support the tasks and
features of our web application.
Having that in mind, here is a list of guidelines you can

keep in mind in order to make a simple low fidelity wire-
frame standout:
DO
Avoid unnecessary clutter:
• Eliminate high fidelity images that might distract

from the whole purpose of making a wireframe. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit.
• Don’t overuse color, choose different shades of gray, dolor sit amet, consectetuer adipiscing elit.
one primary color and one accent color to make cer-

tain actions pop.
dolor sit amet, consectetuer adipiscing elit.
• Don’t wait to have high fidelity text, either use plain
boxes or lorem ipsum content, remember we are just
attempting to get a fair idea of where everything will go
and examine areas that require more thought or
inves- tigation.
2. Choose colors carefully:
3. Use proportional sizes:
DON’T DON’T
Don’t use plain black and white or doodle style, neither can clearly communicate the final design.
Don’t neglect the size relationship between elements, one of the main
DO
DO
Do use different shades of gray to suggest

different levels of hierarchy, e.g. a ligher shade of gray on a dark background conveyss more
importance than a ligher shade of gray, the opossite happenss on a light background.
Do use primary colors for those actions that you won’t stand out and outline or ghost button for secondary actions.
Do use size carefully to convey proportions accurately, this will help y

4. Communicate clearly:
Elements in a wireframe should be easily identified by non

techinical users, meaning a button should look as close as
possible to a button, inputs should convey that they are
meant for the user to type something, etc.
A good way of achieving this is to remove particular

features for any given component until there is nothing left
to remove without affecting the perceived aspect of it.
DESIGN IS NOT
PHILOSOPHY
IT’S FOR
LIFE
— Issey Miyake
Here are some of the most common elements that conform
a styleguide:
STYLEGUIDE
A style guide is a reference source where you put together
all of the design elements that conform your website or
web app. This includes a color palette, typography (fonts
and sizes), spacing, icons, imagery, components and all
the visual language that is used throughout your website.
Having a clear styleguide is important to consolidate all

your design decisions. This helps to have a more
consistent and clear vision across different pages within
your website. A styleguide allows everyone to make sure
they are using the same visual language, guaranteeing
consistency across the application.
A styleguide is for a designer the same that code

guidelines are for developers. It helps setting clear visual
conventions and guidelines throughout the life cycle of the
project, making sure all team members will adopt them
accordingly.
COLORS
Colors play a vital part in how your website and your brand
are perceived and remembered. Therefore, you’ll want to
make sure to define your essential primary colors, usually a
maximum of three.
A complete color palette includes at least primary, second-

ary, tertiary, neutral and accent colors.
• Primary Colors: these are the colors that are specif-

ic to the company and most likely are going to
affect primary actions.
• Secondary colors: this colors complement the

primary colors and are used for less important
actions.
• Accent and neutral colors: accent or highlight

colors are those that can be applied to success,
warning or danger actions. Neutral colors are those
that can be used for passive backgrounds, titles or
body text.
TYPOGRAPHY
Here is where you choose the sizes of all titles, colors and
weight, compare them with each other and arrange them in
the right hierarchy.
First, you’ll need to include the font families and sizes for
your main headings H1-H6, in addition to this you’ll want to
include the font family and sizes for the body text.
Font sizes should be written in pixels (px) and remain con-

sistent across elements, you should also use progressive
sizes such as 14px, 16px, 18px, or 20px, and avoiding
inter- mediate sizes such as 15px.
Second, it’s important to determine the line height, the

character spacing and the color of the texts. You can
choose different shades of your neutral colors for the text.
For the line height and letter spacing its useful to enter
large amounts of texts and play around with each other to
see which one has the best readability.
IMAGERY
Here is where you put every illustration and icon your
website is going to use. You should also create some rules
and guidelines regarding what kind of images to use on
your website.
In order to keep images consistent you might include

pho- to editing preferences for backgrounds, filters,
brightness, contrast, and more.
Regarding icons, it’s important to add guidelines on

where to use different styles of icons, for example line
icons can be only used for primary navigation whereas
solid icons are used in form elements and to support text.
It’s also important to state the different sizes of icons
allowed in order to keep them consistent.
SPACING
Spacing plays an important role of how elements are
perceived by the user. Having a clear scale of spacing
values helps in making the overall design more
consistent.
The spacing scale is what we are going to be using for

margin and padding properties, as well as to both
vertical and horizontal edges.
The scale should include small increments than you can use
throughout your styleguide, for example, to determine the
space between a label and an input element.
COMPONENTS
Once the main style definitions are in place, we should
think about adding the main components of your app or
website into the styleguide.
These means everything related to the appearance, sizes,

and states of buttons, form fields, form elements,
navigation menus, notifications and alerts, cards, modals
etc.
You should also include the different states of those com-

ponents, for example, a button element should also have
the styles when the users hovers over it, when the button is
disabled or where the button is waiting for an action to
finish (loading state).
Make sure your components align with the colors, spacing

and fonts defined earlier in the styleguide.
Every component used in your website should be added to

the styleguide, and the styleguide should serve as the
main source of truth for this components.
STYLEGUIDE
USE CASE
In this section we’ll cover how to create a styleguide step
by step, we’ll start by creating the logo, color palette and
typography.
Then we’ll create a basic section for the images and icons
that we will be using, followed by a layout grid and we’ll
end it by creating some basic guidelines for components
such as inputs, buttons etc.
CREATING THE LOGO
The styleguide should include the size, placement, and all
the variations that are acceptable for the logo.
This section of your style guide ensures your logo is used

in the way you intended. It also prevents mistakes, like
stretching, altering, condensing or re-aligning, that could
send the wrong message.
THE ONLY
IMPORTANT THING
ABOUT DESIGN IS
HOW IT RELATES TO
PEOPLE
— Victor Joseph Papanek
CREATING THE
COLOR PALETTE
The color palette is one of the most important aspects of
a styleguide and speaks about the overall tone you want
to communicate.
You should include at least one primary color, the accent

colors such as green, red, and yellow and the combination
of shades that are used in, for example, the body text.
CREATING THE
TYPOGRAPHY
The fonts and size that you use, just like your color
palette, will convey the style of your brand.
The (weight / style / sizing) must be included to

establish the textual tone of your content.
As a good rule of thumb, don’t include more than two

fonts in any design, as this might become visually
distracting for the user.
IMAGERY AND
ICONOGRAPHY
This section should include everything related to images,
illustrations and icons that you are going to be using on
your website or app.
Any guideline or rule regarding how to use them should be

include here as well.
These should be used as complementary illustrations for backgrounds and images.
UI ELEMENTS
Your styleguide should be very clear about the design of the
UI elements and how they should be implemented.
Components have different states that should be
conveyed on your styleguide, each with its particular
properties (sice, spacing, color, etc).
In our example, we not only display specifics about

the default state of our button but also go through
specifics on the different states a button can have
such as hover, click.
The more details on the design of our UI components, the better, this wi
Something we haven’t included in our inputs example, to make it a bit m
There are many different components or elements in
the construction of a product or app, ant it is neces-
sary to include them to help instruct colleagues how
these should look when placed together. An example
can be our pricing card, which is composed of multi-
ple smaller components.
All of the above will help improve communication,

even when working alone.
A DESIGN SYSTEM
ACTS AS THE
DESIGN CONNECTIVE TISSUE
SYSTEM THAT HOLDS
TOGETHER YOUR
Time to put it all together with a design system. This is a
collection of reusable components, design patterns, and
other standards used throughout an organization to create
a consistent visual language and user experience.
A design system defines how components, UI elements, and

design patterns are used and how they relate to each
ENTIRE PLATFORM
other. It also helps with consistency, scalability, and future- — Drew Bridewell, Invision
proof- ing.
We will be basing this of Flowbite (https://flowbite.com)

which is the stepping stone to start using what you’ve
learned witin this book.
A design system can include a variety of elements, such • Layout guidelines: These specify
as: how different types of content
should be arranged on the page,
including the use of grids,
whitespace, and other layout
• Branding guidelines: These specify
elements.
how the product’s brand should be
represented visually, including the use
of its logo, colors, typography, and other
visual elements.
• Typography guidelines: These specify the • Color palette: This specifies the colors that should
typefaces, font sizes, and other typographical be used in the product, and may include both a
elements that should be used in the primary palette for key UI elements and a
product.danger actions. Neutral colors are those secondary palette for less important elements.
that can be used for passive backgrounds, titles or
body text.
• Iconography: This specifies the symbols, icons, • Interactive elements: These specify how different UI
and other graphical elements that should be used elements should behave when interacted with,
in the product. such as buttons, forms, and other interactive
elements.
The icons used in FlowBite are the SVG-powered Hero Icons built by one of
the creators of Tailwind CSS.
• Components: These are pre-designed UI • Templates: These are pre-designed page layouts
elements that can be reused throughout the that can be used as a starting point for creating new
product, such as buttons, input fields, and other pages or sections of the product.
common elements.
The goal of a design system is to create a consistent and

cohesive user experience across all parts of the product,
and to make it easier for designers and developers to
create new features and pages for the product.
Let’s take a look of some advantages of building and using 2. Efficiency: With a design system in place,
a design system: designers and developers don’t have to start from
scratch every time they need to create a new page or
1. Consistency: A design system helps to ensure feature. They can use the pre-designed elements
that the product has a consistent look and feel and templates provided by the design system to
across all of its pages and features. This can help save time and effort.
to create a cohesive user experience and build
trust with the
3. Flexibility: A design system can be designed to be
flexible enough to accommodate a wide range of Building a design system from scratch is a task often
products and features. This means that it can be carried out by a group of people and it can take years to
used as the foundation for a variety of products, complete (although it is never fully completed, it evolves
rather than having to create a new design system over time).
for each product. Big companies like airbnb, github develop and evolve
their design system tailored to their products, bear in
mind
that these design systems are created with a very
specific application and user base in mind.
Building a design system takes a lot of time and effort, so

it’s likely that startups or small companies don’t have this in
place. Here is were looking for already stablished design
systems pays off. You don’t have to worry about
spending months (or even years) building it, making sure
you are applying every best practice available out there,
luckly for us there are design system solutions, that can be
adjusted to pretty much any application.
This is where Flowbite comes into play.
4. Scalability: As a product grows and evolves over

time, a design system can help to ensure that new
features and pages fit seamlessly into the overall
design of the product. This can help to avoid design
inconsistencies as the product scales.
FLOWBITE We briefly mention that Flowbite gives you a Figma design
system that you can use to test and build different designs.
Flowbite (https://flowbite.com) is the most popular open- You can choose from a wide range of built in components
source component library built with the utility classes from such as dropdowns, tables, buttons and drag and drop
Tailwind CSS. them into your own design. You can even tweak them to fit
you design style.
It is an ecosystem of tools such as a Figma design system
and a Tailwind components library, that you can just plug
and play into your app or website.
All of the elements are built using the utility classes from
Tailwind CSS and vanilla JavaScript. This means that is su-
per easy to customize, you can add your own colors, fonts,
sizings, shadows, and other styles to the default set of utili-
ty classes from FlowBite and Tailwind CSS.
Once you have your figma files ready to be implemented,

you can simply import such components into your applica-
tion, this means you don’t have to build them from scracth.
This will not only save you months of works, but also
you can rest asure that your UI is following best
practices all around, accessibility, colors, contrast etc.
Let’s get a feel of how we can easily use Flowbite from de-
sign to implemantaion shall we?
CUSTOMIZE COMPONENTS SUPER FAST If you take a look at the right hand panel, you’ll see differ-
ent variant properties for the button. These help you quickly
In this section, we’ll explore how you can harness Fig- change the appearance of the button to fit your particular
ma’s powerful features to customize Flowbite components needs, for example if we’d want a larger button, we can click
quickly, resulting in efficient and visually appealing UI de- the size property and select L or XL from the options.
signs.
Harnessing Figma’s Variables:

Figma’s variables provide an excellent mechanism for cus-
tomizing design elements across your UI. Flowbite takes
full advantage of this functionality by leveraging the power
of Figma’s variables to create dynamic and adaptable com-
ponents.
Let’s take a look at an example of how you can effortlessly

tweak various aspects of a button, such as colors, typogra-
phy, spacing, and more, all while maintaining consistency
throughout your design.
This is the default primary button of Flowbite

This will result in a slightly bigger button. Now, let’s also
change the color to red, by chooseing the color property Let’s take a look at the final version:
and selecting the red option. I also want to get rid of the
left side icon, so I’ll turn off the “Show left icon” toggle.
I’ll change the text to “Get it now” and the right icon to be
I hope that at this point you understand how easily is to

a circle arrow instead of a plain right arrow. customize and reuse Flowbite components to match your
specific design requirements.
You can go even further and choose different states, like

hover, focus by changing the state variant property.
(You notice how the button is slightly darker, simulating the

exact same style for the hover state)
But what happens when you are using styles that live out-
side flowbite’s, e.g. your want to have a yellow button, but From there, make sure the Primary color value is selected
that color is not a value available in the colors variant prop- in the colors variant property (it should already be there
erty. You can easily change this by going to the given that you selected all buttons that have the primary
component’s instance by clicking the diamond/squared icon color applied)
right next
to the button component instance. This will take you to the
main component.
From there you need to select the variants that have the
Primary color applied, in our case all the buttons that have
the blue colors, given that we want to change those to yel-
low.
Scroll down to the color section (while having the yellow
variant value selected) and change it to any shade of yellow Now, if we go back to the components instance, we can
that you want. choose the Primary color variant option from the
dropdown and you should see the color button change to
yellow like this:
Now, let’s say we have created a couple of UIs that use

this new primary button, but after some user interviews
we
learnt that they don’t like this new yellow color, instead they
are more inclined to click on a purple button.
It would be a tedious task to go one by one to change the

color of each button to purple right? Luckily for use we
used Flowbite which harnesses the power of components
and we can simply repeat the process again by going to
the main component primary variant, and in the same
fashion we change it to yellow, we can change it to purple,
and this
change will propagate through all the UIs that have a prima-
ry button, saving us hours of work!
BUILDING A LANDING PAGE IN FIGMA Let’s go ahead and create a desktop frame and select a nice
background color from flowbite colors page.
USING FLOWBITE’S DESIGN SYSTEM

First, let’s make sure we have the design system file open
in Figma (https://figmadesignurl.com). This file contains all
of the design elements, such as colors, typography, icons,
and UI components, that we will need to use to design our
UI.
Next, create a new file in Figma for your UI design. You

can do this by clicking the “File” menu and selecting “New
File”. Let’s call it Flowbite login form.
In your new file, you can start building out your UI using
the design elements from the design system file. You can
do this by dragging and dropping UI components from the
design system file into your new file, and then customizing
them as needed.
Let’s choose the darkest shade of gray, and now lets go

to the assets tab and search for the Navbar component.
Each component has different variants, breakpoints and
even theme modes. Given that I want this UI to be dark,
I’ll toggle the Dark Mode switch on the upper right
section,
just below the Navbar select. This changes the colors of
the background and foreground of the navbar to adjust it
to a dark theme.
Next, lets drag and drop the element into our frame. From
here we can right on the element and select “detach from
instance”. Given that the navbar is a Flowbite component, if
we want to change anything we need to either change the
base component which will reflect the changes to all in-
stances of the component, or we can detach this instance
from the component itself and customize it as we please.
Once detatched we can adjust the size to take up the full

width of our frame.
For the next part, I want to have a nice heading, similar to
the one on the flowbite marketing site, so let’s create a text You should be seeing something like this:
layer (shortcut T)
And let’s add a Title for this I’ll add the following text
“Build websites even faster with components on top of
Tail- wind CSS” but you can add whatever you want.
Next lets go to the middle right section where the text

styles live, and select the Header style, the one that has
34pt.
Let’s center align the text, and center it in the frame.**
Let’s repeat this process for a smaller text now, create a
text layer, add some text and change the text style to be I’ll change the color to be gray/400 and reduce the size to
text-xl font-normal this time. be around 840px. After centering the text in the viewport
just below our main header you should have something like
this:
Next lets see how easy it is to add a Get started primary Let’s repeat the same process but this time lets add a
button right below our paragraph. Lets go to the asstets secondary button with this settings:
section on the upper left side and search for button.
Let’s grab the main button component (the blue one)
and drag and drop it to the frame.
Now with the button selected, on the right side panel

you can see all of the button’s variants that we can play
with. You can choose the color, the size, even the icons
that the button will have. For now just copy this settings.
Buttons are an excellent example of the different variants
a flowbite component can have. These are easily
customiz- able and extensible.
These are some examples of flowbite blocks:
Pricing page
Create modal
Features section
Now we should have something like
this: I encourage you to keep on building upon this landing page
and try out different styles and components that flowbite
has to offer.
I hope that with this quick tutorial on how to use flowbite

design system in figma you get a feel of how easy it would
be to create custom websites or apps using this. The best
part is that when you have to code this components you
can use one of their UI libraries and just import the same
components you use in Figma.
In addition to this, flowbite has its own section of Blocks,

which are entire websites and pages that you can just plug
and play into your UI https://flowbite.com/blocks/
UX FOR
DEVELOPERS
FINAL THOUGHTS
I hope you’ve enjoyed the book and now you feel confident
to put in practice what you learned to create awesome
websites and products.
Now that you are familiar with these web design princi-
ples, you have everything you need to create something
that looks and functions well. As you get experience over
time, don’t be afraid to break and play around with some of
these rules. Web design is continuously changing,
evolving, and It’s likely that you won’t be able to follow
each practice exactly, so don’t worry if you need to adapt
some principles to the nature of your website.
But now before bending these rules, you will be aware that Learn the key phases of an effective UX
they exist, what is their purpose, and accomodate them to process that leads to great products.
your website accordingly, that is what makes a great web Learn how to uncover problems in a design,
designer. and exploit opportunities to enhance the user
experience.
Become proficient at identifying when to
apply the most used UX laws in the industry.
Learn how to save time and money by
building solid prototypes that will help you
validate design decision before development
starts.

Design For Developers

Uploaded by

Copyright:

Available Formats

Design For Developers

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Design For Developers

Uploaded by

Copyright:

Available Formats

Design for

Colors Fonts UI Components

By Adrian Twarog & George

Textarea 120 How To Create

Dropdowns 134 Styleguide 358

Here you will find a beginner’s step-by-step guide to using

This book is structured to develop your foundational skills,

The later chapters will combine everything, covering visual 3 Components

1 Color Theory 2 Typography

Colors Contrast Hue Typeface Size Weight

Tone Shade Tint Height Bold Serif

• Create color schemas

Color theory starts with the primary colors, which can

They are part of a color wheel created by Isaac Newton

Using 2 colors in close proximity on the color wheel helps

DESIGN IS NOT JUST WHAT IT

HUE / COLOR WHEEL

The color wheel is the expanded version of our primary,

Adobe provides a great color wheel where you can select

Following nature, color

Adding or removing grey from color changes its tone, and

Do use tone to blend items into the background.

Do apply tone to reduce the priority of components such as buttons.

The shade will darken colors, allowing for stronger contrast

By using the color wheel, we can identify

• Tetradic colors (Double complementary)

• Analogous complementary colors

By using a single color and a mix of tint, tone, and

Blue works with orange, red with green. We can then

To select 3 colors with strong contrast, you can use the

These triadic colors have two primary options, and a

WHAT IS Luxury Expression

COLOR Primary Color

WEIGHTS Secondary Shade Button

When picking website colors, it is essential to define

Color weights can then be used as a reference for

Swapping to dark mode means inverting the order of

CONTRAST This difference in the brightness between two colors is

The elements of an effective color schema include:

• Picking primary, secondary, etc colors

• Having a base color for general text (white, black)

• Defining color weights for each color

Primary Secondary Tertiary Base

100 #ffbee5 #ff9fda#ffbee5

500 #901b79 #901b79 #901b79 #901b79

• Create your own typography schema

The exception is when

Bold text is useful when using smaller font sizes, or on

If you can design one thing, you can design everything.

Don’t overuse underlines on large text.

Do use underlining for the hyperli

Use capitalization to DRAW ATTENTION to significant text.

When styling for a blog or information rich page, you can

LETTER SPACING DON’T

Consider changing the letter spacing when you increase

LINE HEIGHT PARAGRAPHS

As line height increases by default relative to size, it is

• Length of the lines. Longer lines need more leading

• Amount of text. More text needs less leading