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 😊
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.
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
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.
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.