How to Use Shadow Effects in Conversion Focused Web Design

One of the things that makes Thrive Architect such a powerful visual editor is customizability. You can fine-tune almost every design detail of everything in your content. For example, you can add and customize drop shadows, inside shadows and text shadows to Thrive Architect elements.

In this video, we'll take a tour through the shadow effect features and we'll look at how to use shadows for conversion focused design.

Here's a summary of what is covered in the video, along with time stamps:

The Basic Shadow Controls

Starts at 00:45

When you add an outside or inside shadow to an element in Thrive Architect, you see the following inputs:

All of the inputs are designed to be easy to control via click and drag and you'll see the results update live, as you make the changes.

The "Always Bet on Black" Rule

Starts at 01:18

A basic rule for designing shadow effects is to always use the color black (hex value: #000000) and adjust the opacity/transparency. This results in shadows that look good on any background.

Here's why this is important: on a white background, there's no visible difference between a light grey shadow with 100% opacity and a black shadow with, say, 20% opacity. However, the black shadow will still look as expected on any other background color, whereas the light grey one will look terrible on anything except white.

There are exceptions, as you'll see later in the video. But as a rule of thumb: whenever you want something to look like an actual (natural) shadow, use black and adjust the opacity.

The good thing is that Thrive Architect is built with this rule in mind: whenever you add a shadow, it is set to black, 40% opacity by default.

The "Subtlety Rules" Rule

Starts at 02:47

Another general rule for shadows: less is more. Big, dark shadows with a lot of contrast against their surroundings often look ugly and distracting.

It's similar to the principle we looked at in this tutorial about how to use gradients. Subtle shadows look good because they look more natural (in the real world, you rarely see something and think: "damn, look at that shadow!").

A subtle shadow looks natural and still serves to highlight an element, whereas a strong shadow looks unnatural and out of place.

Text Shadow vs. Box Shadow

Starts at 04:12

CSS (cascading style sheets) is the language web browsers use to display the visual styles you see when you browse the web.

In CSS there's a difference between a "box shadow" and "text shadow". When you apply a box shadow to text, it actually applies a shadow around the block containing the text.

UPDATED: To apply a shadow to the individual letters, use the "text shadow" options in the shadow options in Thrive Architect.

At 4:50, you'll see a useful application of text shadow: increasing contrast and readability for text that is placed on a background image.

Using Shadows for Conversion Focused Design

Starts at 06:17

Since the focus in our products is always on conversions, what role do shadow effects play in this? There are a few ways in which you can use shadows for creating conversion optimized pages:

• Shadows add an affordance to buttons. An affordance is basically an implied "you can click on this/interact with this" message.
• Shadows change the visual hierarchy of elements. A drop shadow "lifts" an element above other elements, giving it a higher visual priority.
• Shadows can draw the visitors eye to important parts of the page. You can see an example of this here: how to create an animated, custom call to action ribbon.

Non-Shadow Shadow Effects

Starts at 08:00

Shadows can also be used to create designs that don't look like actual shadows. For example, on a button like this:

The "3D" effect is created by adding a drop shadow that points straight down, with no blur and a dark green color. A similar effect can be accomplished by adding a bottom border, but in this case, the button already has a border. And while you can't have more than one border on an element, you can combine a border with a drop shadow.

It's good to keep in mind that a shadow with 0 blur and a solid color doesn't look like a shadow. Instead, it can be used to accomplish other design effects that may be difficult to do with borders or background boxes.

Over to You

Now you're armed with all the features and know-how to use shadow effects (without over-doing it or creating a multi-shadow monstrosity like I did in the video). Let me know if you have any further thoughts or questions about this!