FREE

CHAPTER

UI DESIGN Tactics
100+ actionable tips to level up design skills

BY THALION
UI Design Tactics

This is a free chapter of upcoming book. Full version will include over 100
practical & actionable tips to level up your designs.

You may get the full version here:

https://www.uxmisfit.tools/ui-design-tactics
Effects
Effects are not just clutter ornamentation. They help to build balance &
strenghten visual hierarchy. Well created effects makes your design stand
out and builds great impression on clients.

This chapters covers UI Design Tactics for Shadows, Blurs and

Skeuomorphic effects.
Effects

Shadows

Tactics in this section will help you:

Apply soft drop shadows, avoid default preset

Make soft shadow with layer styl
Make soft shadow with a blurred laye
Know why to avoid pure black color for shado
Use the main color of the elemen
Create shadow from gradient or blurred phot
Create shadow systems to strengthen visual hierarch
Show how to imitate real lighting

Using a drop or inner shadows is the most common technique of bringing

depth to design. They are much more than just a flashy effect. A good set
of shades are perfect for building a natural visual hierarchy for your designs.

Shadows are so essential that even when Apple iPhone turned flat with
iOS7, some UI Controls like switches still have them. Now the effect is more
and more popular. Why? Because human perception recognizes elements
hierarchy much easier this way.

Let's take a look at a few UI Design Tactics that will help you make most of
your shadows.
Effects • Shadows

Apply soft drop shadows, avoid default presets

Let's say it laud - Default shadow presets in all design tools are ugly!

To make your design look elegant, you have to modify them or use a
completely different approach - like blurring a layer behind the element.
Soft shadows are much more subtle & elegant. They give a high-quality look
to your design. Let's see how to make soft shadows in practice:

Tactic 1: Make soft shadow with layer style

99% of shadows in UI are cast from the top. This means that in most
designs, you will keep the X value as 0. You will only increase Y.

To make a soft shadow increase the blur of the layer to about 30-50.
Obviously, the level depends on the visual environment of your element.
Then lower the opacity to about 5-15%.

Soft Shadow - Created with layer style

Effects • Shadows

Tactic 2: Make soft shadows with a blurred layer

This technique gives you a lot of freedom when it comes to shadow setup.
This type of shadow is great for designing presentations. However, in real
apps or websites, it is disliked by the developers.

Create a layer behind the element you want to cast drop shadow. The layer
should have the same size as the object above. Now decrease its size to
about 90% and align the bottom to the element above.

The rest steps are almost the same as in the case of creating shadows with
layer style:

Set the right color of the layer (I will cover tips for better shadow colors in
the next section), decrease the opacity to 5-15% and apply the blur with a
value between 30-50.

Soft Shadow - Created with blurred Layer below the object

Effects • Shadows

Shadows colors
These are 3 tactics to apply when you want to make attractive shadow
colors in your project:

Tactic 1: Avoid pure black

In most cases, shadows that are pure black feels dirty. Real shadows in
nature are rarely black in 100%. The simplest way to make them more
appealing is to use one of the colors of your neutral palette. As you may
know, grey colors in your designs may also have a little dose of color. They
may be warm or cool. Apply this hue to your shadows too.

Pure black shadow color Neutral shadow color

Effects • Shadows

Tactic 2: Use the main color of the element

In the real world, translucent element's shadows have the color of their
object. If the green glass bottle casts a shadow, it includes green in its
shade.

You may apply the same technique to your UI elements. It works especially
well with buttons that have got vivid colors.

Primary color used in button’s shadow

Tactic 3: Create shadow from gradient or

blurred photo
This tactic is the extension of the previous one. If your element is a photo or
illustration, it surely contains lots of colors. If you want to make them feel a
bit translucent, do not pick a single color.

Use the gradient as a shadow (if the image is simple) or copy the entire
object and blur it to make a shadow layer from the duplicated element.
Effects • Shadows

Shadow made from the element’s photo

Create shadow systems to strengthen

visual hierarchy
Nice try! Please wait for the final version and preorder the book. Nice try!
Please wait for the final version and preorder the book. Nice try! Please wait
for the final version and preorder the book.

the Book
si on of
full ver
abl e in the
Avail

5 levels of shadows for elevation

Nice try! Please wait for the final version and preorder the book. Nice try!
Please wait for the final version and preorder the book.
Effects • Shadows

The element that is close to the surface

Nice try! Please wait for the final version and preorder the book.Nice try!
Please wait for the final version and preorder the book.Nice try! Please wait
for the final version and preorder the book.

Book
f the
ersion o
he full v
i l a b l e in t
Ava

The element that is far from the surface

Nice try! Please wait for the final version and preorder the book.Nice try!
Please wait for the final version and preorder the book.Nice try! Please wait
for the final version and preorder the book.
Effects • Shadows

Imitating real lighting

To make the shadow feel even more natural, you may add an additional
(second) shadow effect to the layer.

In the real world, a shadow is cast by the direct light (larger & softer one)
and ambient light (smaller shadow). These two combined together create a
very attractive composition. When you mix them in your works, your design
will gain additional polish.

To make it, add the effect style to the existing layer with soft shadow. This
second effect will have a much smaller blur value but also low opacity.

2 Drop Shadows (from direct & ambient light) in 1 layer

Effects

Blur

Tactics in this section will help you:

Create Modern Blu

Show when to avoid blurred panel
Make your blur stand out

When you observe modern User Interfaces like iOS, macOS, even
Microsoft's Fluent Design, the main material you see in every window or
screen is glass, blurred glass. Some call this trend Glassmorphism. This
effect plays an important role not only in building Visual Hierarchy but also
in making your UI more attractive.

Let's see how to make blurred layers the better way.

Create Modern Blur

To create good looking modern blur effect, you have to follow these steps:

Use neutrals as elevatio

Set blur level to at least 16 or mor
Set the opacity to 30-60%
Effects • Blur

Modern Blur

Let's briefly explain each step.

Using neutrals as elevation is essential. Blurred panels work best in

colorful backgrounds with multiple shapes behind them. To ensure a good
blending of every color behind, your blurred layer should be white, black, or
neutral.

Setting blur levels to 16 or more will ensure better readability of elements

that are placed inside a translucent panel. Also, remember this: if you blur
the layer too much, the glass panel will stop looking like a blurred one, it will
feel like a solid color or gradient.

Set the opacity to 30-60%. This depends on the readability of included

elements. You have to find the right balance between readability & the
elegant blur effect of a specific panel.
Effects • Blur

When to avoid blurred panels

When you know that the specific solution has got a mainly solid
background, where the glass effect will not be visible, do not force yourself
to make it. In these cases, solid colors are the best options.

B l u r o n s o l i d c o l o r b a c kg ro u n d B l u r o n d i ve r s e d b a c kg ro u n d

Also, when you focus on the designing solution that's primary goal is
accessibility, you should avoid blur. This effect may have a negative effect
on some people with sight disabilities. Alternatively, you may think of
preparing a setting to turn it off - iOS has got feature this built-in.

Extra tips for blurs

If you want to add a special feeling of texture to your blurred panel, add a
little noise layer above. Set its opacity to 10-20% and change blend mode to
Overlay. This simple tactic will give you a really distinguished effect. It feels
like frost on a glass!
Effects • Blur

F ro s t e d g l a s s e f fe c t
Effects

Skeuomorphism

Tactics in this section will help you:

Emulate light sourc

Create raised elemen
Create inset element

This design trend is a song of the past, but there are some elements still
used in modern designs that you should know how to apply. I am speaking
mostly about the illusion of lighting UI elements. Below tactics shows how
to make it feel natural to the users.

Emulate light source

If you think of the light source our minds by default, expect that it will
illuminate objects from the top. Follow these natural assumptions, use them
consistently across the entire design.

This will help you to build depth & visual hierarchy. You will need to craft
two types of elements, raised ones, and inset objects.
Effects • Skeuomorphism

Tactic 1: Create raised element

To achieve the best effect, add an inner shadow that will imitate lighting. It

should be visible from the top of the object. The best results are usually

subtle ones - only 1-2 points of inner shadow should be visible from the top.

Set the blend mode of shadow to normal and color to bright tone (maybe

also white). You may consider using blur with a low value (1-5).

Raised element

Raised elements often use shadows to strengthen depth, follow the tips

from previous sections to make elegant soft shadows.

Tactic 2: Inset elements

Inset objects are best for the elements that require some action to be filled,

for example, inputs/text fields, slider backgrounds, or drop areas. If you

want to present something that is a bit pushed into the surface, you have to

create that illusion with the set of two inner shadows.

First, let's recreate light cast from above into the element. Use the same

setting as in the case of raised elements - 1 or 2 points of inner shadow.

Effects • Skeuomorphism

You may blur it a bit too. The difference is that it should be visible on the

bottom edge of the area.

Now, to create an inset effect, add the next inner shadow. It should be

visible on the top edge of the area. Follow the same values of size & blur

like in raised element, but change color to a dark neutral one. That's it, your

inset element is done.

Flat element Inset element

Preorder the eBook

Would like to learn more?

This was just one chapter from the UI Design Tactics eBook.

With full version you will learn over 100 actionable & practical tips to level up
your designs.

Get it from the link below:

https://www.uxmisfit.tools/ui-design-tactics

Thanks for reading!

Thalion

uxmisfit.com