Opacity and Overlay Techniques in Web Design
Variations in opacity and overlay techniques are a very common trend in web design, and can bring any boring design into the modern era with a touch of style. It's great for creating depth and a sense of realism, and can often times be a better alternative than cutting off images, textures, and patterns.
While the overall trend is the same, there are many variations when working with opacity in web design. We can learn a lot through examples, and even come up with our own techniques by examining transparent or semi-transparent objects in the real world. They can be clear, blurry, warped, dark, light, colored, and more. In this article, we'll look into some examples and techniques of transparency in web design and also how opacity in the real world has transferred over to website design.
An overlay with black or a darker gray is the most common we see in modern web design. The look is sleek and it is used most often for image or slideshow captions, or small areas of navigation. This trick can be done simply with CSS, and often times the use of a PNG overlay as a backup for browsers that do not support CSS transparency in browsers.
The WWF website is a very nice example of this. The header's background creates a lot of pattern, which can lead to more interest for areas of semi-transparency. This design has two primary areas of transparency, both used for navigation. One is the top level navigation, with general information about the site's community, and a large dropdown for a department locator. The bottom navigation is a set of transparent tabs. Both areas mimic each other to create repetition, letting the earthy pattern show through, and adding sleekness to the otherwise Earthy design.
While the first example just used navigation elements within the header for transparency, the Second Story website has an entirely different approach. The site features a large image background, and the entire page is semi-transparent. In order to achieve this look and still have good legibility, the transparency is low. It is low enough that we can clearly read the content on the page, and low enough that it is not distracting from the content as well. However, it still allows the image behind it to peek through enough that the pattern is not broken abruptly, and we have a nice affect.
A light overlay is just the opposite of a dark overlay - when a semi-transparent white is over a pattern or image. While dark overlays may have a more sleek effect, a light overlay can still modernize a web design, but give it a much lighter and care-free feel.
This design has a very brightly patterned mosaic background, something most designs cannot get away with without looking gaudy. Moradito pulls it off well though with the use of light transparencies to help break the pattern and tone it down in large areas of the webpage. Then, for areas of content, a fully opaque white overlaps the transparency. In this design, the transparency is not used for any particular design element such as navigation, it is used for more of a design purpose solely.
Imaginaria uses some transparency for the top header and navigation, as well as a block of content below, yet it overlays a very subtle pattern. The overlay in this example is used as a great way to separate and gain attention for elements that need more hierarchy. The pattern continues in the imagery and texture of the background, but the transparent portions lighten the area to draw the eye. The second portion, leading to the "From Farm to Market" case study is more transparent, allowing for the more important portion of the large background to show through.
Ben Sky uses a very subtle light transparent overlay in two main areas of his site: the quote bubble area and the primary navigation. Again, we see a pattern of transparency areas being used for navigation, and using the same amount of transparency for his quotes separates the area visually from the rest of the content, drawing attention to it.
The background and transparent section are just dark enough to use white text, yet also light enough to use dark text as well in the navigation. The design is a large background, another trend we see with web designs that use transparency, and although the background texture is subtle behind the transparent areas, it still makes a profound impact.
On Squarespace, we see a large background, but what's unique is that this large background isn't an image or pattern, but rather typography. The high contrast could easily distract from the content placed over top of it, but enough transparency is used for easy legibility, while at the same time creating a unique effect and having the typography behind it still legible. The typography background in this design acts as a label for this section of the site, another creative quality to this design. It's also nice, and a break in the pattern, to see the date for each blog post outside the post in another colored transparent element.
A final trend we see, which is not as common, yet can produce some pretty neat effects design-wise is color overlays. In some cases, a semi-transparent section is one base color, and in others it is several colors and varying opacities playing together and blending to create unique effects. Whichever route is taken, for colored transparencies in web design, the transparent sections tend to take a lot more attention than with basic light or dark transparency effects.
Oliver Kavanagh uses a play of red and black typography, both of which are semi-transparent and blend together. They overlap and create some neat effects visually, while also adding some abstract depth to the design. This design uses large typography as the navigation, and hover affects are created to let the user know this - hover effects also dealing with transparency. When a red word is hovered on, the transparency lowers, and when a dark word is hovered on, it becomes more opaque.
The overall background is textured with imagery to the right, and a few more transparency effects for repetition. Overall, the texture is consistent so it does not seem overwhelming, but provides a nice effect for the semi-transparent text.
24 Ways mixes red, blue, and gray elements, all which are semi-transparent at different levels. They all interact with each other, creating unique color combinations, and adding depth to the design as well. A diagonal pattern spans the majority of the page, but is kept simple to balance out the complexity of the transparent effects in the header and throughout the rest of the design.
2am offers a burst of bright semi-transparent color over a black and white photo, and other plain black and white elements throughout the page. This two-toned web design is kept simple through the use of colors, but obtains a lot of interest by using the large photo header background and transparency over the top. Using transparency helps bind the content in the overlays with the brand and overall design, while the burst of color helps to separate them visually into their own distinct purposes.
Tutorials & Resources
There are so many different techniques that can use transparency in web design. Sometimes it just takes following some tutorials and looking through other resources to get a full grasp of them all. Below are a few design tutorials, as well as some tutorials and snippets for CSS and PNG transparency on the development side.
- Design a Transparent Website Layout in Photoshop
- Graphic Design Studio Web Layout
- Design a Transparent Website Layout in Photoshop
- CSS Transparency Settings for All Browsers
- CSS Image Opacity / Transparency
- PNG Transparency Fix in IE6
Working with transparency in web design is a common trend, but it can immediately provide a sense of sleekness and style to any webpage. Better yet, the design trend can come in so many varieties, and be used in so many various portions of a website, that a design can still be creative and original in its style and implementation.
What are some of your favorite examples of transparency and overlay techniques in web design? Feel free to share examples and discuss various techniques.