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.

• Use transparency to create contrast
• Don’t cover essential parts of an image
• Use transparency in varying levels
• Don’t think transparency will make text readable
• Use transparency in small spaces
• Don’t place transparency over images with sharp contrast
• Use transparency as art
• Don’t use transparency as a decoration
• Use transparency in the background
• Don’t use too many transparent effects simultaneously
• Use transparency with still and/or rotating images

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