Adrian K

@uiadrian

DESIGN LIKE A PRO free ebook

how to design better
UI components
Best UX and UI practices when designing UI components, elements,
and effects. A refined collection of education posts.

Icon de
sign
James
Sanchez App de
sign

,, uiadria
n Web de
sign

,,
*******
*******
**
Remem
b er me
Upload
fi les
Login

Color m
ode Upload

8+
read ne Analytic
w mess s Repor
ages t - 1.09-
08.09-2
Mike Be 99+ ... ..60%
nder see eng
Congra ageme
nt
tulation
s!
accoun
t secur
ed!
James
C ameron
Table Of Contents
Introduction About me and this e-book 03

Chapter 1 Grid system 04

Chapter 2 Gradients 12

Chapter 3 Shadows 17

Chapter 4 Style guides 21

Chapter 5 Buttons 28

Chapter 6 Forms 37

Chapter 7 Product filters 46

Chapter 8 Pricing pages 55

Chapter 9 Shopping carts 64

Chapter 10 Navigation bars 72

Chapter 11 Search boxes 77

Chapter 12 Modal windows 86

Chapter 13 Sign up flow 92

Chapter 14 Dashboards 107

Chapter 15 Hero section 116

Chapter 16 Pagination 126

Chapter 17 Tab bars 133

Final word 138

Introduction

Hey Everyone!

As I promised with the release of part 1, here’s a continuation of

the HOW TO DESIGN BETTER series, a complete ebook!

I decided to combine the first and the second part into one book

instead of releasing the two separately.

For those of who don’t know me yet and see this e-book the first

time, thinking, who the heck is this guy and how did I end up here

- well, here’s a short introduction.

My name is Adrian and most designers know me by the name of

@uiadrian, my Instagram alter ego. I share educational posts

about UI and UX design, tips and guides on how to design

better, and all sorts of knowledge served in a bite-sized format.

For now it’s just IG, but you’ll pretty soon see my face on another,

more video-oriented platform.

This e-book was scheduled to release as soon as we reach 15 k

followers on my Instagram account, and if you’re reading it right

now, it means we succeeded! A big thank you to all who helped

build this awesome community. I appreciate you all!

As a way of saying thank you and my way of giving back, here’s

a little treat for you, 130+ pages of design knowledge. Hope

you’ll enjoy the reading. Make sure to check the outro too, I

address a few things many of you asked before. Bless ya!

P.S. This book is going to be updated every now and then with

new information and tips.

 Chapter 1

DESIGN LIKE A PRO

grid syste
how to use

grid system

HOW TO DESIGN GRID SYSTEM 04

Intro to grid system
A grid system is one of the best and simplest ways to structure a
layout, and generate a consistent, and well organised design.

Grid system links together many design elements and

establishes effective hierarchy, alignment, and consistency.
Simply put, a grid system is a structure of vertical or intersecting
lines that split a page into columns or modules.

It is extremely helpful when laying out the foundation for a

properly organised and responsive design. Here are a few tips
and best practices I personally follow when creating my grids.

HOW TO DESIGN GRID SYSTEM 05

 TIP 1

Desktop Grid
Before you start your designs, you should create a custom grid
layout to help you place out elements in an organised way.

Here are my (personal) best settings for web:

100px margins
1440px art board

20px gutters

1240 px working space

20px inner-padding 12 columns

HOW TO DESIGN GRID SYSTEM 06

 TIP 2
Mobile Grid
I use an iPhone 11 Pro Max size to start out my designs as it gives
me enough room to work with but if you use Figma’s auto-layout
functions and constrain your components it shouldn’t matter as
much as it will remain responsive regardless of the artboard size.

414 x 896 art board

8 px gutters 16 px margins

6 columns

HOW TO DESIGN GRID SYSTEM 07

 TIP 3

Row Grid
Ok, we’ve covered columns, but what if you want to have your
designs be pixel perfect, align perfectly, and be easier for
developers to transfer to an actual code?

Add rows to help align your components horizontally.

type: Top
8px height

8px gutter

8px offset

count: 800
make it a high
number if your
artboard takes a
lot of vertical
space

HOW TO DESIGN GRID SYSTEM 08

 TIP 4

Containers

Remember to organise your layout in containers. It helps to stay

consistent with your design.

When you create components you can constrain them so that

your design remains responsive when resized.

Everything you need to

find your match

get started

HOW TO DESIGN GRID SYSTEM 09

 TIP 5

Vertical Rhythm

To achieve it you should place your design objects on a baseline

grid and use repetitive spacing to create symmetry.

Everything you need to Everything you need to

find your match find your match

Drop a pin on your locationand Drop a pin on your locationand

look for your interest. look for your interest.

get started get started

TIP 6

Horizontal Alignment

If your design contains a set of components that’s similar, align

them appropriately. Imagine them being nested in container

boxes with their heights at a fixed value, and place them on the

same horizontal line.

Startup

HOW TO DESIGN GRID SYSTEM 10

 TIP 7
Consistency
A clear grid layout provides you and your team with a set of
consistent sizes, spacing values, and patterns for your projects.

It can help you create a layout template for all your key UI
components and pages with ease.

Total revenue View Details Session duration View Details

$3,421 + 4.28% 2:42 min +0:35 min

Total expenses View Details Bounce rate View Details

$1,121 - 8.28%
61,6% - 2.56%

HOW TO DESIGN GRID SYSTEM 11

 Chapter 2

DESIGN LIKE A PRO

how to design better

gradients
gradients

HOW TO DESIGN BETTER GRADIENTS 12

2.1 Gradient types
TYPE 1

Linear gradient
A linear gradient is a basic gradient that results from
combining two or more colors or hues in a straight line.

TYPE 2

Radial gradient
A radial gradient results from placing one color in the center
and another on the outer side. It 's a technique used for giving
flat objects the appearance of depth.

HOW TO DESIGN BETTER GRADIENTS 15

13
 TYPE 3

Angular gradient

An angular gradient is comparable to a radial gradient in terms

of geometry. It’s used to set color stops around the circle; this is
a rather unusual UI Design choice. It looks to be one-of-a-kind,
yet it also appears obtrusive and strange.

Mesh gradients

Mesh gradients are a type of multi-color gradient that is highly

abstract. They're difficult to build by yourself, but you can
acquire them for free from a variety of online generators.

HOW TO DESIGN BETTER GRADIENTS 14

2.2. How to use gradients
TIP 1
Choose colors
You can make a gradient with any color combination, but there
are certain guidelines that must be followed when selecting hues
for gradients. Use colors with similar hues to create smooth and
natural looking gradients.

TIP 2
Avoid ugly grey
The poor looking grey areas in the middle of the gradient are
definitely a reason to avoid “sharp” transitions. Gradients with a
rapid shift between two combined colors are immediately
unappealing creating gray and brown color transitions.

HOW TO DESIGN BETTER GRADIENTS 15

The best technique to create a gradient is to start with two
similar colors and raise the hue value of one of them by 20 or 25
points. When not sure how to create the gradients that look
good - use online gradient generators such as:
https://meshgradient.com/
https://uigradients.com/
https://coolors.co/gradient-maker/

TIP 3

Use related colors

Try to choose colors close to each other on the color wheel or
use logical color patterns.

The best way to build a gradient is to start with two colors that
are the same and then increase the hue values of one of them
gradually by small increments.

HOW TO DESIGN BETTER GRADIENTS 16

Chapter 3

shadows
DESIGN LIKE A PRO

how to design better

shadows

HOW TO DESIGN BETTER SHADOWS 17

Intro to shadows
Drop shadows are almost essential for any modern design. When
done tastefully they add a layer of depth, and help maintain
hierarchy in designs bringing them to life.

One of the main reasons GUI designers use shadows in their

designs is that they help create visual cues in an interface that
tell our brain which user interface element we’re looking at.

But how to make them appear natural and aesthetic?

We’ll cover all of that in this chapter.

TIP 1
Elevation
Create depth by adding elevation.

Login Login

color #000000 color #000000

opacity 16% opacity 10%
x 0 y3 blur 6 x 0 y 30 blur 50

HOW TO DESIGN BETTER SHADOWS 18

 TIP 2
Use softer shadows
Make your shadow look more natural like in the real-world
environment. Avoid making them too rough.

Login Login

color #000000 color #000000

opacity 10% opacity 5%
x0 y 15 blur 20 x0 y 30 blur 40

TIP 3
Material color
Add a really slight material color on colored surfaces.

Login Login

color #000000 bg- color:

opacity 5% #63CCFB - #00A2F4
color #036799
0 y 75 blur 80
x opacity 10%
x0 y 30 blur 40

HOW TO DESIGN BETTER SHADOWS 19

 TIP 4

Use a shadow layer

Consider using a shadow layer instead.

Login Login

bg- color: duplicate the layer,

#63CCFB - #00A2F4 remove shadow and
add object blur: 50
color #00ABFF

opacity 15% change opacity to 20%

position it below the button
x 0 y 25 blur 50

TIP 5

Work on the lighting

Adjust the size of the shadow layer.

Login Login

Change the size of the shadow layer to around 70-80% of the

size of a button to make it look more natural.

HOW TO DESIGN BETTER SHADOWS 20

 Chapter 4

DESIGN LIKE A PRO

how to design better

style guides
style guides

HOW TO DESIGN BETTER STYLE GUIDES 21

Intro to style guides
A UI style guide is a resource for your design team to reference
whenever working on any new designs for an upcoming sprint.

It is a document that provides all of the relevant information

about your product's user interface, ensuring consistency
throughout the design process. A UI style guide focuses on the
overall aesthetics of the product.

I usually show at least the most important components in use

where I define elements like typography, colors, layout.

4.1. Grid
Layout and grid
I usually start my designs on a 1440x1080 artboard with 100px
padding on both sides so that my website box width is set at
1240px with 20px inner padding.

HOW TO DESIGN BETTER STYLE GUIDES 22

4.2 COLOR PALETTE
STEP 1
Colors
Color palette is not only important for brand consistency, but
also for setting a certain tone and feel of the product.

The emotions that colors evoke usually determine how users see
your products. That’s why it’s important to think about what
feelings colors induce just as much as how your designs look
when choosing a color palette for your brand.

HOW TO DESIGN BETTER STYLE GUIDES 23

 STEP 2
Logo use
I always show the logo in different placements and in different
color variations.

logo logo

logo logo logo logo

logo logo logo logo

HOW TO DESIGN BETTER STYLE GUIDES 24

4.3. UI ELEMENTS
Components
The components you choose and how you decide to display
them play a significant role in the user experience. These are
usually a part of a bigger and more complex design system.

Component 01

Buttons

Default Hover Pressed

Default Hover Pressed

Component 02

Input fields

Label Label
Label Label
Label Label

Label Label
Typing
Label Label

HOW TO DESIGN BETTER STYLE GUIDES 25

4.4. Typography
Font family, size, weight
The typography section of your style guide should identify:

- font family - font sizes - font weights - link styles

Gilroy
SUBHEADER H3 - 24 px Gilroy light

Primary Heading H1 - 48 px Gilroy bold

secondary heading H2 - 32 px Gilroy semi-bold

this is my paragraph text or “body p - 16px Gilroy regular

copy” where I’ll start dealing into the
details about this really cool service
that I offer to ideal clients.

learn more a - 17px Gilroy medium

When you’re not sure how to build your typography, try Material
Design’s type scale generator. It’s a tool for creating type scales
and corresponding code. Any font you choose is automatically
resized and optimized based on Material typography guidance
for readability. It’s powered by Google Fonts.

https://material.io/design/typography/the-type-
system.html#type-scale

HOW TO DESIGN BETTER STYLE GUIDES 26

4.5. ICONOGRAPHY
Icons
Icons can also be used in more complex systems to help
organize a variety of seemingly similar functions like controls,
data, tools, or services.

If you’re not an icon designer you’ll need a good library to get the
icons from. My favorite ones are:

https://thenounproject.com/ (paid)

https://feathericons.com/ (free)

https://fonts.google.com/icons (android)

https://developer.apple.com/sf-symbols/ (iOS)

HOW TO DESIGN BETTER STYLE GUIDES 27

Chapter 5

DESIGN LIKE A PRO

buttons
how to design better

buttons

HOW TO DESIGN BETTER BUTTONS 28

5.1. Button anatomy

A button is an interactive element with a clearly labeled Call To

Action. Buttons indicate what activities users can take. They
allow users to perform all sorts of different actions and make
decisions with just one tap.
Whether it’s saving, checking-out or downloading something,
buttons are one of the most essential elements in UI.

Let’s define a couple of important characteristics:

When designing buttons you’ll have to come up with a number of

buttons states to differentiate different set of actions.

Each button state must be easily distinguishable from others.

Just remember not to take too drastic measures when modifying
each state, it creates unnecessary visual noise. Here are the
most common button states you’ll find.

HOW TO DESIGN BETTER BUTTONS 29

5.2. Tips on designing buttons

TIP 1
Don’t reinvent the wheel

Button should look like a button. This one is pretty simple. We are
used to real-world buttons being most often rectangles (and
sometimes circles). Having a shape that’s neither a rectangle nor
a circle is a sure way to confuse your users.

HOW TO DESIGN BETTER BUTTONS 30

 TIP 2

Style hierarchy

Communicate the importance of each action with button style.

Creating enough visual hierarchy is essential to distinguish each
choice. The primary button being the main CTA, secondary
having the medium emphasis and tertiary the least importance.

TIP 3

Make it stand out

Shadows are important. They help objects stand out against the
background and help identify them as something elevated that
is clickable or able to tap.

HOW TO DESIGN BETTER BUTTONS 31

 TIP 4

Size matters!
If the buttons are too small, it makes them incredibly hard to use
and very annoying to click. Buttons should be big enough to
comfortably use them. But how big is big enough?

TIP 5

Use enough contrast

Combining the right colors for the button label and the font is
essential. Colors must not only complement each other, but the
text has to be legible at all times.

Add to cart Add to cart

HOW TO DESIGN BETTER BUTTONS 32

 TIP 6

Button text alignment

The button size and the font size are also important. If you have

a button that’s 32 points and text that is 17 points, there is no

way to have it perfectly in the center. Adjust either one of these

values to match.

TIP 7

Use of icons

Use icons along with text to give another visual cue about the

button’s purpose and communicate the meaning. A good rule of

thumb is also to lead with the icon rather than have it shown

after the label.

Download Download

I’ve received a lot of questions about this on my Instagram so

here’s a follow up - It’s not a universal truth to put the icon first, it

depends highly on the context. It’s like with icon lists, you put the

icon first as a visual aid for easier content scanning. If you put

them on the right, they’re not helping in any way than to give the

context of where this action will lead them, like “Enter” followed

by an icon of a door opening etc.

HOW TO DESIGN BETTER BUTTONS 33

 TIP 8
Adjust the style
Play around with the style to match your project’s branding.

There’s really no bad designs when you follow these few steps.

quick note:

TIP 9
Strong CTA
If you want to direct users into taking specific actions you must
guide them in a proper and simple way. Using the right wording
makes it easy to understand what is the outcome of the button’s
action. Make it obvious enough so there’s no guessing.

HOW TO DESIGN BETTER BUTTONS 34

 TIP 10

Proper naming
Don't let the users think during specific action, especially the
easiest ones that don’t need additional thought. Send clear
messages, communicate in a simple and direct way. Use action
verbs to highlight what the outcome of clicking each button is.

TIP 11

Consistency
According to Jakob Nielsen, consistency is one of the most
powerful usability principles. When creating your button styles
try to find common elements like colors, shapes, sizes. That’s
where the design system comes into play!

HOW TO DESIGN BETTER BUTTONS 35

 TIP 12

Don’t overdo it
One icon is enough. Don't use too many icons on one label. It
can easily confuse the user as well as it's not a good UI practise.

TIP 13

Stick to one line

Try to always stick to one line with your labels. Test your buttons
on all screens and resolutions to avoid situations like this one
below . It’s easy to overlook the text and misunderstand the CTA.

HOW TO DESIGN BETTER BUTTONS 36

 Chapter 6

DESIGN LIKE A PRO

how to design better

forms boxes
form boxes

HOW TO DESIGN BETTER FORM BOXES 37

 STEP 1
The basics
First off, let’s create our simple form wireframe and break down
each of the components.

labels
First name
input field

Email * required field

placeholder text
Phone Number *
+44 1632 960530
input type
optional field Message

primary CTA
Cancel Send
secondary CTA

HOW TO DESIGN BETTER FORM BOXES 38

 STEP 2
LABELS
Keep your labels visible at all times. Offer an easy way to validate
user’s input. When forms are complex, it’s easy to get confused as
to what fields you’re currently filling out.

Send

First name

Email

Message

Send

HOW TO DESIGN BETTER FORM BOXES 39

 STEP 3
OPTIONAL vs. REQUIRED FIELDS
Keep your forms clutter-free. No need to mention which fields
are required or optional. Put an asterix beside required headers.
This creates enough visual cue to understand that this field is
different than the rest.

First name (optional) First name

Email (required) Email *

Message (required) Message *

Send Send

This has also been a highly discussed topic on my Instagram.

According to most UX studies the of use asterisks is not the best
practice anymore and it even might be a mistake. What’s the
alternative to that?

Mark the optional fields instead of marking the required ones,

users might feel trapped and uncomfortable seeing red dots by
the input labels. There’s always more required fields than
optional in a form, and it reduces the visual noise as well.

HOW TO DESIGN BETTER FORM BOXES 40

 STEP 4

ACTIONABLE CTA
Make the primary CTA prominent and offer a secondary button
to cancel the form. Also make it look like something you can
actually click.

First name

Email *

Message *

Cancel Ok

First name

*
Email

Message *

Cancel Send message

HOW TO DESIGN BETTER FORM BOXES 41

 STEP 5

ERROR MESSAGES
Use error messages with incorrect data input. Make them descriptive
enough to help users understand what step of the process, they are
wrong about and help them fix it faster.

First name

Email *

Message*

Cancel Send message

First name

Email *

i Please choose the right email format.

Message*

Cancel Send message

HOW TO DESIGN BETTER FORM BOXES 42

 STEP 6

INPUT FIELDS
Take note of what input fields you choose. If you want to allow
users to choose more than one option - use checkboxes, if you
want them to choose only one - use a radio button or a select
field. Make it easy to understand.

First name First name

Email * Email *

Services * Services *

Website design Website development

Website design
App design UX consultations
Message Branding

Message

Cancel Send message

Cancel Send message

HOW TO DESIGN BETTER FORM BOXES 43

 STEP 7

PLACEHOLDER TEXT
Use descriptive placeholder text to help users get a sense
of what the ideal input should look like.

Name

Credit Card Number *

Expiration Date * CCV/CVC *

Pay $29.95

Name

Credit Card Number *

Expiration Date * CCV/CVC *

Pay $29.95

HOW TO DESIGN BETTER FORM BOXES 44

 STEP 8

INPUT TYPES
Mind the input types too. Some input fields are made
specifically for email fields, phone numbers, credit card
numbers, file uploads etc. Use them wisely!

First name First name

Johnny Johnny

Email * Email *

[email protected] [email protected]

Phone Number *

Phone Number * +44 1632 960530

+441632 960530
Message

Message Hi there, I have a question regarding

my last payment. Please call me back!

Send inquiry
Send inquiry

HOW TO DESIGN BETTER FORM BOXES 45

 CHAPTER 7
Chapter 8

DESIGN LIKE A PRO

how to design better

duct filte
product filters

HOW TO DESIGN BETTER PRODUCT FILTERS 46

Intro to product filters
One of the reasons for abandoning an ecommerce site is related
to a bad product filtering that makes it close to impossible to
find products a user is interested in.

If a website contains many different products, a good filtering

system is required. Filters are an excellent way to showcase a
broad range of items and improve the user experience.

STEP 1
Filter position
The golden standard for desktop devices is the sidebar filtering
interface located in the left column, usually taking anywhere
between 20-35% of the viewport width. It’s easily accessible at
all times, you can scan the content really quickly and fit a large
number of filters using collapsible lists.

K Home

Christmas

Shop / Collections / Christmas

Refine your search

Price

USD 20 - 49

Categories
Add to cart Add to cart

show more

Brands

HOW TO DESIGN BETTER PRODUCT FILTERS 47

 STEP 2

Filter types

When creating your filters you need to take into account what
type of filters are best suited for certain taxonomies. You want to
offer your users many different filtering options like filtering by
keyword, price, product category and subcategory, brands, and
specific product-related filters like color and material.

Christmas

Shop / Collections / Christmas

Refine your search Search filter

Price range filter Price

USD 20 - 49

Categories

Add to cart

Checkbox Filter

Collapsible list (not a filter but useful for larger lists)

show more

Brands

Users may abandon a page if they have trouble finding what

they are looking for. If they can’t filter by a certain category and
instead of that they have to search page after page looking for
the product, they will probably just leave your site annoyed.

HOW TO DESIGN BETTER PRODUCT FILTERS 48

 STEP 3
Active filters
Make sure to always add active filters to your filtering results
and make them easily visible and manageable. It’s helpful when
you have a large directory of products and your users need to
understand quickly what they are currently looking at.

K Home

Christmas

Shop / Collections / Christmas

Refine your search Product categories: Coffee cups x Price: USD 20-49 x Brand: Starbucks

Price

USD 20 - 49

Categories
Coffee Cups

Add to cart Add to cart

show more
Brands
Starbucks

Keeping selected filters under a separate section will help users

quickly check what is currently applied to the search results,
and offer an easy way to unselect multiple filters if needed.

HOW TO DESIGN BETTER PRODUCT FILTERS 49

 STEP 4

Filter removal
Add an additional chip or a button near your active filters to
reset all of them in one click. It helps to quickly reset your filter
options, especially when you have an AJAX-type filtering
enabled that refreshes after each action taken.

K Home

Christmas

Shop / Collections / Christmas

Refine your search Reset all filters x Product categories: Coffee cups x Price: USD 20-49

Price

USD 20 - 49

Categories

Add to cart Add to cart

show more

Brands

For every new search filters should also be cleared

automatically, as your new search term maybe for something
entirely different from the original search query.

Add indication that the filters have been reset and make it clear.

HOW TO DESIGN BETTER PRODUCT FILTERS 50

 STEP 5

Filter groups

Add hierarchy to your filtering options. This all depends on your

taxonomy structure, but try to offer as many different options as
possible and group them by related categories like search, price,
product category, brand, color, material etc.

Categories Refine your search

Price

USD 20 - 49

Categories

vs

show more

Brands

Show products Show products

HOW TO DESIGN BETTER PRODUCT FILTERS 51

 STEP 6

Filter indexing
Add indexing numbers to your filtering results. You don’t want
your users to filter the products by specific information only to
find out there are no matching products. Give them a sense of
what they can find when the filters are applied.

x
Refine your search
Reset all filters Product categories: Coffee cups

Price

USD 20 - 49

Categories

Coffee Cups (45)

Add to cart

show more

Brands

Starbucks (32)

HOW TO DESIGN BETTER PRODUCT FILTERS 52

 STEP 7

Make them dynamic

Use AJAX-powered filtering that makes the search results reload

instantly, which provides smooth on-page operations and

enhance user experience. The less time an action takes to

process the better the user experience is.

x
x x
x

Reset all filters Product categories: Coffee cups Brands

Refine your search

Price

USD 20 - 49

Categories

Coffee Cups (45)

Loading products..

show more

Brands

Starbucks (32)

Show products (32)

HOW TO DESIGN BETTER PRODUCT FILTERS 53

 CHAPTER
Chapter 8
8

DESIGN LIKE A PRO

how to design better

cing page
pricing pages

HOW TO DESIGN BETTER PRICING PAGES 55

Intro to pricing pages
How to make sure your pricing pages make enough sense?

There are several important practices that need to be followed

to design a highly converting pricing page.

A well-optimized price page should explain the benefits of your

product, and entice your visitors to buy.

TIP 1

Show your prices

No one likes to ask or search an entire website for prices. You
should instead increase their visibility. By showing your prices
you increase the clarity of your product and show that you
are transparent about it.

Startup
Startup

HOW TO DESIGN BETTER PRICING PAGES 56

 TIP 2
Offer a discount
This creates enough temptation to choose the most cost
efficient plan. If you’re proposing an offer that your client needs,
then they’ll most probably use your service for a longer period of
time. Offer a time-based discount.

Startup

A discount offer on your pricing page might help to reduce

conversion friction and encourage customers to purchase but
the price shouldn’t be the only motivator to buy, rather the value
of your product.

Remember to work on your product first!

HOW TO DESIGN BETTER PRICING PAGES 57

 TIP 3

Highlight popular plans

This is a common practice, especially when your offer consists
of more than 2 plans and choosing the right one might be a
little confusing for your clients.

Point them towards the most popular plan and offer an option
to scale the plan down or up when needed.

Startup

HOW TO DESIGN BETTER PRICING PAGES 58

 TIP 4
Add additional social proof
If you have social proof then you have to use it. Period. We as
humans like to base our judgement on other’s people decisions
and opinions. If it works for them, it should work for me!

Startup

trusted by 10,000+ users worldwide

Social proof helps establish trust and credibility, and decrease

the obstacles to making online transactions. Having client
reviews, trust badges, and partner company logo(s) displayed in
a visible place is very important, especially in ecommerce.

Social proof is not just reviews, rates, opinions, but also the
followers you have on social media, or subscribers on youtube.

HOW TO DESIGN BETTER PRICING PAGES 59

 TIP 5

Sticky headers
If you do have a comparison table then make sure to add a sticky
top pricing info for easier comparisons. It’s easy to get lost.

Blockchain.delivery.net

Making your pricing info sticky has its advantages in usability

and speed. It lessens the number of clicks and scrolling needed
to compare available plans.

HOW TO DESIGN BETTER PRICING PAGES 60

 TIP 6

Add brand visuals

Remember about your brand guidelines. Add some color and

utilize brand icons and illustrations to give your pricing pages a

little bit of your brand personality.

Brand consistency and congruence is an important factor in

creating an effective brand recognition and building higher

customer trust.

Elements like fonts, colors, images, icons, as well as the shape

of your buttons are all important for brand memorization.

HOW TO DESIGN BETTER PRICING PAGES 61

 TIP 7

Align tiers to target audience

Mind the target demographics. If your plan targets early-stage
startups, enterprises, and corporations - then make sure to use
the right words for each of the pricing plan options.

It helps to make it clear which plan is the right option for

different customers.

Basic Startup

HOW TO DESIGN BETTER PRICING PAGES 62

 TIP 8

Add tooltips when needed

Don’t make users look for answers, add tooltips with relevant
information instead. This helps to get a clear understanding of
what each point is referring to.

Increase a transaction’s fee to

increase it’s chances of being
mined sooner.

You can use an arrow to indicate the exact component you refer
to. It’s especially helpful when your comparison table consists of
many elements that are positioned close to each other, and you
want to identify the exact component you target.

HOW TO DESIGN BETTER PRICING PAGES 63

 CHAPTER 9

DESIGN LIKE A PRO

how to design better

shopping carts
shopping carts

HOW TO DESIGN BETTER SHOPPING CARTS 64

Intro to shopping carts
Shopping carts play a significant role in online store’s conversion
rate. It’s obvious that the more user friendly and intuitive a
shopping cart is, the higher the conversion rate will be.
How can you make sure your shopping cart designs are any
good? You have to have a deep understanding of your
customers’ behavior.

Always design with end-users in mind, their needs should be your

top priority if you want your product to succeed.

TIP 1
Make it easily accessible
Customers should be able to spot the cart icon. The standard is
to place the cart icon in the top right corner of an e-commerce
site or an app.

2
foodiez foodiez

HOW TO DESIGN BETTER SHOPPING CARTS 65

 TIP 2
Add an empty state CTA
When your customers reach the shopping cart, they should only
be presented with two Call to Actions (CTA). One is to “Continue
Shopping” and the other is to “Checkout”.

If a shopping cart is empty, however, you should add an empty

state. Make it super easy for users to access a shop page at any
step of the purchase flow.

cart cart

Your cart is empty. Your cart is empty.

Continue shopping

go to the shop

HOW TO DESIGN BETTER SHOPPING CARTS 66

 TIP 3
Edit product quantity
You should allow your users to edit the quantity of products they
have added to the cart. Make the purchase process and editing
product quantities as easy as possible.

cart cart

My cart My cart

Margarita Pizza Margarita Pizza

2 items $11.98 2 $11.98

Neapolitana Neapolitana

2 items $11.98 2 $11.98

Pepperoni Pepperoni

1 item $14.98 1 $14.98

The amount of products in a shopping cart should always be

visible. Customers should be able to check and change their
order items at every stage.

They must never lose the ability to modify the cart until the very
last step of the purchasing process.

HOW TO DESIGN BETTER SHOPPING CARTS 67

 TIP 4

Easy quantity control

Add easy to use quantity adjustment. Consider using a
simple minus-plus button instead of drop-down lists and
manual text inputs.

cart cart

My cart My cart

Margarita Pizza Margarita Pizza

2 $11.98 2 $11.98

Neapolitana Neapolitana

2 $11.98 2 $11.98

Pepperoni Pepperoni

1 $14.98 1 $14.98

It should be super easy to make changes in the cart like update

quantity or remove products.

This reduces cognitive load as the user does not have to go

back to product details page to make changes every time they
need to adjust something.

HOW TO DESIGN BETTER SHOPPING CARTS 68

 TIP 5

Ability to remove products

Allow users to remove a product from the cart easily by adding a
remove button. Adding a checkbox to remove a product might
help with accidental clicks.

cart cart

My cart My cart Remove selection

Margarita Pizza Margarita Pizza

2 $11.98 2 $11.98

Neapolitana Neapolitana

2 $11.98 2 $11.98

Pepperoni Pepperoni

2 $14.98 2 $14.98

Also allow the user to set the quantity to zero to remove an item
from cart. Once the user clicks the remove selection link,
instead of removing the item immediately, you can ask if the
click was intentional.

HOW TO DESIGN BETTER SHOPPING CARTS 69

 TIP 5
Display the total cart value
Add a clear and always visible preview of your cart total amount.
Pair it with a “Checkout” CTA to save space and allow users to
quickly pay for products without excessive scrolling.

cart cart

My cart My cart Remove selection

Margarita Pizza Margarita Pizza

2 $11.98 2 $11.98

Neapolitana Neapolitana

2 $11.98 2 $11.98

Pepperoni Pepperoni
Total cart value:
pay
$47.94
2 $14.98

This is especially helpful when users add a bigger quantity of a

certain product by mistake. It helps to quickly check what’s the
total amount that they’ll pay if they were to finish at this point.

HOW TO DESIGN BETTER SHOPPING CARTS 70

 TIP 6

Ok, now let’s recap everything

Remember all these points when designing your next carts and

your purchase conversions should improve considerably.

cart cart

My cart My cart Remove selection

Margarita Pizza
Margarita Pizza

2 items $11.98 $11.98

2

Neapolitana
Neapolitana

2 items $11.98 2 $11.98

Pepperoni
Pepperoni
Total cart value:
pay
$47.94

$14.98
1 item

Shopping carts are an essential element that contibutes to the

on-site purchase conversions.

If they’re not designed well, they will most probably lead to a big

number of users cancelling their purchases, abandoning carts,

and leaving the website, so make sure you design them right!

HOW TO DESIGN BETTER SHOPPING CARTS 71

 CHAPTER
Chapter10
1

DESIGN LIKE A PRO

nav bars
how to design better

navigation bars

HOW TO DESIGN BETTER NAVIGATION BARS 72

Intro to navigation bars
One of the most important aspects of any website is its
navigation. Good navigation provides good user experience.

The navigation bar is a simple concept. It's essentially a list of

links that directs visitors throughout the site.

A navigation bar can be considered as the navigational

“anchor” of a page. It’s an essential element contributing to
time spent on-site, bounce rates, and in the case of service or
product-based websites, to some extent, conversions.

In this chapter, you’ll learn a few simple tips on how to improve

the navigation of a website as well as how to improve the overall
user experience on your site.

TIP 1

Site logo link

Use navigational cues, such as including your primary brand

logo in the top left corner of the page. It’s essential to make the
logo clickable as some users may get lost on certain pages and
want to quickly return to the starting point.

Premium Support Download Sign up Log in

Premium Support Download Sign up Log in

HOW TO DESIGN BETTER NAVIGATION BARS 73

 TIP 2

Navbar link contrast

Make sure your links are easily visible and readable on your
navigation bar background. Remember about your interfrace’s
accessibility and usability for users with vision impairment.

Premium Support Download Sign up Log in

TIP 3

Use short concise names

A short navigation bar links are easier and faster for people to
read and understand. No need to overcomplicate things. Use
simple and understandable language for everyone.

Premium Account Contact Support Download our App Create account Log in

Premium Support Download Sign up Log in

HOW TO DESIGN BETTER NAVIGATION BARS 74

 TIP 4
4.4. No clear CTA
No clear CTA

Use a button, or a divider to differentiate the CTA from the rest

of the navigation bar. Increase or reduce the color contrast or

increase the font weight to make the CTA more prominent.

Premium Support Download Sign up Log in

Premium Support Download Sign up Log in

TIP 5

Too many links

Think about responsive design and how you are going to present

your navigation bar on even the smallest desktop screens. Use a

mega-menu or move the extra links to the footer.

Premium Support Download Sign up Log in

About For Artists Support

Jobs Developers Web Player

For the Record Advertising Free Mobile App

HOW TO DESIGN BETTER NAVIGATION BARS 75

 TIP 6

No hover state

Add a hover state to the navigation links so that visually

impaired users can quickly understand where they are on the
navigation bar menu.

Premium Support Download Sign up Log in

Premium Support Download Sign up Log in

TIP 7

No active page highlight

Always show the current position on the site. Add an active

page highlight so that users get another sensory cue of where
they are on the website.

Premium Support Download Sign up Log in

Premium Support Download Sign up Log in

HOW TO DESIGN BETTER NAVIGATION BARS 76

 Chapter 11

DESIGN LIKE A PRO

how to design better

search boxes
search boxes

HOW TO DESIGN BETTER SEARCH BOXES 77

10.1. UX/UI TIP - VISIBILITY
TIP 1

Make it easily accessible

If your app relies heavily on the search functionality make it

easily accessible. Especially if you have a big variety of
products, and your users use mainly mobile to make purchases -
don’t make them look too hard for a search icon.

theshop theshop

HOW TO DESIGN BETTER SEARCH BOXES 78

 TIP 2
Add recent searches
This is not a general rule of thumb, but it’s worth noting that an
average customer needs to see a product anywhere between
7-15 times before making a purchase decision (this rule doesn’t
include an impulsive purchase).

Suggest them their recent searches for easier access and to

remind them of the product they’ve been recently interested in.

theshop theshop

Find your product Find your product

Search Search

recent searches

HOW TO DESIGN BETTER SEARCH BOXES 79

 TIP 3
Subtle roundness
This is more UI than UX tip and it shouldn’t really impact the
conversion rates at all, but if you’re interested in clean UI design
and you’d like to follow a certain style then adding a subtle
roundness could be a nice touch.

theshop theshop

Find your product Find your product

Search Search

recent searches

Rounded corners are perfect for chips and grids, they help with
a friendly interaction, they are space-saving, they draw
attention to the content and not the component.

HOW TO DESIGN BETTER SEARCH BOXES 80

 TIP 4

Improve white space

This goes without saying that you do need white space to make
your components easily readable, light and subconsciously easy
to look at. If your design is cramped and crowded it makes
everything looks badly thought-out and cheap.

theshop theshop

Find your product Find your product

Search
Search

recent searches
recent searches

Using white space evenly makes the content in design easily

scannable and significantly improve legibility.

HOW TO DESIGN BETTER SEARCH BOXES 81

 TIP 5

Add some color

Again, more UI than UX, but it’s a rather important thing
considering you’ll probably have to follow certain brand
guidelines.

Add color accents to highlight the messaging and to add some

vibrance to your designs, not to mention - get in line with your
brand’s visual style and voice.

theshop theshop

Find your product Find your product

Search Search

recent searches recent searches

Add a tint of color to your grays to complement your UI

highlights that match the primary brand colors of your app.

HOW TO DESIGN BETTER SEARCH BOXES 82

 TIP 6

Include a search query

Consider adding a placeholder text to help your users
understand what the search queries can be used for. Hint just a
few words, though, you don’t want to confuse your users while
trying to help them out.

theshop theshop

Find your product Find your product

Search Search guides, ebooks, and more…

recent searches recent searches

HOW TO DESIGN BETTER SEARCH BOXES 83

 TIP 7
Add autocomplete
Help your users construct the search query by auto-suggesting
a specific entry. You can see how helpful the autosuggestions
are on platforms such as Google, YouTube or Amazon.

theshop theshop

Find your product Find your product

Search UI design|
recent searches recent searches
UI design for beginners
UI design for advanced
UI design handbook

HOW TO DESIGN BETTER SEARCH BOXES 84

 TIP 8

Work on the no results page

Don’t leave your users on the no results page with literally no
results. Offer them a few suggestions or a related search results
based on a few terms out of their search query. Remember to
use clear language.

theshop theshop

Find your product Find your product

Search

recent searches
We’re sorry. We cannot find any matches
for your search term.

See 21 related search results for “design”

and“advanced users”.

HOW TO DESIGN BETTER SEARCH BOXES 85

 Chapter 11

CHAPTER 12

DESIGN LIKE A PRO

how to design better

odal wind
modal windows

HOW TO DESIGN BETTER MODAL WINDOWS 86

Intro to modal windows
Modals are UI components that appear on top of an
application’s window, frequently with a layer of slight
transparency behind them that allows users to still see into the
main app’s or website’s area.

Modals are most often used for important announcements,

operations, and confirming irreversible actions.

OPTION 1

User onboarding
A modal window can be used as a simple welcome message that
warmly greets new users when logging into the app or a
website’s interface.

Welcome to our App!

Let’s get started. You and your team can

use our App for free for the next 14 days. Explore

our guide or jump right into your dashboard.

View App Open Guide

BEST PRACTICES WHEN USING MODAL WINDOWS 87

 OPTION 2

Product announcements
A big modal splash is often used for product announcements —
an interface redesign or the release of a long-awaited feature.

New App release v2.0

You don’t have to do the thing manually anymore!

With our new app release the thing can be set to

be fulfilled automatically.

Learn more Sweet, I got it!

OPTION 3

Long operations
Using a modal window with a “Loading” message is a common
practice for operations that take a few seconds to process.

Modals prevent users from interacting with the screen. It gives

them a signal that they have to wait before clicking the button
again or refreshing the site.

BEST PRACTICES WHEN USING MODAL WINDOWS 88

 Submit Loading.. Done!

OPTION 4

Irreversible actions
While we shouldn’t use modals for every error state, we should
inform the user about actions with serious consequences that
are impossible to reverse.

Deactivate account
Are you sure you want to deactivate your account? All of your data
will be permanently removed. This action cannot be undone.

Cancel Deactivate

BEST PRACTICES WHEN USING MODAL WINDOWS 89

 OPTION 5
Additional information
When displaying data of records, it may not be possible to
display all of the related info for each section, card or row.
Adding a modal in this case avoids redirecting the user to
another page to look that information up.

James Cameron

verified professional
Quick view
James Cameron

[email protected]
+44 123 2134 4212
jcamerondev.com

Message

OPTION 6
Divide tasks into steps
Some tasks may involve various steps of actions. For example, if
you need to import new data and then configure options based
on the imported data you might want to consider using a modal
to keep your users on the same page after the data is uploaded
and configured.

BEST PRACTICES WHEN USING MODAL WINDOWS 90

 Import Orders
Step 1 Upload CSV Step 2 Check data Step 3 Confirm import

Drag & Drop

your file here or Browse Files

Next Step Cancel

The standard modal form

Remember about the tips from this chapter, and you’ll be able to
build and use the modal forms in the most optimal way.

Clear title name

New Customer Close button

Name managed focus

Type

Save Cancel

Clear call to action

background overlay

BEST PRACTICES WHEN USING MODAL WINDOWS 91

 CHAPTER 13

sign up flo
DESIGN LIKE A PRO

how to design better

sign up flow

HOW TO DESIGN BETTER SIGN UP FLOW 92

Intro to sign-ups
A sign-up flow is one of the most vital elements in the users
journey throughout the whole digital product. It has a direct
impact on how customers might perceive a product.

It should provide users with the quickest and most intuitive way
to create an account and start exploring the app or a website.

The sign up flow should predict users behaviour and obstacles

that can prevent them from moving to the next step.

STEP 1

Artboard

Dimensions

artboard = 414 x 896

HOW TO DESIGN BETTER SIGN UP FLOW 93

 STEP 2

Grids and guides

First off, we need to set the layout constraints, add a layout
grid, and draw additional vertical guides.

side margins: 16 - 20 px

HOW TO DESIGN BETTER SIGN UP FLOW 94

 STEP 3

Status bar and home indicator (iOS)

Remember to leave additional space for your status bar and a
home indicator*. It’s very often neglected by a lot of designers.

9:41

9:41

safe area: 40 - 44 px

148 px

safe area: 36px

5 px
13 px

HOW TO DESIGN BETTER SIGN UP FLOW 95

 STEP 4

Welcome screen
Goal of a welcome screen is to welcome new users and get them
excited to take the very first step on their way to exploring and
falling in love with your product.

9:41

Add the appropriate style

Drag your illustrations in, add
a heading and a copy that
describe your app.

Healthy Habits

Make your primary CTA more

prominent.
create an account

already a member?
Add a secondary CTA for users
to log in with an account
already created.

HOW TO DESIGN BETTER SIGN UP FLOW 96

 STEP 5

Sign up screen
For this example, let’s add a sign up form as an overlay.

9:41

Sign up

Change “Continue” button color

unless fields are completed.

Add social media login buttons

for easier access.

Offer a quick way to jump back to

the login screen.

HOW TO DESIGN BETTER SIGN UP FLOW 97

 STEP 6

Instant field validation

Add valuable and instant status messages.

9:41

Sign up

Don’t wait for the user to fill

out the entire form before you
point out any errors, let them
know as soon as your system
can tell there’s an error.

Do this as soon as they

click out of the field and
try to move to the next
input.

HOW TO DESIGN BETTER SIGN UP FLOW 98

 STEP 7

Success and focused state

If you have a form with multiple fields, you don’t want users to
get lost on the form. This is especially important on mobile
devices. Add success and focus states.

9:41

Sign up
9:41

Don’t let your users guess what

the password requirements are.
Show them the requirements if
relevant.

Also make sure to enable

password toggle so that they
can easily check if they didn’t
make any spelling mistakes
on the way.

HOW TO DESIGN BETTER SIGN UP FLOW 99

 STEP 8

Continue button
You don’t have to disable the Submit button, make it a different
color, but allow users to click on the button and see an error
message that directs them towards the wrong input.

9:41

Sign up

If all fields are filled out correctly,

allow your users to move on to
another step

Offer a quick and easy way to

jump back into the login screen
to continue.

HOW TO DESIGN BETTER SIGN UP FLOW 100

 STEP 9

LEGAL and ACCEPTANCE

Remember about legal pages and/or acceptance boxes.

9:41

Sign up

There’s one thing we

didn’t mention

When creating an account you’ll

have to include links to terms,
privacy (and GDPR acceptance
boxes if your app is live in EU).

For most cases though a simple

notice at the bottom of the screen
will do just fine.
By signing up, you agree to our T&Cs and Privacy Policy

HOW TO DESIGN BETTER SIGN UP FLOW 101

 STEP 10
NAMING TERMS
You want your sign-in to be simple therefore use simple language.

Sign up Sign in
+

or
Create an account Log in
+

STEP 8
EASY SWITCHING
When a user clicks on the button and starts a wrong flow, you
want to allow them to easily switch from the registration to
logging in – and vice versa.

Have an account? Log in here. No account? Sign up here.

By signing up, you agree to our T&Cs and Privacy Policy By signing up, you agree to our T&Cs and Privacy Policy

jump to a login flow jump to a sign up flow

HOW TO DESIGN BETTER SIGN UP FLOW 102

 STEP 12

FORGOT PASSWORD

9:41

No matter the case, forgetting a

Log in password happens all the time.
That’s why most login forms offer
a ‘Forgot Password’ link to reset
the password.
Forgot password?

When users click the ‘Forgot

Password’ link, they’re prompted
to enter the email address they
used to start the “reset the
password” flow.

No account? Sing up here.

By signing up, you agree to our T&Cs and Privacy Policy

HOW TO DESIGN BETTER SIGN UP FLOW 103

 STEP 13

EMAIL VERIFICATION

9:41

In most cases, to help users re-

establish access to their
account, that will be through
sending a password reset link.

There is a second way though,

that would simplify the
onboarding process where only
email is needed in the login
process - magic links.

HOW TO DESIGN BETTER SIGN UP FLOW 104

 STEP 14

MAGIC LINK

9:41

Magic links are a faster

and easier way for
users to sign in without
the need to remember
their passwords.

Opening a default mail app.

Enter code manually

Offer an ability to type in

the code manually as a
secondary option.

HOW TO DESIGN BETTER SIGN UP FLOW 105

 STEP 15

MANUAL VERIFICATION

That’s it! 9:41

When the code is valid,

1 3 9 0 7 2
enable the user to
move to another step.

Didn’t get it? Send me a new email.

Add a quick link to re-send

the verification code.

HOW TO DESIGN BETTER SIGN UP FLOW 106

 CHAPTER 14

ashboard
DESIGN LIKE A PRO

how to design better

dashboards

HOW TO DESIGN BETTER DASHBOARDS 107

Intro to dashboards
Dashboards are used to display the most essential and useful
information on an app. They should be designed in a straight
forward and intuitive way, enable a user to control the series of
functions in a simple and effective way while ensuring a good
user experience at all times.

Below, you’ll find steps and tips on how to design dashboards,

where to start and what to display on the screen.

STEP 1
Use grid
Grids help structure the content and clearly define hierarchy.
You can start with a simple wireframe and place your content
into grids based on the importance.

HOW TO DESIGN DASHBOARDS 108

 STEP 2

Content hierarchy
Prioritize your dashboard content hierarchically and place it
according to an F-pattern or a Z-pattern to help guide users
towards their desired outcome.

1 2

3 4

5 6

The F and Z- patterns represent the user’s eye movement. People

tend to scan and analyze information differently. The right

placement of information has a great impact on the readability.

HOW TO DESIGN DASHBOARDS 109

 STEP 3
Consistency
Avoid too much text on your dashboard. Offer the most
important information as a summary with actionable CTAs to
see more details upon clicking on each card.

Grids and cards can help you construct a basic structure or a

skeleton for a dashboard layout and achieve better alignment
and uniformity with minimum effort.

Doing this connects them together and logically supports your

composition. This is critical for good dashboard design because
you'll need to organize a lot of data in a logical manner.

HOW TO DESIGN DASHBOARDS 110

 STEP 4

Data arrangement
The uniform arrangement of controls and data inside cards is
also an important feature.

Refresh dashboard Monthly Michael Broomstick

2

Store Analytics Sep 2021 September

Conversion rate MON TUE WED THU FR SAT SUN

4,6% + 0.36%
1 2 3 4

5 6 7 8 9 10 11

12 13 14 15 16 17 18

19 20 21 22 23 24 25

26 27 28 29 30

Track Events
Sep 1 Sep 5 Sep 10 Sep 15 Sep 20 Sep 25 Sep 30 3 AM

Total revenue View Details Total expenses View Details Session duration View Details Bounce rate View Details
Traffic Score ?

$3,421 $1,121 2:42 min 61,6%

😊 86.42%
+ 4.28% - 8.28% +0:36 min -2.56%

Download report
Top Selling Products
Product name Quantity Sold Sales Total Action
Customer Activity
Chocolate Milk Treato’s 32 $320 View Details

Fruity Nut Treato’s 19 $190 View Details

Chocoberries Treato’s 11 $110 View Details

Place the name in the top left corner of the card, position the
view controls or actions in the top right corner, and leave the
rest of the space for the content itself.

When everything has the same structure, it's easier for users to
work with the interface because everything is where they
expect it to be.

HOW TO DESIGN DASHBOARDS 111

 STEP 5

Divide your content

Use one concept per card. Show smaller blocks or relevant data

to reduce the cognitive load and clutter.

September September

MON TUE WED THU FR SAT SUN MON TUE WED THU FR SAT SUN

1 2 3 4 1 2 3 4

5 6 7 8 9 10 11 5 6 7 8 9 10 11

12 13 14 15 16 17 18 12 13 14 15 16 17 18

19 20 21 22 23 24 25 19 20 21 22 23 24 25

26 27 28 29 30 26 27 28 29 30

Track Events Track Events

3 AM 3 AM

Traffic Score ? Traffic Score ?

😊 86.42% 😊 86.42%

Download report Download report

Customer Activity Customer Activity

See more See more

Avoid situations where users can get confused and lost. Dividing
and splitting the content into smaller blocks can increase the
legibility and readability of the given information.

HOW TO DESIGN DASHBOARDS 112

 STEP 6
Cards and click area
Remember that one of the primary goals of the dashboard is to
read information at a glance, and relying on scrolling or
additional interactions contradict the whole purpose. Make
cards visible and easily distinguishable.

The interface should provide at a glance view of most essential

metrics and KPIs. Information must be arranged in a way to
provide the user with a fast access to data.

Total revenue View Details Total expenses View Details Session duration View Details Bounce rate View Details

$3,421 + 4.28%
$1,121 - 8.28%
2:42 min +0:36 min
61,6% -2.56%

Session duration View Details Session duration View Details

2:42 min +0:36 min

2:42 min +0:36 min

If the only action on a card is to click on it and see more, make

the whole card area clickable to reduce the effort of clicking
hyperlinks or buttons.

HOW TO DESIGN DASHBOARDS 113

 STEP 7
Navigation
When displaying chart data, offer easy navigation to switch
between different views and dates.

Refresh dashboard Monthly

Store Analytics Sep 2021

Conversion rate

4,6% + 0.36%

Sep 1 Sep 5 Sep 10 Sep 15 Sep 20 Sep 25 Sep 30

Aim to present as much information as possible in a

comprehensible manner, don’t stack it one on top of the other to
avoid overloading the users and make them scroll below the fold
to find additional information.

Prioritize your content. If you need to show more information

think about adding quick filters and sorting options to quickly
change the metrics you want to compare.

HOW TO DESIGN DASHBOARDS 114

 STEP 8
Labels
We need visual anchors to help scan the dashboard quickly and
effectively. Add labels or section titles, use proper naming
conventions as well.

Total revenue View Details Total expenses View Details Session duration View Details Bounce rate View Details

$3,421 + 4.28%
$1,121 - 8.28%
2:42 min
+0:36 min
61,6% 5
-2. 6%

Top Selling Products

Product name Quantity Sold Sales Total Action

Chocolate Milk Treato’s 32 $320 View Details

Fruity Nut Treato’s 19 $190 View Details

Chocoberries Treato’s 11 $110 View Details

HOW TO DESIGN DASHBOARDS 115

 CHAPTER 15

hero secti
DESIGN LIKE A PRO

how to design better

hero sections

HOW TO DESIGN BETTER HERO SECTIONS 116

Intro to hero sections
The hero section in web design has subsequently evolved into an
essential component of every high-quality site. One of the main
reasons to create a stunning and well organised hero section is
to make a company stand out from the competitors, generate
interest, collect leads, and sell the products or services.

A hero section is the space that appears on the screen without

scrolling, beneath the logo and menu. It’s the first thing users
notice when they visit the page, so called - above the fold.

This section of the page should ideally include the following

information

what’s the company’s unique value proposition

the reason users should trust the company
main product/service benefit
what actions should be taken

The hero section should be designed in a clear and concise

manner so that the visitors know what the website is about at
the first glance.

Remember about the saying - “first impression is the last

impression”, and focus on making your hero sections beautiful
and memorable. On average, you have around 1-3 seconds to
capture the user’s attention.

In this chapter, you’ll find some of the best practices when it

comes to designing your hero sections.

HOW TO DESIGN BETTER HERO SECTIONS 117

 STEP 1

Grid
I usually start building my websites on a 1440px artboard,

12 column grid, 100px margins, 16px gutters. I find it best when

building websites on a standard 1240px boxed-width which
makes them look good on most available screens.

Grid system helps arrange and structure all the information on

the page in an organized manner. If you place the elements on a
grid, mind the constraints, and column spacings you will achieve
a consistent framework for your page’s content.

HOW TO DESIGN BETTER HERO SECTIONS 118

 STEP 2

Hierarchy

When building out your hero sections mind the hierarchy. Follow

either a Z-pattern or an F-pattern to guide the users’ eyes where

you want them to.

Z-pattern is commonly used on non-content-heavy pages.

Visitors scan content from top left to top right, reading on an

imaginary horizontal line. Then they search down and to the left,

forming a diagonal line. Finally, they return to the right, forming

the second horizontal line.

The F-pattern happens when a user first reads the upper part of

the content in a horizontal movement, and move down a bit to

read in a second horizontal movement, usually a bit shorter than

the previous one. Finally a user reads the content’s left side in a

vertical movement. You can easily recognize these patterns in

how famous websites are designed.

HOW TO DESIGN BETTER HERO SECTIONS 119

 STEP 3
Heading
Remember that good copy sells. Try to make your h1 and h2
headings easy for Google’s SEO crawlers to read - use relevant
keywords, but also try to make your main heading into a catchy
tagline. Use emotions and memorable words that your target
audience is familiar with.

A hero message’s primary goal is to inform and it should address

specific audiences they are targeting. A perfect hero message
should make clear what you do and for whom you do it.

Humans are responding to images and reflections of their own

identity, that’s why creating user persona before you proceed
with the design and copy is so crucial.

HOW TO DESIGN BETTER HERO SECTIONS 120

 STEP 4
Main CTA
Make your CTA short and actionable. You have to seem
confident in your messaging. If you want someone to message
you then don’t use passive statements like “Click here to talk”,
be direct and say “Message us today” instead.

Send clear requests and don’t overdo it, you don’t want to
mislead or confuse the user. The main call-to-action is intended
to encourage everyone to the take the most desirable action on
the page e.g. make a purchase.

HOW TO DESIGN BETTER HERO SECTIONS 121

 STEP 5
Secondary CTA
Is your service a bit complicated and needs explanation?

Use a secondary CTA to play a tutorial video or jump straight

into a section that explains what you do and how you can help
your target audience with your product.

Besides using a main CTA you can also encourage your visitors
to take another action, that’s complementary to your main.

If they’re not yet certain if they want to use the main CTA, you
can ask them to leave their contact information, sign in to a
newsletter, watch a video, join a free trial program, or offer
something in exchange.

HOW TO DESIGN BETTER HERO SECTIONS 122

 STEP 6

Relevant Visuals
Work on your visuals to help users get a glimpse of what the
product is about. It’s also a nice way to add in your brand
visuals. Treat it as an introduction to your site’s visual theme and
try to make it congruent across.

A hero image is the first photo that sits above the fold. The goal
of it is to add excitement to a page and show off the brand’s
style and visual direction.

HOW TO DESIGN BETTER HERO SECTIONS 123

 STEP 7
Trust factor
Social proof is a phenomenon where people are being influenced
by the behaviour of others to guide their own behaviour and
decisions. If applicable, use partner company logo(s),
guarantees, reviews, and all sorts of trust building metrics that
are relevant to your product or service.

If you want to earn users trust you need to establish authority.

The easiest way to do it is to “borrow” trust from authority

figures or brands by putting reviews, awards, or even logo(s) of

companies your product can be associated with.

The perception of authority extends to your brand through a

simple association.

HOW TO DESIGN BETTER HERO SECTIONS 124

 STEP 8

Above the fold

To sum up, try to fit every important information on the first
visible screen - above the fold. Your H1 needs to be clear, your
CTA needs to be actionable, your visuals consistent with your
brand, and if possible you should use additional social proof to
boost the product’s perceived value.

Remember that first impression is the last impression, and you

can make a good first impression only once.

Make sure you implement all the tips from this chapter and your
hero sections should improve immediately.

HOW TO DESIGN BETTER HERO SECTIONS 125

 CHAPTER 16

paginatio
DESIGN LIKE A PRO

how to design better

pagination

HOW TO DESIGN BETTER PAGINATION 126

Intro to pagination
Pagination is a very important design component. It is the
process of dividing a website's content into distinct pages. It’s
required to enable an easy navigation on numerous pages,
whether it’s desktop, mobile, or web-based system. It’s a design
pattern used to prevent users visiting a page from being
overwhelmed by a large amount of information being displayed
on just a single page. Pagination is commonly used on websites
that provide visitors with a lot of content. For the simplest
example, look at how Google uses pagination.
STEP 1
Placement
Pagination placement plays a very important role in providing a
good UX. Add it in a place that users won’t miss. Best practice is
to put the pagination below your search results.

1 2 3 4 5 6 .. 32

HOW TO DESIGN BETTER PAGINATION 127

 STEP 2
Pagination styles
Indicate a current page state so that users can find themselves
easily. Mind other states too, add a highlight on hover, and
disabled states for inactive navigation buttons.

1 normal state

4 active page

2 hover state

disabled navigation

normal navigation

1 2 3 4 5 6

STEP 3
Navigation controls
Add controls to simplify the navigation. Provide previous and
next button links, and add a simple access to the first and last
page of a website so that users can jump between pages
quickly and easily.

HOW TO DESIGN BETTER PAGINATION 128

 previous page last page

1 2 3 4 5 6

first page next page

STEP 4

Page counter
There’s nothing more annoying than not knowing how many
pages of content are left to go through, or not being able to
choose the quantity of results shown on each page. Consider
adding a page counter to set user expectations.

50 items 3 of 32

filter results number page counter

HOW TO DESIGN BETTER PAGINATION 129

 STEP 5
Spacing
Always be mindful of the spacing between pagination controls,
especially on mobile devices where the space is limited and it’s
harder to scan the content and click the right button if they’re
squeezed together.

1 2 3 4 5 6

1 2 3 4 5 6

STEP 6
Manual input
Provide users with a link label as a manual input to go directly
to a specific page of a site. Let users directly enter the
necessary page number and access it by putting the ‘Go to’
functionality into action.

HOW TO DESIGN BETTER PAGINATION 130

 1 2 3 | Go

STEP 7
Pagination link
For bigger page numbers you might want to split the pagination
results in two parts and add a three-dotted icon between them.
Consider showing hidden pages in that range after a mouse
hover or a click.

1 2 3 … 8 9 10
4
5
6
7

HOW TO DESIGN BETTER PAGINATION 131

 STEP 8
Let’s sum up!
When the page involves a lot of content it’s essential to make it
easy to consume for the visitors. Infinite scroll is not always
suitable for every site, it can really slow it down if you load up a
big number or search results, and in the case of vast quantity of
products it’s beneficial to break down the content into pages,
and offer easy filtering and sorting options.

Remember to provide a simple approach for your customers to

browse the site's information and ability to quickly return to the
product they're interested in.

1 2 3 .. 32 | Go

showing 20 items out of 633

HOW TO DESIGN BETTER PAGINATION 132

CHAPTER 17

DESIGN LIKE A PRO

how to design better

tab bars
tab bars

HOW TO DESIGN BETTER TAB BARS 133

Intro to tab bars
We’ll go over a few ideas on how to design your active tab bar
states. So first, let’s create our navigation bar.

TIP 1
Reduce opacity
This one is pretty simple. Choose a fill color for your active bar.
Reduce the opacity of the non-active icons to around 40-50%

HOW TO DESIGN BETTER TAB BARS 134

 TIP 2
Dot indicator + color fill
Add a color fill to your icon and add another visual indicator of
an active state - try a dot.

TIP 3
Background color
Add a vibrant background color and revert the active icon color
to make the tab stand out more.

HOW TO DESIGN BETTER TAB BARS 135

 TIP 4

Naming

This comes in handy when your icons are not necessarily clear

and easy to understand. Naming at the bottom helps scan the

menu content much faster.

home

TIP 6

Expanding chip

A more visual and dynamic way of displaying an active tab -

expanding the background tile on an active state and

collapsing when clicked out.

home

HOW TO DESIGN BETTER TAB BARS 136

 TIP 7

Name + dot indicator

A great way to show a user an active tab state as well as to

inform what page he’s currently on.

home

TIP 8

Dash indicator

Similar to a dot, add a color fill to your icon and add another
visual indicator of an active state - a dash.

HOW TO DESIGN BETTER TAB BARS 137

The End
Thank you for making it to the end of this ebook! There are a
few more things I wanted to share with you.
I really do hope that this free resource was of some help to you,
and I want you to know that I will release more free e-books on
many different UX/UI topics in the future to help you learn faster,
work more efficiently and earn a good living while doing so. I will
also keep updating this version with new tips when new content
is being released.

As my next goal, I’m working on a comprehensive guide on how

to get noticed as a designer, and how to manage project work
from start to finish. As all things that require time it will not be
free, but, it will be released at a very affordable price. I’m also
working on something else entirely, and fingers crossed, I should
be able to share it with you when my Instagram reaches 20K.

Make sure to follow me on Instagram at @uiadrian to be in the

loop for more updates on this new release and to get the latest
freebies whenever they’re launched!

I’d like to thank you for downloading this book, and supporting
me as a creator. Posting for you guys, sharing my knowledge and
learning new things became a sort of addiction to me. I hope
that this community will keep growing at a similar pace.

For now though, if you’ve enjoyed this free ebook I’d really
appreciate your opinion, and I’d massively appreciate if you
could go to gumroad.com/library and leave a 5-star rating. It will
help me make more (free!) educational content in the future.

Appreciate your support my friend!

The end 138

The end
P.S. Also I’d like to announce that since my inbox has been flooded
with requests for design audits and consultations I decided to
allocate between 2-3 hours per week to offer ui/ux audits for
companies in need, as I simply don’t have the time to go over every
single message and request from you guys, and some are really
challenging and impossible to discuss on DMs. I’m going to launch it
soon, so you’re going to have an ability to book a call on Zoom with
me and ask all the questions you like :)

Thank you!

connect with me on:

@uiadrian uiuxadrian adrian.kuleszo

Stay tuned for my next ebook!

The end 139