From our sponsor: Create stunning brand assets with the help of our AI-driven Creative Assistant. Get started today.
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.
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.
a very inspiring reading! nice work Carrie ?
Very nice !
I’m very glad to see that you have not shied away from promoting readability in this article. Among design showcases generally, that is sadly rare, so it is really good to see it discussed here. The chosen designs are mostly very attractive, too.
There just one or two examples that do not completely follow your good advice, though. For instance, a couple of screenshots partly infringe the principle of not placing text over sharp contrasts. I know that the people with cognitive disabilities with whom I test would struggle with some parts of the text in those designs. For them, sharp lines in particular can interfere with cognition. For me, the very first screenshot has some unreadable grey text, though that is mostly caused by the very low luminance ratio and only partly by the translucence. (I have the same issue with some parts of this website, too.)
Another important caveat, which I don’t think that you mentioned (other than the good advice to test thoroughly), is robust CSS. I see many designers using only RGBa values for these effects with no solid Hex colour as a backup, because they forget about the real-world need for graceful degradation. It is easy, by using the cascade, to specify a solid colour and override it elsewhere so that contrast is not lost when RGBa is not supported. The same principle applies to multiple background images.
You always rocks carrie!
Great post, not only for use of transparency but also just great inspirational designs in general!
Great article, very inspiring and full of good advises, an other great point to add can be.”Keep the text not transparent in a backgorund with transparency. This was an issue i came across in a Web Porject, i figured it out thanks to this post http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/
Thanks for a very informative article. You should update the example links, though. Some are dead