Ready to kick off your UX design career? Announcing the new and improved UX Academy. Learn more here — next cohort starts May 15th!

View all articles

Welcome to Part 3 of our series of tips to help you use Sketch more productively. In Part 2, we looked at useful techniques for editing objects and exporting graphics. This time, we’re going to focus on how you can apply your skills in Sketch by managing light and shadow in a composition.

 

21. Over the edge

Placing one element over the edge of another expresses tension or movement. In this example, the circle seems to be pushing or pulling the rectangle.

 

22. Combine light and dark to create depth

Light shades appear closer (more to the foreground) than dark shades.

 

23. Monochromatic variation mimics folded surfaces

Positioning rectangles of similar shades close to one another can give the impression of a folded surface, like a piece of paper. 

 

24. Spotlights create hard shadows

Spotlights create hard shadows, because they emit directed light at high intensity.

 

25. Diffuse lights create soft shadows

Use diffuse lights to create a soft shadow, which can be recreated using blur effects. To achieve this, select an object, and adjust the Gaussian Blur setting in the Inspector.

 

26. Use the distance between an object and its shadow

By changing the distance a shadow has to its parent object, you can create the illusion of distance between an object and a surface. In this example, the object resembles a bouncing ball.

 

27. Multiple light sources

You can illuminate objects with light from multiple sources. Create this effect by copying and flipping rectangular shapes to mimic beams of light, and then adjust the opacity setting for each object.

 

28. Horizon line

By introducing a horizon line to a composition, you can create a sense of perspective and viewing angle.

 

29. Overlapping objects

By overlapping shapes and text, you can create associations between the elements of a composition. By doing this systematically, you can form distinct groups, which contribute to visual hierarchy.

Thanks for stopping by! If you’re a Sketch beginner, why not let us know in the comments how you’re getting on?

More Sketch Tips

If you’d like to learn the fundamentals of contemporary design, Designlab offers a Design 101 course that combines online lectures, curated resources, hands-on exercises and expert mentor support. Find out more about Design 101.

As a Designlab student, you can also get 50% off the price of a Sketch license. Find out more about student perks.

About Designlab

Designlab teaches you UI/UX design skills through online courses with 1-on-1 mentorship from expert designers.

Get Updates

Be the first to read our new articles on UI/UX design education, career development, and more!

Got it! We'll keep you in the loop.

Get the syllabus & take a tour