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.
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.
