WE CREATE BRANDS PEOPLE L♥VE
Share

How to Create Depth in UI Design? Part 2


Tegra - January 29, 2020 - 0 comments

How to Create Depth in UI Design? Part 2

How to Create Depth in UI Design? Part 2 🌟

Courtesy of @bazen.agency

Depth in design makes everything more interesting and emerging.

The second part of the tips focuses more on lighting and shadows.

How to design UIs knowing the fact that we as humans perceive depth and space by already predetermined patterns.

Check Part 1 if you haven’t seen it already.

Thank you so much for your support friends!

1—Lighting & shading  Light shows depth by casting shadows over the surface of one object. 
Parts closer to the light source will show a brighter surface with more reflected light.

Lighting & Shading

Light shows depth by casting shadows over the surface of one object. Parts closer to the light source will show a brighter surface with more reflected light.

Notice shadows and lighting

Notice shadows and lighting

2 - Depth of the field  The eye focuses on one object and
as it does, other objects become
slightly blurry.
The further away
an object is from
the focused one
the blurrier it
should appear

Depth of the field

The eye focuses on one object and as it does, other objects become slightly blurry.
The further away an object is from the focused one the blurrier it should appear.

Sharp focused object

Sharp focused object

3 - Brightness of shadows  Shadow of the object is darker as object is closer to the surface. 
Also, heavier objects have darker and smaller shadows.

Brightness of shadows

Shadow of the object is darker as the object is closer to the surface.
Also, heavier objects have darker and smaller shadows.

Notice contrast of shadows

Notice contrast of shadows

4 - Texture  Definition textures imply a sense of depth as they aim to let you feel the surface of a visual element. 
As distance from the viewing port increases, textured elements become smaller and more densely packed together. 
A ground texture can also provide a size reference for other objects.

Texture

Definition textures imply a sense of depth as they aim to let you feel the surface of a visual element.

As distance from the viewing port increases, textured elements become smaller and more densely packed together.

A ground texture can also provide a size reference for other objects.

Example of texture creating depth

Bonus — 4 tools that may be useful in your designer way:

Crello — the simplest online image editor. A simple but powerful tool to create awesome designs for any social media format — posts, covers, graphics, and posters using the best software on the web. It’s easy! A lot of animated designs.
Webflow — all-in-one web design tool that allows users to design, build, and launch responsive websites visually.
Funnelytics — an incredible tool that helps you build the best marketing funnel mapping.
Flowkit — allows designers to create frighteningly fast user flows within Sketch and Figma.

Be free to send us any feedback by reply or reach us in DM on Instagram
Do you want to receive insights using FB Messenger or Telegram or Email? 👈 Subscribe now.

Related posts

Leave a Reply