Inject Energy Into Your Mobile Design with Light Effects

Creating a great design is plenty hard enough. You have to consider so many different design principles and elements in order to create a meaning and enjoyable composition, and that is just a flat two dimensional image. There is an extra challenge when designing for a mobile application — the experience. User experience is a very important piece to any successful mobile design and aside from designing a usable clean interface, you truly need to design the experience. A fairly simple way to develop impact in your mobile design is through light effects.

Light effects have been spicing up graphic designs for years. It’s a great way to add interest, realism, abstractionism, or even energy to a bland experience. Some designers consider light effects to be just simply decorations or even a cheap fix to a bad design. However, used properly light effects can really make an impact on the overall design and experience, including your mobile web site.

Inject Energy

So, you have designed this really awesome layout; it’s perfectly balanced, has a brilliant color scheme, the composition is stunning and your type is perfectly kerned. But it still feels kind of dull and your app feels like it’s missing some personality. Inject a little personality and energy into your design with a little subtle (or even powerful) light effects.

Not only are light effects just simply cool sometimes, they are also pretty useful when trying to move the design from just a design to an experience. When light effects are done right, they can inject:

• Realism
• Dimension
• Mood
• Energy
• Creativity

Types of Light Effects

Believe it or not there are many types of light effects that you can use. Now, I’m not a photographer by any stretch of the word. I can’t even work the dial on my cheap digital camera, so I may be speaking slightly out of school on these next couple of sentences. But in photography there is essentially eight or so important light effects that are used to frame, highlight or simply enhance the subject.

1. Ambient Light
2. Hard Light
3. Diffused Light
4. Artificial Light
5. Back Light
6. Spot Light
7. Rim Light
8. Directional Light (sideways)

In mobile and graphic design, like designing for interfaces and layouts, we don’t really use all of these lighting types, but we’ll take these as building blocks and maybe even combine some of them into these six important types of light effects:

• Rim Light and Gloss
• Glow
• Shadows
• Back Light
• Soft Light
• Hard Light

Now lets jump into each type a little bit, show some examples and talk about the light effects used. Hopefully you can find some design inspiration from these examples and are able to inject a little energy into your next mobile design — experience.

Rim Light and Gloss Effects

Basically, rim light is the light that hits a subject from a light source from an acute angle. Rim light creates a bold light generally at the top of the subject with a deeper shadow below. Most the time a rim light is a slight or shallow light that shines at the very top of the subject, but can be pulled down into the subject to create a more glossy look.

This light is a very popular light effect used in mobile and even web design – probably the most popular. A really great example of a deeper rim light in mobile is the pre-rendered view iOS adds to your icon… I affectionately call it “the Bib”. Here are some more examples of rim light and gloss in mobile web design:

Back Light

Back light is pretty much what is says: it’s light coming from behind the subject. Back lighting creates a nice silhouette of the subject and can even make smaller objects stand out in the light. Back light can be used to create softer edges, depending on the contrast or brightness of the implied light behind the subject – the more light the softer the edges.

This isn’t an effect that is used a ton in mobile design, but it is a really good way to highlight a list view or navigation by creating a really nice contrast. It is also another nice way to create a glowing element, the next effect we’ll talk about. Here’s a couple of examples of subtle back lighting being used in mobile design.

Glowing Effect

Glow is actually used quite a bit in mobile design and is a great way to make a flat color or background stand out a bit more. If you are looking to add some more visual interest, then glow might also be another choice. Glow is created behind the subject similar to back light but it may not be a solid light that creates the glow.

You could use soft shapes, linear gradients, radial gradients or even an uneven soft gradient or blurred image. Contrasting colored backgrounds can also make an easy glow effect. A soft-edged brightly colored object laying on top of a dark or even black background will also create a nice glow. Glow can also be used more subtly to create a nice, calming ambient light effect over your entire app design. Here are a few mobile web sites that have taken advantage of a glowing lighting effect.

Soft Light

If you are looking to calm down the energy in your app design, try using some soft light techniques. Soft light is pretty much diffused light that is more evenly spread throughout the entire composition. Soft light attempts to reduce contrast in the subject and its relative elements.

The soft light look can be created in mobile designs by using a monochromatic or analogic color scheme, or really just a color scheme that has a very soft contrast. Also, blending elements into each other more instead of having hard edges, borders and strokes will also create a soft light look. Just think about less contrast and you’ll be okay. Here’s is couple of great examples of soft light being accomplished in mobile web sites.

Hard Light

Forget what I said about lowering contrast. If you want a nice hard light effect think contrast, contrast and contrast. Hard light is a direct light on the subject. It creates deep contrast between bright light sources and dark shadows. Hard light is pretty easy to create by using a complimentary color scheme and adding some deeper shadows and brighter lighting sources on gloss and glowing effects.

If you are looking to simulate a high gloss button, make sure you use a very bright, even a white highlight on your rim light effect combined with some deep dark shadows on the other side. The use of hard light is the quickest way to inject energy into any design, here’s a few examples.

Shadows

Shadows are a simple and great light effect to use when you need to add some dimension or visual interest. Shadows are created by any form of direct light source: rim light, hard light, back light or glowing effect. Any subject that is lit will create a shadow of some sort, so don’t forget to add the shadow as the opposition to your light source.

Deep drop shadows can create depth. Softer, lighter and more evenly spread drop shadows can create a softer look while still adding depth. A high contrasting shallow drop shadow can create a nice bevelled look to buttons and text. Again, here’s a few great examples of using shadows to create a more visually interesting mobile design.

Experiment with It

Adding light effects to your mobile design is a simple and great way to spice up the design as well as alter the mood of the design. There is probably way more light effects that can be created but hopefully this gives you some ideas to begin experimenting. Light effects are actually pretty fun to mess around with and mobile devices offer a great medium to do so, especially if you really want to make a design to mimic a more physical, real-world interaction. There are a lot of buttons on a mobile device view generally, so try to make them interesting so that the user doesn’t fall asleep while navigating through your mobile site — it doesn’t have to be boring.