Using Transparency in Web Design: Dos and Don’ts

Creating a web design using transparency can be both beautiful and tricky. Transparency is the effect created when a color block, text or image is “made thinner” or desaturated so that the color is diluted and what is behind it shows through.

The effect can be quite stunning when executed properly – creating a great place for text or as a way to bring focus to a certain part of an image.

Designers must be careful though when using transparency. The effect can be tricky to do well, as readability is often a concern. Transparent boxes and text at the wrong levels can also be distracting and take away from the overall design.

Following is a set of dos and don’ts – with examples of sites executing transparency beautifully.

Do Use Transparency to Create Contrast

The No. 1 benefit to using transparency as a design technique is to create contrast. The effect allows designers to establish a focal point with a clock of color, big text over an image or as a varying color screen with dimension.

Transparency can also be used to help text pop off a background that may not showcase it as well.

It is especially important to consider contrast when working with transparencies. A transparency will only work with both the image (or background) and text are readable. When considering a transparency effect, ask yourself: Will this make the text/image easier for users to understand?

Don’t Cover Essential Parts of an Image

Transparencies should not cover parts of the background or image beneath it that is important to the message. Be aware of what is “lost” when determining placement of transparent frames.

Do Use Transparency in Varying Levels

There is no perfect level of transparency. For some projects an 80 percent transparency is ideal; for others 15 percent may be best. Play with varying levels of transparencies for each project.

Don’t Think Transparency Will Make Text Readable

Just because you are using a transparent box for text does not mean the text is automatically readable. Think about contrast – both in terms of the transparent box to the text and from the background image to the transparent frame.

When using a transparency for images, colored boxes or text, it is vitally important to consider the readability of the words. Remember, your message will not be communicated if design effects render text illegible.

Do Use Transparency in Small Spaces

Transparencies are not just for the main part of your site. This effect can work great in small spaces as well.

Think about using a transparency to show off navigational tools or as a hover effect for buttons and clickable elements. Just try to not go too crazy with multiple transparencies. Pick an element and transparency style and stick to it throughout the site design.

Don’t Place Transparency Over Images with Sharp Contrast

Because of readability concerns, it is best to avoid using transparencies over items that already contain elements containing sharply contrasting elements – think pockets of black and white or colors that are opposites on the color wheel.

Using a transparency over these types of elements, unless really saturated can have a negative impact on your design because it can be difficult to create the correct effect across all parts of the background. Consider a tint box instead.

Do Use Transparency as Art

Transparencies are not just secondary effects. Consider creating a dominant image for your site using this effect.

A large transparency can be a striking way to create contrast, emphasis and visual intrigue.

Don’t Use Transparency as a Decoration

Transparency is not an effect to add as an afterthought because you are bored with the design. Using this effect as a decoration is a surefire way to get into a design pickle.

The use of transparencies should be planned and thought out in advance. Transparency is not a simple effect such as bolding and can look sloppy and unprofessional if not done well.

Do Use Transparency in the Background

Transparent effects are not just for elements at the forefront of your design, this effect can be used on background images as well. Some of the best transparent elements are subtle.

Other transparencies may fall in between image layers. Tony Chester’s site for example uses a brilliant set of layering techniques with transparency to create a multi-dimensional design.

Don’t Use Too Many Transparent Effects Simultaneously

Limit use of different type of transparent effects to one per project. Transparencies should create distinction, contrast and visual interest. Using too much of a distinctive effect such as this one can be distracting for users.

Do Use Transparency with Still and/or Rotating Images

The use of transparencies is not limited to a single-page or still design. They can also work with varying images and backgrounds. Use transparencies in both ways.

Creating a transparency for rotating images can be one of the most tricky executions of the effect, but also one of the most impressive. Think about multiple background images careful. Choose images that have similar color and contrast schemes so that a single transparency will work while image backgrounds move behind it.

Pay careful attention to how the transparency fits over each image so that you maintain the integrity of each image, create a readable photo or other background and text and maintain visual consistency.

Conclusion

Experimenting with transparencies is a great way to expand your design repertoire. Like many other effects, use this technique sparingly and test the design in multiple environments to ensure that it works and looks as you intended.

The biggest challenges with transparency are creating it so that text is readable when interchanging images are used and ensuring that the transparent item does not cover the wrong parts of what is beneath it.

Experiment with different levels and uses of transparency – with images, with backgrounds, as a hover effect – to determine what works best for each project.