Design for

Developers
A guide to basic design rules and formulas to create
good looking components, colors and typography.

Aa
SAN SERIF

Colors Fonts UI Components

By Adrian Twarog & George Moller

 Toasts 154 Imagery 364

CONTENTS
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
Letter Spacing 60 Creating The Typography 380
Introduction 6 Tabs 202 Imagery And Iconography 384
Line Height 62
1. Color 8 Font Size 64
Iconography 208 UI Elements 388
Avatars 218
Color Theory 8 Font Weight 68
Primary Colors 10 Legibility 70 7. Design System 398
4. Visual Hierarchy 226
Secondary Colors 12 Text Hierarchy 74 Final Thoughts 438
Tertiary Colors 14 Typography Schema 76 Visual Patterns 230
Hue / Color Wheel 16 How To Alter
Color Temperature 18 3. Component Design 78 Visual Hierarchy 232
Saturation 20 Spacing 80 Size & Text 234
Tint 22 Baseline Units 82 Buttons 240
Tone 24 Grids & Columns 84 Inputs 244
Shade 26 Buttons 86 Color 252
Selecting Colors 28 Borders 88 Contrast 268
Monochrome Color 30 Shadows 90 Proximity 280
Analogous Colors 32 Icons 92 Alignment 292
Complementary Colors 34 Labels 94 Consistency 302
Triadic Colors 36 Dividers 96 Negative Space 316
Color Psychology 38 Forms 98 Visual Harmony 328
Color Weights 40 Inputs 100
Contrast 42 Checkbox 108 5. Design Process 348
Color Schema 44 Radio 114 Wireframe 350
Textarea 120 How To Create
2. Typography 46 Toggle 128 Aesthetic Wireframes 352
Bold 52 Dropdowns 134 Styleguide 358
Italics 54 Submit Button 142 Colors 360
Underline 56 Badges 148 Typography 362
 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 Website creating and Applica- solutions for Commerce and
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

AdrianTwarogandGeorgeMoller Email:
hello@adriantwarog.com
Medium:
medium.com/@_jmoller
 WEBsite DESIGN
hierarchy of needs
5 Website Design

INTRODUcTION 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 to 4 Visual Hierarchy
grow and improve.
Consistency Spacing
The first chapters focus on the basics of color, typography,
and layout, which are the building blocks of later chapters Proximity Alignment
on components and user interfaces.
3 Components
The later chapters will combine everything, covering visual
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
Color theory helps us understand colors. In this chapter we
will cover: Have no fear of
•
•
•
•
Primary, secondary and tertiary colors
Color hues and temperature
Saturation
Tint, shade and tone
perfection
• Analogous and complimentary colors you will never reach it.
• Color psychology
• Color weights — Salvador Dali
• 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
Color theory starts with the primary colors, which can be
— Maya Angelou
used to mix and form all other colors.
YOU CAN’t USE UP
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.
CREATIVITY
This color wheel helps pick harmonious colors better than
THE MORE YOU USE
what is generally selected using RGB for HEX.
THE MORE YOU HAVE
 — Joel Spolsky
Purple RED Orange

DESIGN ADDS Faster than it

Blue Yellow
VALUE COSTS
GREEN

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
Magenta VERMILLION

DESIGN is not just what it

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
 Color
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 RAINBOW
Color temperature
refers to the warmth or
coolness of a color.

Following nature, color Warm colors tend to

OF CHAOS
temperature is easy to stand out and are often
identify, with reds, used also to show
oranges and yellows warnings or essential
being warm, and blues, interactions.
greens and purple
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.

COOL
 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

I am a Believer THAT
add tone, tint and shade to balance the colors out.

As a rule, when selecting a

Color Affects
color, pick from inside the
dashed square.

These colors are safe and

People’s Moods
comfortable for most eyes,
as more saturated colors
can come across as harsh.
 Color
like features
follow the
TINT changes of the
Adding or removing white from color changes its tint. As a
result, it also lightens its saturation.

The tint will lighten colors, allowing subtext or descriptions

Emotions
to carry less priority. — Pablo Picasso

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
TONE
speak all
Adding or removing grey from color changes its tone, and as
languages
a result, it also dilutes its saturation. — Joseph Addison
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.

do
When it means
Do add shade to header/title text that requires priority.

Do apply shade to the background when using hover

effects for components or buttons.
SOMETHING
— Robert Henri
Do use ensure colors have a bit of shade added, so they
do not come across oversaturated.
 I Found I could Say Things WITH
Color & SHAPES
that I couldn’t say any other way
Selecting Colors Things I had no Words For.
— Georgia O’Keeffe
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 the

Color
By using a single color and a mix of tint, tone, and shade,
Great Value
Of making the outlines and
you will be able to create several color variations.
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 color
Colors In the whole world, is the

One
that
Picking multiple colors that look good together is done by
selecting the colors next to the primary color. For example,
Looks
green has neighboring colors of blue and chartreuse. Good
We can select 3 analogous colors to use, mix, and match on
using this method.
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
NEightbors
Alternatively, we can pick 2 colors that work together by
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% Comple Primary 25% 50%

Opposites
Shade mentary Color shade Tint — Georgia O’Keeffe

Example 1 Example 2
 Triadic Colors
To select 3 colors with strong contrast, you can use the tri-
adic 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.
Color is like cooking
Primary
Secondary
Primary
Color
Triadic
Alternative
Triadic
Alternative
Triadic
Background
The cook puts in
More or Less
Color

Example 1 Example 2

that’s the difference

— Josef Albers
 Danger
Creativity Powerful Warning
Imagination Important Friendly
Young Success

WHAT IS Courage
Nobility
Highlight
Fun

COLOR Psychology?
Luxury Expression

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

create better websites and applications by selecting the
color that best reflects the message you want to convey .

Using different background colors can also play a vital part Secure Highlight
in how people visualize a website’s authority. Financial Positive
Loyal Energic
Bright colors like greens, yellows and pinks can bring a Details Info
more vibrant youthful vibe to a website, while dark blues Communication Safe Positive
Trust Stable Education
and blacks can come across as business or corporate.
Balanced
 VARIABLES
FOR COLOR WEIGHTS and Their Use
Light Mode
Backgrounds 100 Text

HOW TO USE Labels

Tags
200

300
Overlays

Button Hovers

COLOR WEIGHTS Primary Color

Secondary Shade
400

500
Primary Color

Secondary Tint
Like fonts, colors can have weights ideally ranging from Button Hovers 600 Tags
options like 100,200... to 700,800.
Overlays 700 Labels
The lower values indicate lighter tints, while the higher
values add more shade, bringing it closer to black. Text 800 Backgrounds

When picking website colors, it is essential to define the Dark Mode

weights that will later be used for the style guide.

Color weights can then be used as a reference for

do
headers, backgrounds, buttons and hover effects. Do use lighter weights between 100-300 for back-
grounds, buttons or labels.
Swapping to dark mode means inverting the order of Do use standard weights of 300-600 for text, high-
weights, for example 100 becomes 800. 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
Contrast can also occur between 2 different colors and how Text
they are juxtapositioned. Blend colors that can be Ratio 4.03:1
Ratio 4.57:1
easily distinguished when used together. Text

A tip to see if you are using enough contrast for your website Ratio 2.01:1 Correct contrast
is to view the website in greyscale. ratio. This allows for the
text to be read on the
Insufficient ratio for screen easily.
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.

Creating your own Weights

Color Schema Defining colors with their weights and HEX values will help
you select and use them correctly in the future.

Primary Secondary Tertiary Base

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: 100 #ffbee5 #ffbee5 #ffbee5 #ffbee5

200 #ff9fda #ff9fda #ff9fda #ff9fda

• Picking primary, secondary, etc colors
300 #de6ec3 #de6ec3 #de6ec3 #de6ec3
• Having a base color for general text (white, black)
400 #9c4796 #9c4796 #9c4796 #9c4796
• Defining color weights for each color
500 #901b79 #901b79 #901b79 #901b79
• Providing information on using each color
600 #7c0057 #7c0057 #7c0057 #7c0057

We will also add a usage guide for applying these colors

with text, buttons, and components in later chapters. 700 #68003e #68003e #68003e #68003e

800 #590029 #590029 #590029 #590029

 Aa
SAN SERIF

How to use
TYPOGRAPHY Typography
is an art.
Understanding typography helps us effectively use fonts and
sizing for headers, paragraphs, buttons etc. We will cover:

• Typefaces and fonts

Good
• Serif and sans serif
• Bold, italics, underlines and caps
• Letter spacing and line height
• Text color and contrast
•
•
Sizing fonts and headers
Font weights typography
is Art.
• Legibility & readability
• Hierarchy

After completing this section, you will be able to do the — Paul Rand
following things with typography:

• 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
A popular typeface is
When creating a website or Roboto which is commonly
used on many websites.
Typography
application, we often pick
one or two typefaces, one
for our headers and one for
Due to its overuse, it is
recommended to use a
is two-dimensional
paragraphs. In CSS, we refer
to this as a font-family.
another typeface for a more
unique feel, like Open Sans. architecture,
based on experience
FONT FONTS and imagination,
A font is a specific type of
Roboto Thin and guided by rules
Roboto Light
style based on its typeface.
Styles can include weights, and readability.
italics, weights, etc. Roboto Regular
Today there are dozens of
Roboto Text
font variations for every Roboto Medium
typeface. For example, — Hermann Zapf
weights can have thin, light, Roboto Bold
regular to bold and black.
Roboto Black
 Aa
Serif do
Typography has 2 types of Do use serif font for
serifs: serif and sans serif. headers text
Serif fonts have more dec- Do use serif for hero
orative strokes (referred text
to as “tails” or “feet”) at
the ends of letters, while Do set serif primarily
for larger text
sans serif fonts do not.
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ

Aa
SANs SERIF do SERIF
Do set paragraphs to
use sans serif fonts.
On the web and in
applications, we use sans Do set small text in la-
serif font families as they bels with sans serif.
are easier to read. Do use sans serif for mo-
bile applications.
The exception is when
we have large headers or
decorative text for hero
banners. Don’t abcdefghijklmnopqrstuvwxyz
Don’t use sans serif for
ABCDEFGHIJKLMNOPQRSTUVWXYZ
Always opt for using sans large text as it reduces
serif when possible. style, flair and
emotion.
SANs SERIF
 BOLD
For websites and applications, we recommend only 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

buttons or backgrounds with strong contrast. Life
lies in being
do
Do use a maximum of
one or two bold items
Don’t
Don’t use bold too
often in texts
Bold
A common place we might Too many bolded links or
use bold is to identify when bolded text on a page will
certain text is a link or not. dilute the emphasis or — Robert Frost
importance of the text.
On a login screen, we could
bold the word ‘Login’ but not It might also overwhelm
the ‘forgot password’ link. the user.
 Italics
Italics are generally reserved for testimonials, references,
or to emphasize a statement in a paragraph so that it stands
out.

BE BOLD
Avoid using italics where possible. Use regular text where
you have a label or button.

do Don’t
Italics can be used to
emphasize a statement,
Using italics for a full para-
graph makes it very difficult
OR ITALIC
feeling or expression, or to
add character to your text.
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.
Don’t use italics for but-
Do use it for quotes or tons.
testimonials.
Don’t use italics on
everything line/text.
If you can design one thing,
you can design everything. Don’t use italics links,
- Massimo Vignelli they are difficult to
spot.
 DIFFERENT TYPES
OF UNDERLINe
There are many types of underline that can be used to add
some creativity to important elements or when hovering

Underline 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 em-
phasis 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
Use a different color for
Important
On some sites like Wikipedia, In situations where you do have
there could be many hyper- hyperlinks and underlining for a
a hyperlink, apply the underline
Header Title
links in a single paragraph that core statement to have a much
better effect. on the hyperlink hover
can be overwhelming.
Do use underlining for Don’t overuse underlines Do use underlining for
Don’t underline
emphasising text. on large text. the hyperlink hover.
hyperlinks.
 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
Capitalization is safe to use for components like buttons, Do consider capitalizing some headers and
titles to make them stand out.
labels, and toasts when alerting for important messages.
Do occasionally capitalize buttons or labels to em-
phasize or draw attention to them.

don’t do
A FULL SENTENCE WRITTEN Having an alert or warning
IN CAPS WILL APPEAR UNPRO- needs attention for the user, LOGIN SMALL LABEL ATTENTION
FESSIONAL. WARNING them of a delete.

Don’t use all caps for a Do use it on one item to

full sentence. make it stand out.
 A B 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 often Don’t reduce letter spacing to the point where there is
does not need to be changed for regular font sizes. no gap between the letters.

Consider changing the letter spacing when you increase the

font size. As a general rule, use less spacing between letters

Large Title Text

in larger font sizes.

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 -1px.
• Large font families
Do use consistent letter spacing throughout the de-
sign.
This enables text to be read more easily and allows more
room for other components like banners or headers.
 A
B “Too much line height will
doN’T
cause the text to feel too far
Don’t set line height >1.75

Line Height apart to be readable. for paragraphs

Paragraphs
Titles / Headers
Leading is the technical term for the line height of text.

Good line height gives more space for paragraphs and less doN’T Headers use
for headers, making them visually easier to read. Don’t set line height
>1.25 for large text less leading.
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
size. Consider the – do Titles should
• Size of the font. Larger fonts require less leading
Do reduce line
height to around fit closely
1.15
Regular paragraphs should
• Length of the lines. Longer lines need more leading
Do set paragraph have just enough line height to
body line height to
• Amount of text. More text needs less leading 1.5
be readable.

• Purpose of the text. Most headlines require less

leading than paragraphs or body text
 aa
FONT SIZE
FONT SCALING
Font Size When creating sizes for H1, H2, etc, use the Modular Scale
system to calculate font sizes for your text.

Font size for a website must be readable no matter the It is based on the harmonious relationship of sizes, making
device or viewport. it easy to find the right px amounts quickly.

Header 1
There is no “ideal” or “perfect” font size, but a good starting
point is 16px. From there, you can adjust as needed based Use 3.125em / 50px for H1
on the specific font you are using and the overall design of
your website. For example on larger screens you can even Header 2 Use 2.618em / 42px for H2
increase this to 18 or 24px.
Header 3 Use 1.931em / 30px for H3

Remember that not all fonts are created equal. Some fonts Header 4 Use 1.618em / 25px for H4
are easier to read at smaller sizes, while others are more Header 5 Use 1.194em / 19px for H5
difficult. Consider – Regular paragraph, avoid using
lorem ipsum as filler text. Use 1.0em / 16px for body P
• The amount of text on the page: If there is a lot Small labels, placeholder text above inputs, or other
small alerts. Use 0.667em / 11px for small
of text on the page, it may be necessary to increase
the font size to make text more readable.
TIPs
• The target audience: If the website is aimed at
To learn more about the Modular Scale and how it uses the
older users, it may be necessary to use a larger font t
golden selection to identify the best sizing
size. options for headers and text, visit the link below.

• The website’s overall design: Increase the font https://www.modularscale.com/

size if the website has a lot of other visual elements.
 Font Size Font size
Paragraphs Headers
Start with using a larger paragraph font size for desktop The header font size looks best when it does not break a
devices and then reduce the size only slightly for line. It undergoes a large reduction of size, up to 50%, for
tablets and mobile devices. smaller device viewports, compared to paragraphs (which
reduce by only about 25%).

Desktop Tablet Mobile Desktop Tablet Mobile

Large
Tablets offer an Mobiles
Large Header 1
Desktop screens are larger,
wider and closer to people’s
option between
desktop and
have limited
space, Large Header 1 Medium Header 2
Header 1
Medium
faces, so ensure you use larger reduce the
fonts. It will make text easier for
mobile. Slightly
shrink font sizes
size of fonts
to keep
Medium Header 2 Smaller Header 3
Header 2

people to read and absorb the to keep the design content

Smaller

content that is provided to them. closely related to for users Smaller Header 3 Header 3

the desktop version readable.

18-24 px with 0% reduction 16 px 10% reduction 14 px 25% 64 px -0% reduction 30 px-50% reduction 25 px -20%
reduction reduction

do don’t don’t do
Do use font size for Don’t start with Don’t set header Do use larger font
body paragraphs small desktop fonts size to be the same size for desktops and
between 18-24px. of below 16px. as paragraph text. tablets.
Do reduce font size Don’t use excesively Don’t oversize Do significantly
for smaller view- large font sizes of headers so that a reduce header sizes
ports by 10-25%. above 30px for text. line break occurs. for smaller devices.
 aaa

Font Weight Thin

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
Do increase font weight on
small text.
Small text like labels, toasts or on buttons, benefit
from being in bold so that they are easier to read.

Text
Medium
The larger the font
Do reduce font weight as The less weight needed
text size increases. to look good.
Do combine font weights in

Bold
large text to make Use combinations to
certain words stand out
your advantage!

Overwhelm
don’t
Don’t overuse bold on
Black
large & loud large text.

When the size of font gets smaller, it can become more

Don’t use very light
difficult to read. weights on small text.
 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

impairments.

Legibility • Using capital letters to emphasise important text.

• Using dark text colors for light backgrounds, and vice

Legibility is ensuring text is as easy to read as possible. 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
Don’t use the same sans-serif font for your Typography
headings and paragraphs.

Don’t overdo contrast or spacing to try and fit all the is two-dimensional
architecture,
text into a small area.

Don’t set the color or contast too low for text.

based on experience
Great legibility and imagination,
A good sentence needs to be large enough,
with good contrast and line height.
and guided by rules
and readability.
do
Do use sans-serif font that is smaller with only subtle
contrast or opacity to the header.
— Hermann Zapf
Do use serif for titles so that it stands out from the de-
scriptive text under the title.
 User Login
Keep things simple for users
without too many instructions

Username

Password

TEXT hierarchy Submit

If you have forgotten passwords can be reset by
clicking here.

Taking hierarchy into consideration involves thinking about

how each piece of the text relates to the others around it. Tips
This is important for legibility and findability, which in turn Size communicates hierarchy. The most important
support usability and learnability for user experience. pieces of information are usually larger, while the
least important are smaller.
The goal is to make it easy for users to find the information
they need, when they need it. Position the most important pieces of text are usual-
ly at the top of the page, while the least important are
For a login form, this would mean that the form fields and at the bottom.
the submit button are at the top of the hierarchy, and the
less important details (like the forgot password link) are at Colorful text stands out from the others is seen first,
the bottom. 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 should
Header 3
Roboto Bold, 32px, 1.5 line-height #EEE
look.

Decide on a few additional rules, such as line height and

Regular paragraph, avoid using lorem
spacing, that will give your schema a consistent, profession- ipsum as filler text.
al look. Consider the –
Desktop, Roboto, 24px, 1.5 line-height #EEE
• Typeface: pick a font for headers and paragraphs.
Regular paragraph, avoid using lorem Regular paragraph, avoid
using lorem ipsum as filler
• Sizing: decide on your H1-H6 and body text sizes. ipsum as filler text. text.

• 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. These • Accessibility: The ability for everyone to use it.
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
simple
• Grids • Badges

• Buttons • Cards

• Borders • Alerts / Toasts

• Shadows • Tables
but
• Icons

• Labels
• Breadcrumbs

• Tabs
significant
— Don Draper
• Dividers • Lists
 Spacing
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.
Tips
Spacing applies to margins, padding and distance from el-
ements and sections. To make a design look good, having If you are unsure how much white space to use,
predictable spacing is necessary. start your design with generous amounts of white
space, and slowly reduce this amount until you
reach a point you feel comfortable with.
• Consistency: Having all elements adhere to the same
spacing rules creates a cohesive design. It is easier to remove white space when it is abun-
dant than to add white space when there is too lit-
• Margins and padding: These define the amount of
tle.
space around elements.

• Distance: used in visual hierarchy and to draw atten-

tion to certain elements. Define spacing early on in Be consistent with how you
your project, and use the stan- apply spacing throughout your
dards set for negative spacing, project. If one button has 30px
• Accessibility: The ability for everyone to use it.
components, typography and padding, they all should.
icons.
• Gutters: These are the spaces between columns in a Set space the same for all comopnents.
Set and use the space sytem you create.
grid system.
 5 point spacing
Five unit increment variations are used for all spacing options.

SPACing 0 10 20 30 40 50 60
BaseLINE Units 5 15 25 35 45 55

We can set a baseline unit to be applied to elements like

grids, keylines, padding and more.
4 point spacing
Four unit increment variations are used for all spacing options.
We use increments of this baseline unit to ensure consistent
spacing throughout the design.

Common spacing options include 4 point and 5 point

systems, where a component has increments of 4, 8, 12, or 4 12 20 28 36 44
5, 10, 15 set for spacing.
0 8 16 24 32 40 48
don’t 16 px
do Tips
12px

Discard Submit
8 px

Submit Discard
Inconsistent spacing can look Using 4 point system, spacing 36px
unprofessional. can be consistent. The baseline unit can also be used to measure space between
Don’t use variable spacing (eg. 1,3,11,9)
elements. Use 12 px of space between buttons and other elements.
Do use increments of (4, 12, 24) for equal
for each side element spacing on top, bottom, left, right. Set all margins, paddings, and space between components in increments of 4.
 12 Column DESIGN
SPACing
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.

When placing elements on the page, place them within the

grid or columns. Use baseline units to set gutters as well.
HEADER & MENU CALL TO ACTIONS
Logo Menu 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 Description

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
Buttons B
Tips
For effective button spacing - set 1 EM padding for the top and
bottom, and 2 EM padding to the left and right
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

Change the font size and
This button is the main action you want a user to take. padding using EM values difficult to click for desk-
top and mobile users.
Do resize font size together with
• Secondary buttons button padding to retain legibility Don’t use less than 14px for the
on different viewports . font sizes on button text.
Alternative actions a user can select.

• Tertiary buttons Primary buttons use vibrant colors and are larger
Passive actions which are rarely used.
Primary 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
more padding around text, along with clear colors that Secondary often have smaller and lighter backgrounds to
reflect they are alternative actions users can take.
contrast against the background of a website or application
to make the button stand out. Tertiary buttons use simple outlines or no
Tertiary background because they are the least important
actions users take.
 Navigation
Apply a border to specific text (border bottom) to show an active item

BORDERS
on a header menu.

Home About Features Contact

Use borders to help separate information or content.

FORMS
You can apply borders to buttons, sections, containers, Use borders to help show active forms or to place focus on inputs.
menus and other elements. However, too many borders can
cause the user interface to feel overwhelming. First Name... A|

don’t do Curves
Too much color or A subtle border color Border radius adds curves to a border. If your design uses this
focus takes attention allows attention to asthetic, you can apply it to the buttons, inputs and components as
away from content. remain on content. well

Don’t make borders too light or dark in Do reduce the opacity or color of a border Email Address... Signup
contrast to their background to allow content to be more in focus.

Tips NO Borders
The more content or sections Keep borders light and simple to When in doubt, do not add borders. Less is is always more.
you have, the more borders can ensure they help separate
help to separate them. 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 effect we can apply to components to draw Add shade or tone to the box backgrounds to emphasize
attention to them. Adding shadow to an element also adds components. Creating darker and heavier shadows with an
depth to allow it to stand out. offset on the Y axis will create additional depth on a page.
Often, the darker and larger the shadow, the more depth. box-shadow:
Shadows should be applied gradually in minimal amounts. 0 Depth 0px 0px 0px 0px rgba(0,0,0,0);

You can also consider removing any component borders as

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

Shadow can be applied to:

box-shadow:
2 Layer of Depth
nd
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 top don’t do
• Separate different sections of the user interface.
Harsh Shadows Subtle Shadows

Use online resources to improve your shadows. The follow-

ing site by Brumm is an excellent resources to create shad- Don’t set opacity of shadows to full and
use them with borders.
Do use light shadow without a border. A
box shadow opacity of about 0.15 is great.
ows: 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 next Username
section) to provide your user visual information on what the 1
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. Forgot your password? Reset it by clicking here.

don’t do 2 Info: Missing password input

Save Save
Tips Tips
Icon is used to signal data is No icon was added to the
Discard Discard missing and that the user’ submit button as too many
attention is required. icons can be overwhelming.
Set appropriate icons for labels to give Set icons only when required. Too many
Don’t have different sized icons. Do use similar style and keep the size the user visual information on action required. can make a page feel clustered.
same as the text. (ie 18px font = 18px
Don’t use icons larger or smaller than font. height icon)

Don’t use low contrast icons that are hard Do space icons around 1em away from text
to see on a element background. equally.
 do
Info Label: Make sure you read this label before the comments below.

Labels Ensure that information based labels are read first by placing them
before content. Messages such as a successful change, or
requirements for a form should be placed at the top of the page.
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
that their attention is required, or if the user has to complete error. This allows the the element in focus to stay in position, while other
specific tasks. content is pushed down by the warning label.

Keep labels placed next to the item they are related to and Warning: Read this after an error to keep attention on element.

ensure the right color provides meaning. Don’t add warnings at the top or bottom of a page, but next to the element they are related to.

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
Information that the user should be aware of. be used for almost all situations user interaction. Pick the right color,
write a useful message, and display it in the correct spot.

The 3 common types of labels are – error, success and infor- Info: Notify the user with additional methods or context for their interactions.

mation. Pick the correct label for the the message you wish Set the right color for messages, with useful information that helps the user.
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
Use color to divide sections apart, especially in forms. This can allow you to
Dividers can take numerous forms, including:
group certain inputs together.

• A single line • Negative space

Firstname Country

• Color • Shadows Lastname City

Examples of where dividers are used include separating the

login from the register button, or group inputs in forms.
Negative Space Shadows
don’t do
Simply add space between content Adding box shadows as a divider
to divide them. If 15px is the between content is a subtle
standard gap, using 30 or 45px can approach with similar results to
Purchase Product Purchase Product be used to divide the sections. using color or negative space.
Size Small Size Small
Color Red
Color Red Firstname Firstname
Variation Kids
Variation Kids Lastname Firstname

Don’t cluster lots of information together Do add dividers where there are lots of
without dividers. grouped elements.
Country Country
Don’t add dividers when there is no Do add extra spacing between the divider
additional content such as below. and the elements.
City 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 components can
the function of design
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 provid- Full name
ed 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 ready
and waiting for action.
have provided valid informa-
tion.
don’t
Enter username... Enter email...
Email Email

name@mail.com janedoe@mail.com Strong colors on inputs can cause them to look like buttons.
Don’t use overwhelming borders or colors for inputs.
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
the user should know that name@mail.com
Error: username already taken Confirmed: username available

it is there, but can’t interact Outlines and labels with color can provide additional details about the
users information visually.
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- don’t do
cus allows the user to know it was selected.

don’t do Zip Code ZIP Code

White hover input... Enter username... Don’t size text inputs 11400
larger than the expected
content, in this example
Black focus input... Enter email... it’s too large for a Zip Do size the container
Code, also the user loses
proportional to the
Don’t dramatically change the style on Do add changes of only 5% - 15% for tint or track of the field because
hover, like having inputs go from white to shade added to the background of an input
placeholder disappears expected user input,
black. color change.
after input is focused or also the placeholder
Don’t add extra styling elements like a bor- Do take away styling that doesn’t change has value. is not replacing the
der of 2px that changes the height or layout height or width, such as having the border
of an input color the same as background color. label.

Buttons vs Inputs tips

The style for buttons and inputs can be confused if not prop-
erly designed. Ensure there is specific differences between a
Email
button and input.

don’t do
Username... Enter username... Instead of using the outline property to indicate the fo-
cus state, you can use the box-shadow property which is
Submit Form Enter email... more flexible and lets you achieve a better look.

Don’t use the same style for borders or Do add changes of only 5% - 15% for tint or
background for a button and input. shade added to the background of an input
color change.
Don’t add extra styling elements like a bor-
der of 2px that changes the height or layout Do take away styling that doesn’t change
of an input height or width, such as having the border
color the same as background color.
 tips
sizing Full Name

Jane Doe
Most use cases don’t require more than 3 input sizes: small,
Enter your first and last name
default and large. As a good rule of thumb you can use the
following defaults: • Spacing between label, input and helper text should have a ra-
tio of 2 / 1.
• Spacing from label to input: 8px

small default • Spacing from input to helper text: 4px

• Height / Horizontal padding

ratio: 2 / 1
• Height / Horizontal padding
ratio: 2.5 / 1 do
• Height: 32 px (2 rem) • Height: 40 px (2.5 rem) I
• Horizontal padding: 16 px (1 • Horizontal padding: 16 px (1 Input with icon

I
I

I
I
rem) rem)
When adding icon’s, apply the same 1em of padding between it and
Full Name
Full Name
40px /
the text following the input.
32px / Jane Doe Jane Doe
2rem 2.5rem Do use the same spacing between the left and right padding as applied for icons and text.
16px / 16px /
1rem 1rem

don’t do
large First Name
Account Details
First Name Last Name
Last Name
• Height / Horizontal padding Login Details
Username
ratio: 3 / 1 Username
• Height: 48 px (3 rem) Password
• Horizontal padding: 16 px (1 Email Password
rem)
Having too many inputs grouped Simple structure and layout
Full Name
together is overwhelming. makes a better user interface.
48px /
3rem Jane Doe
Don’t add lot’s of inputs in a sequence Do use labels and space to make
16px / with no space or grouping. inputs easy to see and enter.
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 ex-

plain 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
FORM CHECKBOX turn off notifications. pop-ups.

STATES Don’t place multiple checkboxes on the same line

Don’t write confusing effects to “enable to turn off”

Don’t write the labels using lowercase and full stops

1. unchecked 2. checked
Tomato Tomato
do
Turn on notifications
The input checkbox is The input checkbox is Enable pop-up
not selected, this is the selected.
default state. Do wrap the label around the clickable checkbox
item

3. indeterminated Do frame the wording positively with labels

Do start with a capital letter.

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 catego-
Bacon Lettuce Mushrooms
ry is neither fully checked nor unchecked.

You can give users a bigger hit target and clearer

interaction cue by converting your checkboxes into
check tokens.
sizing
16px / 1rem Tomato
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 Size
of mutually exclusive options.

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 default, label
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 do
What do you want on the
Select account type

selected burger?
cheese with
bacon
User account
Business account
Mayonnaise
The input is selected
Don’t have overflow to Do let text wrap be-
Medium additional lines. neath the radio but-
ton so the control and
Don’t use confusing neg-
label are top aligned
ative statements and
similar option options. Do start with capital
letter
unselected Don’t forget to ensure the
label wraps the whole
Do include mutually
exclusive options
item to allow the input to
The input is not selected be clickable when select- Do use label tags as
ing text. click targets

Medium
tips
• Have the most common
option selected by default
Difficulty Difficulty
whenever possible.
Easy Easy
Medium Medium • When having less or equal
Hard Hard than 5 options, use a radio
button instead of a select
Don’t Do (Dropdown), as dropdown
menus require an extra
step and they hide the
options.
 sizing
8px / .5rem
Size
Small
6px / .375rem Medium

bad design shouts at 20px / 1.25rem Large

8px / .5rem
you. 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 fin-
ger. To ensure a good user experience, both the radio button
and its associated label should be increased in size.

seller. Font-size 16px / 1rem

— Shane Meendering
Small
Medium
Large

24px / 1.5rem
 FORMS
Label Character indicator

textarea Review your purchase 82/100

Textarea inputs are used for freeform data entry, allowing
users to type in multiple lines of text. They are made up of a
number of elements inlcuding: This product has completely sur-
passed my expectations. Keep
• Label to indicate the users the information request-
ed up the excellent work!
• Character indicator to inform character limit and
how many are used
Leave your comments here
• Multi-line input to data entry
Multi-line input
• Help text to give additional guidance about what 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 is indicate the users that they
selected and that they can have provided valid infor-
Full name
start typing. mation.
input Jane Doe
Enter your first and last name
Review your purchase 0/100 Review your purchase 82/100

This product has completely

surpassed my expectations.
Keep up the excellent work!

Review your purchase

This product has completely sur-

82/100
DISABLED INVALID
passed my expectations. Keep
textarea up the excellent work! The disabled state is when
the user should know that
The invalid state is used to
indicate the users that they
it is there, but can’t interact have provided invalid infor-
Leave your comments here
with it. mation.
Multiple-line field Review your purchase 100/100
Review your purchase 0/100

This product has completely

surpassed my expectations.
Keep up the excellent work! It’s
the perfect
Maximum 100 characters
 don’t tips
Email
• When no text, make Review your purchase

the message sim-

ply indicate te max
number of charac-
Don’t use textarea for single-val-
ters Maximum 100 characters

ue text
Review your purchase

Don’t make a full page width tex- This product has completely • As you type, add a
tarea on desktop surpassed my expectations. remaining characters
Keep up the excellent work!
text
Don’t rely on the placeholder text
Maximum 100 characters (8 remaining)
as label

Review your purchase

• When you reach the
do limit, change the
border to red; make
This product has completely
surpassed my expectations, just
what I was looking for. Keep up
Review your purchase 0/100 any excess text a the excellent work!
different color Maximum 100 characters (111 too many)

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

look at
or confusing.

Finding the right balance is key to ensuring a successful

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
• Spacing between label, input and helper text should

8px /
.5rem
have a ratio of 2 / 1

unusual eyes
— Vico Magistetti
Review your purchase 82/100

This product has completely sur- 100px /

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

Leave your comments here

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 compo-
nents:
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.
states don’t do
Do you want to Show average price
see average price?
Do keep labels short
No Yes and direct

Don’t use “on” and Do use a high-contrast

“off” text next to la- color to signal state

on bels as they introduce

unnecesary clutters to
the UI
change

The toggle is turned on. Don’t use question

labels

Don’t include the text

“ON” and “OFF” with-
in the graphic itself.

OFF It makes ir harder for

users to decode the
current state
The toggle is turned off.

tips
Toggle switches should take immediate effect and should
not require the user to click Save or Submit to apply the
new state.
sizing
8px / 18px /
.5rem 1.125rem

Show average price

24px /
1.5rem
people
Font-size 14px / .875rem
48px /
3rem ignore
8px / 22px /
design that
ignores people
.5rem 1.375rem

26px /
Show average price 1.6rem

Font-size 16px / 1rem

— Frank Chimero
48px /
3rem
 FORMS Label Container

dropdowns Choose a country

Dropdown boxes and menus are a great way to present a list - Select -
of options to the user.

They consist of four main components:

Placeholder Dropdown arrow
• 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 infor-

mation hidden inside the container.
selected open
This is how the dropdown should look like when an op- This is how the dropdown should look like when is open:
tion is selected:
Divider Scroll bar
Choose a country
Choose a country
Australia

Afghanistan
Selected item
Albania

Algeria

American Samoa

Menu item / option Dropdown menu

error don’t do
This is how the dropdown should look like when an error Turn on notifications? Choose a country

occurs:
Yes - Select -

Don’t have a default Do use a select when you

Choose a country option selected here, have five or more op-
user may be submitting tions. Otherwise consider
something they wouldn’t using a radio button.
- Select - want to.
Do list options alphabeti-
Don’t use dropdowns cally or in another logical
Please complete this field when you have less than order.
five options.
Do use a generic ‘Select’
Don’t increase cognitive / ‘Choose’ and then the
load by adding unneces- thing you want them to
Feedback text sary options. select.

tips
Choose a country

United

United Kingdom

United States

When having fewer options is not possible, consider using

Type-ahead, so that the users don’t have to scroll through
all the options to find the one they need.
sizing open
dropdown Choose a country

- Select - 1px /
8px / Choose a country .06rem
.5rem 40px / Afghanistan
40px / 2.5rem
- Select - 2.5rem
Albania

Width can vary Algeria

Font size: 16px / 1rem American Samoa

16px / 1rem

error
Choose a country

- Select -
4px / Please complete this field
.25rem

8px / 16px /
.531rem 1rem
 FORMS
submit button Button

Submit buttons are an essential part of web design, as they

allow users to submit form data to a website.
Create Account
Submit buttons are made up of two main components of
user interface:

• Label to describe an action

• Button that performs the action in the label once it is Label

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 Cancel
SUBMIT

Don’t use text that is technical, like “Submit”.

Don’t make submit button similar to secondary action.
4px / .25rem Don’t use all caps in a submit button, they decrease readabili-
ty.
Don’t be redundant and use copy like “Create new account”,

Create Account
it’s implicit that creating something will result in something
new.

8px / .5rem
do
Cancel Create Account

Do describe exactly what the user is doing in their task.

Do keep a clear difference between the submit button and sec-

ondary actions.

Do put both primary and secondary actions at the bottom left

of a form (the user’s eye naturally come to rest at the bottom
-left of a form).
 tips

Your order: Your order:

1 Cappuccino
1 Muffin
1 Cappuccino
1 Muffin good design is
obvious
1
1
Place order 3 Save for later

2 Save for later 2 Place order

The user first reads In this example the great design is

transparent
“Place order”, then user reads “Save for
“Save for later” and later”, then “Place or-
then the user’s eye has der”. Eye movement
to go back to “Place stops there because
order” again. is probably the action
they want to take. — 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.

They are composed of three main components

Licensed
• 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, prog-
ress 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
Incorporating informative badges into your web design can
positive be a great way to provide visual cues to users.

When designing positive badges, use a green background When using badges, make sure to use a blue 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 more This will help users quickly understand the status of the
enjoyable user experience. page or feature they are viewing.

Licensed Live

Negative tips
When creating negative badges, it is important to use a red
background color to clearly differentiate them from posi- 32
tive badges.

The labels should be clear and direct, such as “Error,” “Re-

jected,” “Alert,” or “Failed.” This will ensure that users un- A badge can be
derstand the message being conveyed and take the appro- placed within a button
priate action. or other items to be
used as a counter.
Rejected
 don’t do sizing
SHIPPED Shipped
small
Don’t use more than Do use short and scan-
one word whenever nable text. The small size is the default and most frequently used op-
possible (only use two Do capitalize text. tion.
words for complex
states like “Partially Do keep badges smaller
shipped”). in size than buttons, as 3px / .188rem
Don’t use all-uppercase they can easily be con-
as it decreases read-
ability.
fused by. 8px / .5rem Licensed
Don’t use semantic
colors and labels incor-
rectly. Font-size: 13px / .813rem
Don’t add interaction to
a badge.
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.
tion. This helps to build trust between the user and the sys- 10:08:00 AM
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

glance Time stamp Close
button
• 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 noti-

fication was sent
 don’t tips
An error occurred
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 notifi-
cations do a better job for this.
Don’t make toasts a permanent part of the UI, they When creating a new resource use the CTA button to
should dismiss after five second and also users should take them to the newly created entity.
be able to close them before that time window.

Don’t use toasts for marketing information or up sell.

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

The message text of this notification goes here.
Do dismiss toasts automatically after 5 seconds on the
screen.

Do provide a close button. Only display two toasts at one time and when more
than two, fade out the previous one.
Do provide information on how to resolve the issue by
including any troubleshooting actions or next steps.
sizing
• Width and height can vary based on content.

16px /
1rem
20px / Font-size: 13px /
1.25rem

everything is designed.
.813rem

Notification title
The message text of this notification goes here.
10:08:00 AM
Action

few thing are

14px /
designed well
— Brian Reed
.875rem
 breadcrumbs 1
Breadcrumbs inform users of their current location, and
enable them to quickly move up to a parent level or previous
step. Categories / Women / Shoes
Use this pattern when you have nested content organized in
a hierarchy of two or more levels. Don’t use it if your prod-
uct has a single level navigation because it adds unneces- 2
sary 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
Home / Women / Apparel dolor. Aenean massa. Cum sociis
natoque penatibus et magnis
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
Do make it clear that is a link that will redirect them out Product-detail page, they may want to see other product
of the current page. options in that same category, so a breadcrumb linking up
to the parent level in the hierarchy will suffice.
Do include the current page as the last item in the
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 priori-
ty.
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
 Header row

tables Search

Sorting

Tables are used to display groups of information across rows Search product by name

and columns.
Product Category Price Date modified
Use it when you need to display a collection of structured
Avocado toast Breakfast $10.00 02/05/2021
data, and you want to provide sorting, searching, pagination
and filtering on this data. Hotcakes Breakfast $10.00 02/23/2021

Tuna salad Lunch/Dinner $15.00 03/21/2021

They are made up of the following UI components: Rows
Smoothie Snacks $15.00 04/02/2021
• Search to find information faster
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 100

• Sorting to sort information

• Row checkbox to select different rows

Pagination
• Columns that group content by its type
Row checkbox
• Rows that contain data related to a single element
Columns
• 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 it

• Column header text uses a medium weight font to differ- makes them a bit more easy to follow.
entiate from row text.
Product Category Price Date modified
• 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

Product Category Price Date modified

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.
 UX TIPS tips
Search product by name

Product Category Price Date modified

Avocado toast Breakfast $10.00 02/05/2021

Hotcakes Breakfast $10.00 02/23/2021 Hotcakes

Price: $10.00
Spring rolls x 12 Snacks $20.00 05/22/2021
Category: Breakfast

Make columns resizible when managing large Avocado Toast

amounts of information. Price: $10.00

Keep column headers fixed when scrolling down, and Category: Breakfast
the first column should be locked if the users scrolls
horizontally, this will help on giving context to the Smoothie
data.
Price: $15.00

Provide sorting and filtering for quicker access to Category: Snacks

data.

When working on mobile version of the table consider

transforming the data. The main goal here is to collapse
the table rows into separate cards. Be mindful of the in-
formation that you include, most of the time you won’t
need all the columns in mobile.
 don’t do
Dish Garnish Category 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
Hotcakes Breakfast $10.00 02/23/2021
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 scan this way.
Don’t use unnecessary borders as they clutter the UI.
Do add clean contrast between the header row and the
Don’t use things like infinite scroll or load more, as this remaining rows.
decreases usability. Use pagination instead.
Do keep text aligned to the left as it’s easier to read.
Don’t put similar data types in two different columns.
If you have a dish with a garnish you can group those in Do keep numbers aligned to the right.
one column.
Do use colors to mark significant data.
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 resize the
column.
sizing short
Product Category Price Date modified

columns Filet Mignon

Hotcakes
Lunch/Dinner

Breakfast
$30.00

$10.00
02/05/2021

02/23/2021

Product Category Price Date modified

Filet Mignon Lunch/Dinner $30.00 02/05/2021 32px / 2rem

w/smashed potatoes

expandable
Hotcakes Breakfast $10.00 02/23/2021

16px / 1rem 16px / 1rem

16px / 1rem Column width can vary

Product Category Price Date modified

rows
Eclair Pastry $10.00 02/05/2021

Chocolate

default 24px / 1.5rem

48px / 3rem
Product Category Price Date modified

Filet Mignon
w/smashed potatoes
Lunch/Dinner $30.00 02/05/2021
pagination
Hotcakes Breakfast $10.00 02/23/2021

Width varies based on content and layout 16px / .875rem

48px / 3rem
Granola Snacks $7.00 05/14/2021

Rows per page 25 1 2 3 10

48px /
1-10 of 100
3rem

16px / 1rem
 lists Style
indicator
1. Directions
1.1. Stir together
Lists are vertical groupings of related content. List items 1.2. Chill
begin with either a number or a bullet.
1.3. Roll into balls
They are made up of three mainUI components:
List items 1.4. Serve
• Style indicator to indicate the style of the list, e.g. or-
dered or unordered
Text
• 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 complex sizing
lists • Font-size: 14px.

contact list unordered list

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

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
Adobe Illustrator
2.3. Roll into balls
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
 don’t do
How to register for the conference: How to register for the conference:
1. choose the day you will attend
2. pick the workshops you wan to join 1. Choose the day you will attend
3. enter your discount code (if you have one) 2. Pick the workshops you wan to join
3. Enter your discount code (if you have one)
Don’t start lists with lowercase letter, always use up-
percase. Do use indentation to specify a subset of a list item.

Don’t add list item children at the same level as the Do use bulleted lists when you don’t need to convey a
parent. specific order for list items.

Do use numbered lists when you need to convey a prior-

ity, hierarchy or sequence between list items.

Do organize lists alphabetically of following a logical

order.

Do indent most types of lists after the lead-in.

Do indent stand-alone lists if it helps the user scan the

list.
 Price estimated

tooltips $23.00
Tooltips are used to display additional information when
the user hovers over, focuses on or taps an element.
How is this price calculated?
They should be used to add non-essential, useful informa- Container
tion. Actual prices will be calculated
at the warehouse when we mea-
They are made up of two main UI components: sure and package your items.
Text
• Container to hold the text

• Text to show additional information about the ele-

ment
 don’t do
PRINT PRINT
Print +P

Print +P
Print +P Print +P

Don’t use tooltips to restate visible UI text.

Do include short, descriptive text.
Don’t display shadows on tooltips. Do use make tooltips appear on hover, focus or touch,
and disappear after a short duration.
Don’t display rich information and imagery on tooltips.
Do place them nearby the element with which they
Don’t put UI components in tooltip. are associated.
Don’t crop tooltips. 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 prox-

imity

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

How is this price calculated?

A user interface is like
16px /
1rem Actual prices will be calculated
16px /
1rem
a joke.
at the warehouse when we mea-
sure and package your items.
24px /
1.5rem
if you have to explain it,
Browser edge
≥ 16px / 1rem
it’s not that good.
— Martin LeBlanc
 Thumbnail

cards Header text Subhead

Cards are box containers that hold pieces of information.

They have content and actions about a single subject. Maki Rolls
Best in town!

Card layouts can vary to support the types of content they

contain, the only required element in a card is its contain-
er.

Some of the most common UI components are: Media

• Container that holds all card elements

• Supporting text (optional) e.g. a restaurant descrip- Lorem ipsum dolor sit amet, consectetuer
tion adipiscing elit. Aenean commodo ligula
eget dolor. Aenean massa. Cum sociis
natoque penatibus et magnis dis parturi
• Buttons (optional) for actions ent montes, nascetur ridiculus mus.
Donec quam felis, ultricies nec, pellentes
• Icons (optional) for actions
Action1 Action2
• Media (optional) like photos and graphics

• Thumbnail (optional) to display an avatar, logo or Supporting Buttons Icons

icon text
Container
• Header text (optional) can be the name or a photo

• Subhead (optional) such as an artivle byline or a lo-

cation
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 indi-
Don’t use the same border radius from inner elements cate areas of a card that can be expanded.
and the container. Do use the appropriate heading level for your page. Up-
Don’t center align text, it’s more difficult to read. date heading level based on the content of your page to
make sure card headings are in the correct logical out-
Don’t use too dark shadows. line order.

Don’t visually clutter the card, use appropriate white Do make the whole card the primary action if no primary
space between elements. 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 with a course, you can request a
Some of the most common UI components are: Panel
refund.
For steps on how to request a refund, please click here.
• 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 ac-

Header
cordion header

• Summary text (optional) that contain a summary in-

formation of their content Trip name Caribbean cruise

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 can request a
refund.
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 question in the Q&A
or ask the instructor.

is good design Make sure to give people the capability to open multi-
ple sections at a time so that different chunks of con-
tent are readily available.
— Steve Ballmer
Don’t use accordions when users need most of the
content on the page to answer their questions.
 don’t do
How can I pay for a course? How can I pay for a course?

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. All courses purchased can be refunded within 15 days.
If you are not satisfied with a course, you can request a If you are not satisfied with a course, you can request a
refund. refund.
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.

Don’t use other icons than the caret, this is the most
familiar icon for users. Do make the icon wrapper at least 16px by 16px.
Don’t make only the caret icon be the expandable ac- Do make the whole header expandable.
tion target.
Do rotate the caret when the accordion is expanded,
Don’t place the icon at the start of the accordion otherwise keep it pointing down.
header.
Do make the contrast a bit lower of the summary infor-
mation text.
sizing conversions
24px 16px 16px 24px

48px Trip name Caribbean cruise

rem px
16px

.5 8
16px
64px
Location
16px

1 16

16px
1.5 24
16px

2.25 36
36px CANCEL SAVE
16px
16px

48px Start and end dates Start: Feb 29, 2016 End: Not set

16px 16px 16px

3 48
24px

• Header must be shown as primary content

8px 24px
4 64

• 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
indicator
Inactive text label Tab item
• 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.
SAVED INBOX PROFILE
Don’t nest a tab within another tab.

Don’t place tabs below one another.

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 switching between tabs.
SAVED INBOX PROFILE
Do make targets big enough to be easily tapped or
Do place icons at the top of the label.
clicked.
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 INBOX PROFILE

design is a formal
2px / 16px /
.125rem 1rem
1px /
.063rem

• High contrast between foreground and background color of

text, icon and tab indicator.

• Although low contrast between foreground and background

response
color of inactive tabs, both text and icons are readable. to a strategic question
• Font-size: 14px — 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 and

iconography
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.

Icons are meant to be read at a glance and are typically cre-

ated on a square (1:1).
20px 24px 32px 40px

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-
Dashboard
tency across a set of icons.
Chat
do don’t Teams
Tasks
Dashboard Dashboard
Chat Chat Navigation items Buttons
Teams Teams
Tasks Tasks • Outline icons should be used for primary navigation
allowing you to have the filled icon when it’s selected,
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 center Complex icons are best suited when they are rendered at
aligned and the same color as the text. 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 / 3rem 24px / 1.5rem

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.
Dashboard

don’t do Chat
Teams
Tasks Delete

Do remember your icon’s context and purpose. Your

context can significantly alter how you approach
designing icons. Where will your icons be used?
Will they be implemented in an app’s interface, on a
An user might be con- The hamburger icon marketing website?
fused about what this has become the stan-
icon does. dard to squeeze navi- Do consider adding a label to the icon when possi-
gation into a scrollable ble, this makes the icon more accessible.
overlay that is hidden
by default. Do consider adding a tooltip to icons that are not
next to text, this will help clear any confusion the
user might have.
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 /
24 x 24px
Inbox Font-size:
16px / 1em
everything you
1em can imagine is
real
1em = Current computed font size (16px)

1.6em/
32 x 32px
Inbox Font-size:
20px /
1em
— Pablo Picasso
1em

1em = Current computed font size (20px)

 Image avatar

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

• Image avatar
Icon avatar
• Initials avatar

• Icon avatar
usage sidebar user settings
Although avatars may appear in different places, the same User settings are usually found on the lower left side of an
image, initials or placeholder should appear for a given ob- application, and they often are represented with the avatar
ject instance throughout the application. 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 information providing additional information
the dropdown selection for
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, e.g.
The indicators that show if the user
when viewing a large list of is online or offline.
contact information. These status indicators should live
in the lower right hand of the avatar.
Preferences
Information by notifications and
3
Theme
Jane Doe visual feedback with a numbered
label.
Web Designer
Sign out
London
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 placeholder Save photo

avatars.
Don’t make avatars square, is an industry standard to When the user is adding a picture provide a basic
use rounded avatars. 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 bor-
ders of the circle.
do 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 Gardner
Do keep good contrast with the avatar background color,
50% completed
when using an avatar with initials or icon.

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
• Easily embedded
Robert May in a contact list
robert@mail.com
and similar repet-
(03) 9830 7761
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.

The purpose of visual hierarchy is that the end users find

each design element in the order of intended importance.
made visual
— Saul Bass
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.

Do make the primary call to action stand out so that

users can clearly detect the main purpose of the page.
Don’t put together multiple elements with little to none
space between them, this makes it difficult to find clear Do leave appropriate space between elements, this
focal points. makes the page much easier to read.
Don’t clutter the UI too much, few users will be
willing to parse through the visual clutter.
 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.

1 2

visual hierarchy 3 4

visual patterns 5

Users typically scan a website instead of reading every

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

E.g. company logo on the upper left as it’s the first thing the
users look at.
3 4
 visual hierarchy
how to alter good art
visual hierarchy? inspires,
There are many factors that can play a role in visual hierar-
chy, let’s take a look at some of them:
good design
motivates.
• Size • Alignment

• Text • Consistency

• Buttons • Negative space — Otl Aicher

• Inputs • Visual harmony

• Color

• Contrast

• Proximity
 ABC
visual hierarchy
size & text
Sizing is a very basic yet powerful principle that can give people don’t use a product
elements more importance than others and help draw the
viewer’s attention towards a certain area or element. because of the great
The bigger the element, the greater are the chances that a
user will scan it first. People scan bigger things first. design;
The smaller the element, the more likely the user is going to
leave the element to scan it last. People scan smaller thing
great design helps them
last.
use the product.
For text, we can significantly increase the importance of an — Viran Anuradha Dayaratne
element by increasing its font size.

As a good rule of thumb, make sure the most important text

to stand out first and foremost.

You want the user eyes to see titles first, lead paragraphs
second and less important sections last.
 don’t do
There is no clear hierarchy es- 1 The user sees the name of
1
tablished between the name, the the person first because it
occupation and years of experi- has the largest font size.
ence.

The second element the

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

The only difference in hierarchy

comes from the order of reading. Last, the users will see the
3 From top to bottom, first John 3 lead paragraph which has
Doe, second Senior Developer the smallest font size.
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 first in order.
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 so
Playlists for every moment.
Get the perfect playlist for any mood.
Every mix is carefully compiled, and each
Title

Lead
40px

24px
simple
song flows naturally from the one before.
that’s why it is so
Ac vi es

Everything deserves a soundtrack. And now

everything has one - wheter it's cooking,
running, dancing, working out, or kicking back.
Sec on
21px
complicated
— Paul Rand
Moods

Listen to music that matches your feelings, from

relaxing to celebra ng and everything in
Sec on
between.
 visual hierarchy if you find an element of
your interface requires
buttons instructions,
Sizing can also be applied to buttons to not only distinguish
them from other elements on the page but also from each then you need to redesign it
other, as multiple buttons are often grouped.
— Dan Rubin
For instance, a primary action button should be more visu-
ally dominant than a secondary or tertiary action button.
 don’t do
Both buttons have the In this example the
Full Name same size, although Full Name “Save” button is larger
the “Save” button is in size than the “Add
Country more important and Country Region” button making
should be more promi- the “Save” button be
Region nent that the “Add Re- Region the primary focus of
gion” button. the form.
+ 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 smaller
beautiful, functional
imagery
to not distract the users focus from the main action.

— Lisa Manson
don’t do
By reducing the size
of the search input we
Both search input
now put users focus
and email input have
on the email address
the same size which
input, encouraging
can prevent the user
them to subscribe.
to focus on the pri-
mary action, which is
subscribe.
use case 1

Let’s go ahead and improve the following landing page There is no clear hierarchy between the main title, paragraph,
using the concepts we just learned. navigation links, so let’s go ahead and fix that by giving the
main title a bigger font size and make it the first thing the user
Blog About Home
sees on the page.
Contact me

Company Logo

I build performant web apps Blog About Home

Contact me

I’m John Doe, a fullstack Company Logo

developer with an eye for

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

Enter your email address

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 build performant styles come and go.

web apps
I’m John Doe, a fullstack developer with
an eye for design.
good design is a language,
Enter your email address not a style.
Subscribe
— Massimo Vignelli
 thinking about
visual hierarchy
design is
color hard,
Color can be used to drive users’ attention to specific ele-
ments in the screen, therefore affecting the overall hierar- but not thinking
about it can be
chy of the design.

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 for

the body text and a more saturated color for the title.
don’t do
tips We Build Awesome We Build Awesome
Web & Mobile Apps Web & Mobile Apps
We cultivate expertise in every stage of product creation, We cultivate expertise in every stage of product creation,
resulting in extraordinary digital experiences. resulting in extraordinary digital experiences.

We Build Awesome
Web & Mobile Apps
Don’t make the body Do make the title have
We cultivate expertise in every stage of product creation,
resulting in extraordinary digital experiences. text have the same a higher contrast than
color and contrast as the body text.
the main title.

Within a title you can increase the hierarchy

of a single word or phrase by choosing a dif-
ferent 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 on the action
don’t
you want the users to complete.
Request Demo Watch Video

You can achieve this by giving more important buttons or ac-

Don’t make secondary actions have the
tions a full background color that is the same as the primary
same color as a primary actions, this con-
color of your palette of choice.
fuses users on which action they should
complete first.
Give less important actions either a link style by underling
the text and making the color be the primary color, or an al-
ternative can be an outline or ghost button.
do
Watch Video Request Demo

Do make the primary action have the pri-

mary color of your palette and the second-
ary action have an outline or ghost style.
Destructive actions should also be given a different color By doing so there is a clear sense that the action is import-
than the rest. ant and might not be possible to undo it.

You should use the red color for actions that can’t be un- In the next example, the delete account button color gives a
done, for example permanently removing an account. clear visual cue to the user that is an important action.

don’t do
Delete Account Delete Account
Are you sure you want to delete your account? Are you sure you want to delete your account?
If you delete your account, you will permanently If you delete your account, you will permanently
lose your profile, messages and photos. lose your profile, messages and photos.

Cancel Delete Account Cancel Delete Account

Don’t make the destructive action Do use a red button to warn users
button have a normal color like blue. they’re about to commit a dangerous
act.
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 a age the user to pick a certain pricing plan, for that you can
focal point you can use a different color to emphasize one of change the background color of a specific plan to make it
them. more prominent and eye catching.

don’t do

Do use a different color to establish a

Don’t make all the cards look the same,
clear focus point and encourage the user
use a different color to emphasize the
to pick the pricing plan of your choice.
most popular plan.

Do use color psychology to convey

different emotions on the user’s
perception. For example, green and
blue can be used to suggest comfort
while black can be used to convey that
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 im- outline or ghost button so that it doesn’t dis-
prove 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 I build performant

web apps web apps
I’m John Doe, a fullstack developer with I’m John Doe, a fullstack developer with
an eye for design. an eye for design.

Enter your email address Enter your email address

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.

design
Blog About Home
Contact me

Company Logo

I build performant
web apps
I’m John Doe, a fullstack developer with
an eye for design.
is good
Enter your email address

Subscribe business
— 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 I build performant

web apps web apps
I’m John Doe, a fullstack developer with I’m John Doe, a fullstack developer with
an eye for dessiign. an eye for design.

Enter your email address Enter your email address

Subscribe Subscribe

don’t do
Don’t: There’s no clear visual hier- Do: We created a focal point on the
archy between the contact me and subscribe button by changing its col-
subscribe button, this creates con- or and make it more prominent than
fusion on which action users should the contact me button.
focus first.
Do: We created a clear distinction
Don’t : Both title and paragraph text between the title and the paragraph
have the same color, making it more by choosing a lighter shade of black
difficult to figure out what to read for the paragraph.
first.
Do: We highlighted the word perfor-
mant to create a focal point within
the title.
 visual hierarchy
contrast design isn’t finished until
In web design, contrast is the practice of making elements
look different from each other in order to make the import-
somebody is using it.
ant elements eye-catching while others less so. — Brenda Laurel
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 combination creates strain on the
eyes.

Don’t use heavy shades of color together, it makes

it more hard to read.

In this example our eyes are drawn to the lighter circle, because
do
it has a higher contrast than the rest.

Request Demo

Do pick a foreground and background color with a

contrast ratio of at least 4.5:1.

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

Elements that are most important or need to be looked at This is a subtitle

first should be given a bigger size, the contrary applies for
less important elements. This is the paragraph which usually
contains more text than the title and
subtitle.

Don’t choose the same size for every text, this con-
fuses the user on where they should start reading.

do

In this example our eyes are drawn to the bigger circle, because
4x This is a title
bigger elements are scanned first.
2x This is a subtitle
1x This is the paragraph which usually
contains more text than the title and
subtitle.

Do choose different sizes for title, subtitle and

paragraph. This creates a clear hierarchy of what to
read first, second and last.
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 un-

necessary elements, this will result in a much more clear
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, instead make use of a slightly different
shape in this state to make it stand out.

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 Home About Works Contact us

A digital
product design

The details are

agency

not the details,

You can play around with the shape and rotation of a
specific word in a sentence to create a focal point and
they make the
design
awake a particular emotion on the user.

— Charles Eames
 don’t
visual hierarchy Don’t group together unrelated
elements, this may camouflage

proximity
Logo
them from users.
Users

Payments
In the sidebar example, all
Reports seems to be part of the same
Proximity is the practice of placing related elements close
group.
together and separating unrelated elements.
Log out

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- do

tion, creates contrast and makes a lasting impression.
Do use different amounts of
Logo
white to consolidate groups,
and to separe groups from each
Users
other.
Payments

Reports In the sidebar example we use

less white space between the
navigation items to make it clear
Log out
they all belong to the same
Whitespace separates the shapes into two distinct grouping group.
through the principle of proximity. Even when including differing
shapes within each group, these two groupings are still clear. We use more white space around the logo and log out
button to separate them from the navigation items group.
How to use proximity in forms? tips
Proximity plays an important role in how users scan form
elements. Personal Information
First name
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
Label makes it hard to associate a form group. Group 2
Password
Don’t use the same amount of white space
Label
between the label/input and the next label.

Do group related fields together, you can help

users understand why they need to fill in this
do information.

The fields in the above example are categorized

Label Do place labels closer to relevant fields, this into two groups (personal information & account
makes a form easily scannable and increase information).
Label the chances of successful completion.

Do use more white space between form

Label
groups (label & input) to establish clear
groups.
 Titles related to specific paragraphs should be kept closer to
How to use proximity in text? 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.

don’t do
Company Home About Works Contact me Company Home About Works Contact me

Build next generation Build next generation

apps with our AI software apps with our AI software
We are a group of dynamic developers
that want to change the word with AI.
We are a group of dynamic developers
that want to change the word with AI.
Let’s talk
Let’s talk

Don’t leave large gaps of white space between the Do keep the title and paragraph close together,
main title and paragraph. this gives the user the feeling they are both part of
Don’t keep the company logo and main navigation the same group, making it easier to scan.
items close together. Do space out the company logo and the navigation
items, this clearly suggest the belong to separate
groups and can be scanned separately.
 Use additional space buffer to separate groups. This will
use proximity in larger layouts 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 small-
er than the space to the next group.

don’t do

Don’t leave the same amount of white space Do space out group elements, this will make it
between group elements, this gives the easier for the user to find specific groups.
impression that every group is related to each
other, making it harder for the user to scan the Do add buffer to the call to action and the aside
page. menu.
 This example of proximity applies better spacing and prox-
How to use proximity in PRODUCT imity of elements to represent information in an easy to read
format.
CARDS?
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 all this information is related to one product.
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
1 Use proper spacing between navigation items to make it
clear they are all part of the same group.

Blog About Home Contact me

Company Logo

I build performant
everything
web apps
I’m John Doe, a fullstack developer with
an eye for design. is design.
everything!
Enter your email address

Subscribe

— Paul Rand

2 3

Let’s close the gap between the Reduce the space between
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 cre-

ate 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 Do align both cards to the top. This makes it clear
as it makes it more difficult for users to scan a that although they serve different purposes they
page and find related elements. are both related to each other.
centered Vertical Alignment horizontal ALIGNMENT
When the height of two or more elements are slightly differ- Horizontal alignment refers to how elements align on the
ent it might make more sense to vertically align them to the vertical (y) axis. When elements align on a vertical line, you
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
of text you can make use of centered horizontal alignment, 1 items and the contact me button to the center.
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 I build performant
the latest updates and promotions
web apps
I’m John Doe, a fullstack developer with
an eye for dessiign.

Subscribe
Enter your email address 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 under-
Values determine the future.
stand how to use certain functions intuitively and without — Robert L. Peters
instruction.

Abstract representation of consistent elements

being displayed
 For example, if your primary color is blue and primary ac-
consistency in colors tions 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 Do make sure primary actions have the same color
confuse users on the meaning behind that action. throughout your site, this makes the user learn
that XYZ color on a button means he is about to
perform an important action.
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 thing you do, it is
LOGO Home About us Contact
a way of
life
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 — Alan Fletcher

LOGO Home About us Contact

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.
 An inconsistent layout confuses users and makes it more
consistency in Layout and location 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 it doesn’t.
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 used known page.
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 Do use the sidebar pattern for web apps on all
are used to rely on it therefore removing it results pages to allow users to quickly find what they are
in confused and probably lost users. looking for at all times.
 Having different styles, sizes or colors in icons can be mis-
consistency in icons 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 Home

Dashboard Dashboard

Messages Messages

Settings Settings

Don’t mix icons styles as it affects the overall Do make sure to use either outline or solid icons
composition and aesthetics of the page. for a given set.

Don’t use different colors within a given group of Do use outline icons for primary navigations.
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
understands and feels familiar with the message.
Primary actions, form submit messages, error messages,
every interaction with the user must be kept consistent.

don’t do
You post was added Category added 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 Do keep messages and labels consistent
labels, it will be harder for the user to feel familiar throughout your app or website.
with the app on the long term.
use case
Let’s make the font family and style consistent
1 in the navigation items, this will help to

Company Logo Blog About Home Contact me

creativity is
I build performant
web apps
intelligence
I’m John Doe, a fullstack developer with
an eye for design. 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 tips
Don’t make text feel You can use this tool to generate appropriate line
cluttered, this decreases heights given a font size:
overall readability and
aesthetics. https://grtcalculator.com/
Don’t leave the same
amount of negative space
between lines and titles,
there should be a closer
gap between lines than the
heading and the body text.

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 hierarchy You can use negative space around an element, the more
negative space the more attention the element will get.
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 Do surround elements with appropriate negative
elements look like they belong to different groups. space to bring in attention to them, e.g. the main
button clearly draws the user’s attention almost
Don’t leave too little space between text and immediately.
background images.
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

Do keep the same amount of space between

Don’t have different amounts of white space for elements that belong to the same group.
the same component as it looks like there are two
different groups, one on the top and the other one
at the bottom.
 As a good rule of thumb never have elements touch the bor-
Negative space to declutter and ders of external containers like cards. Unless for very spe-
cific cases, text and images should have a generous amount
improve overall aesthetics of white space around them, it makes it easier to read and
scan content.
Good use of whitespace helps to declutter your site or 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 Do leave a generous amount of white space
close to the edges of the wrapper/container around atomic elements like text or images and
unless you are absolutely sure this will not wrapper containers.
disrupt reading and aesthetics.
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 separate
groups. e.g. if two sections talk about different
We know that negative space helps in bringing elements things and convey different messages it makes sense to
together, making them part of the same group, also large leave a larger amount of negative space between them.
amounts of negative space make elements feel far
apart, which translates in separating groups.

don’t do

Don’t leave little to no negative space between Do keep larger amounts of negative space
different sections as it makes it look they all between different sections within a page, this
belong to the same group, which might confuse gives time for the user to disassociate from
the user on why different things are being previous sections. E.g. the call to action and the
presented close and which item to focus on first. hero title.
 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 harmony boring and dry.

Visual harmony in web design occurs when the elements are

arranged in a manner that the overall design feels complete
and cohesive.
An abstract example showcasing symmetrical harmony.
Putting all the previous principles together won’t work if we
can’t find a balance/harmony that conveys a sense of satisfac-
tion.

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

Do use symmetry in your designs when you want

Don’t over use symmetry as the site might become to convey a more professional, sophisticated look
monotonous and boring. and feel.
Don’t continuously space every section with the Do use alternative harmony layouts to create flow
same symmetry, such us the post, the hero text between sections.
and actions.
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.
silent embassador
One side of the composition might contain a dominant ele-
ment, 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.
of your brand
— Paul Rand
 don’t do

Don’t have elements be presented in the same Do use asymmetry in your design to convey a
way trough out your page, mix them up from left more modern and playful message.
to right to make it more aesthetic.

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 can be helpful to make a certain element
Radial harmony 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 Do use radial balance and contrast, to create a
balance, although this might be consider focal point in the center of the screen, by doing
asymmetrical there is no clear pricing card the so users will have less time to think which is the
user should focus their attention to. Overall main element on the page they should focus their
composition and aesthetics feels off. attention to.
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 Color palette: #ff008e (30%) #9ba2ae (60%) #2e528d (10%)
colors as they often contribute to a cluttered and
unbalanced interface. Do use an appropriate amount of different colors
(ideally 2 or three tops), this will help to create a
more balance page.
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 im- image and placing your text there, let’s take a look at an ex-
ages so that one doesn’t overpower the other. ample.

don’t do

Don’t position text that overlaps heavily between Do reposition text and image in a manner where
the image content which cause to lose the both coexist in a harmonious way, where the text
harmony between the text and the image. doesn’t overlap on the heavy elements of 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 compo- break it into smaller chunks with smaller images.
nent 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.
 2. Color: some colors are perceived as weighing more than
visual weight 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 don’t
harmony.
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 sec-
tion, it reduces the users attention on the primary action.

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

S
ES
OC
The design process is a set of steps that are aimed to get an

PR
end result/product that feels an looks better, interfaces that
feel more intuitive and help you to get a better overall un-

GN
derstanding of the problems to solve.

SI
In this section we will have a look at:

DE
• 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 prod-

uct, 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 Home About Prices Login

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.
Remember the purpose of a low fidelity wireframe is to
Cloud storage
just sketch out a rough outline of where we think text and You can store your projects with-
out leaving our product

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 adipi-

• Don’t overuse color, choose different shades of gray, scing elit.

one primary color and one accent color to make cer- dolor sit amet, consectetuer
adipiscing elit.
tain actions pop.
dolor sit amet, consectetuer
• Don’t wait to have high fidelity text, either use plain adipiscing elit.

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 goals of a wireframe is to stablish a
do proper hierarchy between. elements.

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
Do use size carefully to convey proportions accurately,
won’t stand out and outline or ghost button for
this will help you have a more clear vision of the page
secondary actions.
hierarchy.
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 re-
move without affecting the perceived aspect of it.
design is not for
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 siz-
es), 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, mak-
ing 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 pri-

mary 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 web-
site 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 import-
ant to state the different sizes of icons allowed in order to
keep them consistent.
 spacing
Spacing plays an important role of how elements are per-
ceived 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 mar-

gin 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 back-
grounds 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 will help to set future guidelines for
you and your team.

Something we haven’t included in our inputs exam-

ple, to make it a bit more concise, is how the compo-
nent should manage different states such as, success,
error, warning. These should definitely be in the style-
guide.
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 system connective tissue
Time to put it all together with a design system. This design

that holds
system is a collection of reusable components, design pat-
terns, 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 other.
It also helps with consistency, scalability, and future-proof-
together your
ing.

We will be basing this of Flowbite (https://flowbite.com)

entire platform
which is the stepping stone to start using what you’ve — Drew Bridewell, Invision
learned witin this book.
 A design system can include a variety of elements, such as: • Layout guidelines: These specify
how different types of content should
be arranged on the page, including
the use of grids, whitespace, and
• Branding guidelines: These specify other layout 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 typefaces, • Color palette: This specifies the colors that should be
font sizes, and other typographical elements that used in the product, and may include both a primary
should be used in the product.danger actions. palette for key UI elements and a secondary palette
Neutral colors are those that can be used for passive for less important elements.
backgrounds, titles or body text.
• Iconography: This specifies the symbols, icons, and • Interactive elements: These specify how different UI
other graphical elements that should be used in the elements should behave when interacted with, such
product. 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 elements • Templates: These are pre-designed page layouts that
that can be reused throughout the product, such as can be used as a starting point for creating new pages
buttons, input fields, and other common elements. or sections of the product.

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 a 2. Efficiency: With a design system in place, designers
design system: and developers don’t have to start from scratch every
time they need to create a new page or feature. They
1. Consistency: A design system helps to ensure that can use the pre-designed elements and templates
the product has a consistent look and feel across all provided by the design system to save time and effort.
of its pages and features. This can help to create a
cohesive user experience and build trust with the
3. Flexibility: A design system can be designed to be Building a design system from scratch is a task often carried
flexible enough to accommodate a wide range of out by a group of people and it can take years to complete
products and features. This means that it can be used (although it is never fully completed, it evolves over time).
as the foundation for a variety of products, rather Big companies like airbnb, github develop and evolve their
than having to create a new design system for each design system tailored to their products, bear in mind
product. 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.
 We briefly mention that Flowbite gives you a Figma design
Flowbite system that you can use to test and build different designs.
You can choose from a wide range of built in components
Flowbite (https://flowbite.com) is the most popular open- such as dropdowns, tables, buttons and drag and drop
source component library built with the utility classes from them into your own design. You can even tweak them to fit
Tailwind CSS. 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?
 If you take a look at the right hand panel, you’ll see differ-
Customize components super fast ent variant properties for the button. These help you quickly
change the appearance of the button to fit your particular
In this section, we’ll explore how you can harness Fig- needs, for example if we’d want a larger button, we can click
ma’s powerful features to customize Flowbite components the size property and select L or XL from the options.
quickly, resulting in efficient and visually appealing UI de-
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 Let’s take a look at the final version:
change the color to red, by chooseing the color property
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 hope that at this point you understand how easily is to

customize and reuse Flowbite components to match your
specific design requirements.
I’ll change the text to “Get it now” and the right icon to be a
circle arrow instead of a plain right arrow. 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- From there, make sure the Primary color value is selected
side flowbite’s, e.g. your want to have a yellow button, but in the colors variant property (it should already be there giv-
that color is not a value available in the colors variant prop- en that you selected all buttons that have the primary color
erty. You can easily change this by going to the component’s applied)
instance by clicking the diamond/squared icon 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 Now, if we go back to the components instance, we can
variant value selected) and change it to any shade of yellow choose the Primary color variant option from the dropdown
that you want. 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!
 Let’s go ahead and create a desktop frame and select a nice
Building a Landing page in figma 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 You should be seeing something like this:
the one on the flowbite marketing site, so let’s create a text
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 I’ll change the color to be gray/400 and reduce the size to
layer, add some text and change the text style to be text-xl be around 840px. After centering the text in the viewport
font-normal this time. 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 sec-
button right below our paragraph. Lets go to the asstets ondary 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 com-
ponents 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 web-
sites 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 ex-
actly, so don’t worry if you need to adapt some principles to
Learn the key phases of an effective UX process
the nature of your website.
that leads to great products.
But now before bending these rules, you will be aware that Learn how to uncover problems in a design, and
they exist, what is their purpose, and accomodate them to exploit opportunities to enhance the user expe-
your website accordingly, that is what makes a great web rience.
designer. 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 de-
sign decision before development starts.