Sickdesigner

You know how, often times, clients demand that your design needs to pop more? Well, welcome to part 2 of our 5 part miniseries filled with easy to follow tips and tricks to get that lovely design of yours to pop! In this episode: Lights & Shadows.

Light and Shadows

Lights, and the shadows they cast, are one of the most important realism factors in design. Our eyes and brains are used to decoding the real world by analyzing and interpreting these two elements. Of course, we understand the world around us by interpreting a myriad of factors but in this episode, we’ll just focus on Lights and Shadows, or LS. Proper usage of LS can make a design feel more natural, break monotony and provide visual interest to key areas.

So how do we use these elements to make our design feel more natural?

Tip 1: First, we need to choose one, or more, light sources. As a rule of thumb, start by using only one light source at the top center of your canvas. This step should be done at the very start of the design process. This way, you can easily design all the elements in your project by referencing the light source.

Tip 2: Using LS implies, you guessed it, being subtle. A harsh, contrasting, singular light source is going to look cheap and steal the user’s attention from the actual content. Which is kind of a bad thing to do. LS, like all the tips in this miniseries is a design aid meant to enhance your project’s content, not overcome it.

While buttons, backgrounds and other graphical elements should be affected by any lights in your canvas, elements that will become markup (paragraphs, links, headings etc.) should not be affected.

Tip 3: Use the opposite rule: if you have a light coming from the left side, then the shadows will be right angled. Another thing to keep in mind: the closer your are to the light source, the smaller and more sharp the shadow becomes. And if you’re just starting out with this stuff, you can test how lights and shadows interact with real world objects by playing around with a reading lamp. Sounds silly, but it works.

Tip 4: If your light source has a tint, then it’s natural that said tint will affect other design elements and compose colors. For example: a yellow light hitting a blue button will, naturally, result in a slightly greenish tone.

01

Aran Down uses a central light source in a very interesting way: shadows, in this case, provide visual feedback about depth. Because the top three pieces have a large shadow they appear to be slightly elevated, as opposed to the sliding panel below it, which has very subtle, short shadows.  There are also other depth layers in the design, at a smaller scale, like the sliding panel navigation arrows or the logo picture. See if you can spot them all.

02

Volkswagen uses horizon and shadows to convey the idea of depth. The two cars in the back appear to be further away because they leave a smaller shadow. Sure, the scale change helps as well, but we’re only talking about LS here. Sure, Volkswagen could have taken the extra time to blend the shadows better (they’re a bit chopped off) but it’s still a pretty good example of how simple LS can make a design feel more natural and interesting.

03

Without its central light source, FLIPP‘s website would’ve been flat and unpleasing. An excellent example of how a bit of light changes everything. But just so I don’t blow too much steam up FLIPP’s back layer, that large metallic text really could have used some texture and a better blending with the light source. That is, it should fade to a darker gray towards the sides.

It’s the little things that make a design POP, so remember: you should design with subtlety and strive for that over-circulated ninja status we’ve all been reading about….little grasshopper!

by Liviu Dobre