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