How To Design Better UI Components 3.0 Full Ebook

Table Of Contents
About me and this e-book 02
The Design Basics 06
Figma Setup 07
Layouts, Grids, Box Model 10
Master the Foundations 29
Colors, Shadows, and Gradients 30
Master the Lingo 61
UI/UX Terms and UI Elements 62
Master the Interface 87
Buttons 88
Forms 99
Pricing 109
Dropdowns 118
Navigation 127
Search 134
Modals 140
Hero Sections 145
UI Cards 155
Style Guides 166
Practice makes progress 174
Good vs Bad UI 175
Practicing UI 184
What’s next? 194

Hello, Friend!
Since launching our first eBook back in February 2022, we’ve seen an
outpouring of love, amazing reviews, awesome success stories, but also
countless requests for more design-related content.
We listened to your feedback and launched two more books, “The Design
Manual” for those wanting to master mobile design, and the “Ultimate
Guide to Web Design” for those interested in exploring the world of
profitable freelance and web design. Things were going great!
As we gained more experience in the art of writing, we quickly realized

that the content of our free eBook began to feel rushed, and the quality
wasn’t up to the standards of our other products. We've decided to pull
down our first eBook and give it a complete overhaul. To maintain high
quality and make the content of our new ebook ever-evolving, we also
decided to price it at $9. I want you to know that we truly listened and have
(hopefully!) made it much better.
So, here it is, a completely new, re-imagined version of our first eBook —
"How to design better UI 3.0”.
It's been two years since we launched our first eBook, during which our
social media community has skyrocketed to over 500k followers. This
incredible growth, a direct result of your continuous support, marks
another significant milestone in our shared journey together.  
I cannot fully express my gratitude for the support you’ve shown.  
Building on this momentum, we've rewritten our first eBook aiming to
serve as an essential resource for design enthusiasts and professionals
alike. Whether you're an interface designer, web designer, developer,
manager, or graphic designer, this eBook is designed with you in mind.
The pages ahead are packed with actionable insights, real-world
examples, and loads of visuals. As you flip through these pages, I hope
they’ll serve you both as a tutorial and a source of inspiration. And as this
book evolves with time, I hope it’ll become your new design encyclopedia.
Before you dive in, here's a quick suggestion: keep a design tool like Figma
or your favorite sketchbook close by. Some sections will compel you to try
things out immediately. After all, design is best learned by doing.
Lastly, keep your eyes peeled for some announcements at the end!
PS: For those looking for more in-depth dives into specific areas like mobile
interface design, figma or web design, don't miss out on my other products.
Follow @uiadrian on Instagram, @uiuxadrian on Twitter/X (some guy snatched the
tag away from me :( ) or simply look up my name Adrian Kuleszo on Linkedin.
There's always something brewing out there!

A little legend to help you navigate
While you’re browsing through this ebook you’ll notice text bubbles of
different colors and styles, with icons placed right next to them. These
are designed to help you gain more context about what you're reading
and to guide you on where you can potentially find more information
Here’s a legend to explain what each icon and bubble represents:
Descriptive text work created by my agency - DesignMe
Descriptive text additional, short and actionable tip
Descriptive text resource you can find in one of my products
Descriptive text my subjective thoughts
Now with that out of the way, we’re ready to dive into the ebook. I hope
you're going to enjoy this read! And please, if you do, don’t hesitate to
leave a testimonial. You’ll find all the links at the end of this ebook.
If you decide to spend a minute and record a video testimonial, as my way

of saying thank you, I’ll send you an exclusive gift, one of my existing or
future products, with a juicy discount. Thanks a lot!
Without any further ado, I hope you’re going to enjoy the reading!
Best, Adrian
Chapter 1
Figma setup
howtodesignbetter designme @ uiadrian

Setting up Figma for mobile vs web
Jumping into design, especially with tools like Figma, you'll quickly realize
that mobile and web design have their distinct characteristics. Both
require a different, unique approach to master, but once you grasp the
fundamentals, designing for both is equally fun and rewarding.
Let’s cover some basics first.

Available canvas
As you can see in the image below, there are some major differences
when designing for desktop vs designing for mobile. The main difference
lies in the available space and the axis orientation of the content itself. On
desktop, content stacks horizontally in columns and rows, columns
create sections, sections stacked vertically create full pages. On mobile,
almost everything stacks vertically, section under section.
App redesign project + Framer build for a client

Choosing the right frame
When you’re designing for mobile devices, pick a frame size that matches
the smallest and most common devices, like the iPhone 13 Mini or
Android Small/Large.
This helps make sure your design looks good for most mobile users.
If your interface elements have enough space to fit on the smallest frame,
you’re good to go. The opposite would be starting to work on one of the
larger screen resolutions only to find out your interface won’t scale down
appropriately, leaving you, or worse, your developers, with a lot of
responsiveness issues to solve in the post-design phase.
iOS - iPhone 13 Mini Android - Android Small/Large
375 x 812 360x800
Remember that it’s always easier to scale your designs up than down.
1200x1024 1440x1024 1920x1024
For web, start with a 1440x1024 frame, or if you plan to no-code your web
designs in Framer, go for 1200x1024. Typically, a 1440x1024 frame is a safe
starting point, but also keep in mind larger displays, such as 1920x1024,
mainly to visualize the changes in scale. The key here is to create designs
for the main desktop breakpoints.
With no-code tools like Framer and Webflow, if you choose a 1440px frame
as your base width, you’ll find that as soon as your frame hits 1439px in
size, Framer will automatically jump to the next breakpoint in line, which in
our case will be Tablet. It’s not ideal.
How to fix this? Just make sure that when you start designing on a 1440px
frame in Figma, leave enough margin to create a working space of 1200px
(with 20-40px margins) and place your designs inside.
We’ll cover that in the next chapter.

Chapter 1
Layouts
& Grids

Intro to grid systems
Before diving further, it's important to note: what I'm about to share is my
unique method for designing websites and mobile interfaces in Figma,
Framer, and Webflow, one that has consistently delivered results for me.
While other designers might have their own preferences, the key here is
producing designs that are clear and well-structured. When designs meet
these criteria, developers can translate them into reality more efficiently,
reducing the need for extensive back-and-forth communication.
This approach has not only benefited me but also the developers I've
collaborated with so rest assured that the things you’ll learn have been
tried and tested by myself. Now, let’s cover some basics first!
The basic terms
Minimalist Settings Page from the zave.it app
Column grid - a layout framework that divides a webpage or app screen

into vertical columns, helping us align and organize elements
consistently. It assists in maintaining consistent alignment and
organization of all the design elements within a certain frame.
Baseline grid - a set of horizontal lines that define a consistent spacing

sequence in a set frame. In UI design, it's used to create the vertical
rhythm and help with the text alignment. It’s not as common but you
might find its use when designing icons, logos, or more complex
dashboard layouts for mobile and desktop devices.
Columns - refer to the vertical sections within a column grid. In UI design,
they provide a guide for aligning elements and text. Figma provides
enough flexibility to specify the number of columns within a grid and/or
define the width of columns in a layout
Side Margin - the space on the left and right sides of a grid or layout. In UI
design, they provide breathing room and frame the content. In Figma,
setting consistent side margins helps in creating balance and prevents
the main content from being spread across the entire device width.
Gutter - space between columns in a column grid. It helps provide a

guide to separate the content for better readability.
The 8-pt grid
The 8-point grid system ensures that everything in the interface lines up
neatly and consistently. What this system means in practice, is it follows
multiples of 8 for all the spacing, margin, and even dimensions of user
interface components.
This approach is not only great for creating consistent designs but also
aligns with the pixel density of most screens, so you’re pretty much sure
that your designs will scale well across different devices.
For added versatility, especially when dealing with smaller elements or

finer details, I might occasionally use a 4-point grid instead. This provides
more precise control, especially in mobile app design.
Sometimes, and that’s only when working with Bootstrap grids, I might
use a 5px grid for some website designs that won’t be coded by myself.
8px 16px 24px 32px 40px 48px 56px 64px
An 8-pt grid breakdown from the Design Manual

8px vs 5 px grids
A 5px grid is often a better choice when working with a Bootstrap grid
that has a fixed column layout and requires more compact spacing. On
the other hand, 8px grids are well-suited for fluid layouts that benefit from
a bit more spacing and visual breathing room.
What’s the right setup for an 8px grid?

This choice mainly depends on your preference, but from my experience,
I've found a Fluid Grid with 12 columns, 100px margins, and 20px gutters to
be the perfect starting point for all my website designs.
If you go with these settings, your total width will be 1240px. This will let
you divide it into 3 columns, each 400px wide, with 20px gutters between
the columns, or 4 columns, each 295px wide with 20px gutters.
More details on the next page.

The Desktop Grid
My standard grid for a website design is built on a 1440x1024px frame.
It might seem complex at first, but my approach is straightforward: I opt
for 100px margins all around. This creates a 1240px safe zone for my
designs, which I can then adapt for web use. My layout includes a 12-
column grid, separated by 20px gutters.
If I develop my designs in Framer, I add 20px of additional side margin to
let my designs breathe when they hit the breakpoint’s edge.
no margin at <1200px
20px 1160-1200 px 20px
I design for two box widths - a minimum of 1200px and maximum of 1920px+
Containers
This is important especially for development. When designing your pages,
consider how your content will be coded. The best approach is to envision
each section and element as being placed inside containers, or blocks, or
what we refer to as divs or boxes in web development. This practice of
nesting boxes within boxes is known as "The Box Model."
So, imagine everything sitting in containers. Don’t go too crazy with your
layout because developers will hate you for your “creativity”.
My Figma Mastery course breaks down the box model in more detail
Whenever you add a new element, you need to think about its bounding
box and the position within the existing layout. So, put your images into
containers and your containers into bigger containers until they become
columns and sections. And don’t forget about padding and margins.
Scaling up past 1440px
When designing for small screens, it's important to consider what
happens when we exceed a 1920x1080 resolution. This practice is often
overlooked by beginner designers. How will our design stay responsive?
Let's use this page as an example
120 px 1200px box-width 120 px
AndesMortgage Home About Videos Blog Contact Book an appointment
A Home Loan Experience
That Makes Sense

Let us help you put a comprehensive mortgage plan that fits you
while getting you the best rates and service.
Book an appointment Learn more

1440x1080
38+ Ratings
A client website reimagined using responsive width breakpoints
You want to cover as many screen sizes as possible so starting with a

smaller one will help you cover more choices.
Depending on your design, the same box-width on higher resolution

might look like an overkill leaving too much space for side margins and
making the entire design look unbalanced, especially when we’re moving
closer to 4k screen resolutions or the ultra-wide monitors.
This is how our design would look like on 2k resolution. It’s not bad, but
what can we do to make it better? Let’s see:
One way a developer can translate your designs into fully responsive, live
websites is by using responsive parameters like VW (viewport width) or
EMs, which are units relative to the font size of the base element. In most
cases that’s 16px. Sounds confusing, I know, but bear with me, I’ll try to
cover this in one of future updates!
If you decide to no-code your designs, in most tools there’s a setting

called max width. When going over 1920x1080p we can choose to set the
maximum width as our boundary. This width setting is entirely up to you.
Let’s say we want to stop scaling our designs at 1920 px. We can always
design a screen for our developers (or ourselves) to visualize this better.
Fixed vs full width
You can either set percentage values for your side margins (5-10%) and
let your designs span across 80-90% of the available space, or place the
design on a fixed width, like the 1240px we mentioned in the last slide.
This will highly depend on your personal preference.
If you set a fixed width for your designs you need to keep in mind the
smallest resolution breakpoint. If your landing page has a 1240px layout
and someone visits it from a smaller device (or via split screen) you need
to add side padding to add some breathing room to your layout.
Mobile Grid
With smaller screens, mobile designs are often more focused, prioritizing
essential content and ensuring usability within limited space.
Every pixel counts.
The canvas here is compact, and often designers have to make choices
about what to include and what to keep for larger screens.
Figma Mastery was designed with 20px margins on an iPhone 13 Mini frame
I always start designing mobile views on the latest iPhone frame with the
smallest size (375px wide) as it’s much easier to scale the design up.
I use a minimum of 16px margins on the side with 8px gutters and build
my interface on a 4-column grid. For Android, I start with Android Small
and use the same grid layout as for the iOS.
Row grid
Row grids provide a framework for more structured layout, helping you
align and space your components uniformly, therefore enhancing the
visual appeal and readability of the interface. Not as popular as column
grids, they do have their purpose in interface design; they are especially
useful for designing complex web and mobile dashboard views.
8px offset
type: top
8px height
8px gutter
count: 800
make it a high number if
your artboard takes a lot
of vertical space
The Fintech UI Kit from the Design Manual was built without baseline rows
While row grids are invaluable for designers in maintaining visual
consistency, it's essential to understand that developers might not utilize
them directly. This is because, in the world of front end development (or
software development), there aren't explicit 'row grids'.
Instead, developers rely on frameworks, CSS grids, and Flexbox to
achieve similar layout objectives.

Soft vs hard grid
Whether you should or shouldn’t use a hard grid is really up to you.
I rarely use baseline grids to space out my elements vertically. As a rule of
thumb, I add my vertical columns and make sure that all the elements fit
in the horizontal container and distances between them, as well, as
elements themselves, are built on 4-8px increments.
When/if you’re more experienced, you’ll find yourself designing without
any layout grids at all, using 4-8px spacing increments and auto-layout as
your only source of truth. That’s how I usually design most of my
interfaces. I’ve done it so many times, that it’s enough for me to just turn
the grids on for quick reference whenever I need to align something that
has a more difficult placement within the design, and then continue
designing with my grids turned off.
I designed most of the zave.it app with my layout grids turned off
Chapter 1
Alignment

Container alignment
When aligning your “inner” containers you should aim to fit in the given
widths of the columns using the gutter widths as your margins. It will
make it much easier to design with your elements aligned within the grids.
Design Manual website was built on a 12-column layout with an 8px grid
It’s worth mentioning that you shouldn’t worry about the alignment of
your elements within the container itself. Just make sure you use round
numbers to space them out and give your container elements enough
room to breathe by adding between 20-40px of inner padding if needed.
You should use padding depending on the visual context. In the image
above, I added gutters (margins) between the columns of a single row to
fit the design inside my box width and align it with my header navigation
width to anchor the content to the both edges for easier scanning.
Importance of the vertical rhytm
Vertical rythm establishes consistent vertical spacing, ensuring that text,
headings, and other design elements are uniformly spaced and aligned.
Space your elements according to their proximity. Titles and descriptions
can be spaced at 8-20px+; text groups and icons/buttons - 20-40px+.  
Add 12-20px+ padding around containers for better legibility.
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.
Daily Living Assitance Personal Care Speech Therapy
Receive essential support with daily Get from personalized assistance Enhance your communication and
tasks, ensuring comfort and well- designed to support all facets of cognitive skills with our
being every day. personal health and hygiene. comprehensive speech therapy.
Layout consistency
Consistency in design means making things look and work the same way
throughout. It helps users know what to expect, making things easier to
use. When everything feels familiar, users trust the design more. In short,
consistency makes things clear and user-friendly.
Besides all that, a clear grid layout provides you and your team with a set
of consistent sizes, spacing values, and patterns for your projects. This is
extremely important when you want to build a product that will last, be
constantly updated, often by different team members.
A lot of designers will tell you to screw naming layers, freestyle a design
process, or forget auto-layout and this will work as long as you’re working
solo or with an inexperienced design/dev team on your client’s side. But
as soon as you join a proper team, you’ll need to follow certain guidelines.
The sooner you learn them, the better. You can always simply choose not
use them if you don’t need to. That’s what I do with my personal work.
A set of uniform components from the Investment flow for zave.it

Mind the (white) space
White space, often referred to as negative space, is the unmarked area
between design elements. It prevents visual clutter, improves readability,
and creates a focus point. You should use it to create better visual
hierarchy, guiding the user's eye from one element to another seamlessly,
without second-guessing the importance.
This goes for both inner padding and the outer margin. Remember to
leave at least 16-20px of margin and make your interactive elements easier
to tap. Space them apart to avoid miss-clicks. Let your content breathe.
Less is more - don’t overcomplicate your UI
When designing your interfaces you should always think about what else
can you strip from your layout without compromising the functionality
and aesthetics, rather than constantly adding more elements. Everything
you add increases cognitive load – the amount of processing power it
takes for your brain to process what’s happening on the screen. The more
elements you add, the harder it is to understand your layout.
On the image above you can see how hard it is to process a simple
product page section. There are simply too many things added into a
single column. Good approach here is to design a mobile view and
determine if the interface is simple enough. If not, strip more elements.

Chapter 2
Colors in UI

Basics of Colors in UI
Colors are used to accentuate important UI elements, set the tone, and
most subconsciously drive user behavior. In UI design, colors serve not
only as the eye-candy decoration but also as functional guides,
influencing user attention and improving usability and legibility.
Proper use of colors can improve user engagement, drive conversions,
and convey brand identity much more effectively. Because of this, every
designer must have a really good grasp of color theory.
Especially important is the knowledge of designing for the minimum
accessibility recommendations where compliance with the minimum
values is the ultimate requirement for most commercial projects.
WCAG 3.0 AA level contrast requirements
Get
Get started
started Get
Get started
started
2:1
2:1 AA
AA AAA
AAA 7.25:1
7.25:1 AA
AA AAA
AAA
You should always aim to meet the following contrast ratios:
Large text (>24px) - 3:
Small text (<18px) - 4.5:
Buttons and inputs - 3:1
How to know you’re meeting them? Use plugins like A11Y Contrast
Checker or Stark. Check contrast values right as you’re designing your
interfaces and creating your components, or you’ll have to fix them while
preparing your handoff documentation.

Psychology of color
yellow
chartreuse amber
green orange
teal vermillion
blue red
violet magenta
purple
Visual from the “Colors in Web” Ultimate Guide to Web Design chapter
The color wheel is a great tool for understanding the basics of color
theory, guiding designers in selecting color schemes that enhance user
experience and engagement. Different colors can evoke different
emotions, influencing how users feel about and interact with a digital
product. Understanding the psychological effects of colors can help us
designers create more effective and emotionally engaging interfaces.
For example, blue is widely recognized for its calming effect and is often
associated with trust and reliability. This makes it a popular choice for
financial and healthcare applications, where trust is the most crucial
element. Green, symbolizing growth and harmony, is frequently used in
apps related to sustainability or wellness. Red, which can evoke feelings
of urgency and excitement, is effective for alerts or calls to action but
should be used sparingly to avoid causing anxiety.
Yellow, with its associations of happiness and vitality, is perfect at
capturing attention and instilling optimism, making it an excellent choice
for highlighting key features, though its brightness and contrast issues
need to be used with special care to avoid visual overwhelm.
Orange radiates friendliness and enthusiasm, perfect for call-to-action

buttons that encourage user engagement without the intensity of red.
You bought this book clicking on an orange button, remember? Did you
consciously register how’d that made you feel? ;)
Purple brings emotions of luxury and creativity, appealing to brands that

aim for innovation; however, its charm has been lost and diminished with
so many tech companies opting for dark modes and literally every single
shade of purple, making designers search for more uniqueness and
venture beyond pure purple. As a result, and thank God for that, we’re
starting to see a growing trend towards diversifying color palettes in UI
design, for a more exploratory approach to color selection that capture a
brand's unique identity while standing out in a crowded digital landscape.
Going into a less colorful spectrum, black offers elegance, favored by

high-end products for its modern aesthetics. It’s also effectively used in
dark mode designs to enhance visibility and minimize eye strain.
And lastly, white symbolizing purity and simplicity, creates a clutter-free

space that focuses attention on critical elements and embraces the
principles of minimalism. Synergies well with black and any accent color.
It’s also important to understand that colors can have different meanings
in different cultures, affecting user engagement and the overall success
of an application on a global scale. Always research what colors mean in
the market you're designing for to make sure your product does well.
Tints and shades
Primary, secondary, and tertiary colors come in various tints and shades
beyond their pure forms. Tints are made by mixing pure colors with white,
leading to pastel shades that are less saturated. Shades are formed by
adding black to pure colors.
Tints
Shades
In UI design, playing around with tints and shades can really help you
create the right content hierarchy. By lightening colors with a bit of white
(that's your tints), you get these cool, soft looks that are great for
backgrounds or less important elements like secondary buttons.
Cancel Save changes
On the opposite side, darkening primary colors (your shades) provides

more emphasis to more essential interface elements. Balancing tints and
shades strategically is an effective method to direct users' focus and
accentuate critical components in your design.
Warm vs cool colors
In UI design, it's all about setting the right mood. Warm colors with hues
ranging from red to yellow make everything feel more inviting and comfy.
They're great for creating a friendly, approachable vibe.  
On the other hand, using blues can tone down the overall look and feel,
making it more subtle and relaxed. Blues create a sense of calm and
order, ideal for achieving a more subdued and minimal design.
9:41 9:41
Inbox GBP 0 Inbox GBP 0
Filter Sort Filter Sort
Start receiving calls Start receiving calls

Share your profile with your
Share your profile with your
audience to start earning money audience to start earning money
Copy Link Copy Link
Influencer 1:1 Chat App
Notice how subtle changes in color hues, on top of typography, and corner
radii influence the entire design’s look and feel.
Inbox Inbox
High-contrast color combinations
By pairing colors that starkly contrast each other, like bright colors
against dark backgrounds, you can bring elements into sharp focus. This
approach is fantastic for highlighting key features, guiding user attention,
and bringing more energy and dynamism into the design
The Prototyping Masterclass unreleased landing page
A CTA section on my unreleased course used a contrasting vibrant green

accent colors against a full dark background to grab immediate attention.
Monochromatic color combinations
Monochromatic designs are created by using super simple and effective
color combinations, like various shades of a single color, creating a more
toned-down and pleasing aesthetic. Ideal for designs aiming for a more
unified and less contrasting appearance, providing a smooth visual flow
that's easy on the eyes and perfect for creating a user-friendly interface.
A color palette used in the Design Manuals’ Fintech App is rather

simplistic, using whites, grays, and blues as the primary colors with
vibrant green serving as an accent.
Using a monochromatic color combination in UI design can offer a sense

of harmony and simplicity. By sticking to variations of a single color, you
create a cohesive and unified look for your user interface. This approach
can make the design feel “cleaner”, and easy on the eyes. It also
simplifies decision-making when selecting interface colors.
Contrast and legibility
Maintaining readability of text against its background color should be your
main concern when designing your interfaces.
The right contrast not only ensures that text is easily legible but also
serves to emphasize calls to action, distinguish different elements, and
draw attention to important information.
Settings page from the zave.it app MVP
A comparison of UI sections with low versus high text-background

contrast clearly demonstrates how contrast levels can significantly
impact user experience and accessibility.
High contrast makes text stand out sharply against its background, while
low contrast text might look aesthetically pleasing, it can be challenging
to read for users with visual impairments, older audiences, or those in
environments with poor lighting. Designers must always consider the
broader audience and prioritize readability and accessibility over
aesthetics to bring the perfect balance between the three.
Consistent branding
Colors should consistently reflect the brand, making it recognizable
everywhere, from websites to ads, helping people remember and trust it.
What comes to mind when you think about Coca-Cola? Red, white, black.
Facebook? Blue. That’s how powerful colors are in branding.
Fintech App - the Design Manual
Emotive Use of Colors

Colors can evoke emotions; blue might instill trust, while red can inspire
urgency. Selecting colors that match the intended emotional tone can
enhance user engagement. Users are more likely to trust and interact
with elements that evoke the appropriate emotions. iOS example below:
iOS Native Elements chapter - the Design Manual

Pick colors from images
If you’re not sure what color palettes to choose but you do have existing
imagery that you’d like to include, you can always try picking colors from
your images. It’s an old branding trick that works really well.
Simplify your colors

Choose one primary color that will dictate your light tints and dark shades.
Throw an accent into the mix if you want to. Follow the 60-30-10 rule if
you’re not sure how to combine colors in your UI. Use 60% for your
primary shades/tints, 30% for your neutral, and 10% for your accent.
Primäre
Neutral
Accent
Color tone the images
If your site or an app uses a particularly warm or cold color palette, try
editing the color temperature, saturation, and exposure of your images to
match the overall aesthetic of your color palette.
Color your grays, tint your blacks

Instead of using pure grays, pure white, and pure black, add a dash of your
primary color into the mix.   
Here’s a quick trick to do this without any plugins or color tools -> Overlay
your primary color on top of gray, reduce opacity to 5-15% and color pick
from the overlapped shape. Do the same with your black and white colors.
+ =
+ =
Feedback and Interactivity
Using colors to indicate interactivity (like hover states) or feedback
(success in green or errors in red) is crucial in guiding users attention.
DesignMe client work - CRM Platform
Use color to indicate system status

You’ll need at least 3 system colors for error, warning and success states.
These are red, orange, and green. As always, they should meet at least
the minimum required contrast ratios of 4.5:1, ideally 7:1.
1.65:1 contrast ratio
Error Warning Warning
7:1 contrast ratio
Error Warning Warning

Design in grayscale
Grayscale design is an efficient and focused approach to creating user
interfaces for apps and websites.
When designing in grayscale, the main focus is put on the app or
website's overall layout, structure, and functionality. This helps ensure a
solid foundation before adding visual elements like color, which can be
distracting and time-consuming at the start.
By doing so, designers can avoid the potential distractions and time-
consuming revisions that often accompany early color decisions. This
methodical progression from grayscale to color allows for a more
deliberate and effective design process, making sure that when colors
are finally introduced, they serve to enhance and complement the
carefully constructed layout and functionality already in place.
9:41
32.06 ETH
What UI elements do I need to include?
Best Seller
In which order should I add them?

Cooper Rosser Maren Lubin
$23,102.27 $23,102.27
Does the information flow logically?

Top Collections
R E A
A R
R
T
Is the UI too distracting?

P E R
W
O R
U
K
S
Will users know what to do on this page?
Abstrack White Waves
Does every element serve a purpose?
50 ETH 22h 50m 22s
Place Bid
Top Collectors
Identify accessibility issues
Grayscale design can help identify potential usability and accessibility
issues. By working in grayscale, you can concentrate on the visual
hierarchy, contrast, and legibility of text and interface elements.
Grayscale designs enable faster iteration and decision-making, as less
time is spent selecting colors and creating color schemes. This can lead
to quicker design revisions and more efficient design processes overall.
9:41 9:41
32.06 ETH 32.06 ETH
Best Seller Best Authors
Cooper Rosser Maren Lubin R E R E

Cooper Rosser Maren L R
A
A
R
R
A
A
R
T
T
W
W
P E R
P E R
$23,102.27 $23,102.27
$23,102.27 $22,102.27
O R
O R
U
U
K
K
S
Products listed Products listed
Top Collections 121 see all 109 see all
R
A
R E A
R
R
A
R E A
R Top Collections
T
T
W
W
P E R
P E R
O R
O R
Abstract White Waves

U
U
K
K
S
R E A R E A
A R A R
R R
T
T
W
W
P E R
P E R
O R
O R
U
U
K
K
S
50 ETH 22h 50m 22s
Place Bid

50 ETH 22h 50m 22s
Place Bid
50 ETH 22h 50m 22s
Place Bid
Top Collectors Top Collectors

It provides smoother transition to color
Once the grayscale design is finalized, it becomes easier to introduce
color. You can now apply a color scheme that aligns with the brand and
enhances the user experience without impacting the layout and structure
R E A
A R
R
T
P E R
W
O R
U
K
S
Abstract White Waves Abstract White Waves
50 ETH 22h 50m 22s 50 ETH 22h 50m 22s
Place Bid
Colors can sometimes create visual clutter and make it difficult for users
to focus on essential design elements. Incorporating grayscale early in
the design process facilitates a deeper focus on the functionality and
usability of the interface.
By temporarily removing color, designers are forced to prioritize the layout
and interface structure, so that when color is eventually added, it
complements and enhances the user experience without compromising
on its clarity and ease of use.

Chapter 2
Shadows

Intro to shadows
In UI design, using shadows helps make digital spaces feel more like the
real world by adding depth and realism to the visuals. By mimicking the
way light interacts with objects in the real world—where items can
overlap, cast shadows, and reflect light—designers can infuse a sense of
depth and realism into digital spaces. Using shadows in UI is not only
about about aesthetics; but first and foremost, about enhancing usability.
Skillfully integrated shadows help differentiate layers, establish visual

hierarchy, and guide users through their interactions with the interface.
As we delve into the use of shadows in UI, we'll explore how this element,
rooted in our everyday experiences, becomes an important component in
creating engaging, intuitive, and visually compelling interfaces.
Many beginner designers struggle with creating natural-looking shadows,

so in this chapter we’ll dive deep into the art of crafting effective and
visually appealing shadow effects in Figma.
Elevation
How do we make shadows appear natural and aesthetically pleasing? Use
elevation to add a layer of depth, simulating how objects cast shadows
based on their distance from other surfaces. Look at the example below:
Login Login Login
Login Login Login
Play with the softness

This is preferential as both shadows work great for different stylistic
directions. Making your shadow softer will make them look more natural,
similar to the real-world environment where the light source is far above
the object. This increased elevation adds more depth and more impact.
Login Login
color #000000 color #000000
opacity 10% opacity 4%
x 0 y 15 blur 20 x 0 y 10 blur 15
The first button looks as if the light source is casted directly above it
adding more contrast and making it more 2-dimensional.
Use the direction of the shadow
When creating your interface composition you should use a single
directional shadow. Having multiple interface elements with different
shadow directions and multiple light sources might not make much
sense visually, especially for cards sitting next to each other in a row.
Card Heading Card Heading Card Heading

Card description that breaks   Card description that breaks   Card description that breaks  
into two lines into two lines into two lines
CTA Button CTA Button CTA Button
Material reflection
To add a little branded, but also to some extent, abstract feel to your
interactive elements, you can experiment by adding a really slight
material color to your shadows for a colorful material reflection.
Login Login
color #000000 bg- color: #7949FF
opacity 4% color #7949FF
x 0 y 10 blur 15 opacity 20%
x 0 y 15 blur 20
Play with style
Depending on the style you’re after you can also make your shadows
sharp to serve as your additional stroke without having to duplicate layers
and complicate the front-end development handoff.
stroke 2px #000000
Start
Startreceiving
receivingcalls
calls color #000000
Share
Shareyour
yourprofile
profilewith
withyour
your
audience
audiencetotostart
startearning
earningmoney
money opacity 100%
Copy
CopyLink
Link x 4 y 4 blur 0
Add multiple shadows

By layering multiple shadows, you can achieve a three-dimensional and
more natural shadow effects, adding depth and realism to your designs.
This technique mimics how shadows in the real world are rarely uniform.
color #000000
Login opacity 4%
x 0 y 10 blur 15
+
color #000000
Login opacity 15
x 0 y 2 blur 4
Add reduced opacity strokes
Subtle strokes will make your buttons stand out a little bit more and blend
in with the shadow much more naturally.
color #898989
stroke 1 px Login opacity 20%
shadow created with beautiful shadows
Add inner shadows

You can also add multiple inner shadows to your interface components
adding even more depth and visual interest by creating cool highlights.
inner shadow
button color #EDEDED
Login color #FFFFFF 100%
x -4 y 2 blur 10
stroke 1px inside
color #FFFFFF - #BDBDBD - #FFFFFF
It’s worth mentioning that not every design needs this type of visual
treatment. I would even advise you to stick to standards for the most
optimal results. While fancy buttons might impress your design
colleagues they won’t serve any actual purpose for the regular users.
Use Beautiful Shadows plugin
If you're finding it difficult to perfect the appearance of your shadows,
consider using a plugin. "Beautiful Shadows" can assist you in crafting
smoother shadows that create realistic, three-dimensional depth.
Essentially, this plugin generates multiple shadow layers of various

opacity levels, resulting in a more detailed and lifelike effect.
Login
This plugin lets you choose the direction of the shadow by moving the
ellipse inside the preview, the color of the shadow, and its intensity.
Shadows on dark backgrounds?
On a dark background, where your shadows might not be visible, a well-
placed lighter highlight can serve a similar purpose. This technique can
draw attention to specific elements, such as buttons or cards, adding to
the interactivity and creating a sense of elevation similar to regular
shadows on lighter backgrounds.
Login Login
If you insist on adding “real” shadows in dark mode, you can do that by
layering multiple higher opacity shadows below your interface element.
Login Login
Similarly, use Beautiful Shadows plugin to make it easier for yourself. Just
remember to slide that opacity setting all the way up, or close to 100 for a
more distinguished look.
52
Chapter 2
Gradients

Intro to gradients
Gradients have become a dynamic tool in ours arsenal, offering yet
another way to add depth, dimension, and a bit of a modern flair to our
interfaces. When used thoughtfully, gradients can transform a flat,
monotonous design into a visually appealing and interesting experience.
Subtle gradients on the Design Manual’s page
Make no mistake, gradients are a powerful visual element, but they must
be used in moderation to avoid overwhelming the user. Sometimes
abusing gradients or making them blend poorly with result in a design
that looks cheap and unpolished. There’s a thin line between visually
interesting and simply not needed.
Let’s first talk about what gradient types you can find in UI and then cover
how to improve your gradient-making skills.
Linear gradient
Created by a straightforward linear change in color between two or more

colors. These gradients are the most common, creating a smooth
transition along a straight line. Ideal for backgrounds and buttons.
Buttons: A subtle gradient can make buttons appear more clickable or

stand out, especially in primary call-to-action buttons. 
Login Login Login Login
Backgrounds: Gradients can break the monotony of flat backgrounds or

make certain elements more readable against busy backgrounds.
Radial gradient
Radial gradient typically consists of two color stops, one in the center and
one at the edge. By tweaking the colors and locations of these stops, you
can fine-tune the gradient to your liking. To make it blend better, drag one
of the gradient color stops inside the shape, towards the center.
Use radial gradients for overlays

You can also make the middle point transparent to create an overlay that
transitions from pure color to transparent, revealing the pattern, color, or
an obscured image below the overlay. Simply add a rectangle on top of
your pattern, turn fill into radial gradient with 100%-0% opacity color
stops, and watch the magic happen!
Angular gradient
By using an angular gradient, colors stops are placed around the circle.
It’s a bit harder to make the angular gradient work but they do create
awesome compositions when used right.
Diamond gradient
These types of gradients aren’t that commonly used although they can
produce very interesting effects, similar to how a ray of light shines on an
object. They have a rather sharp, diamond-like shape.
That’s where its name is coming from.

Mesh gradients
These are multi-color combinations that look quite abstract and don’t
follow any linear, or radial paths. There are a few ways to create them
manually layering simple shapes and adding blur effects, but easiest
would be to simply google “online mesh gradient generators” or by using
one of the available free Figma plugins.
How to pick gradient colors
You can pretty much create gradients with any color combination,
although there are a few guidelines you need to follow in order to make
them look smooth. Most importantly, you should choose colors with
similar hues to avoid abrupt transitions. By similar I mean sitting next to
each other on the color spectrum ->

Add more gradient points
If you want to create a multi-colored dynamic gradients with more
dynamic but also more seamless blending, try to pick colors sitting next
to each other on the hue bar, in between your 3 main gradient points.
Change your gradient points position
Move your gradient points to one end reducing the space between your
gradient points as you move towards the right (or left) end.
Quick note: The same tips would apply to any type of gradient
Add noise and/or texture
Adding a grainy pattern on top of your gradient should add more depth to
your otherwise flat gradient backgrounds. Textures and noise is often
what turns UI designs from good to exceptional.
Use gradients as the “source of light”
Adding effects like Layer blur on top of your gradients can easily create a
highlight to focus on certain sections and objects, and guide the
attention towards a specific element like a button or a product mockup.
It’s the same secret trick designers use to create the “godly rays”.
2020
Chapter 3
UI/UX terms

UX/UI design terms
Understanding design-specific terms isn't just about speaking the
industry language; it's about thinking and operating within one design
paradigm. Think of UX/UI design as a puzzle. Each piece, or in this case,
each term, is a component of the bigger picture. The more pieces you're
familiar with, the clearer the overall image becomes.
user journey
Material Design
brand guidelines
sitemap
user flows
moodboards
Human Interface Guidelines
You need to know that the UX/UI design field is interdisciplinary. It

borrows terms and overlaps with psychology, technology, art, business,
and, most importantly the food industry.
As such, some words you'll encounter might feel familiar, rooted in other
disciplines, while others might seem entirely alien and abstract, unique to
only to our design space. In this chapter, called "Master the Lingo", we’ll
unpack these key terminologies.
And don’t worry, I’ll add some visual references for you so it’s easier to
wrap your head around these concepts :)
Let’s start with the first one!

User journey
Used to better understand users’ motivations, and challenges. It's a
narrative that helps the design team step into the user's shoes during the
UX phase. Created for specific use cases using specific personas.
User journey template - the Design Manual
User journey map

Used to map the entire user journey and communicate the narrative to
stakeholders, providing a visual reference that can guide design decisions
on each step of the user journey, identify problem areas and quick wins,
and aligning the team on the user's experience.
User journey map template - the Design Manual

User persona
Semi-fictional characters based on actual users, representing the key
characteristics, behaviors, and motivations of the target audience.
User Persona template - the Design Manual
Sitemap
A visual representation of the structure of a website, showing the exact
hierarchy of pages and how they relate to one another. Sitemap is crucial
to understand before any major website overhaul.
Sitemap - Supply Chain Finance client

User flows
A visual representation of the specific path or steps a user takes through
a product, usually to achieve a particular goal. It showcases the sequence
and options of user actions. It’s a super helpful tool for UX designers.
User flows - Client work
Information architecture
IA involves designing how information is arranged and labeled on
websites, making it easier for users to find what they need. It focuses on
creating a clear structure for all the app or website’s content.
IA - Client work
Wireframes
A basic visual plan showing the outline and structure of a digital product.
It maps out the page layout and how content is organized, serving as a
foundational guide for development. Usually of low or mid fidelity.
Fintech UI Kit - the Design Manual
Low-fidelity design
Early-stage, often hand-drawn, representations of a design that focus on
functionality and structure prior to styling and detailed aesthetics.
Product Pricing About Button Button
Simple way to
manage your money
Since wire-frame renderings are relatively simple
and fast to calculate, they are often used in cases
Button
SmartBank LP UI Kit - Ultimate Guide to Web Design

Modern design Modern design Modern design
High-fidelity wireframes High-fidelity wireframes High-fidelity wireframes

are often used for are often used for are often used for
documenting because they documenting because they documenting because they
High-fidelity design
Detailed, pixel-perfect, and interactive representations of the final design,
capturing the most polished look and feel of the end product.
SmartBank Product Pricing About Log In Get started
Stress less about
your money
Invest spare change, invest while you bank, earn bonus
investments, grow your knowledge and more.
4.9/5.0 based on 19 23 reviews
SmartBank LP UI Kit - Ultimate Guide to Web Design

Easy Transactions Safe and Reliable Flexible Payments
We have an easy to understand We have an easy to understand We have an easy to understand
application flow for you to use for application flow for you to use for application flow for you to use for
transactions transactions transactions
Prototype
An interactive, clickable model or mockup of a design that can be used for
Manage subscriptions
smarter, in one place
testing, feedback, and validation before finalizing the design. Organise subscriptions in one place
Block unwanted subscriptions easily
Never get charged for a trial again
Get started
Track your savings and
spending habits
Get up to 1.95% annual interest paid daily
Withdraw instantly, any time
Fund it your way
Get started
Step 1
Create an account Client prototype - Banking App
You’re a few simple
steps away
Inspiration board
A collection of online inspiration sourced and used for the project’s visual
exploration phase. Used to create mood boards and communicate
possible visual directions to the stakeholders.
Inspiration board - Ultimate Guide to Web Design
Moodboards
These are used to combine images, colors, textures, and other elements
to express the overall mood, style, and atmosphere of a project, helping
to define its visual direction in the early exploration stage.
Moodboard UI Kit from the Ultimate Guide to Web Design

Brand guidelines
Visual document that outlines how a brand should be represented and
perceived, including logo use, color palette, typography, voice, and more.
Brand guidelines - Ultimate Guide to Web Design
Style guides
A comprehensive set of guidelines, color & text styles, patterns,
iconography, and imagery, that provide consistency in the design,
improving user experience across products and different platforms.
Style guide documentation - Ultimate Guide to Web Design

Component libraries
A collection of reusable UI components, such as buttons, cards, menus,
navigation bars, etc., ensuring design consistency in a product.
Component library - Design Manual ebook
Design systems
A comprehensive set of guidelines, components, and patterns that
provide consistency in the design and user experience across products.
Design System atoms - Design Manual ebook

Material Design
A design language developed by Google that emphasizes responsive
interactions, grid-based layouts, and depth effects. Primarily used in
Android apps but also very popular in modern website design.
https://m3.material.io/
Human Interface Guidelines
A set of guidelines provided by Apple to assist developers and designers
in creating more intuitive and user-friendly interfaces for their software
and hardware products. These guidelines cover design principles, best
practices, and specific interface elements to ensure a cohesive and
accessible user experience across platforms.
https://developer.apple.com/design/human-interface-guidelines
Product roadmap
A strategic document that outlines the vision, direction, and progress of a
product over time, highlighting key milestones and their timelines.
credit: Andrew
Project backlog
A prioritized list of tasks, feature improvements, and fixes that provide a
clear overview of what needs to be done in a project over all of its stages.
Product backlog of an agency client

Design iterations
Repeated process of revising and refining a design based on feedback
and testing. This approach allows designers to progressively improve a
product by making adjustments, solving problems, and exploring
different solutions to enhance usability and aesthetics over time.
9:41 9:41
9:41
Community 1 Community 1 Community 1
Search for a thread here... Search the community threads Search for a thread here...
Questions Questions
Henry Cavill
Check profile
Aspiring Superman
Where should I look for Mustang parts? Henry Cavill

Check profile
Acting 1:1 - what you need to get started
Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Elementum feugiat odio fusce id fusce et nulla
ullamcorper... 211 21 3
Where should I look for Mustang parts?
32 21 3
Acting 1:1 - what you need to get started +321 +21
Megan Clarke
A food blogger from a sunny California Megan Clarke
83 6 1 Check profile
Here’s how you can boost your health

Lorem ipsum dolor sit amet, consectetur adipiscing Where should I look for Mustang parts?
ullamcorper...
+321 +21
21 8 1 211 21 3
Mike Manson Acting 1:1 - what you need to get started Philip Philipps
Check profile Check profile
A food blogger from a sunny
1
California
83 6
Here’s how you can boost your health
credit: uiadrian
Lorem ipsum dolor sit amet, consectetur adipiscing
ullamcorper... +321 +21
MVP
Minimum Viable Product is the product in its simplest form that’s ready
to be deployed on the market. It lets you test your product in a real market
environment focusing on a minimal (but most important) features first.
Chapter 3
UI elements

Most common UI elements
User Interface plays the most foundational role in the way users
experience a digital product, whether it’s a website, an app, or any smart
device, and UI elements are the tangible parts of interfaces users interact
with. They all contribute to forming the overall user experience.
UI components from the zave.it app
Understanding the function, placement, and naming of these elements is
very important for every designer, as they collectively shape the user's
experience. Each element, from buttons and menus to forms and sliders,
plays a specific role in guiding users through an interface, making their
interactions intuitive and effective.
We need to be able to effectively communicate the purpose of each
element, enhancing the quality of user interactions. Thoughtful use of UI
elements is what transforms a good product into a great one.
Let this short chapter be an intro to the most common UI elements.

Navigation bar
Most often a horizontal bar containing links to the main sections of a
website. It guides users to the information they're seeking without
unnecessary clicks. Can be sticky following users on scroll.
Nav bar from the designme.agency landing page
Hero section
It’s the first visual element a user sees on a website, it usually includes
engaging imagery and a clear call to action with supporting social proof.
We’ll discuss how to design great hero sections in a separate chapter.
Hero section - Figma Mastery LP

Call to action (CTA) buttons
These are designed to draw attention and guide users to take an action,
like "Sign Up" or "Buy Now.” We’ll discuss them in-detail in next chapters.
Action buttons from the zave.it app
Footer
Located at the bottom of web pages, it usually contains secondary links,
legal pages, contact info, social media icons, newsletter forms, and often
a brief description about the site or a company. A must for any site.
Relume’s awesome footer design (relume.io)

Modal windows
Small dialog boxes or overlays that provide additional information without
needing to load a new page. Can be anything from acceptance dialogs,
confirm-action pages, to announcements and marketing ads. They play a
pretty important role informing of status changes on mobile apps.
Forms
Used for a variety of tasks, from collecting email addresses for
newsletters to processing payments. They contain various input fields for
the user to fill out and a CTA button to submit and complete the action.
Sliders and Carousels
Sliders that rotate content in a container, allowing multiple pieces of
content (like images or testimonials) to occupy a single section on the
page. They are often used to showcase featured content and save space.
zave.it - creators carousel
Search Bars
Essential for e-commerce and content-rich sites, search bars allow users
to quickly find what they're looking for by typing in keywords. We’ll break
their functionality down in one of the future chapters.
Brit|
Fintech App - the Design Manual

Breadcrumbs
A secondary navigation system that shows users their location on the
site, often displayed as "Home / Category / Subcategory” or used as a
stepper showing clickable steps in a users’ journey.
Dialog boxes (alerts)

Often referred to as alerts, are small windows that appear on a screen to
communicate information to the user or prompt them for a response
before they can proceed. These boxes can display warnings, ask
questions, or present options for the user to choose from.
Android vs iOS chapter - the Design Manual

Tab bar menu
A horizontal navigation bar usually found at the bottom of mobile apps. It
provides quick access to app's main features using icons, and sometimes
text labels. By tapping these, users can easily switch between main app
sections. The active section is often highlighted for clarity.
Thumb-friendly zone
These zones suggest how to strategically place important interactive
elements so that they’re easy to reach and use, while also placing flow
interruption buttons outside of reach (like back, delete, or close).
Toasts
Usually full-width modals that indicate new activity or updates. Their

design can be either platform-specific or custom.
Notifications - concept work
Tabs
Used for dividing content into different sections, they allow users to
navigate between multiple panels within the same screen.
Android vs iOS chapter - the Design Manual

Snackbars
Native to Android, snackbars animate into position vertically above the
bottom app bar. They are used to confirm or undo certain actions.
Tooltip
Small, contextual pop-up box that appears when a user hovers over or
taps an interface element, offering additional information and clarifying
the element's purpose.
Accordions
Accordions let users expand and collapse sections of content. They help
users navigate material quickly and save space by allowing to include
large amounts of information in expendable containers.
Designme.agency FAQ section
App-specific notifications
Alerts are sent by applications to provide users with updates, messages,
or other relevant information. They can appear even while the app is not
open on the user's device, running in the background.
Chips/tags
Compact elements that represent an input, attribute, or action, often

used to display filters, categories, or keywords in a visually distinct way.
Often colored to provide more visual cues and faster feedback.
Floating action buttons (FAB)
A FAB is a button that performs the primary, or most frequent action on a

screen. It’s elevated above other elements; thus prioritized and
accessible, offering a quick route to important functions.
Master iOS/Android components and learn mobile design
You can find a lot more information about the common elements in
mobile apps in the Design Manual. We cover over 100 mobile screens from
16 most common design flows. Lots and lots of value unpacked.
AdrianK AdrianK
@uiadrian @uiadrian
the UI professional’s the UI professional’s
Design ManualAndroid Guide

full version
the ultimate guide to master mobile design the ultimate guide to master Android design
Learn and practice mobile design on a real Figma project with Learn and practice mobile design on a real Figma project with
auto-layout and responsive constraints. auto-layout and responsive constraints.
100+ High-quality app screens included 100+ High-quality app screens included
As I’m writing this I have the next Fintech UI kit update already underway.
It will come with a brand new redesign, equipped with the latest iOS UI kit
components and brand new UX chapters.
If you got the ebook already, and the latest update is live, please make
sure to check your email inbox for a link with updated content. Cheers!
Chapter 4
Buttons

Intro to buttons
Buttons in UI serve as fundamental components that guide users through
their digital interactions. They’re used to complete tasks like move to
another page, complete a purchase or confirm an action.
They should be labeled with a clear Call To Action copy to enable users to
indicate specific activities. They simplify user interactions by enabling a
variety of actions with a single tap, initiating a specific process.
As one of the most important elements in UI design, buttons enable

actions like saving, sending, or downloading. As with any component,
designers must follow certain guidelines to create effective and
appealing buttons, ensuring they are both functional and inviting.
Enabled Pressed
Here are a few of the most important principles defined by Material

Design that should be followed when designing buttons:
Identifiable: Design your buttons to scream "click me!" They should

visually promise users that something happens when they're pressed.
Findable: Never play hide and seek with your buttons. They should pop
out, making it effortless for users to spot them and take action.
Clear: Clarity is king. This can be achieved through the use of descriptive
icons or straightforward, concise text labels. Don’t confuse users with
vague copy, use text that describes the action best.
The anatomy of a button
Let’s define a couple of important characteristics:
corner radius
I’m a button! padding
label
Button anatomy is rather simple. First, we have our text label, which
usually is between 14-20 px big. Next, we have our padding that
surrounds our button label. Usually (not always), the horizontal padding is
twice the size of the vertical spacing with total button height being
anywhere between 32-60 px. Material Design (by Google) suggests a
button height of at least 48px, Apple suggests height of 44px+. However,
because mouse clicks on desktop devices are more precise than finger
taps, desktop buttons can use heights ranging from 32-40px.
Lastly, 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 size
vertical padding: 10px +
text size: 14-17 px
line height: 22px+

Click me! height: 40px+
horizontal padding: 16px +

Filled buttons (CTS)
Filled buttons stand out the most and are easily spotted, making them
perfect for primary calls to action (CTAs). They come with compelling
actionable text that prompts users to take a specific action.
Get started today Get a free trial Shop now
Ghost button
Outlined buttons often called “ghost” buttons are secondary buttons
that indicate actions that are not primary but are also important.
Usually inviting a user to learn more about the product/service.
learn more watch a video contact support
Link (tertiary) button

Often styled like text with reduced visual emphasis, are used for
secondary actions. You can underline them to aid users with visual
impairments in recognizing their interactivity. Can also be colored.
See pricing read more -> more features

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 Submit
Submit Submit loading...
“Invisible padding” considerations

You should always add the minimum 40-44px of tappable area for your
interactive buttons. While for primary and secondary button types that’s
rather obvious, for tertiary links and list items it’s often forgotten.
contain your interactive 

Startseite
items in 44px+ tall boxes
Über uns
Preisgestaltung
Kontaktieren Sie uns
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.
Submit Primary
Submit Secondary
Submit Tertiary
Alignment creates importance

If your UI requires you to have multiple button styles presented inline –
align them from most to least important to create the right hierarchy.
Placing your items further away from reach makes them less prominent.
Apply changes Save Draft Cancel

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 +
Let’s rock!
Use the minimum recommended size above and adjust your size from
there. With mobile you want the buttons to be at least 48px 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.
Use enough contrast

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

Button text alignment
The button size and the font size are also important considerations. If you
have a button that’s 32 points and text that is 17 points, there is no way to
have the text aligned perfectly in the center. Adjust either one of these
values to match round numbers.
Let’s rock! Let’s rock!
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.
Play video Play video
I received a ton 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 and to quickly communicate action or purpose of the action.
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 “Log out” followed by an icon of an open
door or “Send message” with an icon of a paper plane.
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.
Let’s rock! Let’s rock! Let’s rock!
Rounded edges tend to convey a softer, more welcoming aesthetic, ideal

for applications with a friendlier vibe. Square buttons with their clean
lines, offer a more structured look, perfect for minimalist designs.
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.
Play the Video Download PDF
Don’t use vague words like “click here”; users might be accessing your
site through a mobile phone or by using a keyboard, so apart from taking
non-obvious action, they’re not clicking but rather tapping at things.
Proper naming
Don't let users think too much during specific actions, 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.
Are you sure you want to delete? Are you sure you want to delete?
No Yes Cancel Delete
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!
Send Message Submit Cancel
Use AI 1 2 3 >
Add linear gradients and linear strokes
Using linear gradients and strokes on buttons introduces better visual
hierarchy and depth, leveraging contrast and color transitions to improve
distinction and help focus on the text.
Use AI Use AI
Add inner shadows

Adding inner shadows on buttons or elements makes them look slightly
more 3D-dimensional, giving a feeling of depth and making them stand
out more. Plus, they look freaking good!
Use AI Use AI
Button placement (on mobile)
Whenever possible, put your CTAs at a thumb’s reach, especially when
they’re important navigational buttons. You should put your destructive
or supportive buttons out of reach, though.
The Design Manual Fintech app UI Kit
By adapting to the natural way users hold and interact with their devices,
you reduce the risk of frustration from awkward stretches or accidental
inputs. It’s especially important to design with user's physical interaction
in mind, leading to a more intuitive and efficient experience.

Chapter 4
Forms

Intro to forms
Forms are one of the most essential UI elements used to collect
information from the users. Understanding the right balance between
user convenience and the need for information is key to creating forms
that are both efficient and user-friendly. Here are the basics you need to
know about forms when designing them.
The form basics
First off, let's create our simple form wireframe and break down our form
components and talk about how they come together to guide the user
through a seamless information submission process.

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.
You could also use a special type of input field called “Floating label” to
save space while still providing the input information.
Your first name

UI Adrian
Your first name
UI Adrian
Optional vs required field
Keep your forms clutter-free. No need to mention which fields are
required or optional. You can either put an asterix beside required headers
or mark the optional fields. This creates enough visual cue to understand
that this field is different than the rest.
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. Typically, forms
have more required fields than optional ones, so marking only the optional fields
can also help reduce visual clutter, making the form appear less daunting and
more user-friendly as a result.
Use Actionable CTAs
Make the primary CTA prominent and offer a secondary button to cancel
the form. Also make it look like something you can actually click.
Error messages
Use error messages with incorrect data input. Add icons to add more
visual cues. Make them descriptive enough to help users understand
what step of the process they are wrong about and help them fix it faster.
Checkboxes vs radio vs dropdown
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 each input type easy to understand. Try stacking them vertically,
rather than horizontally to avoid miss-clicks.
Good form UX is 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.
Input length and placeholder text
Match the input length to the width of the input field. Use descriptive
placeholder text to help users understand what the input should look like.
You want to make forms as compact and easy to fill as possible.

Compress fields and stack them next to each other; remove unnecessary
information to avoid friction. Do you need your users phone numbers
when charging subscriptions? If the answer is no, remove the field.
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!
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.
Don’t reinvent the wheel if you don’t need to and focus on solving other,
more important problems instead.
Break it up
If your forms require a ton of input fields, consider splitting it into multiple
steps. This will help your users focus on one thing at a time. To do it right,
add a progress tracker, either by introducing steps, or a progress
indicator with percentages of completion.
immediate input validation
Give immediate input field confirmation (and validation) and indicate

progress as users are filling out their forms. Let them confirm their inputs
before continuing further down the flow. You can do that by either adding
a confirmation checkbox, highlighting your input in a different color, or
temporarily disabling the Continue button; just make sure it has sufficient
contrast and displays a toast/snackbar with instructions to follow.
Don’t forget about success states! You don’t want to leave your users
with no updates. Make sure they are fully aware of the form completion.
Remember about the accessibility!
While adding a beautiful background gradient and semi-translucent input
fields may seem like the ultimate designers flex, it’s often a bad choice for
your interface. Remember, you shouldn’t design for yourself!
– You should design for users. And not every user reads content the same
way. Some need glasses, some can’t see well, some are going through
temporary visual impairments, or simply can’t focus enough to read
through a barely visible copy on a translucent background.
Your main goal is to make it easier for the user to complete the action. I’m
sorry to break it to you, but regular users won’t even notice your beautiful
highlights. On the contrary, they might find them distracting and won’t
even complete the sign up, purchase, or a booking.

Chapter 4
Preisgestaltung

Intro to pricing sections
Designing an effective pricing section that drives conversions requires
knowledge of a number of marketing tactics, and persuasive copywriting.  
A well-crafted pricing section does more than list prices; it
communicates the value of the product, builds trust, and guides potential
customers towards making a purchase.
Each element, from the layout to the hierarchy, to the choice of words,
has a deeper meaning. Here are some essential practices and tips to help
you design a pricing page that converts.
Keep in mind that many of these practices extend beyond just pricing
cards. They are part of a much broader strategy called conversion-rate
optimization (CRO), which is crucial to learn if you aim to sell your design
services more effectively. I’ll dedicate a separate chapter to CRO.
Double the benefits or offer a freebie (if applicable)
If given the option, we always want to choose the most cost-efficient
plan. If you’re proposing an offer that your client really needs, then they’ll
most probably use your service for a longer period of time. Give them a
trial run for one of the higher-priced services to set the right expectations.
By introducing a one-time project option we’ve successfully added over
$100k worth or projects that all extended into retainers afterwards.
A risk-free offer/free trial on your pricing page might help 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.
If your competitors are running higher priced services yet still selling
more, maybe the value of your service is not there. Remember to work on
your product first and then minimize the friction and objections.
Highlight popular plans
When your offer consists of two, or more than two plans, choosing the
right one might be a little confusing for your clients.
Point them towards the most optimal option and let them know, either
upfront or through Frequently Asked Questions, that there’s an option to
scale the plan down or up when needed.
You can also add scarcity to further highlight the “optimal” plan by
introducing interface elements with information about the limited
availability of your service or a product.
The psychological principle of scarcity makes the offer more attractive

simply because it seems more in demand or time-sensitive. Don’t
overuse it, though, people can sense if the information is genuine or if
you’re just trying to take an advantage of them.
Leverage 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!”. This kind of endorsement is
invaluable in building trust and credibility.
When customers see that people from established, reputable companies
trust your product, it sends a strong message about the quality and
reliability of what you're offering. It's a subtle yet powerful way to say, "If
employees of these industry giants are on board, I should be too."
Apart from that, you could include client reviews, trust badges, stars,
ratings, all displayed in a meaningful, and noticeable way. If you’re lacking
social proof, you could include security payment badges to let users know
their transaction is handled safely and is encrypted. Another way would
be to use logos of the tool stack your service is “powered by”. Building
credibility of off brand association is a very powerful thing. Use it.

Sticky headers
If your product requires a long comparison table, then make sure to add a
sticky top pricing info for easier reference. It’s easy to get lost.
By keeping your pricing information constantly in view, you make it

effortless for users to compare different plans without the need to scroll
up and down the page.
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. Always keep important information front and center and try to
optimize the amount of steps (clicks) users need to take to reach a goal.
Psychological importance of pricing
When it comes to discounts, the way you frame them can make a big
difference. Implement pricing strategies that psychologically appeal to
your customers, like charm pricing (e.g., $9.95, $9.99 or $9 instead of $10). 
For products priced below $100, percentage discounts often have a
stronger impact. For example, offering a 50% discount on a $50 item can
be more appealing than saying "$25 off." It's all about perception – the
percentage seems like a larger, more significant saving.
On the other hand, for higher-priced items, say a product that costs
$1000, using a dollar amount can be more effective. A discount of "$200
off" can feel more substantial than saying "20% OFF." This is because,
with higher-priced items, the actual dollar savings appear more
considerable, making the offer more attractive.
Your awesome course 20% OFF Your awesome course $200 OFF
$999 $799 $999 $799

what’s included: what’s included:
10+ hours of video content 10+ hours of video content
30+ practical lessons 30+ practical lessons
Another effective strategy is using precise numbers, like $245 instead of

rounding up to $250. This approach can make the price appear more
thoughtfully calculated and less arbitrary, potentially increasing its
perceived value and trustworthiness. My favorite example is
@MrNick_Buzz design service pricing - $4179 and $6317 respectively. It
makes you stop and think why. Pretty intriguing.
Add tooltips when needed
Don’t make users look for answers. Provide immediate answers with
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. Add tooltips on hover rather than click.
Increase a transaction’s fee to
increase it’s chances of being
mined sooner.
Highlight the plan you want user to choose
Grouping pricing plans into separate columns is enough to distinguish the
plans between each other, but if you want your users to choose a certain
plan, you can make it stand out more by adding a few adjustments like
making the card bigger, changing the CTA, adding borders, tags, etc.
MOST POPULAR
$0 $99 $199
Free Version PRO Version + Guide Bundle PRO Bundle Version (Unlimited)
Single project use Single project use Unlimited project use

Basic dashboard Basic dashboard Advanced dashboard
All components included All components included
Advanced insight
Download free Buy the Bundle Buy Pro Bundle Version
Remember not to go overboard and make your “main” option stand out
so much it overshines your other choices and makes them irrelevant.
Choose your bundle!
$99
MOST POPULAR
$0 $199
Free Version PRO Version + Guide Bundle PRO Bundle Version (Unlimited)
Single project use Single project use Unlimited project use

Basic dashboard Basic dashboard Advanced dashboard
All components included All components included

Advanced insight
Download free Buy Pro Bundle Version

Buy the Bundle
Chapter 4
Dropdowns

Intro to dropdowns
Dropdowns, FAQs, and accordions are versatile UI components that help
organize content efficiently, making it accessible and user-friendly. This
chapter focuses on the best practices for designing these elements to
enhance user experience and interaction.
Simplify your choices

A general rule of thumb to follow is that if you have more than five
choices, then a drop down list could be the way to go. Dropdowns are
essential for compactly presenting options without breaking the user
flow, making them a must-have component in forms and dashboards.
Filters Sort by
New Arrivals
Recommended
Price: from low to high
Price: from high to low
Highest rating
Drop down lists help you save screen real estate on the UI by grouping
similar options or input selections into a collapsible field. Use them when
user choices are predictable and can be listed.
A standard dropdown
A standard dropdown is a UI element that allows users to select one
option from a list of choices presented in a collapsible menu. It typically
consists of a header that displays the current selection or a prompt, and
when clicked or tapped, it expands to show a list of options.
Select an item Item 2
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
For longer lists, consider adding a scrollable container inside of your
dropdown input. You can indicate it by adding a scrollbar and reducing the
visibility of your last visible list items slightly.
Item 2
Item 1
Item 2
Item 3
Item 4
Multi-select dropdown
Unlike standard dropdowns, which permit only a single selection, multi-
select dropdowns enable users to tick several choices, making them ideal
for filtering data, applying multiple categories, or selecting various
attributes in a format similar to a form.
Pizza toppings (3)
Ham
Mushrooms
Pepperoni
Jalapeno
Double Cheese
Tomato
When designing multi-select dropdowns, it's important to use clear visual

feedback for selected options, provide an easy way to clear selections,
and maintain keyboard navigability for accessibility.
Select your toppings Pizza toppings (3)
Jalapeno Jalapeno
Dropdown states
The primary states include default (when no selection is made), active

(when the user interacts with it), hover (when the cursor is over an option),
open (displaying the list of options), selected (after a choice is made), and
disabled (when the dropdown is inactive).
Select an item Default
Select an item Hover
Select an item Open
Item 1
Item 2
Item 3
Item 1 Selected
Item 1
Item 2
Item 3
Select an item Disabled
For optimal UX, try to visually distinguish these states, using color,
shading, or icons, so users can easily understand the dropdown's current
status. The transition between states should be smooth and intuitive.

Subtle shadows and strokes
Adding subtle shadows and strokes to a dropdown can significantly
enhance its UX, particularly when it's placed against white or light
backdrops. These visual cues create a sense of depth and distinction,
making the dropdown stand out. This is especially crucial in minimalist
designs where color contrasts might be lower by designers’ decision.
Logo Pricing Products About Reviews
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
If you need to use dropdowns on a busy navigation header, consider

making one of the corners sharp or add a pointer to better indicate from
where the dropdown is coming from.
Item 1
Item 2
Item 3
Provide a focused environment
When users are faced with an extensive list of options, scrolling through
them to find a specific item can be time-consuming and frustrating,
especially on mobile devices, a dropdown menu that expands into a
modal sheet with a search option offers an efficient solution.
the Design Manual’s app contains a modal overlay search input
When a user engages the dropdown, it transitions into a modal sheet,

providing a broader, more focused view for making a selection.
At the top of this modal, a search bar allows users to quickly type and
filter through the list, streamlining the process of locating and selecting
their desired option. Incorporating a search feature within a modal overlay
for country selection provides a more tailored user experience and this
dropdown input proves particularly helpful in mobile applications or web
interfaces where screen space is limited.
Add keyboard shortcuts
They are especially useful for power users who prefer to keep their hands
on the keyboard, as they allow for quick access to frequently used
functions without the need to switch to a mouse or touchpad.
If you’ve been working with Figma for a while you probably have a few
keyboard shortcuts memorized. You can access them all through multi-
level dropdowns, mouse-clicks or simply by using your keyboard.
Edit Settings
Undo ⌘Z
Redo ⇧⌘Z
Copy as
Paste over selection ⇧⌘V
Paste to replace ⇧⌘R
Tomato
Nested dropdowns
This hierarchical structure is particularly useful for organizing complex
sets of options without overwhelming the user with choices all at once.
For example, in a multi-level dropdown, selecting a main category could

reveal related subcategories, allowing users to drill down to the exact
option they need.
Edit Settings
Undo ⌘Z
Redo ⇧⌘Z
Copy as
Paste over selection ⇧⌘V

CSS
Paste to replace ⇧⌘R

Copy as SVG
Copy as PNG ⇧⌘C
When designing nested dropdowns, it's crucial to maintain a clear and

intuitive navigation path. Visual cues, such as arrows or indentation, can
indicate that additional options are available at a deeper level.
Chapter 4
Navigation

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 also 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.
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. It’s a common practice and a well-known UX pattern.

Navbar link contrast
Make sure your links are easily visible and readable on your navigation bar
background. Remember about your interfrace’s required accessibility
values to provide usability for users with vision impairment.
This is especially important if you decide to add a semi-transparent

blurred background as your header navigation’s fill. Make sure to either
use a blending mode or alternate header variants on backgrounds with
lower contrast to make the links visible at all times.
Use short and concise names
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, or at least your target audience.
Confusing or not prominent-enough 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 than regular header links.
Too many links
Think about responsive design and how you are going to present your
navigation bar on even the smallest desktop screens. Use dropdowns,
consider adding a mega-menu or move the extra links to the footer.
No hover states
Implement hover states for navigation links. These visual cues indicate
interactivity and help users understand which page they are currently
viewing. A change in color, underlining, or a background highlight can
indicate that the element is clickable.

No hover and active states
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.
Consider adding sticky navigation
Make the navigation menu always easily accessible, regardless of how far
down the page a user has scrolled. You should eliminate the need for
users to scroll all the way back to the top to access other sections of the
site, thereby saving time and improving site navigability.
Sticky navigation is especially helpful for single-page landing pages

Add shadows to create depth
If you plan on making your header navigation sticky, you should consider
adding slight shadow or blur to give the illusion of elevation to your
interface elements. This will help you create a better visual hierarchy.
You could achieve a similar effect by adding a 0.5-1px stroke and creating
a line with just enough contrast to be noticeable.
Bottom 0.5px stroke 60% opacity + 24 blur
Another way would be to add a background blur to a value of about 20-32

and reducing the fill of your header navigation to 50-80%.
Chapter 4
Suche

Intro to search inputs
In the digital age where information is abundant and attention spans are
getting increasingly shorter, an efficient search box is a critical
component of any user interface. It's not just a tool for finding information
but an element improving the overall user experience. How many times
have you looked for a setting on your iPhone and couldn’t find whatever
you were looking for? That’s where search comes into help.
This chapter talks about various strategies to optimize the design and
functionality of search boxes, making sure they are not only effective but
also aesthetically pleasing and aligned with your brand identity.
Make it easily accessible

If your app relies heavily on the search functionality make it easily
accessible and visible on your website or application. It should be
prominently placed, typically near the top of the page, so users can locate
it quickly without having to scroll or navigate away from their current view.
enabling global search options is an extremely helpful practice
Hello, Adrian 􀊫 Search 2
Kontakt
Contact Information Incomplete
Please make sure this information is accurate.
Personal Details Shipping Address Billing Address Contact Details
Prefix First Name M.I. Last Name Suffix
Nickname Spouse’s name (optional)
Dashboard design for Kingdom Advisors

Firm Name
Male
Add recent searches
Incorporate a recent searches feature to enhance user convenience. This
allows users to easily revisit their previous queries, saving time and effort
in re-typing similar searches. Besides, by providing easy access to
previous searches, you greatly reduce cognitive load. Users don't have to
expend mental effort in recalling past searches, allowing them to focus
more on the content or products they are interested in.
Button to reset search query
9:41
prominent search input field 􀊫 Search influencers 􀁡 Cancel
Featured Influencers
button to return to the original flow
Madeline Matthias Heinz-K.. Gamerz Girlz
Recent searches Clear all
Madeline
recent search queries
button to reset search history
􀊫 Matthias
Aaron Foto
“x” to remove search query
Gamerz Boi
Samantha Lex
Displaying recent searches adds a level of personalization to the user
experience. It shows that the system recognizes and remembers the
􀊫 Sam
user's interests and preferences, creating a more engaging interaction.
Patricia Gaff
Styling inputs
The design of the search box should reflect your website’s or app’s overall
aesthetic. Choose between rounded or sharp corners, and consider
adding subtle strokes or shadows for depth and better visibility.
These stylistic choices can make the search box more inviting and aligned
with your overall design language. Might seem small but this level of
consistency is key in clean UI design, as it provides a cohesive visual
experience for the user, reflects your brand’s identity and in consequence
might enhance the user’s connection to your brand.
provide clear borders and fills
modify corner radius freely
9:41 9:41
Search Products Search Products
􀊫 􀊫
clear all recent searches clear all

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.
You need to be careful with your stylistic choices to always maintain
enough legibility. Your forms need to be easily tappable, at least 44px tall,
and with somewhat defined borders or fills so that they are
distinguishable from the rest of your interface.

Improve white space
This goes without saying; You need white space to make your
components easily readable, light and subconsciously easy to look at.
Adequate white space around the search box can make it stand out and
reduce visual clutter. This not only draws attention to the search function
but also improves the overall user interface.
9:41 9:41
􀊫 􀊫
recent searches clear all
Reword your placeholder text
Placeholder text with example queries or popular search terms can
provide clear guidance to users, especially first-time visitors or those
unfamiliar with the type of content or product range you’re offering.
9:41 9:41
􀊫 􀊫

Add autocomplete
Implement an autocomplete feature that suggests possible searches as
the user types their query. This speeds up the search process, reduces
typing effort, and can guide users to relevant content or products faster.
9:41 9:41
􀊫 UI Design |
􀊫 UI design |
recent searches
UI design for beginners clear all
UI design for advanced
UI design handbook
Work on your “no-results” page
Design a helpful and engaging 'no results' page. Instead of just displaying
a message that no results were found, offer suggestions, alternative
search tips, or popular searches to keep the user engaged and guide
them towards finding what they need.
9:41 9:41
Advanced design users Advanced design users
We’re sorry. We cannot find any matches We’re sorry. We cannot find any matches
for your search term. for your search term.
See 21 related search results for “design”
and“advanced users”.
Chapter 4
Modals

Intro to modal windows
Modals can significantly enhance the user experience by providing timely
information, guiding actions, and reducing navigational complexity. They
should be primarily reserved for critical interactions but they can also be
used to provide more context and information. Overusing them however,
can leave your users annoyed and less responsive, as more than often,
they are breaking the natural flow of the app or a website.
In this chapter we’ll explore a few of the best practices for using modals,
ensuring they are both effective and user-friendly.
User controls and escape routes
It's extremely important to equip our users with control over their
interactions. For modal, that includes providing clear and intuitive ways to
close them, or accept them, such as a prominently displayed 'X' button,
clear CTAs, or enabling users to click outside the modal to dismiss it.
Responsive design
Modals should be designed responsively to ensure they are usable and
legible across different devices and screen sizes.
Progress indicators
Use them during long operations as loading indicators or progress bars.
This pattern should inform users about the ongoing process and help
manage their expectations regarding wait times.

Errors and irreversible actions
Not every error requires a modal interruption. Sometimes, inline error
messages or notifications are more appropriate and less disruptive.
However, certain actions, such as deleting an account, removing data, or
completing a major purchase, carry significant weight and consequences.
Implementing modals in these scenarios improves the user experience by
adding additional layer of safety before confirming destructive actions.
Deactivate account
Are you sure you want to deactivate your account?
Cancel Deactivate
Important note: Questions framed in a way that could lead to double
negatives should be avoided. For example, responding with 'No' to a
question phrased as "Are you sure you don't want to keep your
account?" can be confusing. It's better to frame the question positively
and clearly and tie it directly to the action they are taking.
Deactivate account
Are you sure you want to deactivate your account?
Yes No confusing labels

Guiding complex tasks
For complex tasks that involve multiple steps, modals can be an effective
way to guide users through the process without navigating away from the
current page. This keeps the user focused and reduces the cognitive load
of remembering multiple steps.
By incorporating a clear and explicit confirmation step, modals help users

make informed decisions, giving them a sense of control and
responsibility, enhancing the overall user experience.
Import Orders
Upload CSV Check data Confirm import
Drag and drop file here or Choose file
Abbrechen
Incorporating progress indicators within modals is a great way to give

users a sense of advancement and achievement.
You have to be careful when implementing modals vs keeping these

complex tasks as part of your built-in flow. If they take away from the
experience by introducing a lot more steps, think if there’s a way to ask for
the required information without breaking the flow.
Chapter 4
Hero sections

Intro to hero sections
The hero section in web design has subsequently evolved into an
essential component of every high-performing site. One of the main
reasons to create a stunning and well-organized hero section is to
generate enough interest for users to stay and explore more, and for
businesses, to collect leads, and sell the products or services.
It sets the tone, conveys the core message, and leaves the first
impression of your brand. In this chapter, we'll explore how to craft
compelling hero sections that captivate and engage users.
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 benefits
what actions should be taken
Content hierarchy
When building your hero sections mind the visual hierarchy. The F and Z
patterns are common scanning behaviors recognizable in hero section's
design. F-pattern is ideal for text-heavy hero sections, where key
information and CTAs are aligned to the left. Z-pattern on the other hand
is suitable for hero sections with a mix of impactful visuals and text,
typically with center-aligned elements. Choose the pattern and alignment
that best suits your content and goals, and design with users in mind.
Left-Aligned Heroes: These are scanned more easily, as they align with
the natural reading pattern in left-to-right languages. Users are more
likely to read most of the text, making this alignment suitable for
conveying detailed information or storytelling.
Center-Aligned Heroes: These often create a more balanced,

aesthetically pleasing look, especially when combined with striking
visuals. The central alignment draws user's eye to a specific focal point,
ideal for a strong, concise message or CTA. Great for quick scanning, not
so much for intensive reading. Use it for more visual impact.
Use clear and attention-grabbing headings
The power of a hero section is often anchored in its heading. A clear,
attention-grabbing heading is not just about using bold fonts or bright
colors; it's about crafting a message that resonates with your audience.
Your heading should be immediately understandable. Avoid jargon or

overly complex language. The goal is to communicate your message in
the simplest terms possible. Users should be able to understand your
value proposition or purpose of the site within seconds.
Tap into the emotions of your users. Whether it's excitement, curiosity, or
trust, the right emotional tone in your heading can create a deeper
connection with your audience. Let’s take our hero as an example:
Second heading might be more effective as it addresses both immediate

and long-term benefits, the desire for ease in the present and security for
the future. This dual focus connects emotionally with users, offering a
more comprehensive and engaging value proposition.
Call to actions
The CTA should be visually distinct from other elements on the page and
the language used in a CTA should be action-oriented to create a sense of
urgency or a benefit. Phrases like "Start A Free Trial," "Get started now,"
SmartBank Product Pricing Developers Resources
or "Become a member" are more compelling than generic phrases like

"Click Here" or "Submit.”
Simplify Your Savings,

Secure Your Future.
Automate your finance management
Optimize your accounting process
Save time on expense reports
Main CTA Learn more Get Started Free
Rated 5.0/5.0 by 1,500+ users
You can add “Now” and “Today” at the end to create more urgency.
Here’s how this works
The placement of the CTA is as important as its design and language. It

should be positioned in a spot where users naturally navigate during their
interaction with the page.
The size of the CTA should be large enough to be noticed but not so large
that it overwhelms other content. Additionally, CTAs should be accessible
and usable by everyone, including people with disabilities.
Remember not to overdo them, 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.
Secondary CTAs
They play an important role in providing users with additional, yet less
prominent pathways to engage with your website or a product. While the
primary CTA drives the main user action, secondary CTAs offer
alternative or supplementary actions that can enhance the user's
SmartBank Product Pricing Developers Resources
understanding and experience. They are typically placed near the primary
CTA and are designed to be less visually dominant.

Secure Your Future.
Secondary CTA Get Started Free Watch Demo
To avoid confusion and competition with the primary CTA, secondary

CTAs should have a distinct visual style. This can be achieved through
subtler colors or having thin borders with no background color.

The key to effective use of secondary CTAs is balancing attention. They
should be noticeable enough to be effective but not so prominent that
they detract from the primary CTA. Same goes for the CTAs in the
navigation header, often a persistent element across different pages,
should be visually distinct from both primary and secondary CTAs within
the page content to maintain a clear hierarchy of actions.
Get Started Free Watch Demo Get the App

Relevant visuals
Whether it's a product mockup, an engaging image, a creative
composition, or a video, hero visuals play a key role in setting the tone and
expectation for the user's journey on your site. For instance, a well-
designed product mockup can showcase the product's features and
aesthetics, while a mid-fidelity mockup composition might illustrate the
transformation or benefits the product offers.
SmartBank Product Pricing Developers Resources Get the App
Blown-out logo used as background

Secure Your Future.
Product mockups
Get Started Free Watch Demo

Every visual element should align with your brand identity. This includes
using brand colors, typography, and imagery that resonate with your
brand's personality and messaging. These visuals should also be
responsive and adapt well to different screen sizes and resolutions.
SmartBank Product Pricing Developers Resources Get the App SmartBank Get the App

Secure Your Future. Simplify Your Savings,
Automate your finance management Secure Your Future.
Optimize your accounting process Automate your finance management
Save time on expense reports Optimize your accounting process
Get Started Free Watch Demo Get Started Free
Watch Demo
Rated 5.0/5.0 by 1,500+ users Rated 5.0/5.0 by 1,500+ users

Social proof
In the context of a hero section on a website, leveraging social proof can
significantly boost trust and credibility. Here’s how you can effectively
incorporate social proof into your hero section:
Displaying elements like user numbers, app ratings, or the number of

reviews can strongly influence potential customers. Seeing that a large
number of people have chosen your product or service reassures new
visitors that they are making a good decision by doing the same.

Trusted by 5,000+ designers
Including logos of well-known partners or clients can instantly elevate

your brand's perceived trustworthiness. This is especially effective if the
partners are recognizable and respected in their industries. The
perception of your brand can be significantly enhanced through
association with authoritative figures or organizations. This borrowed
credibility can extend to your brand, making it appear more trustworthy
and established in the eyes of new visitors.
students from
Offering guarantees (like money-back guarantees or free trials) can

reduce the perceived risk for new users. It shows confidence in your
product and a commitment to customer satisfaction.
Make sure that the social proof is relevant to your product. Irrelevant or
inauthentic social proof can have the opposite effect.
Teasing continuation
In web design, effectively teasing continuation on a landing page is crucial
for guiding users to explore beyond the initial view. This strategy is about
subtly hinting that there's more valuable content waiting below the fold.
Improve the way you

pay, with one click
Watch the video Get started
What is this section about?

Use design elements that naturally lead the eye downwards. This could
be as simple as an arrow pointing down or as subtle as a partially visible
section peeking from the bottom of the screen.
Arrange your content in a way that creates a sense of incompleteness at

the bottom of the fold. Cutting off a busy image or headline halfway can
pique curiosity, prompting users to scroll down for the full view.
More social proof
Figma Mastery From the creator of the Design Manual and the Ultimate Guide to Web design
Clear heading and a callout

Master Figma in hours
Learn how to use Figma efficiently and effectively. 45 video lessons, 34 practice files, 4
Button hierarchy
websites, 1 prototype, free figma files and bonuses. Perfect for beginners and more
advanced designers. An ultimate Figma Starter guide.
What is this highlight? Rated 5.0/5.0 by 1,500+ users
Social proof
Should I click to play?
| PLA
ME Y
Y
ME
| PLA
| PLA
ME
Brought to you by @uiadrian

M
E | PLAY
Maximizing the impact of your “Above the Fold”
In order to create a powerful first impression you need to optimize the
above the fold portion of your landing page. Let’s summarize:
Main headline should be attention-grabbing using simple, direct language
Visuals should reflect your brand and complement the theme of your site
Your main CTA should be prominent and persuasive with high contrast
Consider a secondary CTA for less commited visitors
Add strong social proof to build trust and credibility.
Utilize design patterns like the F or Z layout to guide the visitor's eye
through the content in a natural, efficient manner. Align your elements
strategically to provide a smooth visual flow and easy readability.

Secure Your Future.
Watch the video Get started
Remember, you only get one chance to make a first impression. This
initial interaction sets the tone for the user's entire experience with your
brand. Ensure that your hero section is not only visually appealing but also
functionally effective in conveying your message and enticing action.
Chapter 4
UI Cards

Intro to cards in UI
UI cards are versatile design elements that effectively organize and
display content in a digestible format. They present a preview of
information in a neat, compact way. Cards are widely used in interfaces to
showcase products, articles, profiles, and more, offering a visually
appealing and user-friendly way to navigate content.
Card Anatomy
A typical UI card includes a header (often with a title or icon), a main
content area (which can include text, images, or both), and usually a
footer with action buttons or links.
Most card components are universal although its layout depends on the
categories of content they include.

Ideal content length
The amount of content on a card should be carefully considered. Too
much information can overwhelm the user, while too little may not convey
enough value to take action. Aim for a balance that provides just enough
context to engage users without cluttering the card.
Keep the content concise. Users typically scan cards quickly, so it's
important to convey the message in as few words as possible while still
being clear and informative. Aim for short but snappy headlines and brief
descriptions that capture the essence of the content.
The content length should also adapt to the card's layout. For instance, in
a grid layout with multiple columns, shorter content is preferable to avoid
overwhelming the user. Alternatively, in a single-column layout, on mobile
for example, longer content may be acceptable as it's the only focus. If
your content is dynamic, consider truncating the text by adding “...”
before having it break into another line.
Consistency across cards
Cards can be arranged in various column layouts, depending on the
content and available space. If you're using multiple cards, ensure
consistent content length across them. If your card content differs in title
and description lengths, consider the following tips to maintain uniformity
across your card designs.
Truncate the description or headings text by adding ellipses “...” after text
reaches the text box width. You can consider providing a tool-tip for users
to read the full text if necessary, or set fill height on all card containers.
You can also set fixed minimum and maximum heights for content within
the cards. This approach keeps the layout tidy and predictable,
regardless of the content volume and it’s easy to achieve with CSS.
Visual hierarchy
Use typography and spacing to create a clear visual hierarchy. Headlines
should be prominent, followed by subheadings or brief descriptions. This
hierarchy guides users through the content in a logical manner.
Also, pay attention to the white space within and between cards.
Consistent spacing creates a clean and organized appearance, making
the content more approachable and easier to navigate.
If your cards include images, ensure they are of consistent quality, style,
and dimensions. Cropping images to a standard size and aspect ratio can
significantly improve the uniformity of the card layout.
Call to action(s)
Calls to Action (CTAs) on cards should be clear and compelling. Whether
it's a button to Read More', 'Buy Now', or ‘Add to Cart,’ the CTA should be
prominently placed and visually distinct to encourage user interaction.
The size of the CTA should be large enough to be easily tapped on touch
devices but not so large that it overwhelms the other content on the card.
Position the CTA in a location where it's logically expected, usually at the
bottom of the card. This placement follows the natural flow of reading
and makes it a natural endpoint after consuming the card's content.
For desktop interfaces, include hover and active states for the CTA.
Layout considerations
Cards can follow a horizontal (as grids) or vertical orientation (as lists), all
depending on the content and your preferences. They can include
images, videos, or text arranged in multiple ways.
Style considerations
Styling choices like adding borders, corner radius, and shadows can add
character to your cards. Borders can define the card's edges, while
rounded corners often give a softer, more modern feel. Shadows can
create depth, making cards 'pop', especially on lighter backgrounds.
However, these should be used in moderation to avoid visual clutter.
Spacing inside cards
As a good rule of thumb I leave between 16-24 px of padding inside of my
card elements. Horizontal padding is usually between 12-20px, while
vertical has 4-8px more to create more optical balance.
24
16
UI design practices to make
you a better designer
16
Learn about the latest trends, tools, and
methodologies that are shaping the world...
24
Read more ->
24
16 16
I also leave between 16-40px of space between each card in a row or

column layout to leave enough breathing room. As far as spacing around
card rows goes, I usually leave between 64-96px of padding between the
top and bottom of the card container section.
64-96
UI design practices to make UI design practices to make UI design practices to make

you a better designer you a better designer you a better designer
Learn about the latest trends, tools, and Learn about the latest trends, tools, and Learn about the latest trends, tools, and
methodologies that are shaping the world... methodologies that are shaping the world... methodologies that are shaping the world...
Read more -> Read more -> Read more ->
100 300 20 300 20 300 100

64-96
Types of cards in UI
The beauty of card design lies in its diversity and adaptability. Let's
explore some of the common types of cards used in UI design:
Blog posts
Common in content-driven sites, these cards provide a summary of blog
posts or articles, enticing users to click through to read more.
UI/UX

UI design practices to make you
a better designer

Read more ->

UI design practices to make you

Read more ->
a better designer
Read more ->
Products cards
Widely used in e-commerce, showcasing items for sale, displaying info
like images, prices, and ratings to help users make purchasing decisions.
Generic Hand Cream Bottle
$24.90
Sport Shoes 2.0

Generic product description about
how this cream is better

$49.90
- 1 + add to cart
Add to Cart
Information cards
These cards are used to present bite-sized pieces of information in a
clear and concise manner. They are ideal for dashboards, educational
platforms, or any interface where quick, digestible information is key.
Paid traffic
Bounce rate Session duration

1241 +214
-2.56% +0:36 min

61,6% 2:42 min Organic traffic
351 +35
Total revenue
Traffic score ?
$3,421 + 4.28%
see details
86.42 +4.21
Total expenses
$1,121 - 8.28%
see details
Analytics Report - 1.09-08.09-2...

..60%
Status cards
These are important in scenarios where user actions trigger processes
that take time, such as processing payments, loading content, or
confirming certain actions.
Payment processing
Please wait while we process money
from your bank account
Congratulations!
You’ve been paid by a Client
Go to Payments
Reviews and testimonials
Used to build trust and credibility, these cards feature customer reviews
or endorsements, often with a photo, name, and quote.
Customer reviews
Brandon Miles
NJ, United States
4.95 out of 5
Good Food 5
120 customer ratings
Excellent diner, super tasty food, waiters
5 star 95% are super friendly and always smil.. more
4 star 3%
3 star 1%
2 star 1%
1 star 0%
For all my Freelancer / Small Agency
followers, I wish I’d discovered UI Adrian
long ago - best educational content ever.

Chloe A.
Hi! I purchased your design manual ebook

Jay Williams
yesterday and I LOVE it! I devoured first half in

Product Designer
one day and am just starting the practical
exercises. I can’t wait to dive into the app!
Pricing cards
Designed to present various pricing options or plans in a clear, concise,
and comparative manner.
Advanced Plan Pro Plan
10000 unique visitors/mo Unlimited unique visitors/mo
$49.95 $59.95
Choose package! Choose package!
Learn more Learn more

Chapter 4
Style guides

In tro 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 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.
Layout
40x1024
ktop = 14
SM des
p alette
Color
Black
00
White 0000
BG FF
Light FFFF
BG F2
Dark EEEF
ndary 2B
Seco 1E25
y
Primar
B5
74 8 F
30
FF6E
p alette
Tonal
200
blue-
AAA #b3a9ff )
AAA , 169, 255
10.04 rgb(179
100
blue-
2.09
500
#ccc5ff
255) blue-
y
AAA
Primar
AAA 4, 197, e
13.00 rgb(20 #5a44f )
3.69 AA
, 68, 254
50 rgb(90
blue-
1.62
AA
400 5.69 AAA

mi Bold #efecf
f
blue-
- 20 - Se
AAA
, 255)
236 800
line/h6
(239, e
blue-
AAA
18.11 rgb #7b69f
254)
head 5.29 AAA
AA
rgb(123
, 105,
#32258
c
miBold
1.16
)
, 37, 140
- Regular blue-
300 3.97 AA 1.78 rgb(50
line - 20
- 72 - Se
AAA
ad 700
sub he
e AAA
blue-
11.80
#9082f
254)
, 130,
AA
4
6.81 AAA rgb(144 #4030b
iBold , 48, 180
)
- 18 - Sem 3.08 2.30 rgb(64
title/title
AAA
600 9.13 AAA

blue-
iBold
7
ibold #523ee
64 - Sem
- Sem )
menu/ menu 16 3.20 AA
AA
rgb(82
, 62, 231
6.56 AAA
Medium
p Grid:
e - 16 - 900
ody larg blue-
and
body/b
Deskto
b
#261d6
iBold gutters
)
, 29, 107
rgb(38
56 - Sem h 20 px
1.47
Medium
AAA
14 -
small -
AAA
grid wit 0 px of
14.28
dy
body/bo
Bold primary
-200
o lu m n u m o f 10
e - 16 -
12-c minim
I used a
larg
solution
#e2ffbb
s with a
/button
iBold
, 187)
button
AAA
AAA 6, 255
19.26 rgb(22
48 - Sem e margin allest re

-100
primary 1.09
10% sid on the sm

Kühn
ll - 14 -
primary
/button
sma d1 -500
and
#ebff
s
button
e
, 209)
d p
AAA
nd
si to
5, 255
Seco
AAA
on both desk
19.76 rgb(23 #bfff6c
AAA
108)
, 255,
the SM
ry-50
old prima
margin
iBold
AAA
1.06 17.74 rgb(191
- SemiB p
13 - Sem
thing on L deskto
/caption
primary
caption -400 1.18
#f9fff0
ary , 240)
X
primary
-800
ry e
AAA
e
9, 255
ev th
AAA
n
20.59 rgb(24 #ccff89
Bol d , 137)
designed tions o
AAA
- Ext
ra AAA 4, 255 b
18.23 rgb(20 #698c3
+ resolu
hip - 12
1.02
59)
, 140,
AA
chi p/c
primary
-300 5.42 AAA
d rgb(105
2k
emiBol
1.15
primary
-700
fo r
adjusted
3.88 AA
#d4ff9d
AAA
157)
AAA , 255, d
18.59 rgb(212 #88b54
, 181, 77)
AAA
1.13 8.76 AAA rgb(136
frame.
pri mary-600 2.40
ide.
iBold 40 px w
62
AAA #aee8
98)
, 232,
ace is 12
24 - Sem
AAA
14.52 rgb(174
safe sp
-
1.45
ne/h5
primary
-900
gn
The desi
d
#506b2
45)
3.48 AA
, 107,
rgb(80
AA
6.03 AAA
dark-2e00
#8e8e8
AA
142)
, 142,
6.41 AAA rgb(142
0
dark-10 3.28 AA
Next
dark-500
3
#b3b3b )
Avenir
AAA
, 179, 179
Dark
AAA 09
10.02 rgb(179 #0909
9, 9)
dark-56 0 2.10 1.05
AAA
rgb(9,
dark-400
AAA
19.91
#e6e6e
AAA
, 230)
16.83
AAA
rgb(23
0, 230
#3a3a3
a
, 58, 58)
dark-800
05
1.25 1.85
AAA
rgb(58 #0505
5, 5)
dark-3a 00 rgb(5,
AAA 1.03
11.37
AAA
dark-700
AAA
#5a5a
20.38
Inter
5
, 90, 90) 60606
3.04 rgb(90 #0
AA
6, 6)
6.90 AAA 1.04
AAA
rgb(6,
dark-6800
AAA
20.26
#08080
Type
scale 1.05
20.03
AAA
AAA
rgb(8,
8, 8)
dark-9400
#04040
4, 4)
1.02
AAA
rgb(4,
AAA
20.50
light-6
00
3
#dfe1e
AAA
, 227)
AAA 3, 225
16.02 rgb(22
light-3
00 1.31
light-7
#f8fafb
00
AAA
, 251)
8, 250
Light
AAA 1
20.06 rgb(24 #aeafb
, 175, 177)
AAA
light-5
0 1.05 9.57 AAA rgb(174
light-4
#fefefe
00 2.20
AAA
, 254)
light-8
20.82
AAA
rgb(25
4, 254
#f7f9fa
00
, 250)
he SmartBank LP Style Guide - Ultimate Guide to Web Design

AAA
AAA 7, 249 9
1.01 19.89 rgb(24 #87888
AA
137)
, 136,
light-10
0 1.06 5.91 AAA rgb(135
t-500
T
3.55 AA
AAA #fcfdfd
, 253) ligh
AAA 2, 253
20.61 rgb(25 #f5f7f9
AAA
, 249)
AAA 5, 247
1.02 19.55 rgb(24
light-2
00 1.07
#fafbfc
AAA
, 252)
AAA 0, 251
20.27 rgb(25
1.04
light-9
00
9
#67686
105)
, 104,
3.76 AA rgb(103
AA
5.58 AAA
Typography
To create a clean looking design you’ll need good typography. I tend to
use fonts from a site called Fontshare. All their fonts are free for personal
and commercial use, and they are amazing!
Satoshi
Inter
Type scale
Having a solid type scale is one of the most important elements to help
you establish your content hierarchy. As usual, I reference HIG for iOS,
Material Design for Android on mobile, and Tailwind CSS on desktop.
Typography
Avenir Next Inter
Type scale
display/d1 - 72 - SemiBold headline/h6 - 20 - SemiBold
sub headline - 20 - Regular
display/d2 - 64 - SemiBold title/title - 18 - SemiBold
menu/menu 16 - Semibold
headline/h1 - 56 - SemiBold body/body large - 16 - Medium
headline/h2 - 48 - SemiBold body/body small - 14 - Medium
button/button large - 16 - Bold

headline/h3 - 40 - SemiBold
button/button small - 14 - Bold
headline/h4 - 32 - SemiBold
Where to find the type scales for Web & Android?
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 the
corresponding code. Any font you choose is automatically resized and
optimized based on Material typography guidance for readability.
https://m3.material.io/styles/typography/type-scale-tokens
Where to find the type scales for Mobile?

This is one of the most confusing topics in app design - what sizes of
fonts to use for each typography element? Here’s a little helpful
breakdown from the HIG site -> Dynamic Type Size
Spacing values
Use predefined spacing values to determine the right amount of space to
leave between each element. Safest bet is to choose 8px as the minimum
and multiplying it depending on the visual weight each of your sections
and elements carry, and on how closely related they are to each other.
8px 16px 24px 32px 48px 64px 80px
UI kits
For the most part of my designers life I was against UI kits and templates,
but efficiency and speed is important, especially when working in smaller
teams, or running design services by ourselves. There are ways to
optimize your speed and that’s through using ready-made-solutions.
Here are some of my favorite UI kits and asset sites I use to improve my
efficiency and kickstart ideation for new client projects:
Relume Library UI Kit - my go-to for anything Figma/Webflow-related
Untitled UI by Jordan Hughes – probably my favorite Figma Kit
AlignUI - one of the best dashboard kits on the market
UI8 - collection of high-quality design assets
Freepik - my go-to for icons, images, and vectors
Craftwork - Framer templates, fonts, 3d assets

Main colors
To create your main color palette you’ll need at least one primary color,
sometimes a secondary color, grays, and two shades, black and white.
That’s the base for our color palette. If you want something more
detailed, you can use a plugin like Foundation: Color Generator or Material
Theme Builder to help you create your tonal palettes.
Fintech App Style Guide - The Design Manual
Document everything!
Your styling should be documented in a style guide or a design system.
That includes the things like colors, typography, imagery, iconography,
grids, shadows, blurs, and graphics used across your entire app.
You should also name your color and font styles appropriately. As always,
refer to Material Design for the best naming conventions for your
Android/Web designs and Human Interface Guidelines to learn more
about iOS naming best practices.
Reusable components
By leveraging reusable components, we can ensure a consistent look and
feel improving user interactions while also streamlining the development
process giving access to a consistent component library.
Default Hover Disabled Pressed
Default Default Default Default
By introducing components and adhering to the atomic design system
methodology you’ll be able to slowly turn your smallest interface
elements (atoms) into bigger components (molecules) that will then
become a part of bigger templates, sections, and pages.
Reusing components like buttons, titles, cards, or even entire forms or
call to action sections greatly helps improve efficiency and consistency.

Component library
Building a component for every element and putting them into a library
makes future updates a lot more easier. If you need to change something,
you simply update the main component, and the change shows up
everywhere across your designs. This step isn't required, but it really
helps speed things up. Plus, it's a real game-changer for teamwork,
making it super easy for everyone to stay on the same page and use the
same elements. So, while setting up a component library might seem like
extra work at first, it's a real time-saver as your project evolves.
Component library of the Fintech UI Kit - Design Manual
When working with iOS and Android apps you will find yourself working
with, and modifying existing system components. This will help you
streamline your work and make it easier for your developers to replicate
your designs. Use one of the free iOS UI Kits and/or Material Design kits
available on the Figma Community.
Chapter 5
Bad vs good UI

Early stages (and not only) of learning design
Now that we’ve covered most of the UI basics, it’s time to give you a few
parting tips on how you can improve your design skills fast, and where to
go from here. In this chapter, we'll briefly take a look at my first mobile
designs, analyze them, and determine what’s wrong with them and how
applying certain design patterns and guidelines could help us improve
them. As you know by know, design is best learned by doing.
why this is not good?
and this is acceptable?
At the start, I knew some designs looked better than others, but I couldn't
figure out why. If you are anything like me, then you’ve probably
experienced this feeling, or maybe you’re still experiencing it now. Why
are you able to tell when the design is good but you can’t replicate the
same quality? Michael Filipiuk said it best and I couldn’t agree more –  
it’s because your design taste is more developed than your skills.
I didn’t align my elements
I was pretty clueless when aligning my elements on a frame. I didn’t use
any grid layouts nor any spacing increments. All my elements were
“floating” in random placements, with different widths and side margins
that I felt were right at the time. I probably didn’t even think about the
placement much back then. And that was a big mistake.
Aligning your content creates visual anchors, making it easier for users to
scan and process information. This alignment guides the eye smoothly
across the page, reducing cognitive load and improving readability.
From a UX perspective, a grid-based layout brings balance and order to a

design. Humans are naturally drawn to symmetry and balance, finding
them aesthetically pleasing and calming. Tap into this feeling.
I didn’t use proper spacing
My spacing was random. I didn’t use any symmetrically divisible values
(4pt grids), and it created a cluttered design that looked uneven. This
didn’t create any visual hierarchy and made the designs look unbalanced.
16 pt
20 pt
16 pt
28 pt
18 pt
21 pt 20 pt
20 pt
14 pt
20 pt
16 pt
Larger spaces around more important elements draw attention to them,

while smaller spaces are used for less significant elements. This helps
users to quickly identify key information and navigation paths.
Effective spacing is even more crucial in the context of mobile design,

where screen real estate is limited. Larger spaces around more important
elements draw attention to them, while smaller spaces are used for less
significant elements. Use 8px as your smallest spacing increment and
keep increasing it to distinguish more important elements.
I didn’t use any type scale
I was always confused as to what font sizes I should use. This is especially
important as your text, next to space and color is the most important
element to establish a hierarchy. Look up type scales on HIG for iOS and
Material Design/Tailwind CSS for Android/Web, if you need help.
20px
12px
20px
13px
18px
13px
18px 13px
14px
14px
13px
Using a type scale ensures that typography is consistent throughout your

design. This consistency is key to a professional-looking product.
A well-defined type scale takes into account the legibility of text at

different sizes and distances. This is especially important for mobile and
web interfaces, where readability can significantly impact the user
experience. Instead of guessing or arbitrarily choosing font sizes, you
have a set of guidelines to follow, which speeds up decision-making.
I was too creative
Every beginner shares a common trait: too much creativity. This early
enthusiasm often leads to a desire to showcase every idea and feature on
a single screen. However, this often lead to cluttered and overwhelming
interfaces. The key to effective UI design lies in simplicity and focus.
what’s the hamburger for? what’s the hamburger for?
waste of space above

waste of space above
is heading really needed here?
why add search here

why add andhere
search notand
tabnot
bar?
on tab bar?
uneven spacing
text is way too small

uneven spacing
profile page and an avatar - why both?

text is way too small
profile page and an avatar - why both?
The art of great UI design is not about how much you can add, but how
much you can take away without losing functionality. Ask yourself what
the core features and elements that your users truly need are. Everything
else is secondary and can potentially detract from the user experience.
My designs weren’t consistent
Many beginner designers lack the consistency in their designs. Without a
unified approach, designs can appear disjointed and unprofessional. How
to overcome this challenge? Start by creating a style guide for colors,
text, and imagery, and apply these styles across your components.
consistent use of font sizes

consistent spacing
unified color palette
9:41 9:41 9:41
Rewards & Credits The app
Inbox GBP 0
Create a bio Active Requests Potential Earnings
Filter Sort
UI/UX Designer based
in London
Earn $100 for every new
Think short and sweet! creator or expert you refer
Invite someone who can use the app to receive
calls from their audience and earn $100 in credits
when they receive the first paid call request.
Start receiving calls

Share your profile with your audience to
Credits reduce your own fees in the app when start earning money
making or receiving calls. See FAQs for details.
Nächste
Link kopieren
https://ref.link.cc/kfxD
Q A E R T Y U I O P
A S D F G H J K L Share Link
consistent use of buttons

Z X C V B N M
123 space
m components
systereturn
Inbox
Start by selecting a few key fonts that align with your brand's personality.
Define a color palette that resonates with your target audience.
Standardize button styles, form elements, and other interface
components. Document these choices in your style guide and build upon
it as you progress. Create components to re-use interface elements
consistently. That’s already a solid start.
I didn’t look at contrast values
Many beginner designers don’t look at accessibility requirements and we
always have to design with a large spectrum of users in mind. We
shouldn’t assume things, rather stick to industry standards.
contrast is too low - text is not legible
contrast is minimum 4.5:1
A few more considerations when designing for accessibility:
Use sufficient color contrast (for digital use AA is considered enough)
to ensure readability by users with visual impairments
Ensure that all interactive elements are large enough to be easily
tapped or clicked - 44x44px on iOS, 48x48 on Android and Website
Use plugins like A11y Contrast Checker to check your contrast value
Design forms and navigation to be keyboard-friendly for users who
cannot use a mouse. Design focused component states.
While striving for aesthetic appeal, designers often underestimate the
role of contrast in enhancing usability and accessibility. It’s especially
visible on all the fancy dark mode designs you see shared online.
I followed all the bad examples
As a beginner, you might find yourself overwhelmed, trying to replicate
examples or follow advice that doesn't translate into practical skills.
Everyone can be an expert but not many are practicing what they preach.
Try to look up examples of portfolios and industry experience of the

people you ask for advice. I didn’t and I invested a lot of money and time
without learning anything usable.
The digital age has given rise to countless self-titled experts whose
advice may not always stem from real-world experience or success. It's
important to seek out design mentors or resources that not only talk the
talk but also walk the walk. Look for proven industry experience and a
portfolio that resonates with your aspirations.
Now, why should you listen to my advice? Well, I went through it all. After
years of struggle and self-learning I was able to ship my app designs to
over 30 million users, redesigned the biggest investment app in the UK,
and number #1 shopping app in Germany with the biggest launch
recorded in Germany’s history, rated 4.9 by over 5500 users.
But don’t get me wrong, you shouldn’t rely on just a single source. Design
is ever-evolving and so varied and complex that you should explore
multiple viewpoints to gain a well-rounded understanding.
Transitioning from the challenges of finding reliable design advice, I want

to introduce you to "Design Manual" – my own eBook dedicated to mobile
design. This resource took me and my wife over 6 months to create and it
addresses all the gaps left by conventional design advice.
What Makes "Design Manual" a worthy read?
As of the latest update it contains over 770+ pages of valuable advice,
tips, and best practices of designing Android and iOS interfaces. But not
only that. It comes with a fully custom designed Fintech app and a bunch
of complementary Figma files like my design framework templates, and
one huge Practice File where you can replicate the entire app using the
Design Manual as your reference guide.
The eBook delves into the most popular user flows in mobile design,
providing you with a practical understanding of user interactions.
Unlike many resources that offer theoretical knowledge, "Design Manual"

is all about practical application of the design practices, making sure you
learn skills that are directly usable in your projects.
AdrianK AdrianK
@uiadrian @uiadrian
the UI professional’s the UI professional’s
Design ManualAndroid Guide

full version
Get your copy of the Design Manual the ultimate guide to master mobile design the ultimate guide to master Android design
Learn and practice mobile design on a real Figma project with

auto-layout and responsive constraints.
Learn and practice mobile design on a real Figma project with
auto-layout and responsive constraints.
100+ High-quality app screens included 100+ High-quality app screens included
What if you want a free alternative?

You can find good examples to replicate work and learn from the best on
sites like mobbin.com, land-book.com, and refero.design.
So, really, how should you approach learning designs? Scroll to the next
page and we’ll cover that before parting ways.
I’ll see you there!

Chapter 5
Practicing UI

Bridging the Gap Between Theory and Practice
Starting in UI/UX design can be exciting but also extremely confusing.
While theory teaches you the rules of design, practice will teach you how
to apply these rules in real-life scenarios. Design, like any creative skill, is
best learned through practice and hands-on experience. While theoretical
knowledge provides a solid foundation, the true mastery of UI design is
achieved by creating, experimenting, and iterating.
24px
36px
80px
56px
16px
16px
48px
40px
It's in the process of doing that designers learn to balance form and
function, develop an eye for detail, and understand the user interaction.
Moreover, practical design work encourages designers to approach
issues more creatively, finding solutions that are not only visually
appealing but also user-friendly and most importantly practical.
Without any further ado, here’s how you can do that.

Tracing Designs
Start by taking screenshots. Choose an app or a website you admire and
download screenshots from its various flows/pages. You don’t have to
pay for these. Simply open the app on your phone and screenshot it.
Place these on your artboard, and just like that, begin your exercise.
9:41
Order a card
Debit card
Practice File Fintech Kit from the Design Manual
Reduce the opacity of these screenshots to about 20%, lock the layer,
and start tracing the design, component by component.
Tracing will help you develop an eye for design details such as typography,
color usage, and the overall flow of elements. It's a practical way to
understand how experienced designers solve common design problems.
Want a bigger challenge?
For a more challenging exercise, place a screenshot beside your artboard.
Draw guidelines and replicate the design by referencing the screenshot.
This exercise is more challenging than tracing as it requires the designer
to think and make decisions about spacing, sizing, and alignment without
directly overlaying elements. It's a step closer to creating original designs
and helps in understanding the thinking behind certain design decisions.
Why is the title below the navigation?
Tabs are iOS segmented buttons
Label has stronger contrast
Cards have arrows to indicate action
Descriptions are greyed out Is this is an ad I can turn off?
Close button has low contrast - dark UX?
Where will this button take me?

Dive deep into design analysis
Once you’re done, start examining how the replicated design addresses
user problems. Examine how the design uses visual hierarchy to prioritize
information. Notice what catches your eye first, second, and so on.
Analyze how elements like size, color, contrast, and placement are used
to draw attention and guide the user's eye through the design.
1
1
2 4
Design Manual’s Practice Chapters explaining the Onboarding Flow
Focus on the spacing and margins used in the design. Understanding

these values is key to creating balanced and aesthetically pleasing
layouts. You’ll quickly learn the basics of the 8 pixel grid layouts.
Analyze the copywriting. The words used in a design are as important as
the visual elements. Analyze the language for clarity, tone, and how it
complements the overall design. Good copy can significantly enhance
the user experience. The sooner you learn how to write, the better.
Once you replicate 10, 20, a 100 screens, you will be able to memorize so
many design patterns that coming up with new designs or solutions will
come naturally to you. Each screen or a section you replicate adds to your
mental library of design elements and layouts.
As you replicate more and more designs, you naturally become faster
and more efficient in your design process. You learn shortcuts, become
proficient with design tools, and can quickly turn ideas into visual
representations with ease. You become more adaptable and learn to
work with different styles and trends. All this practice will give you a lot
more confidence and greatly speeds up your learning as a designer.
Where to find good design examples
In our small design world, bad advice is everywhere and it can significantly
hinder your growth. It often sets unrealistic or inappropriate expectations
of what makes a good design. For beginners, it's easy to get swayed by
flashy visuals that show off more style than real substance. This can lead
to a messed up understanding of design principles and puts emphasis on
aesthetics at the cost of functionality and clarity.
A common trend among a lot of designers is to overload a design with

excessive visuals. While these designs might appear attractive at first
glance, they often detract from the core message of the site. The primary
focus of any design should be on the content and how effectively it
communicates with the audience. Overly complex designs can confuse
users, making it hard for them to find the information they need.
Platforms like Twitter and Instagram are increasingly showcasing designs

that are more about pleasing other designers than pure usability. These
platforms can sometimes promote a culture of design that values
appearance over functionality. They look impressive but often fail in
practical, real-world applications.
Good design is not just about how things look; it's about how they work.
Visuals should always support and enhance the message, not bury it. The
best designs are those where every element serves a purpose,
contributing to a clear, coherent, and compelling user experience.
To find good design examples, look beyond the superficial on social

platforms. Websites like Mobbin, Refero, Land-book, Onepagelove, and
Saaslandingpages offer a more realistic overview of effective design.
Need a more guided experience?
if you're looking for a structured guide to help you improve your design
skills, feel free to give my Design Manual a go.
Apart from over 400 pages of iOS and Android theory, I carefully explain
the design, and the UX behind 100 Fintech app screens specifically
designed for the Design Manual ebook. It will provide you with a tried-and-
tested UX and UI design process, give you access to the design
templates I use personally, and at the end talk about how you can put a
100-day plan I lay out for you into action and kickstart your career.
You won't just learn design principles; you'll understand the "why" behind
each decision. So, if you're eager to learn “good” mobile design from
someone who shipped #1 App store apps to 30M+ users, you know where
to find it - go to the Design Manual landing page.

Are you more into web design?
If you’d rather focus solely on web design, check out my Ultimate Guide to
Web Design. It covers everything from running a freelance business to
mastering design theory and web design processes.
With 340 pages divided into six parts and 33 chapters, this eBook takes
you through the freelance guide, design basics, designing for the web, the
web design process, an introduction to no-code, and ends on a design
handoff. You will learn the foundations of web design, streamline your
freelance business, and discover how $10,000 website design process
looks like. Plus, you’ll enjoy amazing bonuses, including design templates,
a landing page UI kit, and my personal freelance documents.
I’m currently writing an update explaining how I was able to re-launch my

agency and grow it to $100k revenue in 6 months and currently put in 4-5
hours of daily work to make $80k monthly from only 7 clients with a team
of 5 designers. You can find the Ultimate Guide to Web Design here.
Need to start from the basics first?
If you’re not yet familiar with Figma and would like to master the tools of
our trade first, I’ve got this pretty cool course you might find useful.
As of the latest update it has close to 11 hours of content taking you

through the basics and foundations and finishes on a live build of a fully
responsive landing page. I’ll let you decide if that sounds like a good fit: 
- learn more about the Figma Mastery
Due to high demand, I’m recording a new Figma Mastery update that will
include variables, conditional logic, and the most streamlined
introduction to Figma-to-Framer no-code website builds. I’ll show you my
exact process of preparing a Figma design to replicate it in Framer.
New update coming in spring 2024!

Chapter 1
What’s next?

You made it to the end! But...
First of all, congratulations for making it to the end. I hope this little ebook
got you better prepared for what UI (and UX) has in store for us.
This is the first release of the re-imagined How to Design Better UI ebook.
But it’s not the last! From now on, it’s going to be updated every few weeks
with a new chapter. My goal with this ebook is to make it ever-evolving,
serving you as your ultimate go-to resource when it comes to design.
However, since I already compiled all of my iOS + Android and web design
+ freelancing knowledge into 1100+ pages of content and put them in my
two other ebooks, we won’t cover most of the concepts dedicated to
these topics. The content of this ebook and my other two products will
not overlap. All pages will be unique and packed with unique value so if
you already own my other products, rest assured each one of them will be
updated without any overlap as far as content goes.
Having said that, if you enjoyed this ebook, you’ll certainly enjoy my other
two. I’ll drop the links one more time in case you want to check them out:
-> the Design Manual - master iOS/Android design
-> Web Design Guide - learn my web design process and access the
system and documents I use to run my $30k MRR design business
-> Figma Mastery - start by mastering the design tools first - go from
0 to a fully responsive landing page ready for no-code handoff!

Enjoyed the ebook? Please leave a rating!
If you found this ebook helpful, it would mean the world to me if you could
leave a positive review! Your support is what’s keeping me going :)  
- You can rate it on Gumroad here
- You can also leave a written testimonial here
- Or, if you can spend a minute recording a video testimonial - I’ll send
you a lifetime exclusive discounts for all my future product releases, and
my existing ebooks and courses :)
Any suggestions on what to improve?

If you found something not clear enough or if you have a kickass
suggestion on what to include next, drop me a line at [email protected]
Let’s talk :)
That’s it, thank you again!

Alright, new chapter coming in January. I’ll see you then.
Stay awesome, my friend
(UI) Adrian

How To Design Better UI Components 3.0 Full Ebook

Uploaded by

Document Information

Original Description:

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 3.0 Full Ebook

Uploaded by

Copyright:

Available Formats

Table Of Contents

About me and this e-book 02

The Design Basics 06

Layouts, Grids, Box Model 10

Master the Foundations 29

Colors, Shadows, and Gradients 30

Master the Lingo 61

UI/UX Terms and UI Elements 62

Master the Interface 87

Hero Sections 145

Style Guides 166

Practice makes progress 174

Good vs Bad UI 175

What’s next? 194

As we gained more experience in the art of writing, we quickly realized

social media community has skyrocketed to over 500k followers. This

incredible growth, a direct result of your continuous support, marks

another significant milestone in our shared journey together.

I cannot fully express my gratitude for the support you’ve shown.

Building on this momentum, we've rewritten our first eBook aiming to

serve as an essential resource for design enthusiasts and professionals

alike. Whether you're an interface designer, web designer, developer,

manager, or graphic designer, this eBook is designed with you in mind.

The pages ahead are packed with actionable insights, real-world

things out immediately. After all, design is best learned by doing.

Follow @uiadrian on Instagram, @uiuxadrian on Twitter/X (some guy snatched the

tag away from me :( ) or simply look up my name Adrian Kuleszo on Linkedin.

There's always something brewing out there!

Here’s a legend to explain what each icon and bubble represents:

Descriptive text work created by my agency - DesignMe

Descriptive text additional, short and actionable tip

Descriptive text resource you can find in one of my products

Descriptive text my subjective thoughts

If you decide to spend a minute and record a video testimonial, as my way

howtodesignbetter designme @ uiadrian

Let’s cover some basics first.

App redesign project + Framer build for a client

iOS - iPhone 13 Mini Android - Android Small/Large

375 x 812 360x800

We’ll cover that in the next chapter.

howtodesignbetter designme @ uiadrian

Minimalist Settings Page from the zave.it app

Column grid - a layout framework that divides a webpage or app screen

Baseline grid - a set of horizontal lines that define a consistent spacing

Gutter - space between columns in a column grid. It helps provide a

For added versatility, especially when dealing with smaller elements or

8px 16px 24px 32px 40px 48px 56px 64px

An 8-pt grid breakdown from the Design Manual

What’s the right setup for an 8px grid?

More details on the next page.

My standard grid for a website design is built on a 1440x1024px frame.

It might seem complex at first, but my approach is straightforward: I opt

column grid, separated by 20px gutters.

If I develop my designs in Framer, I add 20px of additional side margin to

let my designs breathe when they hit the breakpoint’s edge.

20px 1160-1200 px 20px

Let's use this page as an example

120 px 1200px box-width 120 px

AndesMortgage Home About Videos Blog Contact Book an appointment

A Home Loan Experience

That Makes Sense

Book an appointment Learn more

another significant milestone in our shared journey together.  

I cannot fully express my gratitude for the support you’ve shown.  

can be spaced at 8-20px+; text groups and icons/buttons - 20-40px+.  