fbpx
WE CREATE BRANDS PEOPLE L♥VE
Share

How to Create Depth in UI Design? Part 1


Tegra - January 28, 2020 - 0 comments

How to Create Depth in UI Design? Part 1

How to Create Depth in UI Design? Part 1 ⭐️

Courtesy of @bazen.agency

Here are some new tips made by our own @bumble_bee_11 e at @bazen.agency about adding depth to a design.

Adding a sense of depth to a design can make that design seem more realistic and increase visual interest.

Since we are 3-dimensional beigns, the lack of one dimension on-screen means our compositions appear less than lifelike.

Adding back the illusion of the missing dimension will add back a sense of reality.

We hope you will enjoy these tips and find them helpful in your UI creations 😊

1 - Overlapping  The strongest cue for depth. When one object partially covers another object, leaving recognition of his complete shape, that indicates depth of space between them.

Overlapping

The strongest cue for depth.
When one object partially covers another object, leaving recognition of his complete shape, that indicates depth of space between them.

2 - Size & Scale  By placing different sized objects near each other, we create a perspective of size and scale that shows how deep our composition is the difference in size comes from a difference in depth.  Larger objects - Closer 
Smaller objects - Away

Size & Scale

By placing different sized objects near each other, we create a perspective of size and scale that shows how deep our composition is the difference in size comes from a difference in depth.

Larger objects – Closer
Smaller objects – Away

3 Casting Shadows  The depth, relative distance between objects, is increased by making the shadow blurred, larger and lighter and placing it further away from the object. 
If the shadow is smaller, darker, crisper and nearer the object casting it, the nearer the object is to the surface holding the shadow.

Casting Shadows

The depth, relative distance between objects, is increased by making the shadow blurred, larger and lighter and placing it further away from the object.

If the shadow is smaller, darker, crisper and nearer the object casting it, the nearer the object is to the surface holding the shadow.

4 - Location on the picture plane  The higher the object in the picture is, 
it is perceived as being further away. 
Like in our 3 -dimensional world - ground, grass and other surroundings are generally closer to us, and clouds, sky, stars and things we see above are away.

4 Location on the picture plane

The higher the object in the picture is, it is perceived as being further away.

Like in our 3 – dimensional world – ground, grass and other surroundings are generally closer to us, and clouds, sky, stars and things we see above are away.

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

Post a Comment

Your email address will not be published. Required fields are marked *