Adrian K

@uiadrian

DESIGN LIKE A PRO

how to design better free ebook

UI components

Icon design App design Web desig

uiadrian
James Sanchez

Upload files

,, ****************

Remember me

,, Login Upload

Color mode Analytics Report - 1.09-08.09-

8+ 99+
read new messages see engagement accoun

Congratulations!
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

Chapter 18 Radio buttons (coming soon) -

Chapter 19 UI cards (coming soon) -

Chapter 20 Tooltips (coming soon) -

Final word 138

Introduction
Hey Everyone!
This version of the eBook was updated in June 2022.

It is the third official update to the How to design better UI

Components - we slightly edited a few chapters and refreshed the
whole e-book’s design. We’ve got 3 more chapters scheduled to
release this summer. Stay tuned for that!

Now, for those who don’t know me yet and see this e-book for 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.

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

followers on my Instagram account, and if you’re reading it right
now, it means we succeeded! (we’re close to 100k now!) 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 about my future releases. Bless ya!

PS Check out my new eBook about designing mobile interfaces for

iOS here - Design Manual. Sign up for the newsletter and wait for
my next email. I might have a surprise for you!
 Chapter 1

DESIGN LIKE A PRO

how to use

grid
gridsystem
system
Intro to grid system
A grid system is one of the best and simplest ways to structure a
layout, and create a consistent, and well organized 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.
 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

 TIP 2
Mobile Grid
I use an iPhone 13 Mini to start out my designs as it gives me
enough room to work while at the same time being one of the
smallest, most popular screen resolutions. You have to remember
that it’s always easier to scale the design up than scale it down
when the content is already designed. However, if you use Figma’s
auto layout and use contraints it shouldn’t matter as much as it will
remain responsive regardless of the frame size.

375 x 812 px frame

8 px gutters 16 px margins

4 columns
 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
 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
 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 location and Drop a pin on your location and
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
 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

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

DESIGN LIKE A PRO

gradients
how to design better

gradients
Intro to gradients
Gradients help your designs leave a more significant visual impact
than simple solid colors. Here are the most popular 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.
 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.

TYPE 4

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.

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.

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.

The safest bet would be to choose analogous colors for your

gradients, meaning colors near each other on a color scale.
Chapter 3

shadows
DESIGN LIKE A PRO

how to design better

shadows
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 y 3 blur 6 x 0 y 30 blur 50
 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
x0 y 75 blur 80
opacity 10%
x0 y 30 blur 40
 TIP 4
Use a shadow layer
Consider using a shadow layer instead.

Login Login

bg- color: duplicate the layer,

#63CCFB - #00A2F4 remove shadow and
color #00ABFF add object blur: 50
opacity 15% change opacity to 20%
x 0 y 25 blur 50 position it below the
button

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.
 Chapter 4

DESIGN LIKE A PRO

style
style guides
how to design better
guides
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.
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.
 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

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

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)

27
 Chapter 5

buttons
DESIGN LIKE A PRO

how to design better

buttons
Intro to buttons
A regular user doesn’t even pay attention to how buttons are
design, yet they are a very essential element in the whole design.
Buttons are used to complete certain actions and tasks like move
to another page, complete a purchase or confirm an action.
Buttons should be labled with a clear Call To Action copy to enable
users to indicate specific activities. They allow users to perform all
sorts of different actions and make decisions as easy as tapping it
once and starting an appopriate set of actions.

Whether it’s saving, sending or downloading something, buttons

are one of the most essential elements in UI. There are certian rules
that should be followed in order to design a “good” and inviting
button, and we as designers need to be aware of them.

Here are a few of the most important principles defined by Material

Design that should be followed when designing buttons:

Identifiable - what means by that is that buttons should appeare

as if after clicking it there’s going to be an action performed.

Findable - can’t expect the user to perform an action what requires

clicking a button if the button is hidden somewhere and not
noticeble

Clear - the action that the button is used for must be clear, and we
can do that by either using the appropriate icons to indicate an
action, or simply using a clear and concise copy for the labels.

5.1 The anatomy of a button

Let’s define a couple of important characteristics:

border radius
I’m a button! padding
label

Button anatomy is rather simple.

First, we have our text label, which usually is between 15-19 px big.

Next, we have our padding that surrounds our button label. Usually,
the horizontal padding should be twice the size of the vertical
spacing with total button height being anywhere between 36-60 px.

Third, we have our border radius. The reason behind using either
sharp or rounded corners relies heavily on your brand’s visual
language. Use rounded for more inviting, playful, and less serious
designs. Use sharp corners for more sophisticated designs.

Let’s look at an example button size

vertical padding: 16 px
text size: 16 px Click me! 22 px
32 px
5.2 Button states

Buttons need states to differentiate them between each other.

Each button state must be easily distinguishable from the rest.

Remember not to take too drastic measures when modifying each

state, it creates unnecessary visual noise, and we want simplicity.

Here are the most common button states you’ll find.

submit submit submitted

normal hover active

submit submit loading...

disabled focused progress

5.2. Tips on designing buttons

TIP 1

Don’t get overly creative

The purpose of the button is to be clicked. We got to see them

enough times already to associate their standard shapes with their

actions. A button should look like a button, therefore there’s no

need to make it look so much different. Stick to regular button

shapes and don’t get too creative designing them.

 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.

 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?

mobile: 48 x 48px desktop: 164 x 48 px

Get started now

Use the minimum recommended size above and adjust your size
from there. With mobile you want the buttons to be at least 48 px in
size since that’s about the size of an average human finger tip.

With desktop you’ve got a bit more freedom but you have to
remember. Your buttons will probably be the most important
element on your page so you need to make them prominent enough
to stand out and be easily clickable.

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

 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.

Get started now

Get started now

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 little explanation - 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.

 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.

Get started now Get started now Get started now

quick note:

Rounded buttons are considered more friendly and positive than sharp edges. At the

same time however, they make it a lot harder to design content around them.

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.

Click here Download PDF

 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!

 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.

 Chapter 6

DESIGN LIKE A PRO

forms boxes
how to design better
form boxes
Intro to forms

Forms are one of the most essential UI elements used to collect

information from the users. Here are the basics you need to know

about forms when designing them.

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

required field
Email *

placeholder text

*
Phone Number

+44 1632 960530

input type

Message
optional field

primary CTA

Cancel Send

secondary CTA
 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
 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 * First name

Email * Email

Message (optional) Message (optional)

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.

 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

 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

 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

It’s all about reducing the friction for your customers. If they have to
go out of their way and input information that’s troublesome to
type, your drop off rates will increase. Make it as easy as possible
for your users to complete their actions and selecting the right
input field will help you achieve that.
 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
 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

This is not a must of course but it’s much easier to read and edit the
information when transferring your collected data into sheets and
documents. Think about the functionality behind your action when
designing for different systems.
 Chapter 7

DESIGN LIKE A PRO

how to design better

duct filte
product filters
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
 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
Price range filter

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

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

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

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

Price

USD 20 - 49

Categories

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.

 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. It helps to add visual
hierarchy and reduce the clutter.

Categories Refine your search

Price

USD 20 - 49

Categories

show more

Brands

Show products Show products

Filters are one of the most confusing and most helpful elements on
your shop pages and making them easy to use and understand
should be your top priority when designing your stores. This is true
especially for websites with large catalogues of products.
 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
Reset all filters Product categories: Coffe
Refine your search

Price

USD 20 - 49

Categories

Coffee Cups (45)

Add to cart

show more

Brands

Starbucks (32)

As with the previous example, indexing works great for large

catalogue websites, but they might not find its use for stores with
limited quantities of products.
 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 xx
Refine your search Reset all filters Product categories: Coffee cups Brands

Price

USD 20 - 49

Categories
Coffee Cups (45)

Loading products..

show more

Brands
Starbucks (32)

Show products (32)

Giving users any kind of visual cue to what’s happenning behind the
process is super useful in reducing the friction. Don’t make them
think that their screen just froze and nothing is happening.
 Chapter 8

cing page
DESIGN LIKE A PRO

how to design better

pricing pages
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
 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!

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

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

 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
 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.
 Chapter 9

DESIGN LIKE A PRO

hopping ca
how to design better

shopping carts
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
 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
 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

$14.98 1 $14.98
1 item

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.

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

1 item
$14.98

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!

 Chapter 10

DESIGN LIKE A PRO

nav bars
how to design better
navigation bars
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

 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

 TIP 4

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

 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

 Chapter 11

earch boxe
DESIGN LIKE A PRO

how to design better

search boxes
Intro to search boxes
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
 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
 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.
 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.
 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.
 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

 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
 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”.
 Chapter 12
Chapter 11

DESIGN LIKE A PRO

how to design better

dal windows
modal windows
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

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

 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
 Chapter 13

sign upflow
flo
DESIGN LIKE A PRO

how to design better

sign up
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
First step in designing a sign-up
flow is creating an artboard

Dimensions

artboard = 414 x 896

I know, I’m still designing my UIs
on an iPhone XS Max but if you
use auto layout + constraints it
shouldn’t matter as much which
resolution you choose!
 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
You can either create a:

4 column grid with

16px margins and
8px gutter

or

drag some guides on both

sides to keep the content
within a set width container.
 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
 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.
 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.

 STEP 6

Instant field validation

Add valuable and instant status messages. 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.

9:41

Sign up

Do this as soon as they

click out of the field and try
to move to the next input.
 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

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.

 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.
 STEP 9

LEGAL and ACCEPTANCE

Remember about legal pages and/or acceptance boxes. When

creating an account you’ll have to include links to terms, privacy

(and GDPR acceptance boxes if your app is live in EU).

9:41

Sign up

There’s one thing we

didn’t mention

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

 STEP 12

FORGOT PASSWORD
No matter the case, forgetting a password happens all the time.
That’s why most login forms offer a ‘Forgot Password’ link to reset
the password.

9:41

Sign up

When users click the

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

EMAIL VERIFICATION
In most cases, to help users re-establish access to their account,
that will be through sending a password reset link.

9:41

There is a second way though,

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

MAGIC LINK

Magic links are a faster and easier way for users to sign in without

the need to remember their passwords.

9:41

Opening a default mail app.

Enter code manually

Offer an ability to type in the

code manually as a secondary

option.
 STEP 15

MANUAL VERIFICATION

And that’s it! When the code is valid, enable the user to move to

another step.

9:41

1 3 9 0 7 2

Add a quick link to re-send

the verification code.

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

DESIGN LIKE A PRO

how to design better

ashboards
dashboards
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.
 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.
 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.
 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 + 4.28% $1,121 - 8.28% 2:42 min +0:36 min 61,6% -2.56%
86.42%

Top Selling Products Download report

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.
 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.
 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.
 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.
 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% -2.56%

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

 Chapter 15

DESIGN LIKE A PRO

ero
hero section
section
how to design better
hero sections
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.
 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.
 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.
 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.

 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.
 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.
 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.
 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.
 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.
 Chapter 16

paginatio
DESIGN LIKE A PRO

pagination
how to design better
pagination
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
 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.
 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

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

7
 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

 Chapter 17

DESIGN LIKE A PRO

tab bars
how to design better

tab bars
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.

The icons for this navigation bar were downloaded from

thenounproject.com

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%

 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.
 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
 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.
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 content 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 every now and then!

Also, If you haven’t seen my new eBook on how to design mobile

apps - check out my latest release - the Design Manual.

It’s a 630+ pages long book that consists of both theoretical and
practical parts. It comes with a custom designed iOS app that you
get to practice on while referencing the workbook material.

Make sure to download the FREE sample and if you’re interested in

the full version, stay subscribed to the newsletter; I might have a
surprise for you down the line :)

Once again, 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 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. I’m soon going to launch a series of video courses on Skillshare

and Youtube, so if you’re interested in learning UI/UX from

someone who’s a product designer lead with close to 6 years of

experience - make sure to follow me on my Instagram and stay

subscribed to my newsletter. I’ve got a lot more coming for you!

Ok, that’s it! Thank you for reading to the end.

Thank you!

connect with me on:

@uiadrian uiuxadrian adrian.kuleszo

Stay tuned for my next ebook!

The end 139