UI Design
Uploaded by
apaulclindoUI Design
Uploaded by
apaulclindouser
Master UI
Design
Elements - The
hidden secrets
200+ pages of actionable tips and tricks for
your everyday design decisions.
Denislav Jeliazkov
Sold to
paulclindo@[Link]
1.1
Sold to
paulclindo@[Link]
Contents
Typography 13
Rule of Four 14
Color 17
Weight 18
Positioning 19
Decorating 20
Cases 21
Uppercase 22
Title Case 23
Sentance Case 24
Baseline 25
Hierarchy 27
Readability 28
Long Paragraphs 29
Big Headlines 30
Spacing Paragraphs 31
Creating Rhythm 32
Large Titles 33
Spacing different content areas 34
Color 36
Understanding Color 37
Sold to
paulclindo@[Link]
Hue 38
Saturation 39
Brightness 40
HSB vs RED 41
Selecting Light Shades 42
Dark isn’t Black 43
The importance of grey 44
Accessibility 45
Accessible isn’t Ugly 47
Creating Depth 48
Emulate e a Light Source 49
Inserted Elements 53
Shadows 55
Improve Contrast Easily 56
Flat Design has Depth 58
Overlap Elements 60
Hierarchy 62
Soft vs implicit grid 63
Grids are overrated 65
Not everything is equal 69
Bigger isn't bettert 71
Do you even need that label? 73
Labels and values 74
Emphasizing labels 76
Sold to
paulclindo@[Link]
Weight & Contrast 77
Space is never enough 82
Forms and Fields 84
Input fields 85
Forms 86
States 87
Labels 97
Placeholders 103
Errors 112
Icons 114
Selecting the right type 118
Group inputs 124
Accurate keyboard inputs 127
Buttons 128
Basics 129
Padding 134
Colors 135
Show progress 136
Tap areas 137
Positioning 138
Destructive buttons 140
Labels 142
Ok/cancel or Cancel/Ok? 143
Sold to
paulclindo@[Link]
Selection Controls 145
Checkboxes 147
Radio buttons 148
Choice chips 149
Multi select chips 150
States 151
When to use a toggle? 152
Styling 154
Alignment 155
Dropdown alternatives 157
Selected state 158
Additional text matters 159
Highlight user slection 160
Tap areas 161
Navigation 162
Make it intuitive 164
Hand and finger positioning 165
Leginble content 166
Avoid clutter 167
Hamburger menu 168
Cards 170
Tap bar navigation 171
Using icons 173
Sold to
paulclindo@[Link]
Tabs 174
Sidebars 178
Floating actions 179
Contextual navigation 180
Cards 181
Horizontal 183
Vertical 184
Stacked 185
Grid and Masonry grid 186
Usage of images 187
Selecting fonts 188
Reduce clutter 189
Avoid embedding links 191
Border radius 192
Create depth 193
Tables 194
Readability 196
Pagination 200
Alignment 201
Separators 202
Display data efficiently 205
Sticky headers 207
Sorting and filtering 209
Sold to
paulclindo@[Link]
Tabs 210
Icons 211
Badges 212
Taking it to the next level 213
Practice 214
Find your strenghts 216
Endnotes 220
Sold to
paulclindo@[Link]
The mindset
Master UI Design Elements
[Link]
Sold to
paulclindo@[Link]
Mindset 10
Getting into the right mindset
We as designers want to know all answers - and this is a mistake.
You should be focused on delivering results for your company or
clients.
During your process, you should be as optimized machine as
possible. So mastering and knowing time-saving techniques is
vital to solving problems fast and efficiently.
Building digital products
When s tarting that new amazing app idea, what do you design
first?
The easiest way to find yourself frustrated if you get too deep
into small UI elements rather than looking at the big picture of
what this feature needs to solve.
The thing is that a product is actually a collection of elements
and design decision, and before you even have something
designed it’s frustrating how everything else will flow into place.
No wonder so many people quit early in the process.
Sold to
paulclindo@[Link]
Mindset 11
Starting with the blank screen is scary, so think of a feature if
you are the first to come up with Uber. The first feature should
be booking a cab.
The interface will require
A place to select pickup locatio
A field to enter a destinatio
A button to choose the type of cab
In the early stages of your new product, you mustn’t get hung up
on making low-level decisions about small things like style,
typeface, and colors.
These things will evolve.
If you have trouble ignoring the details when working in a high-
fidelity environment, start designing with a pen and paper and
sketch out your feature there.
This method to obsess over details would be pretty tricky, so it’s
a great way to get all your ideas out of your head.
Sold to
paulclindo@[Link]
Mindset 12
The whole point of designing this way is that you will be able to
move fast and start building the real thing as soon as possible.
These things are easy to throw away; your customers can’t do
anything with paper and a pen.
Sold to
paulclindo@[Link]
Typography
Master UI Design Elements
[Link]
Sold to
paulclindo@[Link]
Typography 14
Set your boundries
In your interfaces you will end up using way too many different
font sizes, unless you set yourself with a rigid system. When
trying to figure out your system a 2px jump might work when
working on increments of 10 and 12, but it won’t if you try to
figure out what will be your headline.
The best way for you to create that scale is by hand, and this will
be the easiest way. I always advise you to start with the main
paragraph size and take it from there.
10px Discover practical tips with real examples, understand design, and what skills are esse
12px Discover practical tips with real examples, understand design, and what
16px Discover practical tips with real examples, understand
24px Discover practical tips with real exampl
32px Discover practical tips with
40px Discover practical tips
Sold to
paulclindo@[Link]
Typography 15
Responsive typography
A 60px header on a desktop will look small, but a 60px header on
mobile might look huge.
This is why you need to be cautious about how you call your
system. Take into account what you are designing and have the
flexibility to change it.
Blog UI Course 100% positive reviews Purchase Now for $39
Learn interface
design and
become a UI 32px
master!
60px Learn interface design and Discover practical tips with real
16px
examples, understand design, and what
become a UI master! skills are essential to grow as a
designer.
22px Discover practical tips with real examples, understand design, and what skills are
essential to grow as a designer. Get the eBook for $39
Get the eBook for $39
Sold to
paulclindo@[Link]
Typography 15
The Rule of Four
Sloppy and inconsistent usage of font sizes, weights, and colors
are a telltale sign of someone who doesn't quite know what they
are doing with typography.
I'm not talking about the old vintage signage you might find that
uses eight different typefaces and just so happens to look
amazing.
I'm talking about interface design, where there needs to be a
reliable and consistent system for a user to learn and
understand.
With this rule of four, you can start developing your type system;
however, as with everything in design, a law is meant to be
broken. Once you are aware of the boundaries and why they
exist only.
This rule will help you remember some essential ingredients of
typography for interfaces.
Sold to
paulclindo@[Link]
Typography 17
In Practice
For example, as of iOS 14 the type sizes would be as follows
Titles & Actions = 17p
Subtitles & Body Copy = 15p
Secondary Actions = 13p
Metadata = 11px
15px
17px
Add New 13px
11px
Sold to
paulclindo@[Link]
Typography 18
On nearly every single Apple-designed interface screen, you can
find some combination of these sizes. Within the latest iOS
updates, you can find some titles temporarily set to 34pt,
doubling the standard size of 17pt, but only temporarily. Once it
scrolls out of position, the trusty 17pt titles reveal themselves.
17px
34px
Another essential thing to note is that every interface is always
based on some time and can therefore change accordingly.
If you find yourself using way more than four sizes and having a
hard time making things work, you may want to reconsider your
type size choices.
Sold to
paulclindo@[Link]
Typography 19
Extending the Rule
It's important to note that the rule of four can be extended by
changing other aspects of the type. Each of these changes can
effectively change the meaning of that particular piece of the
interface.
Color
One way to distinguish a Title from a Subtitle could be to make
the Title text completely black with #000, vs. a Subtitle of the
same size and weight, with the color of #687684.
Denis Jeliazkov Denis Jeliazkov
“If I had asked people what they wanted, “If I had asked people what they wanted,
they would have said faster horses.”
they would have said faster horses.”
This quote by Henry Ford often goes This quote by Henry Ford often goes
through my mind when it comes to the through my mind when it comes to the
debate of "user feedback vs Innovation" in debate of "user feedback vs Innovation" in
product design. product design.
Sold to
paulclindo@[Link]
Typography 20
Weight
Similar to color, varying weights can give different interactive
definitions to the text used in the design. In Instagram's example,
they are using an incredibly subtle font-weight change to
indicate actionable profile names.
Whereas profile @mentions and #hashtags are treated with color
01 01
instead of weight because they are created by user input instead
of the Instagram design system.
6 common 6 common
UI Design UI Design
Mistakes Mistakes
to avoid to avoid
@denisjeliazkov [Link] @denisjeliazkov [Link]
230 likes 230 likes
Do you want to master and become a more confident interface designer? Do you want to master and become a more confident interface designer?
#PreSale #uibook #PreSale #uibook
View all 28 comments View all 28 comments
Sold to
paulclindo@[Link]
Typography 21
Positioning
Simply changing the position of text can affect its meaning used
in the context of an interface.
Pretty Fly for a Wi-Fi Wi-Fi Pretty Fly for a Wi-Fi
Pretty Fly for a Wi-Fi Wi-Fi Wi-Fi
Pretty Fly for a Wi-Fi
Sold to
paulclindo@[Link]
Typography 22
Decorating
Keeping any number of your four type sizes the same, but adding
an underline, or a background color, is an easy way to stay within
the Rule of Four sizes ballpark, but perhaps your action items
deserve their very own size altogether.
Skip
Welcome to NotClubhouse. In order
to proceed please verify your Welcome to
account with the code 18-22-41 NotClubouse
A custom welcome message is a
great way to add a personal touch.
Record a welcome message
You can always record a welcome message later or change it.
Sold to
paulclindo@[Link]
Typography 23
Cases
Changing between different text cases can impact the look and
the perceived functionality of what you're designing.
Lowercase
It's rarely a good idea to use only lowercase unless you've got a
solid reason to do so, whether it's a branding thing or anything
else. But remember, we're talking "rules of thumb" here, not the
letter of the law.
Company Status
Company About Stat
BrandBird BrandBird Content curating app
Customer Cu
[Link] Brings all your news into one place
[Link]
Magic Pattern Design software
Magic Pattern
Churned Ch
[Link] [Link]
Super lightweight design app
One Page Love Data prediction
One Page Love
[Link] Customer
AI and machine learning data
[Link]
Cu
Mailbrew Mailbrew Productivity app
mai [Link] Customer
[Link] management and productivity
Cu
Typefully Typefully Web app integrations
y [Link]
t pe
Churned
[Link] Connect web apps seamlessly
Ch
Previous Previous Page 1 of 10
Sold to
paulclindo@[Link]
Typography 24
UPPERCASE
UPPERCASE can be a lovely way to provide an exciting variety in
your typography mix.
Keep in mind that UPPER CASE LETTERS will appear to be a font
size larger than your otherwise, Sentence-cased friends. You can
use it for smaller titles on lists of things.
The choice is yours, but don't forget about this convenient
weapon in your typography toolkit.
Design
How collaboration makes us
better designers
Collaboration can make our teams stronger,
and our individual designs better.
Sold to
paulclindo@[Link]
Typography 25
Title Case
Title Case is great for titles. Make sense, right? So keep that in
mind for your titles, but you may experiment with Title Case on
your buttons or actions as well.
It's a subtle yet handy differentiator when it comes to handling
typography.
first name First name
denis Denis
last name Last name
jeliazkov Jeliazkov
Email Email
denis@[Link] denis@[Link]
Click to upload or drag and drop Click to upload or drag and drop
SVG, PNG, JPG or GIF (max. 800x400px) SVG, PNG, JPG or GIF (max. 800x400px)
cancel save changes Cancel Save changes
Sold to
paulclindo@[Link]
Typography 26
Sentence
Just like it says, Sentence case capitalizes the first letter of the
first word in your string of text.
Sentence case is the best use for sentences when a complete
thought is expressed.
You could make a case for using Sentence case in other areas,
but you better have an excellent reason for doing so.
Sold to
paulclindo@[Link]
Typography 27
Using the Baseline
We often need to use more than one font size to create a
hierarchy.
A widespread mistake is to align everything to be vertically
centered for balance.
It doesn’t look as bad when they are far apart, but you will notice
the awkward alignment when you bring them closer.
19:48
Your wealth will be calculated after
you make some transactions and
home some income and expenses.
Goals Add New
Let’s set a goal you
want to reach
Immidiatet Expenses $18.37
Loans 0
Health $11.02
Car $271.01 Sold to
paulclindo@[Link]
Education $11.44
Typography 28
The better approach is to align a mixture of font sizes to their
baseline, which is the line that letters sit on.
This would create a much simpler and cleaner look than what you
get when you center two pieces of text and offset the baselines.
19:48
Your wealth will be calculated after
you make some transactions and
home some income and expenses.
Goals Add New
Let’s set a goal you
want to reach
Immidiatet Expenses $18.37
Loans 0
Health $11.02
Car $271.01
Education $11.44
Sold to
paulclindo@[Link]
Typography 29
Creating Hierarchy
There are extensive lists of rules to keep in mind when working
with text and spacing typography.
We are adding space between lines for one simple reason: to
make it easy for the reader to find the next line.
How often have you read the same line twice? Or skipped a line?
This means that the line height was most likely too short.
This problem is escalated when text lines are too long. The
further your eyes have to jump to read the following line, the
easier it is to lose your place.
Your line height needs to be proportional - narrow content
shorter line height; longer-range taller line height.
Sold to
paulclindo@[Link]
Typography 30
Readability
Having the right amount of characters on each line is key to the
readability of your text.
Manage
It shouldn’t merely be your preferences
design that dictates the width of your
text, it should also be a matter of legibility.
Strictly Necessary Cookies
Many tests havecookies
These been done provingfor
are necessary that
thethe besttousability
website
function
principle for and cannot
readability be switched
on mobile is no off
morein our systems.
than nine words per
They are usually only set in response to actions made
line, or 50–60 characters.
by you which amount to a request for services, such
as setting your privacy preferences, logging in or
filling in forms. You can set your browser to block or
alert you about these cookies, but some parts of the
Is Your UI Messy? 7
site will not then work. These cookies do not store
any personally identifiable information.
Common Mistakes50-60 characters or 9 words
Targeting Cookies
A lot of people argue what is more important,
These cookies may be set through our site by our
good UX or good UI, and I always tend to say —
advertising partners. They may be used by those
both. If one fails you can’t make an impact on
companies to build a profile of your interests and
your users. However often times users don’t think
show you relevant adverts on other sites. They do
of what the UX is and value a product based on
not store directly personal information, but are
its looks.
based on uniquely identifying your browser and
internet device. If you do not allow these cookies,
How often
you will have you
experience used
less a product
targeted that has
advertising.
Lorem ipsum in it and stock photos? None.
If you want to level up your skills design
something that might be the end-case of the Sold to
paulclindo@[Link]
product. What images will it actually feature, how
Typography 31
Long Paragraphs
The safest route for you to space your long paragraphs is by
multiplying it by 1.5. This will always ensure you have enough
breathing room between the two lines.
However, if font size is bigger for this long paragraph, you can
also multiply the line height by 2.
Is Your UI Messy? 7 Common
Mistakes to Avoid
A lot of people argue what is more important,
good UX or good UI, and I always tend to say —
both. If one fails you can’t make an impact on
your users. However often times users don’t think
of what the UX is and value a product based on
its looks.
Save
Sold to
paulclindo@[Link]
Typography 32
Big Headlines
As the text gets bigger our eyes don’t need as much help. This
means that you might not need this extra line spacing for a large
headline, and a line-height of 1 to 1.2 is perfectly fine.
Is Your UI Messy? 7
Common Mistakes to
Avoid
When it comes to creating
high-quality products, all of the
small details are crucially important.
A lot of people argue what is more important,
good UX or good UI, and I always tend to say —
both. If one fails you can’t make an impact on
And if you
yourhave a secondary
users. However headline
often times users don’t think that sits in the middle of
of what the UX is and value a product based on
your pagraph
its looks. and your large headline, a safe route is to multiple
the line height by 1.3.
Save
Sold to
paulclindo@[Link]
Typography 33
Spacing Paragraphs
The simplest rule for spacing paragraphs is to equal to the
font-size of the content using.
By that, we can remember spacing easier. Besides, note you
should use paragraph spacing instead of hitting enter to go down
a line.
As of spacing when you hit enter this is too larger, the paragraph
will control white space easier between two consecutive
paragraphs.
How often have you used a product that has
Lorem ipsum in it and stock photos? None.
If you want to level up your skills design
something that might be the end-case of the
product. What images will it actually feature, how
long could the titles be? Your beautiful design will
be broken once it’s been filled by the real content.
Specifically, before you start working on a UI
design, you need to know what kind of content
will be shown in each and every section of the
page. You also need to know the minimum and
maximum sizes of the content. These turning
points are called edge cases because they show
when and how the interface will change.
You’ll also want to investigate image limitations. If
your client doesn’t have any custom photos or
isn’t going to purchase any, there’s no sense in
using beautiful but pointless photos from
Unsplash.
Why? Photos tend to be conceptual. It’s not
enough to use something pretty. Instead, you
need to select images that create a narrative or
simply a deeper meaning.
Save
Sold to
paulclindo@[Link]
Typography 34
Creating Rhythm
When you have a small headline, it should be closer to the
paragraph text.
Small headline = small spacing - this helps highlight an essential
part of the text and not break the reading flow.
There isn't a set number, but I'd advise going for something
between 8px and 12px.
Manage preferences Manage preferences
Strictly Necessary Cookies Strictly Necessary Cookies
16px 8px
These cookies are necessary for the website to
These cookies are necessary for the website to
function and cannot be switched off in our systems.
function and cannot be switched off in our systems.
They are usually only set in response to actions made
They are usually only set in response to actions made
by you which amount to a request for services, such
by you which amount to a request for services, such
as setting your privacy preferences, logging in or
as setting your privacy preferences, logging in or
filling in forms. You can set your browser to block or
filling in forms. You can set your browser to block or
alert you about these cookies, but some parts of the
alert you about these cookies, but some parts of the
site will not then work. These cookies do not store
site will not then work. These cookies do not store
any personally identifiable information.
any personally identifiable information.
Targeting Cookies Targeting Cookies
Performance Cookies Performance Cookies
Save Save Sold to
paulclindo@[Link]
Typography 35
Large Titles
If you have a large title, you can't have the same spacing as a
small title.
Having a small spacing will make it super hard to read, so if you
bump up spacing, it will create a better contrast with the tiny
text.
This creates a better visual balance and improves readability.
Manage preferences Manage preferences
Strictly Necessary Cookies Strictly Necessary Cookies
8px
16px
These cookies are necessary for the website to
These cookies are necessary for the website to
function and cannot be switched off in our systems.
function and cannot be switched off in our systems.
They are usually only set in response to actions made
They are usually only set in response to actions made
by you which amount to a request for services, such
by you which amount to a request for services, such
as setting your privacy preferences, logging in or
as setting your privacy preferences, logging in or
filling in forms. You can set your browser to block or
filling in forms. You can set your browser to block or
alert you about these cookies, but some parts of the
alert you about these cookies, but some parts of the
site will not then work. These cookies do not store
site will not then work. These cookies do not store
any personally identifiable information.
any personally identifiable information.
Targeting Cookies Targeting Cookies
Performance Cookies Performance Cookies
Save Save
Sold to
paulclindo@[Link]
Typography 36
Spacing Different Content Areas
Having the same spacing will be challenging for people to scan
through your content and separate each part of the text from
another.
Thus, if you have a second title or area that starts after your
paragraph, a safe rule is to double the spacing and make it easier
to scan and read.
Adding more space will make the transition from one topic to the
next one clearer.
Manage preferences Manage preferences
Strictly Necessary Cookies Strictly Necessary Cookies
8px 8px
These cookies are necessary for the website to These cookies are necessary for the website to
function and cannot be switched off in our systems. function and cannot be switched off in our systems.
They are usually only set in response to actions made They are usually only set in response to actions made
by you which amount to a request for services, such by you which amount to a request for services, such
as setting your privacy preferences, logging in or as setting your privacy preferences, logging in or
filling in forms. You can set your browser to block or filling in forms. You can set your browser to block or
alert you about these cookies, but some parts of the alert you about these cookies, but some parts of the
site will not then work. These cookies do not store site will not then work. These cookies do not store
any personally identifiable information. any personally identifiable information.
8px
32px
Targeting Cookies
8px
These cookies may be set through our site by our Targeting Cookies
8px
advertising partners. They may be used by those These cookies may be set through our site by our
companies to build a profile of your interests and advertising partners. They may be used by those
show you relevant adverts on other sites. They do companies to build a profile of your interests and
not store directly personal information, but are show you relevant adverts on other sites. They do
based on uniquely identifying your browser and not store directly personal information, but are
internet device. If you do not allow these cookies, based on uniquely identifying your browser and
you will experience less targeted advertising. internet device. If you do not allow these cookies,
you will experience less targeted advertising.
Sold to
paulclindo@[Link]
Save Save
Typography 37
Images are more than just decoration; they have the power to
make or break a user’s experience.
They are visually heavier as our eyes are used to it; adding extra
space will help you create more breathing room between vibrant
imagery and the context.
8px
24px
Is Your UI Messy? 7 Common
Mistakes to Avoid Is Your UI Messy? 7 Common
A lot of people argue what is more important, good
8px
Mistakes to Avoid
8px
UX or good UI, and I always tend to say — both. If A lot of people argue what is more important, good
UX or good UI, and I always tend to say — both. If
one fails you can’t make an impact on your users.
However often times users don’t think of what the one fails you can’t make an impact on your users.
However often times users don’t think of what the
UX is and value a product based on its looks.
UX is and value a product based on its looks.
Save Save
Sold to
paulclindo@[Link]
Typography 38
Pairing Fonts
Before we even consider what fonts to use make sure your
content is written well. No matter what font you select it won't
save a bad copy. If you work on typography it will just draw the
user's focus to the content, so make sure it's clear and effective.
Create contrast
When working with multiple fonts it's essential to establish
hierarchy of the elements. The visual difference needs to be
obvious enough so customers can immidiately understand the
importance of every single element.
We Should
We Should Probably Pay Probably Pay
Attention to the Fire
Tornado Attention to the
May Martinez in Bloomberg Fire Tornado
Those crafty Chinese climate hoaxsters have May Martinez in Bloomberg
been at it again. Last week, there were wildfires
in Greece that got so bad that people were Those crafty Chinese climate hoaxsters have
jumping into the ocean for safety. been at it again. Last week, there were wildfires
in Greece that got so bad that people were
jumping into the ocean for safety.
Sold to
paulclindo@[Link]
Typography 39
Sometimes the best way to pair fonts is actually to go the safe
route and use just 1 family. You can have a different weight from
the same font and it will provide high contrast while maintaining
visual harmony.
Four Seasons Resort Four Seasons Resort
Chiang Mai Chiang Mai
$75 p/night $75 p/night
Occupying floors 51-59, this spacious suite enjoys Occupying floors 51-59, this spacious suite enjoys
beautiful views of Bangkok City and Chao Phraya beautiful views of Bangkok City and Chao Phraya
River. It includes an LCD TV. River. It includes an LCD TV.
Based on
8.5 Based on 646 hotel reviews
8.5 646 hotel reviews
Sold to
paulclindo@[Link]
Typography 40
We are talking a lot about contrast, but too much contrast is bad.
It looks unbalanced in large block of texts. They can work only
with logos or minimalistic usage of fonts. You should also
consider that if your font doesn't have bold, don't bolden it inside
CSS or adding a stroke to it. It's designed a certain way and if
there isn't bold it won't look natural.
Four Seasons Resort Four Seasons Resort
Chiang Mai Chiang Mai
Sold to
paulclindo@[Link]
Typography 41
Pick a personality
You have brand guidelines, so try and use those to determine the
personality of the font or fonts you want to use.
Try and pair your main font with a more neutral one to establish a
visual hierarchy and avoid the attention battle.
As designers it's very important to understand that font pairing is
very subjective. It's vital that we go and explore different pairings
and test ourselves what actually works best. Here are some font
pairing tools you can use:
Font Joy Archetype Fontpair
We Should
We Should Probably Pay
Attention to the Fire Probably Pay
Tornado
Attention to the
Those crafty Chinese climate hoaxsters
have been at it again. Last week, there
Fire Tornado
were wildfires in Greece that got so bad
Those crafty Chinese climate hoaxsters have
that people were jumping into the ocean
been at it again. Last week, there were wildfires
for safety.
in Greece that got so bad that people were
jumping into the ocean for safety.
Sold to
paulclindo@[Link]
Colors
Master UI Design Elements
[Link]
Sold to
paulclindo@[Link]
Colors 43
Understanding Color
Choosing colors can be overwhelming. There are multiple
methods for you to pick and manipulate colors.
Let’s lay down the foundation for all of our color-selecting needs
in the future.
You will spend a lot of time with your color picker open by
clicking and adjusting subtle things. Mastering the basics Is
crucial for you to create consistent pallets.
HSB. is the best way for me, but this is fine if you use any of the
others.
Remembering HEX values is tricky, but you need to know some of
the most used ones; you can always convert them to other
formats
RG
HE
HS
HSB
Sold to
paulclindo@[Link]
Colors 44
Hue
HUE is a certain number between 0 and 360 degrees on the
color wheel. Think about it like the circle below.
To develop a good understanding of HSB, you should have the
basic colors as anchor points
Red is 0
Green is 120
Blue is 240
Red is also 360º, which is the same as 0º
0° 360°
240° 120°
Sold to
paulclindo@[Link]
Colors 45
Saturation
Saturation defines a range from pure color (100%) to gray (0%).
Saturation refers to color intensity; a fully saturated color is pure,
while a fully desaturated color appears as grey.
Saturation Saturation Saturation Saturation Saturation
100% 75% 50% 25% 0%
Saturation Saturation Saturation Saturation Saturation
100% 75% 50% 25% 0%
Sold to
paulclindo@[Link]
Colors 46
Brightness
Brightness is a particular color's relative lightness or darkness,
from black (no brightness) to white (full brightness). Think of it as
a white light source (such as a professional studio light) that
brings light into the room. The more intense the light is, the more
bright the colors on the wall will be.
Brightness Brightness Brightness Brightness Brightness
100% 75% 50% 25% 0%
Brightness Brightness Brightness Brightness Brightness
100% 75% 50% 25% 0%
Sold to
paulclindo@[Link]
Colors 47
HSB vs RED
Don’t worry if you’re struggling right now. With use, this concept
will become second nature to you in no time. Give it a try,
experiment, and you will find what works the best for YOU.
For me, the most complex color to work with is red. We can make
an error message look better by injecting some pink or adding
more orange variations.
Hue Hue Hue
350 0 20
Sold to
paulclindo@[Link]
Colors 48
Selecting Light Shades
This method slightly differs from how we think of colors. When
using black, you can set the brightness to 0% and then set hue
and saturation to almost anything.
When creating white, you can set the brightness to 100% and the
saturation to 0% while setting the hue to anything you like.
To add white, you must move your color towards the white on
your color picker or the top left corner, decreasing the saturation
and increasing the brightness.
Sold to
paulclindo@[Link]
Colors 49
Dark isn’t Black
Dark shades, on the other hand, don’t need to be dull. Instead of
adding black to remove the white, you can increase saturation
and decrease brightness.
This will give you a much richer shade of color.
Sold to
paulclindo@[Link]
Colors 50
The importance of grey
Most interface projects you work on are simply going to need
multiple shades of grey, usually around 4 or 5 different shades.
By definition, true grey is has 0% saturation in it, aka no color.
But when it comes to interface design, when we think of a grey
color, they have a lot of saturation in them, and precisely this
saturation is what makes them feel cool or warm.
Home Home
Dashboard 10 Dashboard 10
Projects Projects
Tasks Tasks
Reporting Reporting
Users Users
Sold to
paulclindo@[Link]
Colors 51
Accessibility
Accessibility of any digital product should make it suitable for
elderly users, visually impaired, color blind, or others
(accessibility doesn't stop at the colors level, but we will cover
only that in this chapter).
The general idea is that a digital product should be easy to "see"
for everyone.
Contrast levels help people with vision problems to be able to
use the product as intended.
You must remember to check the WCAG 2.0 contrast for all
essential UI elements. Sometimes you can get away and ignore
the difference on the non-important parts.
Sold to
paulclindo@[Link]
Colors 52
The minimum level of accessibility is 4:5:1 contrast ration (or AA)
for all of your most crucial elements
A - Low contras
AA - Average contras
AAA - High contrast
You can test this contrast by using a range of dedicated plugins
and websites of your choice.
They work by entering them on the WCAG scale.
Stark for Figma
Webaim Contrast Checker
80% 80%
Used space Used space
Your team has used 80% of your Your team has used 80% of your
available space. Need more? available space. Need more?
Dismiss Upgrade plan Dismiss Upgrade plan
AA: 4:5:1 AA: 4:5:1 AA: 4:5:1 AA: 4:5:1
AAA: 7:1 AAA: 7:1 AAA: 7:1 AAA: 7:1
Sold to
paulclindo@[Link]
Colors 53
Accessible isn’t Ugly!
Achieving the necessary contrast ratio when using white text
over a colored background can be very difficult.
This also creates hierarchical issues as those elements grab the
user's attention more than what is intended.
Solving this is quite simple - you flip the contrast. Use a darker
text on top of a lighter color background.
Merchant Amount Category
Magic Pattern $18.99 Subscriptions
AC A Coffee $4.50 Dining
Transfer to *5540 $88.00 Uncategorised
Merchant Amount Category
Magic Pattern $18.99 Subscriptions
AC A Coffee $4.50 Dining
Transfer to *5540 $88.00 Uncategorised
Sold to
paulclindo@[Link]
Colors 54
Creating Depth
There are certain times where you need to create a native
environment in your interfaces.
The light source should affect all of your elements consistently;
imagine if it was a sun shining over a city. This is the light source
of your elements.
Depth is highly dependant on the visual style you are looking for.
Practical usag
Environmental gradients work better by having a darker color
at the top and a lighter color on the bottom. It more closely
resembles a blue sky.
Gradients have more flexibility in interface design because
they can be used as a splash of color vs. creating a realistic
environment. Plus, we see all types of random gradients
throughout the day with different light sources. It's a natural
occurrence; that's why we accept it without too much
thought.
Sold to
paulclindo@[Link]
Colors 55
Emulate a Light Source
Take a look at the picture of a door below.
Although this is a flat image, it looks like the panels of the door
are raised slightly. If you look closely, you will see that the top
part of those panels has a lighter shade than the ones at the
bottom.
This is because the light source comes directly from above.
Sold to
paulclindo@[Link]
Colors 56
Bringing this to UI
If you want a particular element to be raised on the inset, you
need first to figure out what profile you want the piece to have,
then mimic how a light source would interact with that shape.
How would you do that if you have a button that you want to
elevate and flat edges on top and bottom? At first, you can't
simply because they are both flat, it would be impossible to see
both of them simultaneously.
Changelog
Sold to
paulclindo@[Link]
Colors 57
People tend to look downwards towards their screens, so a
natural look and feel show a little of the top edge and hide the
bottom edge.
You can simulate this if you introduce a top border or an inner
shadow to the button.
Changelog
Sold to
paulclindo@[Link]
Colors 58
After you do this, you need to consider that if a light source is
coming from the top, it will be casting a shadow below it.
You would want to showcase the shadow slightly, don't get too
carried away with blurs and radiuses. A couple of pixels down is
more than enough.
This shadow should have a very sharp edge.
Changelog
Sold to
paulclindo@[Link]
Colors 59
Inserted Elements
Looking slightly downward, only the bottom lip would be visible.
Since it’s facing towards the sky, give that edge a slightly lighter
color using a bottom border or inset shadow with a negative
vertical offset:
Before depth Desired profile
Click to upload
Sold to
paulclindo@[Link]
Colors 60
The area above the well should block some of the light from
reaching the very top of the well, so add a small dark inset box-
shadow with a slight positive vertical offset to make sure it
doesn’t poke through at the bottom:
Before After
Click to upload Click
Click to
to upload
upload
Sold to
paulclindo@[Link]
Colors 61
Shadows
Adding a slight blur to a shadow will make the element feel
slightly raised off the background, while a larger shadow will
make that element feel much closer to the user.
The closer something feels to the user, the more it will attract
their focus.
Your wealth will be calculated after
you make some transactions and
home some income and expenses.
Your wealth will be calculated after
you make some transactions and
home some income and expenses.
Z-INDEX
Sold to
paulclindo@[Link]
Colors 62
Improve contrast easily
If your struggling with contrast even with a border around
elements, including a subtle drop shadow around that element
will make them stand out more.
Denis Jeliazkov Denis Jeliazkov
@deks @deks
Deposit
Set yourself as active Set yourself as active
Pause notifications Pause notifications
Select dates Filters Select dates Filters
Edit profile Edit profile
Preferences Preferences
Secondary account Secondary account
Sign out Sign out
Current balance Current balance
$6,421.10 2.0% $6,421.10 2.0%
Sold to
paulclindo@[Link]
Colors 63
Large shadows are great for modal dialogs, where you really
want to capture the user’s attention:
Add Team Member
bilbobaggins@[Link]
User Type
Viewer
Cancel Add Member
Sold to
paulclindo@[Link]
Colors 64
Flat Design has Depth
When we talk about flat design, we refer to designs with no
shadows, gradients, or other effects that mimic how light
interacts with real-life objects.
While it's more challenging to create depth without any shadows
or gradients, it's not impossible. We have to think about it
differently since colors and shapes are all we have at our
disposal.
Z-INDEX
Sold to
paulclindo@[Link]
Colors 65
When we think about light, the lighter parts are usually closer to
us than the dark parts. This means that we can create depth only
by using a shade of a specific color.
Color, therefore, is the best tool for you to convey distance. The
lighter elements will feel like they are raised from the page.
Username
denisjeliazkov
Password
************
Login
Don’t have an account? Sign up
Sold to
paulclindo@[Link]
Colors 66
Overlap Elements
The single most effective way of creating depth is by having
overlapping elements.
This will trick your eye that the design has multiple layers, and
you might even get away without using a shadow.
Destinations Offers Blog Log in Sign up
Plan your next escape
Round trip 1 passenger Economy
Sofia New York Search
Our top picks Explore all
Destinations Offers Blog Log in Sign up
Plan your next escape
Round trip 1 passenger Economy
Sofia New York Search
Our top picks Explore all
Sold to
paulclindo@[Link]
Colors 67
You could also make an element taller than its parent, so it
overlaps on both sides:
Sold to
paulclindo@[Link]
Colors 68
How procrastination How procrastination
made me a better made me a better
designer designer
The subtle art of doing too much and The subtle art of doing too much and
making progress. making progress.
Denislav Jeliazkov
February 14, 2021
Sold to
paulclindo@[Link]
Colors 69
Learn interface Learn interface
design and become design and become
a UI master! a UI master!
Discover practical tips with real Discover practical tips with real
examples, understand design, and what examples, understand design, and what
skills are essential to grow as a skills are essential to grow as a
designer. designer.
Get started Get started
Latest posts Latest posts
Untitled blog Untitled blog
Interviews, tips, guides, industry best Interviews, tips, guides, industry best
practices, and news. practices, and news.
Sold to
paulclindo@[Link]
Colors 70
9:41 9:41
Cardio workout sets Cardio workout sets
12 trainings 20-30 min 12 trainings 20-30 min
2 /12 training has been finished 2 /12 training has been finished
Workout list Video settings Workout list Video settings
20x Jump rope 20x Jump rope
02:00 02:00
20x Jumping jacks 20x Jumping jacks
02:00 02:00
Jog in place Jog in place
02:00 02:00
20x Split snatches 20x Split snatches
01:30 01:30
20x Squat thrust split jumps 20x Squat thrust split jumps
02:00 02:00
Sold to
paulclindo@[Link]
Play Now Play Now
Colors 71
It looks empty in here It looks empty in here
Email address Email address
denis@[Link] denis@[Link]
Add more Add more
Skip Invite Skip Invite
Sold to
paulclindo@[Link]
Colors 72
It looks empty in here It looks empty in here
Email address Email address
denis@[Link] denis@[Link]
Add more Add more
Skip Invite Skip Invite
Sold to
paulclindo@[Link]
Colors 73
It looks empty in here It looks empty in here
Email address Email address
denis@[Link] denis@[Link]
Add more Add more
Skip Invite Skip Invite
Sold to
paulclindo@[Link]
Hierarchy
Master UI Design Elements
[Link]
Sold to
paulclindo@[Link]
Hierarchy 75
Soft grid vs Implicit grid
Soft grid and implicit grid are pretty similar. The main difference
is that using the implicit grid gives you this clean feeling, making
it easier to have your spacing on point.
You provide careful consideration to every single element of the
screen.
It may sound a little overwhelming, but it's not. Used correctly,
the implicit grid will become a lens you look through when
observing a design.
16px
16px 8px
Kathryn Murphy Kathryn Murphy
12px
8px
Design Design
16px
Sold to
paulclindo@[Link]
Hierarchy 76
The implicit grid uses a systematic negative space between
every single element.
The traditional grid uses a fixed size, and we don’t design
interfaces for one size only. We have dynamic widths and
different device sizes.
This creates the need for width percentages, creating dynamic
numbers (with a maximum if desired).
With the implicit grid, it’s doubtful to have a fixed vertical spacing
because of the nature of the content created by your users.
Grids should be considered flexible containers - being 100% wide
at small sizes and having constraints as they get bigger.
16px
16px 8px 96px
Kathryn Murphy
12px 16px
8px 96px 12px
Design $1,902.00
16px 22px
Sold to
paulclindo@[Link]
Hierarchy 77
Grids are Overrated
Using a traditional 12 column grid locks you in a controlled
environment - which is not bad. In the 12 column grid, every
single column needs to have approximately 8.30% width - as long
as an element’s width is some multiple of 8.30% (including any
gutters), that element is “on the grid”.
25% 50% 25%
Sold to
paulclindo@[Link]
Hierarchy 78
This might seem fine at first, but think about what happens when
you resize the screen.
If you make the screen more comprehensive, the sidebar gets
wider too, taking up space that could’ve been used better by the
main content area.
Overview Search
Search
Today’s revenue Today’s orders Avg. order value
Home
Dashboard
$1,280 14 $91.42
15% last mth 10% last mth 20% last mth
Users
Transaction history Select dates Apply filter
Transaction Amount Date Category Account
Visa 1234
Spotify - $18.99 Wed 1:00pm Subscriptions
Expiry 06/2024
Visa 1234
AC A Coffee - $4.50 Wed 7:20am Food and dining
Expiry 06/2024
Mastercard 1234
Stripe + $88.00 Wed 2:45am Income
Expiry 06/2024
Visa 1234
Figma - $15.00 Tue 6:10pm Subscriptions
Expiry 06/2024
Visa 1234
TB TBF Bakery - $12.50 Tue 7:52am Food and dining
Expiry 06/2024
Visa 1234
FV Fresh F&V - $40.20 Tue 12:15pm Groceries
Expiry 06/2024
Support
Mastercard 1234
Settings Stripe + $88.00 Tue 5:40am Income
Expiry 06/2024
Previous 1 2 3 ... 8 9 10 Next
25% 75%
Sold to
paulclindo@[Link]
Hierarchy 79
Similarly, if you narrow the screen, the sidebar can shrink below
its minimum reasonable width, causing awkward text wrapping or
truncation.
Overview Search
Search
Avg. order value
Today’s revenue Today’s orders
Home
$91.4
Dashboard $1,28 14
2
Users 0 las
t las
10%
last mt t
15% 20%
mth h mt
h
Transaction history Select dates Apply filter
Transaction Amount Date Category Account
Visa 1234
Spotify - $18.99 Wed 1:00pm Subscriptions
Expiry 06/2024
Visa 1234
AC A Coffee - $4.50 Wed 7:20am Food and dining
Expiry 06/2024
Mastercard 1234
Stripe + $88.00 Wed 2:45am Income
Expiry 06/2024
Visa 1234
Figma - $15.00 Tue 6:10pm Subscriptions
Expiry 06/2024
Visa 1234
Support TB TBF Bakery - $12.50 Tue 7:52am Food and dining
Expiry 06/2024
Settings Visa 1234
FV Fresh F&V - $40.20 Tue 12:15pm Groceries
Expiry 06/2024
Mastercard 1234
Stripe + $88.00 Tue 5:40am Income
Expiry 06/2024
25% Previous 75%1 2 3 ... 8 9 10
Sold to
paulclindo@[Link]
Hierarchy 80
In this situation, giving the sidebar a fixed width that’s optimized
for its contents makes much more sense. The main content area
can then flex to fill the remaining space, using its internal grid to
layout its children.
Overview Search
Search
Today’s revenue Today’s orders Avg. order value
Home
Dashboard
$1,280 14 $91.42
15% last mth 10% last mth 20% last mth
Users
Transaction history Select dates Apply filter
Transaction Amount Date Category Account
Visa 1234
Spotify - $18.99 Wed 1:00pm Subscriptions
Expiry 06/2024
Visa 1234
AC A Coffee - $4.50 Wed 7:20am Food and dining
Expiry 06/2024
Overview Search
Mastercard 1234
Stripe + $88.00 Wed 2:45am Income
Search Expiry 06/2024
Today’s revenue Today’s orders
Visa 1234
Figma - $15.00 Tue 6:10pm Subscriptions
Home Expiry 06/2024
Dashboard
$1,280 14
Visa 1234
TBF Bakery
TB 15% last mth 10% last mth - $12.50 Tue 7:52am Food and dining
Expiry 06/2024
Users
Visa 1234
FV Fresh F&V - $40.20 Tue 12:15pm Groceries
Expiry 06/2024
Avg. order value
Mastercard 1234
Stripe + $88.00 Tue 5:40am Income
$91.42 Expiry 06/2024
20% last mth
Previous 1 2 3 ... 8 9 10 Next
Fixed Sidebar
Sold to
paulclindo@[Link]
Hierarchy 81
Not everything is equal
Having a clear visual hierarchy refers to how the essential
elements in an interface appear about each other. This is your
most important tool to make an interface feel well designed.
When everything in your interface is competing for attention, it
feels sloppy, noisy, and chaotic. It makes it hard for people to
understand what matters.
S c hedu l ed Tri gg ered Search campaigns... All Segments More Filters Drafts Published Create Campaign
Scheduled March 21 - 27, 2021 Eastern Standard Time (EST) Day Week Month
Sun mon tues wed thu fri SAT
New Category
21 22 23 24 25 26 27
8:13:02 PM EST 8:13:02 PM EST
Da i ly Q uests 12 Daily Quest 27th ... Daily Quest 27th ... Daily Quest 27th ... Daily Quest 27th ... Daily Quest 27th ... Daily Quest 27th ... Daily Quest 27th ...
H o l id ay Ev ents 2 St. Patrick’s Day All Players April Fool’s Day All Players
Su p er F un Thin g s 6 Catch Up Challenge Team Level 100
U n cate g ori z ed 14
Catch Up Challenge Team Level 105 Catch Up Challenge Team Level...
Q ui ck O ffers 1
Catch Up Challenge Team Level 110
Catch Up Challenge Team Level 75
Catch Up Challenge Team Level 70
Long Running Campaign Players > Lvl 200
New character release
This is a bunch of text for a note that will span multiple lines and
have an attachment. Bonus boxes active
Sold to
paulclindo@[Link]
Hierarchy 82
When you deliberately de-emphasize secondary and tertiary
information and make an effort to highlight the most essential
elements, the result is immediately more pleasing, even though
the color scheme, font choice, and layout haven’t changed:
S c hedu l ed Tri gg ered Search campaigns... All Segments More Filters Drafts Published Create Campaign
Scheduled March 21 - 27, 2021 Eastern Standard Time (EST) Day Week Month
Sun mon tues wed thu fri SAT
New Category
21 22 23 24 25 26 27
8:13:02 PM EST 8:13:02 PM EST
Da i ly Q uests 12 Daily Quest 27th ... Daily Quest 27th ... Daily Quest 27th ... Daily Quest 27th ... Daily Quest 27th ... Daily Quest 27th ... Daily Quest 27th ...
H o l id ay Ev ents 2 St. Patrick’s Day All Players April Fool’s Day All Players
Su p er F un Thin g s 6 Catch Up Challenge Team Level 100
U n cate g ori z ed 14
Catch Up Challenge Team Level 105 Catch Up Challenge Team Level...
Q ui ck O ffers 1
Catch Up Challenge Team Level 110
Catch Up Challenge Team Level 75
Catch Up Challenge Team Level 70
Long Running Campaign Players > Lvl 200
New character release
This is a bunch of text for a note that will span multiple lines and
have an attachment. Bonus boxes active
Sold to
paulclindo@[Link]
Hierarchy 83
Bigger isn’t better
If you rely only on the font size in your hierarchy, it’s a mistake. It
often leads to having the primary content too large and having
the secondary way too small. Instead of leaving all of the heavy
liftings to font size alone, try using font-weight or color to do the
same job.
Ancient castles tour
Explore the popular castles of Bulgaria in a hidden misteries of
ancient civilizations that ruled these lands.
$175 per day Book Your Spot
4.68 (38 reviews)
Sold to
paulclindo@[Link]
Hierarchy 84
Emphasizing a particular element does a better job at
communicating its importance.
Similarly, using a softer color for the supporting text instead of
making the font size small makes the text more readable.
Ancient castles tour
$175 per day Book Your Spot
4.68 (38 reviews)
Sold to
paulclindo@[Link]
Hierarchy 85
Do you even need that label?
When presenting data to people, it’s easy to fall into a trap where
we just display every entry with a label.
It’s much easier to present data by just emphasizing important
information, making the interface easier to use while at the same
time making it feel more polished.
Name: Andrew Wilkinson
Role: Co-Founder @Tiny Andrew Wilkinson
Co-Founder @Tiny
Description:
Tiny buys wonderful internet Tiny buys wonderful internet
businesses. businesses.
Social Media:
Twitter LinkedIn
Sold to
paulclindo@[Link]
Hierarchy 86
Labels and values
Even if you can’t remove the label entirely, you can often avoid
having it by adding a clarifying text to it.
Combining the label and value into one unit gives each piece of
information a meaning without sacrificing clarity.
Jordan’s Air 23 Jordan’s Air 23
Stella McCartney Stella McCartney
$384 $384
In Stock: 2 2 left in stock
Sold to
paulclindo@[Link]
Hierarchy 87
Often when displaying multiple pieces of information, you don’t
need a label. They need to be easily scannable and quickly
understandable.
Transactional Value Transactional Value
Average Average
$317 $317
You have 11% growth in You have 11% growth in
comparison to the previous month. comparison to the previous month.
Sold to
paulclindo@[Link]
Hierarchy 88
Emphasizing labels
In some cases, you need that label, especially if users are looking
for it.
This is often the case on pages with a lot of information,
especially when we talk about technical details for a product.
However, don’t de-emphasize data too much in these cases - it’s
still an essential piece of information. Using a darker color for the
label and a slightly lighter color for the value is often enough.
Sold to
paulclindo@[Link]
Hierarchy 89
Weight & Contrast
The bold text feels emphasized compared to regular text
because bold text covers more surface area — in the same
amount of space, more pixels are used for text than for the
background.
Chat to sales Chat to sales
Speak to our friendly team. Speak to our friendly team.
denis@[Link] denis@[Link]
Sold to
paulclindo@[Link]
Hierarchy 90
Just like bold text, solid icons generally feel pretty heavy. If you
put an icon next to the text, it will feel selected or emphasized.
Unlike with text, we can’t just change the weight of the icon - so
to create a balance, we need to de-emphasize it in some other
way. We can lower the contrast by giving it a softer color or just
changing the style to be an outlined version if it’s not active.
Home Home
Dashboard Dashboard
Projects Projects
Tasks Tasks
Sold to
paulclindo@[Link]
Hierarchy 91
In specific scenarios, it’s excellent to increase elements' weight,
especially if they are low contrast ones. If you have a horizontal
divider, using a dark color would feel too harsh and aggressive;
softening that color would make it much more organized and
polished.
Mable Castillo 45 min ago Mable Castillo 45 min ago
There is a moment in the life of any aspiring There is a moment in the life of any aspiring
astronomer that it is time to buy that first telescope. astronomer that it is time to buy that first telescope.
87 likes 34 replies 87 likes 34 replies
Caroline Goodman 2 min ago Caroline Goodman 2 min ago
Ivan Cook thanks mate, sounds like it could be a fun Ivan Cook thanks mate, sounds like it could be a fun
video to make actually. video to make actually.
0 likes 0 likes
Susie Estrada 2 min ago Susie Estrada 2 min ago
Buddy this is Superb Buddy this is Superb
4 likes 4 likes
Sold to
paulclindo@[Link]
Hierarchy 92
Secondary
Secondary actions are an essential part of buttons, but that
doesn’t mean you should forget about hierarchy.
Every action on a page sits somewhere in a pyramid of
importance. Most carriers only have one actual primary action, a
couple of less critical secondary actions, and a few used tertiary
Bank ofOne
Capital America Bank ofOne
Capital America
actions. USD USD
$5 981.22 $5 981.22
Chase Chase
USD - Credit Card USD - Credit Card
$487.11 $487.11
Edit Accounts Add an Account Edit Accounts Add an Account
Sold to
paulclindo@[Link]
Hierarchy 93
When designing these actions, it’s essential to communicate their
place in the hierarchy.
Primary actions should be obvious. Solid, high contrast
background colors work great here
Secondary actions should be clear but not prominent. Outline
styles or lower contrast background colors are great options
Tertiary actions should be discoverable but unobtrusive.
Styling these actions like links is usually the best approach.
Filters Customise Export
Sold to
paulclindo@[Link]
Hierarchy 94
Space is never enough
Whitespace is almost always added to design when something
looks cramped. However, the problem is that in that way,
elements have just a little breathing room. To make something
look outstanding, start with too much whitespace.
Set up Two-Factor Authentication Set up Two-Factor Authentication
Every time you sign in to your account, you will Every time you sign in to your account, you will
need your password and veritification code. need your password and veritification code.
Country
Country
BG 0888 190 000
BG 0888 190 000
Next
Next
Sold to
paulclindo@[Link]
Hierarchy 95
You might think you will end up with too much whitespace, but
when focused on individual elements, they end up being closer
together when looking at the complete interface.
27 reviews 27 reviews
5 star 47% 5 star 47%
4 star 22%
4 star 22%
3 star 21%
2 star 7% 3 star 21%
1 star 2% 2 star 7%
Review this product 1 star 2%
Share your thoguhts with other customers
Review this product
Write a review Share your thoguhts with other customers
Write a review
Sold to
paulclindo@[Link]
Hierarchy 96
Leave some breathing room
We have different screen widths nowadays, and you will be hard-
pressed to have a good interface in all of them, especially when
we talk about mobile devices.
If you need just half the screen, use that. Making it wide will
make the interface hard to interpret while having some extra
breathing space won’t hurt anyone.
Sign up
Sign up with Google
Sign up with Facebook
Sign up with Microsoft
Continue
Have an account? Log in
Sign up
Sign up with Google
Sign up with Facebook
Sign up with Microsoft
Continue
Have an account? Log in
Sold to
paulclindo@[Link]
Hierarchy 97
Content Heavy
Having a lot of breathing room in your interface will always feel
cleaner and simpler. However, you can't always have that. If you
have a dashboard where a ton of data needs to be visible at
once, grouping it together so it fits one screen would be rather
difficult.
Add Documents Notification Resources Log Out
Back Publish Add to Expense Report Tools Delete Prev 2 / 24 Next
P Fox & Co
Dashboard Details 2 Messages Note History
By Maurice Moss
Item ID: 9876543210
Workspace Item Details
Cost
Type Receipt
Inbox 12
Date 30 Apr 2021
In processing 2
Supplier Kwik E Mart
To review 4
Set supplier rules Google it
Ready 6 Category 091 - Business Saving Account (0%)
Archive Customer John Shepard
Sales Rebillable Yes
Expense Reports Region Citadel
Bank Description Citadel
Lists
Suppliers
Amount
Customers 100% Currency GBP
Collapse
Total Amount 48.00
Sold to
paulclindo@[Link]
Hierarchy 98
Designing mobile first?
If you get stuck designing your interface, make the canvas
smaller. It’s easier to design when you have more constraints
than having a full width at your disposal.
Kennet Cole #2 Eric Johansson
Store Business Name
Main
Welcome, Eric! Yesterday Today 7 days Custom
Welcome, Eric!
Overview
Realtime Current Sales Yesterday Projections
Realtime
Terminals 1233984.14 SEK +2.5% 183 098.11 SEK 87 133.21 SEK 133 133.21 SEK
1233984.14 SEK +2.5%
Company
9:00 10:00 11:00 12:00 13:00 14:00 15:00
Customers
37,891
9:00 10:00 11:00 12:00 13:00 14:00 15:00 16:00 17:00 18:00 19:00 20:00
600
450
300
Customers Transactional Value 150
0
Total Average Mon Tue Wed Thu Fri Sat Sun
37,891 317.24 SEK Transactional Value
600
New You have 11% growth in comparison to the Average
450 previous month. 317.24 SEK
Loyal You have 11% growth in comparison to the
previous month.
300
Returning Visit Times
150 On average your customers return 4 times per week.
Visit Times
On average your customers return 4 times per week.
0 Busiest Day Busiest Hour Busiest Day Busiest Hour
Mon Tue Wed Thu Fri Sat Sun
Thursday 12:00 - 13:00 Thursday 12:00 - 13:00
Privacy • Terms
Sold to
paulclindo@[Link]
Hierarchy 99
Breaking it down
If you still want to split the content to take more width, you can
split the content into two columns instead of making it wider or
centered. Breaking the supported text into a new column also
would make you fill the form much easier.
Sold to
paulclindo@[Link]
Forms and
Master UI Design Elements
fields
[Link]
Sold to
paulclindo@[Link]
Forms and Fields 101
Input Fields
Input fields can collect an array of information, which is why you
need to design them in a manner that streamlines the form-filling
process, making it clear to the user what information they need
to enter and how. Understanding the anatomy of input fields is
the first step to achieving efficiency in their inclusion, placement,
and design.
Email Phone number
denis@[Link] BG +359 888 123 456
Full name Your password
Matt Frazer *************
Description
Enter a description...
Sold to
paulclindo@[Link]
Forms and Fields 102
Forms
A form is one of the most common way a user interacts with a
product. It helps with making a purchase or creating a profile.
The basic elements of forms may include
text fiel
dropdow
butto
multiple choice field
single choice field
long text areas
Personal info Privacy Preferences
Full name Strictly Necessary Cookies
These cookies are necessary.
Matt Frazer
Targeting Cookies
These cookies may be set through our
Country site by our advertising partners
United States Performance Cookies
These cookies may be set through our
site by our advertising partners
Delivery method
Additional information
Send to my account email
mattfrazer@[Link]
Please provide any additional information
Send to an alternative email
spam@[Link]
Save
Sold to
paulclindo@[Link]
Forms and Fields 103
States
Designing for every possible state on a form is a must as your
users will encounter it sooner or later.
You can set the field states by a border color, using an icon for
errors or success states or different text weights.
Providing feedback can help your customers get unstuck in a
tricky situation, but avoid having all validation displayed under
the entire form.
Inactive Hover Active/Focused
Your name
Username
Username Username John|
Disabled Done Error
Username Usenrmae Username
JohnyIve JohnyIve JohnyIve
Username already taken
Sold to
paulclindo@[Link]
Forms and Fields 104
Inactive
An inactive form field is ready for input, but it's not a field the
user is currently interacting with. These fields often feature a
solid white background, indicating they're available for use. In
addition, the typing cursor should appear when the user hovers
over it.
email@[Link]
US +1 (555) 000-0000
http:// [Link]
$ 1,500.00 USD
Sold to
paulclindo@[Link]
Forms and Fields 105
Disabled
A disabled form field has been auto-filled or excluded for
whatever reason (i.e., the "Billing Address" and "Shipping
Address" are the same, so one set of these fields becomes
disabled). Disabled fields are most commonly grayed out, though
the placeholder text or other value is visible through the gray
overlay. When the user hovers over these fields, they do not see
a typing cursor appear.
email@[Link]
+1 (555) 000-0000
http:// [Link]
$ 1,500.00 USD
Sold to
paulclindo@[Link]
Forms and Fields 106
Hover
"Hover" status is something you can optionally design into your
form. Including a hover, status can help indicate whether a field is
disabled or ready for input. The hover effect should somehow
highlight the area under the cursor, like changing its background
color or adding a colorful border. You can also apply a magnifying
effect, making the field slightly bigger when a user hovers over it.
email@[Link]
US +1 (555) 000-0000
http:// [Link]
$ 1,500.00 USD
Sold to
paulclindo@[Link]
Forms and Fields 107
Focused
The focused state can improve form-filling speed by keeping a
user's eye on what matters. It's also beneficial if your field
automatically jumps the user's cursor from one area to the next
as they input the necessary information, as the "focused" effect
will let them see where their cursor is at a glance. The focused
result generally highlights the field with a colorful border or
another effect.
US |
US
http:// +1| (555) 000-0000
US|
$ +1 (555) 000-0000 USD
Sold to
paulclindo@[Link]
Forms and Fields 108
Validated
You can include a "validated" status and even a "validation"
status in your form's design to improve interactivity and user
experience. For instance, a buffering icon and the words
"Validation in progress..." may appear when information is being
checked, followed by a green checkmark icon indicating when
the form has successfully validated the information.
denis@[Link]|
denis@[Link]|
denis@[Link]
Sold to
paulclindo@[Link]
Forms and Fields 109
Error
The error or invalid status is perhaps one of the most important
of all to include in your form design, as the visual prominence of
this status determines how quickly and how likely a user is to
spot an error before trying to proceed to the next step. A cross
icon and red highlight are common ways designers highlight an
input field with invalid or missing information.
denis@[Link]|
denis@[Link]|
Please enter a valid email address
Sold to
paulclindo@[Link]
Forms and Fields 110
Size
A field's container defines the minimum and maximum
dimensions it will occupy in a given space. The best containers
are responsive, meaning the dimensions will automatically scale
based on the user's viewport size. It would help if you also made
the container proportional to the input. Consider the average
length of the user's input, and make the container default to
proportional size.
Desktop Mobile
Create your account Create your account
Name* Name*
Enter your name Enter your name
Email* Email*
Enter your email Enter your email
Password* Password*
Create a password Create a password
Must be at least 8 characters. Must be at least 8 characters.
Get started Get started
Sign up with Google Sign up with Google
Already have an account? Log in Already have an account? Log in
Sold to
paulclindo@[Link]
Forms and Fields 111
If designed with a single-line input field, the input should scroll
left if the cursor reaches the right edge; this lets the user
continue seeing what they're typing. Ideally, and to improve
accuracy, no portion of the input will be hidden.
Create an account Create an account
Start your 30-day free trial. Start your 30-day free trial.
denis@[Link]| oumostlikelyhaventseen@[Link]|
Continue with email Continue with email
Already have an account? Log in Already have an account? Log in
Sold to
paulclindo@[Link]
Forms and Fields 112
The container width also communicates to the user the ideal or
required input length. For instance, you wouldn't want a zip code
field only to show 3 digits or have enough width to accommodate
12 digits when the expected input is 5 digits.
Street address
Demokratsia 65A Street address
City Demokratsia 65A
Burgas City Postcode
Postcode Burgas
30660012
Sold to
paulclindo@[Link]
Forms and Fields 113
Labels
Label text gives users information about what they should input
into a field. Like a leading icon, it should have a clear meaning.
Unlike a leading icon, label text is not optional. Every text field
must have a label accompanying it. When writing label text, you
want to avoid long labels, so keep them short and descriptive, no
more than a couple of words, to help a user quickly understand
and complete the field.
Please enter your full email Email
denis@[Link] denis@[Link]
Leave a place where we can contact ... Your Email
denis@[Link] denis@[Link]
Sold to
paulclindo@[Link]
Forms and Fields 114
Additionally, ensure the label is visible to the user, whether you're
using a standard label (top, right, or left-aligned) or a floating
label (which only appears when the user selects the field). Resist
the urge to "hide" or forego labels for a field, even if you're using
leading icons and other indicators of what input you're looking
for, as labels play a key role in user experience and accessibility.
Email Email
Email
Denis|
denis@[Link]
Sold to
paulclindo@[Link]
Forms and Fields 115
Chosing the best style
Usually, you will have three main options for label positioning:
top, left, and right-aligned.
The best style for you will depend on critical goals and sizes of
the form, components library, and platform you design for.
All of them have some advantages and disadvantages.
Underline Outline w/ adaptive label Outline w/ top aligned label
Email
Email
Email
denis@[Link] denis@[Link]
denis@[Link]
Filled Outlined w/ contained label Left/Right aligned label
Email Email
Email denis@[Link]
denis@[Link] denis@[Link]
Sold to
paulclindo@[Link]
Forms and Fields 116
Left aligned labels
A good choice when the data requested is unfamiliar for users.
The most significant advantage of this one is that the labels are
easy to scale and use consistent vertical space. However, the
biggest drawback is an unnecessary distance between the label
and input field, and that distance may vary most of the time.
9:41
Account Settings
Johny Ive / Account Settings
Update your username and manage your account
Full name Johny Ive
Email johny@[Link]
Date of Birth 27 Feb 1967
Save
Sold to
paulclindo@[Link]
Forms and Fields 117
Right aligned labels
Right-aligned labels have almost twice the competition rate
versus the left-aligned labels. The most significant advantage is
that labels and inputs are closely positioned together, limiting the
number of eye movements, increasing the completition rate. The
only drawback is that it’s hard to scan and understand at a
glance what the full form is all about.
9:41
Account Settings
Johny Ive / Account Settings
Update your username and manage your account
Full name Johny Ive
Email johny@[Link]
Date of Birth 27 Feb 1967
Save
Sold to
paulclindo@[Link]
Forms and Fields 118
Top aligned labels
This has the fastest completition rate, and it’s the best choice
you can make in the majority of the cases. It easy to work well on
mobile as it doesn’t require too much horizontal space. The
biggest advantage is that it allows people to capture the input
label and text with one single eye movement. The only
disadvantage is that it will require more vertical space.
9:41
Account Settings
Johny Ive / Account Settings
Update your username and manage your account
Full name
Johny Ive
johny@[Link]
Date of Birth
27 Feb 1967
Save
Sold to
paulclindo@[Link]
Forms and Fields 119
Placeholder
Placeholder text lives inside the field where the user's input will
go, and9:41it automatically disappears when
9:41
the user begins typing.
Users will see placeholder text before interacting with the field,
Account Settings Account Settings
but they can become confused without careful consideration of
John I've / Account Settings Johny Ive / Account Settings
the contrast and wording.
Update your username and manage your account Update your username and manage your account
Full name Full name
Johny Ive Johny Ive
Email Email
johny@[Link] johny@[Link]
Date of Birth Date of Birth
27|
1 2 3 1 2 3
ABC DEF ABC DEF
4 5 6 4 5 6
GHI JKL MNO GHI JKL MNO
7 8 9 7 8 9
PGRS TUV WXYZ PGRS TUV WXYZ
0 0
Save Save
Sold to
paulclindo@[Link]
Forms and Fields 120
If you're asking for the name of a city, for instance, don't use the
name of an actual city as the placeholder as this can cause the
user to think they've already filled the field. Instead, "City" would
be the ideal placeholder. Dynamically filled fields can also be
useful, but only if you're sure the information is accurate. For
instance, you could automatically fill the city name based on the
zip code the user enters.
Delivery Address Delivery Address
Street address Street address
100 Smith Street 100 Smith Street
City Post code City Post code
Country Country
Sold to
paulclindo@[Link]
Forms and Fields 121
Default values, on the other hand, can lead to less accurate
information. You should reserve them for when you know the
majority of your users will make a certain selection (like their
country of residence). Still, users rarely alter what is auto-
selected for them, so only use default values when you're
confident in their accuracy.
Delivery Address Delivery Address
Street address Street address
100 Smith Street 100 Smith Street
City Post code City Post code
Country Country
Angola Bulgaria
Sold to
paulclindo@[Link]
Forms and Fields 122
Placeholders aren’t labels
Disappearing placeholder text strains users’ short-term memory.
Without labels, users cannot check all information they provided
before submitting a form. If you want a very minimalist form
design, you can use the Material design floating labels approach.
Full name Full name
Form Label
Steve Jobs| Steve Jobs|
Password Password
Sold to
paulclindo@[Link]
Forms and Fields 123
Help text
Helper text can comprise multiple lines and, as the name implies,
its purpose is to help users input the correct information. This
assistive element tells them more about a particular field and the
data you want to know. A good example is helper text for a
password field, which appears when they hover over the "?" icon,
telling them the specific password guidelines, like how many
numbers it must include, minimum length, and so on.
Password Password Password
Please enter your current password to change Please enter your current password to change Please enter your current password to change
your password. your password. your password.
Current password Current password Current password
•••••••• •••••••• ••••••••
New password New password New password
Your new password must be more •••••••• ••••••••
than 8 characters
Your new password must be more than 8
Confirm new password characters.
Confirm new password
•••••••• Confirm new password
••••••••
••••••••
Sold to
paulclindo@[Link]
Forms and Fields 124
Aside from passwords, helper text can also be useful if you're
looking for feedback or another open-ended input. The helper
text can inform the user of your minimum/maximum character
requirements and give them an explicit explanation or example of
what you want. For instance, in the "Prior Experience" field on an
application, helper text might read: "Detail your past experience
working with animals in a professional capacity."
Past experience Past experiences
Detail your past experience working with
Add past experiences animals in a professional capacity.
Add your bio
400 characters left
400 characters left
Sold to
paulclindo@[Link]
Forms and Fields 125
Provide help
Help resolve partial queries with Auto-Complete. This happens
within the input box where you type and you can press either
enter or “right-arrow-key” to accept it.
Search a virtually unbounded list for related keywords and
phrases with Auto-Suggest. This list appears as a multiple
suggestion list in the form of the drop-down.
Sold to
paulclindo@[Link]
Forms and Fields 126
Pre-fill fields and use intelligent defaults. Often you can easily
detect a user's country and the city by IP or geolocation. And
based on the most common scenarios and analytics, you can
define what should be selected by default. E-Commerce is an
exception, don't preselect any preferences related to purchasing
like size or color.
Sold to
paulclindo@[Link]
Forms and Fields 127
Provide contextual information. If you know that to make the right
decision or avoid mistakes, users will need additional information
like an account balance when making a transfer, don’t hesitate to
present it when making a transfer.
Sold to
paulclindo@[Link]
Forms and Fields 128
Errors
Whether or not you use helper text, you may choose to include
error text. This type of text-only and automatically displays when
the user inputs information incorrectly or leaves a field blank. For
instance, if they enter a zip code that's too short or don't select
their country of residence, they will see error text that tells them
how to address the issue.
Delivery Address Delivery Address
Street address Street address
100 Smith Street 100 Smith Street
City Post code City Post code
Burgas 800 Burgas 800|
Enter a valid post code
Country
Country
Bulgaria
Bulgaria
An error has occured
Save
Save
Sold to
paulclindo@[Link]
Forms and Fields 129
Inline Validation
Inline validation aims to provide validity of the user's input live as
they progress through the form. A good inline validation should
display messages close to the input. Should not show error
messages, but a solution how to fix the problem. Don’t allow
premature validation when all of the fields haven’t been filled and
as a bonus consider showing positive validation, it can add a
sense of delight.
Full Name Full Name
Denislav Jeliazkov Denislav Jeliazkov
Work Email Work Email
user@[Link] user@[Link]
Enter a valid email address
Password
•••••••••••• Password
••••••••••••
There was an issue with your request:
Not valid email
Password is too weak
Cancel Update
Cancel Update
Sold to
paulclindo@[Link]
Forms and Fields 130
Icons
As an optional element, a leading icon can improve the user's
experience by providing a visual cue to type into the box.
Properly selecting an icon can speed the form-filling process and
eliminate the need for the user to read labels. However,
depending on the visual design surrounding your fields, it may or
may not be appropriate to include a leading icon.
Your email
Phone
+359 888 100 100
Credit card
1234 5678 9100 0000
Sold to
paulclindo@[Link]
Forms and Fields 131
When choosing a leading icon, it's essential to select a leading
icon that's "standard" for the input you're expecting. For
instance, a head and shoulders works for a username, while "@"
can indicate an email field and a padlock can denote a password
field. Leading icons are informational, so you want to stick to
what users are most likely to associate with rather than opting
for something unexpected in an attempt to be creative or unique.
Email Email
@ Your email Your email
Username Hashtag
Sold to
paulclindo@[Link]
Forms and Fields 132
Trailing Icons
Whereas leading icons serve an informational purpose, trailing
icons can speed up interactions when used correctly and
generally serve a functional purpose. For instance, a popular
trailing icon is an "x" at the end of an input field, which allows the
user to clear the field with a click. Another example of a trailing
icon would be a microphone, which allows the user to add text
with voice-to-text instead of typing.
Sold to
paulclindo@[Link]
Forms and Fields 133
When using trailing icons, ensure they serve a purpose and that
they work properly. For instance, if you're using a trailing icon to
validate information, you need to make these intentions clear and
purposeful. When a field is appropriately filled, a green check
mark confirms to the user that they can move to the next field,
while a red cross tells them they've done something wrong — but
that's only useful if error text also appears to explain the issue.
denis@[Link]
denis@[Link]|
Please enter a valid email address
Sold to
paulclindo@[Link]
Forms and Fields 134
Selecting the right type
Using the correct field for the job will help with validation. For
instance, an email address field will automatically ensure the user
includes the "@[Link]" and it will give them an error if it
doesn't. Meanwhile, a phone number field will use auto-
formatting, turning "1234567890" into "123-456-7890," making it
easier for the user to check that they've entered the correct
phone number.
example@[Link]
Phone
+1 (555) 000-0000
Sold to
paulclindo@[Link]
Forms and Fields 135
Auto-formatting can also help inform the user about the
information you're seeking by using context clues. For instance,
using a numbers field can confuse a user when you're looking for
a dollar amount (i.e., inquiring about their budget). Auto-
formatting will append a "$" before their entry so they know
you're looking for a figure and not a worded explanation, range of
numbers, or other input.
Your budget Your budget
1,000 $ 1,000 USD
Sold to
paulclindo@[Link]
Forms and Fields 136
Zip code
A zip code field should be limited to numbers only (depending on
the country of residence), and it should exclude special
characters. It may also require only 5 digits or ask for the 4-digit
extension. Plus, you can design a zip code field that
automatically adds the 4-digit extension for your user, based on
geo-tagging or another piece of information.
Delivery Address
Street address
City Post code
Burgas 8001
Country
Bulgaria
Save
Sold to
paulclindo@[Link]
Forms and Fields 137
Credit Card
Using a dedicated field for collecting a credit card number lets
you validate the number, automatically format it into segments as
the user types, and automatically identify the card brand (i.e.,
Visa, Mastercard, Discover) so the user doesn't have to select it
manually.
Name on card Name on card
Denis Jeliazkov Denis Jeliazkov
Card number Card number
5105| 4000|
Expiry CVV Expiry CVV
06 / 2024 ••• 06 / 2024 •••
Sold to
paulclindo@[Link]
Forms and Fields 138
Communicate the lenght of the input
Using identical input length for all text fields in your forms will
make them visually pleasing but will be harder to complete.
Personal Details Password Billing Personal Details Password Billing
Title Title Full name
Mr Mr Johny Ive
Email Role
First name Last name
johny@[Link] Product Designer
Johny Ive
Country Timezone
Email
United States PST UTC−08:00
johny@[Link]
Role
Cancel Save
Product Designer
Country
United States
Timezone
Pacific Standard Time (PST) UTC−08:00
Cancel Save
Sold to
paulclindo@[Link]
orms and ields
F F 1 39
Remove irellevant fields
By disclosing information progressively, we reveal only the
essentials and help users manage the complexity only when they Johny Ive
need to.
johny@[Link]
Share View profile
Personal info
Update your photo and personal details.
Full name
Johny Ive
johny@[Link]
Available for projects
Johny Ive I’m open and available for freelance
work.
johny@[Link]
Username
View Public Profile
[Link] johny
Personal info Website
Update your photo and personal details.
http:// [Link]
Full name
Bio
Johny Ive
I am a British-American industrial and
product designer. I was a CDO of
Apple Inc. and served as a chancellor
johny@[Link] of the Royal College of Art.
275 characters left
Available for projects Working timezone
I’m open and available for freelance
work. GMT +1
Save Save
Sold to
paulclindo@[Link]
Forms and Fields 140
Provide logic
Conditional logic allows automatically show or hide fields and
skip pages in a form, based on visitor answers. This approach will
reduce the number of fields and make the fill-in process more
personalized and conversation-like.
9:41 9:41
What skills do you What skills do you
want to develop? want to develop?
Sports Sports
Unleash your inner Cristiano Ronaldo. Unleash your inner Cristiano Ronaldo.
Cooking Cooking
Discover the secrets of Gordon Ramsay. Discover the secrets of Gordon Ramsay.
Arts Arts
Unlock the secrets of Pablo Picasso. Unlock the secrets of Pablo Picasso.
Music Music
Produce music that uplifts people like Dr. Dre. Produce music that uplifts people like Dr. Dre.
Pick your sport Select your cuisine
Football Classic french
Proceed Proceed
Sold to
paulclindo@[Link]
Forms and Fields 141
Group them
One of the easiest ways to simplify complex forms is to start
grouping related fields. There are multiple principles of grouping
in Gestalt psychology that help items feel related: Proximity,
Similarity, Continuity, Closure, and Connectedness. Grouping
dozens of unstructured fields into few manageable sets will
significantly increase form usability.
9:41 9:41
Delivery info Personal info
Full name Full name
Johny Ive Johny Ive
Phone Phone
+1 800-692-7753 +1 800-692-7753
Address Address
One Apple Park Way, Cupertino One Apple Park Way, Cupertino
Country Post code Country Post code
United States 95014 United States 95014
Card number
Payment details
9888 1212 3453 4546
Card number
Expiry date CVV
9888 1212 3453 4546
07/24 342
Expiry date CVV
128-Bit SSL Encryption
07/24 342
128-Bit SSL Encryption
Sold to
paulclindo@[Link]
Forms and Fields 142
Try and avoid multi column layouts
One column layout creates a clear path to completion for the
user. Consequences of using a multi-column form layout include
users skipping fields where they actually have data to input,
inputting data into the wrong fields, or simply coming to a halt
that can lead to abandonment.
Sold to
paulclindo@[Link]
Forms and Fields 143
Provide accurate keyboard inputs
Android or iOS provides several different keyboard types, each
designed to facilitate a different type of input. To streamline data
entry, the keyboard displayed when editing a text field should be
appropriate to the type of content in the field. Be conscious of
9:41 9:41
where the keyboard will appear. To not introduce scroll
needlessly, position your text fields in the upper area.
Cancel Write a Review Add Cancel Write a Review Add
| |
q w1 e r t A2B Cy u i D3EoF p q w e r t y u i o p
a G4HsI d f g5 h
JKL j kM6N O l a s d f g h j k l
7z x c T8vU V b n m
PGRS
9
WXYZ z x c v b n m
123 0space return 123 space return
Sold to
paulclindo@[Link]
Buttons
Master UI Design Elements
[Link]
Sold to
paulclindo@[Link]
Buttons 145
Buttons
A button should look like a button - in general, it means a
rectangular background distinguished from the other elements
on the page with a bold text inside it.
Sold to
paulclindo@[Link]
B uttons 146
A single-action word doesn’t look like a button - even if that
action sits on it’s own, and it’s distinguishable.
Include a background color and give it enough breathing room
and if you add a drop shadow to reflect on the surface, it will look
more clickable.
Pull requests Issues Marketplace Explore
tive
requests 217 Actions Projects Wiki Security Insights
s 350 tags Go to file Code
rdserkins include android in npm package 0675beee 2 days ago 21,463 commits
bump docker-android to 2.1 (#30296) 22 days ago
label-actions: Add canned response for upgrade issues 8 months ago
Pull Erequests
feat: Issues
nable Hermes Marketplace
to work on iOS (#29914) Explore 23 days ago
RN: Add `NativeComponentRegistry.getWithFallback_DEPRECATED` 5 days ago
tive D aily `arc lint --take CL ANGFORMAT` 6 days ago
Move TurboModuleManager to use RuntimeExecutor instead of jsContex ... 6 days ago
requests 217 Actions Projects Wiki Security Insights
ayoutAnimations: Remove unnecessary optionals in config
L 5 days ago
s 350 tags Go to file Code
Migrating RNTester to Packages Directory (#29567) 3 months ago
Generate
rdserkins include doc info
android for RN
in npm components
package 0675beee 2 days ago 14 months
21,463 ago
commits
Sold to
emove
bump
R license headertofrom
docker-android third-party
2.1 (#30296 ) code 2 22
months ago
days ago
paulclindo@[Link]
RN: R emove `fbjs` Dependency 3 months ago
Buttons 147
You shouldn’t overcrowd actions. When you need to include
multiple of them in one area, be sure the main one to have a
different color and to be distinguishable.
Vendors Vendors
Filter Export Add Filter Export Add
Average vendor rating Average vendor rating
Track how your rating compares to your Track how your rating compares to your
industry average. industry average.
Your rating Industry Average Your rating Industry Average
Jan Mar May Jul Sep Nov Dec Jan Mar May Jul Sep Nov Dec
View full report View full report
Sold to
paulclindo@[Link]
Buttons 148
Buttons are different
The most common button style would be contained - this is a
solid-colored rectangular button with no icon inside it. Choosing
the right style for the button will depend on the purpose,
platform, and guidelines.
Sold to
paulclindo@[Link]
Buttons 149
Styles are used to distinguishing the importance of actions from
one another. Having a clear hierarchy of actions will reduce the
cognitive load for your users. The most common actions are a
primary one, a secondary one and a low emphasis tertiary. Think
carefuly when choosing do you need the three.
Sold to
paulclindo@[Link]
Buttons 150
Padding
Padding is the whitespace around your content inside of the
component. This gives the interface more breathings space and
doesn’t overwhelm the component.
If you want your buttons to be accessible, make sure that the
padding on the left/right is at least double the padding from top
to bottom.
16 16
8
Click me now 8 32
Click me now 32
16 16
Sold to
paulclindo@[Link]
Buttons 151
Color enforces action
Contrast should be used to help users choose between different
buttons. Not being able to decipher between actions creates
uncertainty for users and can slow down their journey, making for
a poor user experience and quite possibly causing them to click
away from your app.
{eventName} {eventName}
Segments Segments
Level 10 Reached, Tutorial Completed Level 10 Reached, Tutorial Completed
Total Players (Last 7 Days) Total Players (Last 7 Days)
798 798
A/B Testing A/B Testing
3 Variants 3 Variants
Example Text Example Text
3 Variants 3 Variants
Follow Up(s) Follow Up(s)
{messageName} {messageName} {messageName} {messageName}
Details View in Builder Details View in Builder
Focus on recognition and clarity through color and contrast. UI
button design rules for contrast are simple
High contrast for positive action
Medium contrast for negative action
Low contrast for neutral actions
Any neutral or negative actions placed next to it should have a
lower color contrast to de-emphasize them, respecting the visual
hierarchy. Sold to
paulclindo@[Link]
Buttons 152
Show progress
Remember that buttons are not one-state objects and we should
always provide feedback on the task the user is about to/has just
performed. A significant time to reward user interaction is right
before they click on a primary button to perform an important
task, e.g. sign up to a newsletter or download a free trial.
Color changes to the button will show users that their action has
been accepted. Subtle animations and motion will communicate
the button's intention and encourage the user to follow through
with that click-happy user, happy you!
Schedule Send Now Schedule Sending
Sold to
paulclindo@[Link]
Buttons 153
Tap areas
Pressing a button should be a simple task, and if a user is unable
to successfully tap on a button or tap on a neighboring element
by mistake, it will lead to a negative experience and loss of time.
For most platforms, consider making touch targets at least 48 x
48 dp. A touch target of this size results in physical size of about
9mm, regardless of screen size. The recommended target size
for touchscreen elements is at least 7–10mm.
For icon buttons, make sure the touch target extends beyond the
visual bounds of an element. This not only applies to mobile or
tablet, but the same size recommendation also holds true for
pointer devices on the web like a mouse.
Sold to
paulclindo@[Link]
Buttons 154
Put them in the right palce
Perhaps one of the biggest challenges of designing and including
buttons is answering the age-old question of where you should
put them. The best place to put a button is right next to or below
whatever you think will prompt the user to click it — whether it's
the last field of a form or a shopping cart icon that will take them
to your form.
Sold to
paulclindo@[Link]
Buttons 155
It would help if you also thought about expectations when
deciding on button placement. For instance, the right side
generally indicates progression, so if you include both a "Next" or
"Submit" button and a "Back" or "Cancel" button, the former
should go on the right-hand side and the latter should go on the
left-hand side.
Update payment method Update payment method
Name on card Expiry Name on card Expiry
Johny Ive 06 / 2024 Johny Ive 06 / 2024
Card number CVV Card number CVV
1234 1234 1234 1234 ••• 1234 1234 1234 1234 •••
Update Cancel Cancel Update
Sold to
paulclindo@[Link]
Buttons 156
Destructive buttons
Think twice before creating a destructive button when trying to
determine what you need a button for and where to place it.
Destructive buttons can be a Cancel or a Reset button. How
often would somebody need to reset all of the data they have
entered and start all over again?
Update payment method Update payment method
Name on card Expiry Name on card Expiry
Johny Ive 06 / 2024 Johny Ive 06 / 2024
Card number CVV Card number CVV
1234 1234 1234 1234 ••• 1234 1234 1234 1234 •••
Update Cancel Cancel Update
Sold to
paulclindo@[Link]
Buttons 157
Destructive buttons can get in the way of how many people will
finish your form. If you place a reset button when people don’t
expect it, they can click or tap on it accidentally.
Do not make destructive actions the same color as your main call
to action. Use a red, or a more warning color to convey a visual
cue for warning because it captures attention easily.
Reset all tools to default settings. Reset all tools to default settings.
Cancel Reset Cancel Reset
Sold to
paulclindo@[Link]
Buttons 158
Labels invite users action
What a button says is as important as how it looks. Having the
wrong label can cause people confusion and loss of time.
A good label invites people to use verbs and label the button
with what it does.
Think of the button is the finishing sentence of a question -
Would you like to (Add to basket)?
Avoid using Yes, No or labels that are too generic - like Submit.
Use location services? Use location services?
Let us help apps determine location. This means Let us help apps determine location. This means
sending anonymous location data to us, even when sending anonymous location data to us, even when
apps are not running. apps are not running.
Don’t ask again No Yes Don’t ask again Don’t Allow Allow
Sold to
paulclindo@[Link]
Buttons 159
Ok/Cancel or Cancel/Ok?
You can argue with your team for hours on these choices, and
every single one of you will pick their preference.
Having the ok action first supports the natural way of reading
order; it may help to save some time if we know that most likely
this is what the user wants to do.
Sold to
paulclindo@[Link]
Buttons 160
The ok state can be treated as a step to move forward. Putting it
last will help users evaluate all the options before making any
decisions and help avoid mistakes and rushed decisions.
Either choice has good arguments, and no option is likely to
cause usability catastrophe.
I put most of the ok, yes actions as the last ones - maybe
because I am primarily a Mac user.
Sold to
paulclindo@[Link]
Selection
Master UI Design Elements
controls
[Link]
Sold to
paulclindo@[Link]
Selection Controls 162
Selection Controls
The word “toggle” refers to a switch with a short handle that
alternates between two states each time it is activated. You
encounter it every time you “switch” on the lights.
As for “Radio Buttons” the word comes from the car radios that,
as common practice, had a set of buttons under the dial that
could mechanically store station presets, so the user switch
between stations faster. Pressing one of these buttons would
cause it to stay down until another was pressed.
Sold to
paulclindo@[Link]
Selection Controls 163
Checkboxes — are used when there are one or many
independent options and users may select any number of
choices, including none, one, or several.
Team members 48 users Downloa
Name Teams
Olivia Rhye
Design Product
@olivia
Phoenix Baker
Product Software Engineering
@phoenix
Lana Steiner
Operations Product
@lana
Demi Wilkinson
Design Product Software Eng
@demi
Candice Wu
CW Operations Finance
@candice
Natali Craig
Design Marketing
@natali
Drew Cano
Customer Success Operations
@drew
Orlando Diggs
Product Software Engineering
@orlando
Previous 1 2 3 4 5 6
Sold to
paulclindo@[Link]
Selection Controls 164
Radio buttons are used when there is a list of two or more
mutually exclusive options and users must select only one of
them.
Ready to improve your customers’ digital
experience?
Cloud $99/month
Includes up 1000 sessions, 3 user seats, 1
Send to my account email
month of data retention
hi@[Link]
Send to an alternative email
On-prem $499/month
Includes up 20000 sessions, 20 user seats,
denis@[Link]
4 month of data retention
Custom $499-999/month
Unlimited sessions, unlimited user seats.
Sold to
paulclindo@[Link]
Selection Controls 165
Choice chips - are a compact alternative to radio buttons.
Containing at least two options, choice chips represent a single
selection that users can make.
Import method:
XML json HTML Java
Sold to
paulclindo@[Link]
Selection Controls 166
Multi-select chips — are a compact alternative to checkboxes.
Allow users to select multiple options and are primarily used for
filtering on mobile.
Add topings:
Bacon Cheddar Spinach Corn
Mozzarella Sauce
Sold to
paulclindo@[Link]
Selection Controls 167
States
Checkboxes & radio buttons can be selected or unselected, and
Toggles can be Off or On. All of them have enabled, disabled,
hover, focused, and pressed states. And I know it looks like a lot),
but it's good to create all those states for reliable interaction.
Enabled Disabled Enabled Focus
Enabled
Disabled
Focus Selected
Unselected Unselected Unselected Unselected Selected Selected
Sold to
paulclindo@[Link]
Selection Controls 168
Don’t use toggle switches everytime!
Do not create hierarchal structures with toggles. It's more visually
distracting and can create a false impression that all child
options are On/Off.
Pizza Pizza
Peperonni Peperonni
Spicy
Spicy
Regular
Regular
Smoked
Smoked
Mozzarella
Mozzarella
Tomato Sauce
Tomato Sauce
Sold to
paulclindo@[Link]
Selection Controls 169
A toggle switch is a digital on/off switch. Any effect triggered by
the toggle switch should immediately take effect if that is not the
case better to replace the toggle switch with a single checkbox.
Add people to your team Add people to your team
It looks quite empty right here now. Add It looks quite empty right here now. Add
teammates to your team to kick-off teammates to your team to kick-off
collaboration. collaboration.
Add all contacts with @uilearn Add Add all contacts with @uilearn Add
Wi-Fi Wi-Fi
Sold to
paulclindo@[Link]
Selection Controls 170
Avoid weird styling
Any deviation from standard for the platform you design will add
additional cognitive load for users. I often see circular
checkboxes that can be easily confused with radio buttons.
User Interface Design User Interface Design User Interface Design
User Experience Design User Experience Design User Experience Design
Interaction Design Interaction Design Interaction Design
Product Design Product Design Product Design
User Research User Research User Research
Sold to
paulclindo@[Link]
Selection Controls 171
Present options vertically
Left-aligned controls and labels will work best as they are closely
positioned to each other. This supports the fastest completion
times and fewer mistakes. Right-aligned controls have some
benefits on mobile, as labels and buttons can't get too far apart.
Having a button close to the right edge makes it more easily
reachable when holding the device in one hand. Also, we are not
obscuring the labels with a finger during selection.
User Interface Design User Interface Design User Interface Design
User Experience Design User Experience Design User Experience Design
Interaction Design Interaction Design Interaction Design
Product Design Product Design Product Design
User Research User Research User Research
Sold to
paulclindo@[Link]
Selection Controls 172
You should prevent a situation when it’s challenging to see which
control is selected (make sure to space the buttons and labels).
Consider using chips to visually separate options.
Search by: Search by:
Colors Shapes Colors Shapes
Select colors Select colors
Silver Blue Orange Silver Blue Orange
Purple Black Lime
Purple Black Lime
Maroon Green
Sold to
paulclindo@[Link]
Selection Controls 173
Try avoiding dropdowns
Making all options permanently visible to easily compare them
reduces cognitive load and help forms be more transparent.
If the number of options is more than 6–7 you should consider
putting them in the dropdown as users will not be able to keep all
of them in mind. The same will apply to predictable, similar, or
incremental options like (zoom — 10%, 20%, 30% ..).
Add new user Add new user
Name* Name*
Johny Ive Johny Ive
Email* Email*
johnyive@[Link] johnyive@[Link]
User Role User Role
Manager Admin
Manager
Add User
Add User
Sold to
paulclindo@[Link]
Selection Controls 174
Have a selected state
Users cannot deselect and set the radio button back to its
original state once one has been selected. If users might need to
refrain from making a selection, you should provide a radio
button labeled “None.” Structure the list of options in a logical
order, and harness the power of suggestion.
Ready to improve your customers’ digital Ready to improve your customers’ digital
experience?
experience?
Cloud $99/month Cloud $99/month
Includes up 1000 sessions, 3 user seats, 1 Includes up 1000 sessions, 3 user seats, 1
month of data retention month of data retention
On-prem $499/month On-prem $499/month
Includes up 20000 sessions, 20 user seats, Includes up 20000 sessions, 20 user seats,
4 month of data retention 4 month of data retention
Custom $499-999/month Custom $499-999/month
Unlimited sessions, unlimited user seats. Unlimited sessions, unlimited user seats.
Sold to
paulclindo@[Link]
Selection Controls 175
Support text matters
Avoid situations when users need to tick the box in order for
something not to happen.
Create Account Create Account
Name* Name*
Johny Ive Johny Ive
Email* Email*
johnyive@[Link] johnyive@[Link]
I don’t want to receive updates about the I want to receive updates about the latest
latest promotions. promotions
Register Register
Sold to
paulclindo@[Link]
Selection Controls 176
Grab users attention
Visually differentiate selected options from others, essential for
rows selection in data tables.
Company Company
Status About U
Status
BrandBird BrandBird Content curating app
Customer Cust
[Link] [Link] all your news into one place
Magic Pattern Magic PatternDesign software
Churned Chur
[Link] [Link]
Super lightweight design app
One Page Love Data prediction
One Page Love
Customer Cust
[Link] [Link]
AI and machine learning data
Mailbrew Mailbrew Productivity app
Customer Cust
[Link] [Link] management and productivity
Typefully Typefully Web app integrations
Churned Chur
[Link] [Link] Connect web apps seamlessly
Previous Previous Page 1 of 10
Sold to
paulclindo@[Link]
Selection Controls 177
Have a reliable interaction
Include both buttons and labels in the generous clickable/
tappable area. According to Fitts’s Law, the size of the target
plays an important role. Checkboxes and radio buttons are
generally tiny and tricky to click or tap, especially on mobile.
Install updates Install updates
Automatically Automatically
Manual Manual
Accept cookies Accept cookies
Wi-Fi Wi-Fi
Sold to
paulclindo@[Link]
Navigation
Master UI Design Elements
[Link]
Sold to
paulclindo@[Link]
Navigation 179
Navigation
Having good navigation will drastically increase the usability of
your product and reinforce the features you offer.
Having sub-par navigation will make it frustrating for people. It
doesn’t affect how users experience the product, but it might
abandon the product in general.
This is the sort of thing that is subtle but can make or break your
experience - think of it as a life or death situation.
Top bar navigation
Filter navigation
Tap bar navigation
Sold to
paulclindo@[Link]
Navigation 180
Make it evident and intuitive
Same as buttons, people don’t want to think twice about what
links will go. From a usability point of view, having an intuitive
navigation is crucial for your target audience. If you are using
cards to navigate certain areas, make sure they have a clear label
where they are leading.
9:41 9:41
Hey Denis, Hey Denis,
We kept your notes safe while you were gone. We kept your notes safe while you were gone.
Most used tags Most used tags
Team Client Brief PM
25/12/20- 10:00AM 25/12/20- 10:00AM
Board meeting notes. Board meeting notes.
product sales product sales
I need to get Sales department involved, current KPI I need to get Sales department involved, current KPI
needs to be enhanced to also wanted to find some needs to be enhanced to also wanted to find some
expert advice on sales efficiency, and more specifically, expert advice on sales efficiency, and more specifically,
the top tips from experienced sales experts on how to the top tips from experienced sales experts on how to
effectively improve the efficiency and …. effectively improve the efficiency and ….
26/12/20 - 9:00AM 26/12/20 - 9:00AM
1 on 1 with David Jones 1 on 1 with David Jones
team PM GROWTH team PM GROWTH
Hey David. Our main goal for this week is to review the Hey David. Our main goal for this week is to review the
revision of the global travel project and get with Oliver revision of the global travel project and get with Oliver
to get more infor about the Growth Plan of 2020. to get more infor about the Growth Plan of 2020.
Product sales has skyrocketed recently, I believe this is Product sales has skyrocketed recently, I believe this is
3 3
thanks to the success of the project. thanks to the success of the project.
Sold to
paulclindo@[Link]
Navigation 181
Hand and finger positioning
People's fingers aren’t the same size, but every single one of
your customers should be able to use your app. Nobody wants to
waste time by trying to tap on an icon or a button repeatedly and
not being able to get anywhere. It’s frustrating, distractive, and
can ruin the carefully planned experience.
9:41 9:41
Kate Jones Kate Jones
Geriatric ICU HOME CARE
Geriatric ICU HOME CARE
Dermatology MBBS
Dermatology MBBS
Book Now
St. Mary’s Hospital
Direction
St. Mary’s Hospital 75 Russell rd
Direction
75 Russell rd
LPN with geriatric and
LPN with geriatric and homecare experience
homecare experience
Professionally trained registered nurse with
Professionally trained registered nurse with experience ensuring high standards of
experience ensuring high standards of culturally competent care for wide variety of
culturally competent care for wide variety of patients with diverse needs.
patients with diverse needs.
Core competencies
Core competencies
• Physical Assessment
• Physical Assessment • Vital Signs
• Vital Signs • Medication Administration
• Medication Administration • Wound Dressing
• Wound Dressing • Infection Control
• Infection Control • Specimen Collection
• Specimen Collection Book Appointment
• IV Therapy
• IV Therapy • Catheterization
• Catheterization • Immunization
Sold to
paulclindo@[Link]
Navigation 182
Content needs to be legible
Mobile screens are not desktops - you need to be mindful of the
readability of the content you display. Make sure the text you
display is legible enough and always test it on a real device.
Figma Mirror Sketch Mirror
19:48 19:48
Yo u r w e a l t h w i l l b e c a l c u l a t e d a f t e r y o u m a k e s o m e
transactions and home some income and expenses. Yo ur we a lt h will be c a lc ula t e d a f t e r
y o u ma ke s o me t r a ns a c t io ns a nd
ho me s o me inc o me a nd e xpe ns e s .
Goals
Goals
Let’s set a goal you want to reach
Let’s set a goal you
want to reach
Immidiatet Expenses $18.37
Immidiatet Expenses $18.37
Loans 0
Loans 0
Health $11.02
Health $11.02
Car $271.01
Car $271.01
Education $11.44
To be Budgeted $320.41 To be Budgeted $320.41
Education $11.44
Subscriptions 0
Sold to
paulclindo@[Link]
Navigation 183
Avoid clutter
Falling into the clutter trap is much easier on small screens, thus
why you need to forsake anything that isn’t crucial for the
experience and just trim anything extra.
Minimalism may be a style in UI design, but for your mobile
products to work, they need to be intuitive and straightforward.
9:41 9:41
Day 2 Day 2
Overview of your workout and milistones Overview of your workout and milistones
Squat Squat
1 145 kg / 6 reps Done 1 145 kg / 6 reps
2 145 kg / 6 reps Done 2 145 kg / 6 reps
3 145 kg / 6 reps Done 3 145 kg / 6 reps
4 132.5kg / 6 reps 01:22
Done 4 132.5kg / 6 reps
5 Кг 6 reps 5 Кг 6 reps
Notes Notes
Bench Press Bench Press
1 120 kg / 6 reps Done 1 120 kg / 6 reps
2 120 kg / 6 reps Done 2 120 kg / 6 reps
3 120 kg / 6 reps Done 3 120 kg / 6 reps
4 132.5 кг / 6 повт. 01:22
Готов 4 132.5 кг / 6 повт. 01:22
Готов
Begin Workout Begin Workout
5 Кг 6 повт. 5 Кг 6 повт.
Бележки Бележки
Sold to
paulclindo@[Link]
Navigation 184
Hamburger menu
Whatever your thoughts are on the humble hamburger menu,
those three little horizontal lines that sit comfortably in a mobile
app corner can be extremely useful. With such a limited amount
of real estate to play with, the hamburger menu is a method of
hiding more elaborate navigation so users can enjoy more screen
space.
Sold to
paulclindo@[Link]
Navigation 185
The minimum elements inside of the hamburger menu should be
44px. Distinguishing the drawer that expands is crucial for
usability. If you have the drawer the same color as the app's
background, try darkening the interface underneath the drawer.
9:41 9:41
Kieron Dotson and Zack John liked Kieron Dotson and Zack John
Martha Craig @craig_love ·12h Martha Craig @craig_love
UI Learn UI Learn
UXR/UX: You can only bring one item to a UXR/UX: You can only brin
@uilearn @uilearn
remote island to assist your research of remote island to assist you
216 Following 117 Followers 216 F
native use of tools 117 F W
and usability.
ollowing hat do
ollowers native use of tools and usa
you bring? #TellMeAboutYou you bring? #TellMeAboutY
28 5 21 28 5 2
Profile 44px Profile 44px
Show this thread Show this thread
Lists Zack John liked
Lists Zack John liked
Maximmilian @maxjacobson ·3h Maximmilian @maxjacobs
Y’all ready for this next post? Y’all ready for this next po
Topics Topics
46 18 363 46 18 3
Kieron Dotson Retweeted Kieron Dotson Retweeted
Bookmarks Bookmarks
Tabitha Potter @mis_potter ·14h Tabitha Potter @mis_p
Kobe’s passing is really sticking w/ me in a Kobe’s passing is really st
Moments Moments
way I didn’t expect.
way I didn’t expect.
He was an icon, the kind of person who He was an icon, the kind o
wouldn’t die this way. My wife compared it wouldn’t die this way. My
Settings and privacy Settings
to Princess and privacy
Di’s accident.
to Princess Di’s accident.
But the end can happen for anyone at any But the end can happen fo
Help Center Help Center
time, & I can’t help but think of anything time, & I can’t help but thi
else lately. else lately.
7 1 11 7 1 1
Zack John liked Zack John liked
karennne @karennne ·10h karennne @karennne ·10h
Name a show where the lead character is Name a show where the le
the worst character on the show I’ll get the worst character on the
Sabrina Spellman Sabrina Spellman
1 906 1 249 7 461 1 906 1 249 7
Sold to
paulclindo@[Link]
Navigation 186
Cards
Using cards as navigational elements can make your interface
feel much more native and tappable. Cards also have the
advantage of being super customizable.
With the personalization of content in the past few years, cards
are a proven way to aggregate individual pieces of information in
one single place.
Sold to
paulclindo@[Link]
Navigation 187
Tap bar navigation
There are two tab bars that you can use, and each of them has
its benefits and disadvantages. If you decide to go the route with
icons only - they need to be crystal clear what do they mean as
people don’t
9:41 have time to think and interpret what it means
Life Path
behind it or what it will be hidden.
Hey Denis,
We kept your notes safe while you were gone.
Adding a label makes it much clearer than 27
icons only; however, it
Joined Paven
slightlyMost used tags
increases the tab bar, which is
T o da
ay good sacrifice if you
want toTeam
have greatClientusability.
Brief PM Considering buying a house?
Copy reinforcing the idea above
Let’s explore No thanks
25/12/20- 10:00AM
Board meeting notes.
product sales
Your 4-year anniversary
I need to get Sales department involved, current KPI at Facebook
needs to be enhanced to also wanted to find some
expert advice on sales efficiency, and more specifically,
the top tips from experienced sales experts on how to When do you want
effectively improve the efficiency and …. to retire?
26/12/20 - 9:00AM
1 on 1 with David Jones
team PM GROWTH
Hey David. Our main goal for this week is to review the
revision of the global travel project and get with Oliver
to get more infor about the Growth Plan of 2020.
Product sales has skyrocketed recently, I believe this is
3
44px thanks to the success of the project. 60px
Home Explore Life Path My List
Sold to
paulclindo@[Link]
Navigation 188
Tab bar width
There isn’t a set rule how wide your tab bar actions should be,
but all of them should take equal space in their respected area.
You need to keep in mind that the active tab should be colored
differently than the inactive ones.
Label 1 Label 2 Label 3 Label 4 Label 5
Label 1 Label 2 Label 3 Label 4
Label 1 Label 2 Label 3
Label 1 Label 2
Sold to
paulclindo@[Link]
Navigation 189
Icons only
If you want to keep your app minimal, having the icons alone will
benefit only that it takes less space, and space in mobile is
precious. This also somehow helps create a more modern
aesthetics - however, as said earlier, people might get lost easier
before they understand what is behind each icon.
Sold to
paulclindo@[Link]
Navigation 190
Text based tabs
Using text-based tabs is one of the most used patterns in
modern interface design, the main difference is that a tab bar
leads you to a whole new part of the product, while tabs display
you sub information of the area of the product you are.
For example - if you are on a Payments page, you can have tabs
as to Overview, Budget, Spendings.
Overview Budget Spending Company Users Expense Centres C
Current balance
$1,440.40 Users
Current limit
$15,000.00 Search R
Budget this month
$2,400.00
Kathryn Murphy Activities
Balances over time
Design $1,902.00
Last 30
Ralph Edwards
Type
Sales $2,794.00
Ca
Albert Flores
Ca
Jan Mar May Jul Sep Nov Dec
Marketing $0.00
Ca
View full report Jane Cooper
Inc
Design $762.00
Ca
Ronald Richards
Sold to
Ca
Sales $0.00
paulclindo@[Link]
Navigation 191
While designing all the possible states for tabs, be mindful of the
active, neutral, and selected states.
Separating them with just color alone is not enough.
Having an underline or coloring the full tab is the best scenario to
improve usability.
Overview Budget Spending Rewards Overview Budget Spending Rewards
Current balance
$1,440.40 Current balance
$1,440.40
Overview Budget Spending Rewards
Overview Budget Spending Rewards
Current balance
$1,440.40 Current balance
$1,440.40
Overview Budget Spending Rewards
Current balance
$1,440.40
Sold to
paulclindo@[Link]
Navigation 192
Desktop based tabs
Tabs on desktop are quite similar to how you would space
buttons.
If your top/bottom padding is 8px the safest route is your left/
right padding to be 3x (24px).
This would allow lead to a safe area between one of the tabs and
the other to be 6x (48px).
3x / 24px 3x / 24px
1x / 8px
Activities Transfer Automatic Transfer Bu
1x / 8px
6x / 48px
Sold to
paulclindo@[Link]
Navigation 193
Scaling it down
If you ever need more than three tabs on mobile, be sure that
one is slightly cut at the edge of the screen.
This will serve as a suggestion for people that you have the
ability to scroll. Keep the font size consistent and never use
smaller size for longer tabs.
Your Dashboard Your Dashboard
Pending Actions 4 Active Jobs Archived Pending Actions 4 Active Jobs Archived
Availability Request Availability Request
Visual Design for Web Visual Design for Web
Reddit INC. Reddit INC.
Visual Design Web Design Visual Design Web Design
Graphic Design Graphic Design
Desired Start Date Commitment Type Desired Start Date Commitment Type
September 24, 2018 Full-time September 24, 2018 Full-time
Reject Confirm Reject Confirm
Availability Request Availability Request
Moving Web site and redesign Moving Web site and redesign
Electronic Arts LTD Electronic Arts LTD
Shopify API Apps Design Shopify API Apps Design
Desired Start Date Commitment Type Desired Start Date Commitment Type
September
RedditYou
[Link] visible as availableFull-time
24, 2018 Full-time. September
RedditYou
[Link] visible as availableFull-time
24, 2018 Full-time.
Visual Design Web Design Visual Design Web Design
Home Search Your Jobs Community More Home Search Your Jobs Community More
Graphic Design Graphic Design
Reject Confirm Reject Confirm
Desired Start Date Commitment Type Desired Start Date Commitment Type
September 24, 2018 Full-time September 24, 2018 Full-time Sold to
paulclindo@[Link]
Confirm Interest Confirm Interest
Navigation 194
Sidebars!
Using sidebars in your dashboard designs is quite handy. You
can nest many elements in a small space, however, don’t nest
more than two levels down for better readability.
Home Home
Dashboard Dashboard
Sales Sales
Projections
Projections Projections
Single Reccuring revenue
Multiple Projects
Reccuring revenue
Tasks
Projects
Users Users
Tasks
Sold to
paulclindo@[Link]
Navigation 195
Floating actions
Floating actions is an easy way to save space for quick actions,
and it can be made available anywhere in the product. In most
cases, it’s a circular button in the bottom right corner of the
screen which expands, leads to another screen, or opens a
bottom sheet dialog.
This was first used in Android’s material design, but it’s quite
common in iOS as well.
Sold to
paulclindo@[Link]
Navigation 196
Contextual navigation
Contextual navigation is all the links inside of your content. This
can be hashtags, categories, usernames, which would help users
lead to a detailed page of that metadata.
If needed, you can also use this in a long block of text, but be
mindful how people will interact with your product.
Design Design
What is Wireframing? What is Wireframing?
Introduction to Wireframing and its Introduction to Wireframing and its
Principles. Learn from the best in the Principles. Learn from the best in the
industry. industry.
Candice Wu Candice Wu
15 Jan 2022 15 Jan 2022
Sold to
paulclindo@[Link]
Cards
Master UI Design Elements
[Link]
Sold to
paulclindo@[Link]
Cards 198
Cards
Cards are one of the most popular ways of showing content in an
interface. They can display products, information, people, or
actions.
Cards can break down content into digestible bits that allow
users to interact with it. By giving a container for content, cards
indicate that the content is real and emotional to the user.
Sold to
paulclindo@[Link]
Cards 199
Displaying cards
In most cases, they exist within a horizontal or vertical carousel.
Having them stacked on top of each other or using a grid is
another quite trendy option. The masonry grid can provide a bit
more fun and dynamic to your interface as it doesn’t need to
have the same height while keeping them in a column.
Horizontal
Horizontal cards can work as tabs; they are treated as a side-
scrolling carousel. If you go with this method, be sure to have a
little bit of the last card visible to help people understand their
actions and that there is more to explore.
9:41 9:41
Hey Denis, Hey Denis,
We kept your notes safe while you were gone. We kept your notes safe while you were gone.
Most used tags Most used tags
Team Client Brief Team Client Brief PM
25/12/20- 10:00AM 25/12/20- 10:00AM
Board meeting notes. Board meeting notes.
product sales product sales
I need to get Sales department involved, current KPI I need to get Sales department involved, current KPI
needs to be enhanced to also wanted to find some needs to be enhanced to also wanted to find some
expert advice on sales efficiency, and more specifically,
Sold to
expert advice on sales efficiency, and more specifically,
the top tips from experienced sales experts on how to paulclindo@[Link]
the top tips from experienced sales experts on how to
effectively improve the efficiency and …. effectively improve the efficiency and ….
Cards 200
Vertical
This method will help you stack a lot of content when it’s related
to each other as a catalog, and it’s great to be used in data-
heavy pages.
Sold to
paulclindo@[Link]
Cards 201
Stacked
This is great when you need to use stacked based sorting. An
important thing to note is that you need enough contrast
between the first card and the cards that are stacked behind it.
Do not use opacity to convey hierarchy in this method.
Stacked on bottom Stacked on top
Design
Design
Design What is Wireframing?
Design
Design
What is Wireframing? What is Wireframing?
Introduction to Wireframing and its
What is Wireframing?
Design
What is Wireframing?
Principles. Learn from the best in the
Introduction
industry. to Wireframing and its
Introduction to Wireframing and its
What is
Introduction
Principles.
Wireframing?
to Wireframing
Learn andin
from the best itsthe
Principles. Learn from the best in the
Introduction to Wireframing and its
industry.
Introduction
Principles.
industry. to Wireframing
Learn andin
from the best itsthe Principles. Learn from the best in the
Principles. Learn from the best in the
industry. industry. Candice Wu
industry. 15 Jan 2022
Candice Wu
Candice Wu 15 Jan 2022
15Candice
Candice
Wu
Jan 2022
Wu Candice Wu
15 Jan 2022
15 Jan 2022 15 Jan 2022
Sold to
paulclindo@[Link]
Cards 202
Grid and Masonry Grid
Both methods can be used in many scenarios, but the main one
is if you have a complete image on the card that you need to
interact with.
Sold to
paulclindo@[Link]
Cards 203
Use images accordingly
Having the right image inside your card looks more appealing and
also conveys the information more effectively.
Images catch people's attention, and only after that do they read
the text, so choosing the visual carefully is essential as it will
increase or decrease the attractiveness of the design as a whole.
Norway Aug 23-29 Norway Aug 23-29
4.68 (38) 4.68 (38)
Entire cabin • Norway Entire cabin • Norway
Elegant Cottage by Zachary Elegant Cottage by Zachary
$141.00 / night $141.00 / night
4.68 (38) 4.68 (38) Sold to
Entire Cabin • Norway Entire Cabin • Norway paulclindo@[Link]
Candyblast by Agnes Candyblast by Agnes
Cards 204
Be cautious with fonts
Typography is essential in every aspect in your interface. With
cards, the most important thing is how you pick your font
weights wisely.
If you pick too close of weights, you can see that it will affect
how the information will be perceived. The first card has the
same font size for the heading, sub-heading, and text itself.
Nothing in this scenario caught people’s attention while reading;
make sure to create a good hierachy which doesn’t mean always
using bigger font sizes as you can tweak its weight only.
Vendors monitored Vendors monitored
You’re using 80% of available spots. You’re using 80% of available spots.
10% 10%
240 240
You’ve almost reached your limit You’ve almost reached your limit
You have used 80% of your available spots. You have used 80% of your available spots.
Upgrade plan to monitor more vendors. Upgrade plan to monitor more vendors.
Sold to
paulclindo@[Link]
Cards 205
Remove unnecessary elements
Cleaning the card would help look at the actions easier and will
allow people to take actions faster. Every card should contain the
bare neccessary information and give a clearer overview to
people.
Cafe Italiano
Cafe Italiano 4.68 (38)
4.68 (38)
Small plate salads and sandwiches and
intimate seating with 12 indoor seats plus
Small plate salads and sandwiches and
patio seating.
intimate seating with 12 indoor seats plus
patio seating.
Availability
5:15 PM 6:00 PM 7:15 PM
Availability
5:15 PM 6:00 PM 7:15 PM Pricing Reserve
Pricing Reserve
Sold to
paulclindo@[Link]
Cards 206
The card should include only the critical information and
correlate access to additional details rather than displaying the
full details.
Don’t overwhelm cards with content; they should outline the
main ideas as a card should be treated as an element that is
linked to a detailed view. When you add too much content, it
becomes very long vertically or too wide horizontally and loses
readability.
Special contributor: Special contributor:
Chris Medland Chris Medland
F1 return to COTA! F1 return to COTA!
For the first time since 2019, we’re heading back to For the first time since 2019, we’re heading back to
America for the United States Grand Prix. And there’s America for the United States Grand Prix.
plenty going on as we make the trip so here are a few
of the talking points we think will be creating
headlines at Circuit of The Americas this weekend.
There was a sense of defensiveness from both
Mercedes and Red Bull during the Turkish Grand Prix
weekend, as each team felt the importance of not
losing too many points to the other, rather than
chasing significant gains. Mercedes had the upper
hand at Istanbul Park but Lewis Hamilton’s grid
penalty meant he could only finish fifth, so Red Bull
were happy with second and third.
Sold to
paulclindo@[Link]
Cards 207
Avoid embedding links
When the whole card is clickable, this greatly increases the
interface's usability on both touchscreen devices and desktop
computers where a mouse is used.
So using additional inline links in the text will confuser most users
on what their action should be.
Special contributor: Special contributor:
Chris Medland Chris Medland
F1 return to COTA! F1 return to COTA!
For the first time since 2019, we’re heading back to For the first time since 2019, we’re heading back to
America for the United States Grand Prix. America for the United States Grand Prix.
Sold to
paulclindo@[Link]
Cards 208
Border radius
Rounding the corners makes it easier and more effective to
follow the lines as it suits the movement of the head and the
eyes better.
Vendors monitored Vendors monitored
You’re using 80% of available spots. You’re using 80% of available spots.
10% 10%
240 240
You’ve almost reached your limit You’ve almost reached your limit
You have used 80% of your available spots. You have used 80% of your available spots.
Upgrade plan to monitor more vendors. Upgrade plan to monitor more vendors.
Sold to
paulclindo@[Link]
Cards 209
Make them easy to separate
To show depth and in order to reveal that the whole card is
clickable or expandable, you can use a drop shadow on a border.
However, if you decide to add a shadow, avoid using pure black
color for the dropdown as it can ruin an already good-looking
design and make it look sloppy.
Typography Typography Typography
Font Inter Font Inter Font Inter
Weight 500 - Medium Weight 500 - Medium Weight 500 - Medium
Size 14 PX Size 14 PX Size 14 PX
Height Auto PX Height Auto PX Height Auto PX
Color Blue Base Color Blue Base Color Blue Base
Align Align Align
Style Style Style
Sold to
paulclindo@[Link]
Tables
Master UI Design Elements
[Link]
Sold to
paulclindo@[Link]
Tables 211
Tables
Data tables range from the short and sweet to the long, complex,
and hard-to-digest. Regardless of where you're using a data
table, though, putting thought into its design is essential for
sharing data clearly and purposefully.
Recent transactions Search
Transaction Amount Date Category Account
BrandBird Visa 1234
[Link]
- $18.99 Wed 1:00pm Subscriptions
Expiry 06/2024
MagicPattern Visa 1234
[Link]
- $4.50 Wed 7:20am Subscriptions
Expiry 06/2024
One Page Love Mastercard 1234
[Link]
+ $88.00 Wed 2:45am Unknown
Expiry 06/2024
BrandBird Visa 1234
[Link]
- $15.00 Tue 6:10pm Subscriptions
Expiry 06/2024
Typefully Visa 1234
[Link]
- $12.50 Tue 7:52am Subscriptions
Expiry 06/2024
BrandBird Visa 1234
[Link] - $40.20 Tue 12:15pm Groceries
Expiry 06/2024
Sold to
paulclindo@[Link]
Tables 212
High Readability
When designing a data table, you must keep the ultimate
objective in mind: Readability. A great data table is free from all
clutter and unnecessary information, as the presence of such
things will only hinder the reader's ability to see and understand
the data you're presenting.
Activities Transfer Automatic Transfer Budgets Notifications Cards
Last 30 days Filter by View Recent Export as Page 2 of 4
Type Where Description Location Amount Date
Burgas, 24.12.2020
Card Dropbox Subscription - $120.00
Demokratsia 27 11:16 AM
Inge-Beisheim- 24.12.2020
Card Marriot Booking - $120.00
Platz 1 11:16 AM
Berlin Tegel "Otto 24.12.2020
Card Uber Invoice n 378219 - $120.00
Lilienthal" Airport 11:16 AM
Go to 10 page 1 2 3 4
Activities Transfer Automatic Transfer
Last 30 days Filter by
Where Description Amount Date
24.12.2020
Dropbox Subscription - $120.00
11:16 AM
24.12.2020
Marriot Booking - $120.00
11:16 AM
24.12.2020
Uber Invoice n 378219 - $120.00
11:16 AM
Go to 10 page 1 2 3 4
Sold to
paulclindo@[Link]
Tables 213
Fonts
The first consideration you'll need to resolve before proceeding
with the design of your data table is font. Font type, size, and
styling (i.e., italics, bold, etc.) play a significant role in what
information is emphasized, along with how easy it is to see the
information in your table.
Rule of Thumb: Avoid using text smaller than 12 points and avoid
curvy or non-traditional typeface.
8 items 8 items
Group Content Type Group Content Type
English Message English Message
English Push Notification English Push Notification
French Event French Event
Spanish Offer Spanish Offer
Bulgarian Survey Bulgarian Survey
Sold to
paulclindo@[Link]
Tables 214
Colors
When using colors, always make sure they have enough contrast
between your text and the background. For accessibility, you
should put your chosen color codes for the borders,
backgrounds, and text into a tool to ensure those with color
blindness and other visual conditions can read your table with
ease.
Rule of Thumb: Use light shades, avoid dark and bright colors,
and pay attention to contrast.
Merchant Amount Category Merchant Amount Category
Magic Pattern $18.99 Subscriptions Magic Pattern $18.99 Subscriptions
AC A Coffee $4.50 Dining AC A Coffee $4.50 Dining
Transfer to *5540 $88.00 Uncategorised Transfer to *5540 $88.00 Uncategorised
Sold to
paulclindo@[Link]
Tables 215
Size
For a condensed table, choose a row height of about 40px. For a
regular table, choose a row height of about 48px. For a relaxed
table, choose a row height of about 56px. The font size you
choose should be adjusted accordingly, getting slightly larger as
your row height grows to keep a large amount of text from piling
up in a given row.
Rule of Thumb: Opt for a row height between 40px and 56px,
adjusting font size accordingly.
8 items 8 items
Group Content Type Group Content Type
English Message
English Message
French Push Notification
French Push Notification German Event
Bulgarian Offer
German Event
French Survey
Sold to
paulclindo@[Link]
Tables 216
Pagination
The amount of padding will depend on the row height you've
selected, but most suggest a minimum of 16px of padding to the
left and right of each column, creating 32px of spacing between
columns in your table. You can adjust this accordingly, keeping it
proportional to the height of your rows and the amount of data
you're displaying in your table.
Rule of Thumb: Maintain a minimum of 16px padding to the left
and right of each column.
Company Status About License use
BrandBird
Paid Turn Your Images To Beautiful Social Media Posts
[Link]
Magic Pattern
Pending Beautiful Graphics Effortlessly
[Link]
8px 8px 16px 16px
Company Status About
BrandBird
Paid Turn Your Images To Beautiful Social Media Posts
[Link]
Magic Pattern
Pending Beautiful Graphics Effortlessly
[Link]
8px 32px 32px
Sold to
paulclindo@[Link]
Tables 217
Alignment
If you're dealing with numeric data unrelated to size, like a phone
number or date, you'll ideally align it left or center. Lastly, when
you're aligning the headers of each column, make sure the
alignment of the header matches that of the data below it.
Right-alignment for size-related numbers helps the reader
quickly compare the values. For instance, 100,000 in a table will
be bigger than 9,000 when the numbers are aligned to the right.
Company MRR Company MRR
BrandBird BrandBird
$9,520.00 $9,520.00
[Link] [Link]
Magic Pattern Magic Pattern
$18,201.28 $18,201.28
[Link] [Link]
Company Date Company Date
BrandBird BrandBird
Wed 1:00pm Wed 1:00pm
[Link] [Link]
Magic Pattern Magic Pattern
Wed 1:00pm Wed 1:00pm
[Link] [Link]
Sold to
paulclindo@[Link]
Tables 218
Grid Separators
The table includes both horizontal and vertical lines in a grid row
style, giving more separation between your data points. However,
these lines can create visual noise that can distract from your
data, especially if your table is sparse. For that reason, I suggest
grid rows for dense data tables that would benefit from a
spreadsheet-style presentation.
Recent transactions Search
Transaction Amount Date Category Account
BrandBird Visa 1234
[Link]
- $18.99 Wed 1:00pm Subscriptions
Expiry 06/2024
MagicPattern Visa 1234
[Link]
- $4.50 Wed 7:20am Subscriptions
Expiry 06/2024
One Page Love Mastercard 1234
[Link] + $88.00 Wed 2:45am Unknown
Expiry 06/2024
BrandBird Visa 1234
[Link]
- $15.00 Tue 6:10pm Subscriptions
Expiry 06/2024
Typefully Visa 1234
[Link]
- $12.50 Tue 7:52am Subscriptions
Expiry 06/2024
BrandBird Visa 1234
[Link] - $40.20 Tue 12:15pm Groceries
Expiry 06/2024
Sold to
paulclindo@[Link]
Tables 219
Horizontal Separators
With only horizontal lines to separate your data, this row style
reduces visual noise compared to a full grid layout. This row style
gives you a good deal of white space, helping the reader keep
their eye on the data they're consuming as they move through
the table. This is the most common table style and it's great for
all sizes of data sets.
Recent transactions Search
Transaction Amount Date Category Account
BrandBird Visa 1234
[Link]
- $18.99 Wed 1:00pm Subscriptions
Expiry 06/2024
MagicPattern Visa 1234
[Link]
- $4.50 Wed 7:20am Subscriptions
Expiry 06/2024
One Page Love Mastercard 1234
[Link]
+ $88.00 Wed 2:45am Unknown
Expiry 06/2024
BrandBird Visa 1234
[Link]
- $15.00 Tue 6:10pm Subscriptions
Expiry 06/2024
Typefully Visa 1234
[Link]
- $12.50 Tue 7:52am Subscriptions
Expiry 06/2024
BrandBird Visa 1234
[Link] - $40.20 Tue 12:15pm Groceries
Expiry 06/2024
Sold to
paulclindo@[Link]
Tables 220
Zebra stripes
With a zebra stripe row style, the colors of row backgrounds are
alternated using light shades, allowing readers to easily follow
data from one column to the next across a given row. This is ideal
for large data sets, as long as the stripes are designed in a way
that the alternating pattern is clear and doesn't make one set of
rows appear highlighted.
Recent transactions Search
Transaction Amount Date Category Account
BrandBird Visa 1234
- $18.99 Wed 1:00pm Subscriptions
[Link] Expiry 06/2024
MagicPattern Visa 1234
- $4.50 Wed 7:20am Subscriptions
[Link] Expiry 06/2024
One Page Love Mastercard 1234
+ $88.00 Wed 2:45am Unknown
[Link] Expiry 06/2024
BrandBird Visa 1234
- $15.00 Tue 6:10pm Subscriptions
[Link] Expiry 06/2024
Typefully Visa 1234
- $12.50 Tue 7:52am Subscriptions
[Link] Expiry 06/2024
Visa 1234
BrandBird - $40.20 Tue 12:15pm Groceries
[Link]
Expiry 06/2024
Sold to
paulclindo@[Link]
Tables 221
Free form
If you want a minimalistic table design, I typically opt for the free-
form row style, which removes all dividers to reduce visual noise
and produce the cleanest looking table possible. Of course, this
style should only be used with small data sets, as the lack of
dividers can otherwise confuse as the reader tries to consume
the data.
Recent transactions Search
Transaction Amount Date Category Account
BrandBird - $18.99 Wed 1:00pm Subscriptions Visa 1234
[Link] Expiry 06/2024
MagicPattern - $4.50 Wed 7:20am Subscriptions Visa 1234
[Link] Expiry 06/2024
One Page Love + $88.00 Wed 2:45am Unknown Mastercard 1234
[Link] Expiry 06/2024
BrandBird - $15.00 Tue 6:10pm Subscriptions Visa 1234
[Link] Expiry 06/2024
Typefully - $12.50 Tue 7:52am Subscriptions Visa 1234
[Link] Expiry 06/2024
BrandBird - $40.20 Tue 12:15pm Groceries Visa 1234
[Link] Expiry 06/2024
Sold to
paulclindo@[Link]
Tables 222
Display Data Efficiently
When working with large data sets, it's easy to end up with a
handful of columns that take up space, seemingly unnecessarily.
While the data is essential to include, giving each data type its
own column can quickly lead to a massive table. In this instance,
knowing the best practices for displaying data efficiently will help
you design better tables.
Sold to
paulclindo@[Link]
Tables 223
Use Subtext to Condense Data
If you're presenting a large table featuring user information, you
may need to include both a username and email address for each
individual. Instead of making this data two columns, you may find
using subtext to condense this data into a single column.
For instance, you can display the username in the first column,
with the user's email address in the subtext below that data. The
subtext is generally expressed using a smaller font, lighter
colored font, and/or an italic font to clarify that it's a different
type of data than the information above it.
Recent transactions Recent transactionsSearch
Transaction Website DateTransaction Category Account Amount Date C
Visa 1234
BrandBird [Link] Wed 1:00pmBrandBird
Subscriptions
[Link] - $18.99 Wed 1:00pm
Expiry 06/2024
Visa 1234
MagicPattern [Link] Wed 7:20amMagicPattern
Subscriptions
[Link] - $4.50
Expiry 06/2024
Wed 7:20am
Mastercard 1234
One Page Love [Link] Wed 2:45amOne Page Love
Unknown
[Link] + $88.00 Wed 2:45am
Expiry 06/2024
Visa 1234
BrandBird [Link] Tue 6:10pmBrandBird
Subscriptions
[Link] - $15.00 Tue 6:10pm
Expiry 06/2024
Visa 1234
Typefully [Link] Tue 7:52amTypefully
Subscriptions
[Link] - $12.50 Tue 7:52am
Expiry 06/2024
BrandBird BrandBird Visa 1234
[Link] - $40.20 Tue 12:[Link]
Groceries - $40.20 Tue 12:15pm
Expiry 06/2024
Sold to
paulclindo@[Link]
Tables 224
Sticky Headers
To maintain context as a user scrolls through your table and
reduce friction, try using an anchored heading. An anchored or
"sticky" heading will remain at the top of the user's screen, even
as they scroll through row and rows of data. This functionality is
useful with large data sets and small screen sizes where the top
row will quickly disappear as the user views the table.
Recent transactions Search
Transaction Amount Date Category Account
BrandBird Visa 1234
[Link]
- $18.99 Wed 1:00pm Subscriptions
Expiry 06/2024
MagicPattern Visa 1234
[Link]
- $4.50 Wed 7:20am Subscriptions
Expiry 06/2024
One Page Love Mastercard 1234
[Link]
+ $88.00 Wed 2:45am Unknown
Expiry 06/2024
BrandBird Visa 1234
[Link]
- $15.00 Tue 6:10pm Subscriptions
Expiry 06/2024
Recent transactions Search
Typefully Visa 1234
[Link]
- $12.50 Tue 7:52am Subscriptions
Amount Date Category Account
Expiry 06/2024
Transaction
MagicPattern Visa 1234
[Link]
- $4.50 Wed 7:20am Subscriptions
Expiry 06/2024
BrandBird Visa 1234
[Link] - $40.20 Tue 12:15pm Groceries
Expiry 06/2024
One Page Love Mastercard 1234
[Link]
+ $88.00 Wed 2:45am Unknown
Expiry 06/2024
BrandBird Visa 1234
[Link]
- $15.00 Tue 6:10pm Subscriptions
Expiry 06/2024
Typefully Visa 1234
[Link]
- $12.50 Tue 7:52am Subscriptions
Expiry 06/2024
BrandBird Visa 1234
[Link] - $40.20 Tue 12:15pm Groceries
Expiry 06/2024
Sold to
paulclindo@[Link]
Tables 225
Search
For a large data set, giving users a search option is almost
always a must for user experience. Consider the use case of your
user and, if you determine finding a particular piece of
information or row of data would be helpful to them, give them
the option to search your table.
Search Pull requests Issues Marketplace Explore
facebook / react-native
Code Issues 889 Pull requests 217 Actions Projects Wiki Security
Master 73 branches 350 tags Go to file C
HS ralphedwards and howardserkins include android in npm package 0675beee 2 days ago 21,463 c
.circleci bump docker-android to 2.1 (#30296) 22 d
.github label-actions: Add canned response for upgrade issues 8 mon
IntegrationTests feat: Enable Hermes to work on iOS (#29914) 23 d
Libraries RN: Add `NativeComponentRegistry.getWithFallback_DEPRECATED` 5d
React Daily `arc lint --take CL ANGFORMAT` 6d
ReactAndroid Move TurboModuleManager to use RuntimeExecutor instead of jsContex ... 6d
ReactCommon LayoutAnimations: Remove unnecessary optionals in config 5d
bots Migrating RNTester to Packages Directory (#29567) 3 mon
docs Generate doc info for RN components 14 mon
flow-typed / npm Remove license header from third-party code 2 mon
flow RN: Remove `fbjs` Dependency 3 mon
gradle / wrapper Bump Gradle Wrapper to 6.7 (#30200) 29 d
Sold to
jest RN: Add `[Link] _DEPRECATED`
paulclindo@[Link] 5d
.buckconfig Fix RNTester Path (#29786) 3 mon
Tables 226
Sorting and Filtering
For complex tables, filters may even enable the user to hide
certain types of data to more easily digest the information they
consider most relevant. When deciding which filters to offer your
users, consider their use case for the data you're providing them
and think about how they may best want to consume it.
Search Search
Filter
Country City
Company Status
Revenue Type
Catalog
Customer
Company Status [Link]
Catalog Circooles
Customer Churned
[Link] [Link]
Circooles Command+R
Churned Customer
[Link] [Link]
Command+R Hourglass
Customer Customer
[Link] [Link]
Hourglass Layers
Customer Churned
[Link] [Link]
Layers Quotient
Churned Customer
[Link] [Link]
Quotient Sisyphus
Customer Customer
[Link] [Link]
Sisyphus
Customer
[Link]
Page 1 of 10
Sold to
paulclindo@[Link]
Page 1 of 10
Tables 227
Tabs
Another handy feature for displaying large data sets is
pagination. However, when designing pagination into your table,
make sure it remains obvious to the reader which page of the
table they're on and make it easy for them to navigate to and
from any page.
Activities Transfer Automatic Transfer Budgets Notifications Cards
Last 30 days Filter by Page 2 of 4
Type Where Description Amount Date
24.12.2020
Card Dropbox Subscription - $120.00
11:16 AM
24.12.2020
Card Marriot Booking - $120.00
11:16 AM
24.12.2020
Card Uber Invoice n 378219 - $120.00
11:16 AM
Go to page 10 1 2 3 4
Sold to
paulclindo@[Link]
Tables 228
Icons
While including an icon to denote a link is a wise idea if you only
have a few links within your table, it's not the sensible thing to do
if the majority of rows in a column will feature a link. Instead, it
would help if you used the column's descriptor to communicate
to the user that there are links present and save icons for where
you need to differentiate data.
Recent transactions
Transaction Amount Date Account
Spotify - $18.99 Wed 1:00pm Visa Classic **** 1234 Edit
AC A Coffee - $4.50 Wed 7:20am Visa Classic **** 1234 Edit
Stripe + $88.00 Wed 2:45am Mastercard **** 1234 Edit
Figma - $15.00 Tue 6:10pm Visa Classic **** 1234
TB TBF Bakery - $12.50 Tue 7:52am Visa Classic **** 1234
Recent transactions
FV Fresh F&V
Transaction - $40.20
Amount Tue Date
12:15pm VisaAccount
Classic **** 1234
Spotify - $18.99 Wed 1:00pm **** 1234
Stripe + $88.00 Tue 5:40am Visa Classic **** 1234
AC A Coffee - $4.50 Wed 7:20am **** 1234
Stripe + $88.00 Wed 2:45am **** 1234
Figma - $15.00 Tue 6:10pm **** 1234
Sold to
paulclindo@[Link]
TB TBF Bakery - $12.50 Tue 7:52am **** 1234
Tables 229
Badges
If you're looking to portray information like availability or some
other data that has just 2-3 potential states (i.e., Active, Pending,
and Closed), badges and color coding can help you implement
this information efficiently without creating new rows or
redundancy. However, like icons, use badges sparingly. Using a
number of different badges will only visually clutter your table.
Search Search
Filter Filter
Company Status Company Status
Catalog Catalog
Paid Paid
[Link] [Link]
Circooles Circooles
Outstanding Outstanding
[Link] [Link]
Command+R Command+R
Delay Delay
[Link] [Link]
Hourglass Hourglass
Customer Customer
[Link] [Link]
Layers Layers
Churned Churned
[Link] [Link]
Quotient Quotient
Customer Customer
[Link] [Link]
Sisyphus Sisyphus
Customer Customer
[Link] [Link]
Page 1 of 10 Page 1 of 10 Sold to
paulclindo@[Link]
Taking it to the
Master UI Design Elements
next level
[Link]
Sold to
paulclindo@[Link]
Taking it to the next level 231
Practice
After reading the book, you should be more confident in your
ability to make better design decisions.
However, theory can only get you so far; what really would make
you stand out from the crowd is your basic design skills - and
that takes a lot of practice.
Thinks like having confidence, a good portfolio, and ambition can
determine your chances of success. People aren’t robots that
can determine their results just based on knowledge.
You won’t be able to discover yourself truly if you just read the
theory and never put it into practice as with this approach, you
will become insecure that all you know is how to talk, and most
companies and clients care much more about how can you
execute.
Yes - you would still need to explain your decisions and
rationales, and that can be extremely hard for somebody like me
who is an introvert. But having the confidence that I have put
countless hours in doing interfaces helps me be more confident
when presenting my work and solutions to clients.
Sold to
paulclindo@[Link]
Now it’s
time to
work
harder.
[Link]
Sold to
paulclindo@[Link]
Taking it to the next level 233
Find your strenghts
You won’t understand what you like the most from day one; this
is why it’s essential to experiment and push yourself non-stop.
Putting a daily challenge for yourself for at least a month will help
you grow tremendously. They don’t need to be big or
complicated projects - some days, you might do just 1 hour of
something you want to experiment with. The most important
thing here is to commit to it and to do it daily.
Yes - it includes weekends as well. This is your workout for your
creativity.
In the beginning, it will be hard because you will face a lot of
obstacles. Family, friends, work, school, most of the time you
don’t have the power to do anything else than just to order a
pizza and watch Netflix. Exactly in these moments is where
greatness is built.
Having touched interfaces in a lot of different areas will make you
much more comfortable talking to recruiters, colleagues or
business owners about your design decisions.
Sold to
paulclindo@[Link]
Taking it to the next level 234
The first year or two of hard work and grinding will pay off later in
your career, and you will be thankful for yourself for that.
This needs to become a daily ritual of yours, and it won’t be
accessible until a habit is formed.
It would help if you didn’t force yourself tho. Some days it will be
harder than others, and that is completely fine. The reward and
dopamine hits you will get by completing even a 30-minute
exercise would stay much longer than the pleasure of laying in
bed and feeling bad for yourself.
Sold to
paulclindo@[Link]
You don’t
find time
to design.
You make
time.
[Link]
Sold to
paulclindo@[Link]
Taking it to the next level 236
Making time
Having dedicated time for design is vital, as most likely when
working at a company, you most likely need to have certain hours
to perform. Otherwise, you will lose your job.
Thus why it’s essential to learn how to force yourself to creativity,
as creativity and problem solving don’t happen when you wonder
on your PlayStation.
There are many techniques to force you to get going, but the
most effective one is time blocking.
This allows you to block a slot in your calendar and free that
mental capacity what you will do in that time, put everything on
airplane mode, open your design tool and just get going.
The benefit of this approach is that you don’t need to do it
simultaneously each day, as we have other duties and
responsibilities, but it’s important to do it daily and make the time
to design.
Sold to
paulclindo@[Link]
Endnotes
Master UI Design Elements
[Link]
Sold to
paulclindo@[Link]
Endnotes 238
Congratulations!
You have made it to the end of the book, but this is just the
begining of your journey in the pixel world!
This is v1 of the eBook, you will be receiving free updates for the
first six months of 2022 where the book will grow in size and
content.
Don’t forget to share any feedback or additional chapters you’d
like to see in the book - denis@[Link]
Feel free to follow me and let’s connect
Twitter - [Link]
Instagram - [Link]
YouTube - [Link]
UCC92SV9BVuyUN-fzLXuqK5g
Medium - [Link]
UI Learn - [Link]
This book and all of the visual examples have
been designed, edited, and written in Figma.
Sold to
paulclindo@[Link]
[Link]
Sold to
paulclindo@[Link]
You might also like
- History and Evolution of Graphic DesignNo ratings yetHistory and Evolution of Graphic Design31 pages
- Thinking With Type - A Critical Guide For Designers, Writers, Editors, Students (Ellen Lupton) (Z-Library - SK, 1lib - SK, Z-Lib - SK)No ratings yetThinking With Type - A Critical Guide For Designers, Writers, Editors, Students (Ellen Lupton) (Z-Library - SK, 1lib - SK, Z-Lib - SK)224 pages
- Brand Strategy Creative Direction FILLABLE TEMPLATENo ratings yetBrand Strategy Creative Direction FILLABLE TEMPLATE11 pages
- Syntax Basics: Related Roadmaps Frontend Roadmap HTML Roadmap Javascript Roadmap Fullstack RoadmapNo ratings yetSyntax Basics: Related Roadmaps Frontend Roadmap HTML Roadmap Javascript Roadmap Fullstack Roadmap1 page
- Design Elements, Third Edition Understanding The Rules and Knowing When To Break Them - A Visual Communication Manual100% (3)Design Elements, Third Edition Understanding The Rules and Knowing When To Break Them - A Visual Communication Manual323 pages
- Beginning Graphic Designnbsp - Layout and CompositionNo ratings yetBeginning Graphic Designnbsp - Layout and Composition10 pages
- Graphic Design and Print Production Fundamentals 1660154058No ratings yetGraphic Design and Print Production Fundamentals 1660154058226 pages
- Graphic Design and Print Production Fundamentals 1660154058No ratings yetGraphic Design and Print Production Fundamentals 1660154058226 pages
- PDF Paul Harris Gavin Ambrose Basics Design Layout Second Edition Ava Pu DL100% (1)PDF Paul Harris Gavin Ambrose Basics Design Layout Second Edition Ava Pu DL218 pages
- Creative Graphic Design Essential Typography TocNo ratings yetCreative Graphic Design Essential Typography Toc2 pages
- Text Graphics and Typography EssentialsNo ratings yetText Graphics and Typography Essentials37 pages
- Training Guide Worknc v23 Machining Contexts100% (1)Training Guide Worknc v23 Machining Contexts58 pages
- Understanding Model Context Protocol (MCP)No ratings yetUnderstanding Model Context Protocol (MCP)5 pages
- CSV Data Integration for Demand ForecastingNo ratings yetCSV Data Integration for Demand Forecasting21 pages
- Hyperparameter Tuning in GBM with PythonNo ratings yetHyperparameter Tuning in GBM with Python22 pages
- Digital Technology Boosts China's E-Tailing GrowthNo ratings yetDigital Technology Boosts China's E-Tailing Growth26 pages
- Enhancing Computer Literacy for Grade 7No ratings yetEnhancing Computer Literacy for Grade 711 pages
- Advanced Nutrition and Human Metabolism 8th Edition Sareen S. Gropper - Available All Format88% (8)Advanced Nutrition and Human Metabolism 8th Edition Sareen S. Gropper - Available All Format237 pages