How To Design Better UI Components (Ebook)

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 Sold to
t s e c ured!
stuntgomez7@gmail.com
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.

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

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

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%

Chapter 2
DESIGN LIKE A PRO
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.

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.

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.

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.

Chapter 3
shadows
DESIGN LIKE A PRO

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

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

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.

Chapter 4
DESIGN LIKE A PRO
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.

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

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)

Chapter 5
DESIGN LIKE A PRO
buttons
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.

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.

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

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.

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

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

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

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 *
office@designmesocial.eu office@designmesocial.eu
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

CHAPTER 7
Chapter 8
DESIGN LIKE A PRO
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
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
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.

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
Refine your search Product categories: Coffee cups x Price: USD 20-49 x Brand: Starbucks
Price
USD 20 - 49
Categories
Coffee Cups
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
Refine your search Reset all filters x Product categories: Coffee cups x Price: USD 20-49
Price
USD 20 - 49
Categories
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.
Categories Refine your search
Price
USD 20 - 49
Categories
vs
show more
Brands
Show products Show 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
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)

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)

CHAPTER
Chapter 8
8
DESIGN LIKE A PRO
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

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

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

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
2 $11.98 2 $11.98
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
2 $11.98 2 $11.98
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
2 $11.98 2 $11.98
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
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!

CHAPTER
Chapter10
1
DESIGN LIKE A PRO
nav bars
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

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

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

Chapter 11
DESIGN LIKE A PRO
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

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
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
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
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
Search Search guides, ebooks, and more…

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
Search UI design|
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
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 11
CHAPTER 12
DESIGN LIKE A PRO
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.

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
j.cameron22@gmail.com
+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 up flo
DESIGN LIKE A PRO

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

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

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

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.

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

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

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.

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.

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.

CHAPTER 14
ashboard
DESIGN LIKE A PRO

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.

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

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

CHAPTER 15
hero secti
DESIGN LIKE A PRO

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.

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

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
4
5
6
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
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%

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

How To Design Better UI Components (Ebook)

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

How To Design Better UI Components (Ebook)

Uploaded by

Copyright:

Available Formats

Adrian K

DESIGN LIKE A PRO free ebook

Chapter 1 Grid system 04

Chapter 4 Style guides 21

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

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

the HOW TO DESIGN BETTER series, a complete ebook!

instead of releasing the two separately.

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

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

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

new information and tips.

DESIGN LIKE A PRO

HOW TO DESIGN GRID SYSTEM 04

Grid system links together many design elements and

It is extremely helpful when laying out the foundation for a

HOW TO DESIGN GRID SYSTEM 05

Here are my (personal) best settings for web:

1240 px working space

20px inner-padding 12 columns

HOW TO DESIGN GRID SYSTEM 06

414 x 896 art board

HOW TO DESIGN GRID SYSTEM 07

Add rows to help align your components horizontally.

HOW TO DESIGN GRID SYSTEM 08

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

HOW TO DESIGN GRID SYSTEM 09

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

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

them appropriately. Imagine them being nested in container

same horizontal line.