Something that I’ve grown fond of repeatedly saying is that space is a commodity in the world of web design. When the fact that there’s so much information you desperately want to convey is contrasted with the public’s ever shorter attention span, everything has to sadly be reduced into bite-sized talking points. As such, web designers have to be smart in picking what to display on screen and how they’re displayed. In this sense, web designers play a similar role to engineers in where they have to be intelligently efficient in using the limited amount of space they’re given with, and this skill is even more useful in the world of mobile web development where space is even scarcer.
As an example, when designing your homepage, you’re going to want to make sure that the background you’ve picked fits in snugly with the rest of the website. You don’t want an important part of the background to be obscured or cut off in an unsightly way but at the same time, you’re going to have to prioritize the essential elements of your website over the background since they’re just well, backgrounds. Two will not go into one, or will they? By manipulating an element known as opacity, you can actually make it so that two visual elements that are stacked on top of another are still visible as if they’re simply superimposed or overlaid on top of each other. Opacity isn’t just another efficient use of space; they could also make for a neat visual trick when used intelligently.
Layers upon layers of images
Opacity or transparency has been in use for quite a while now but like pretty much any other tool in existence, opacity is only useful so long as the designers in question know how to use them. The use of opacity goes hand-in-hand with colors and is typically used by placing textual elements inside a text box and then by messing around with the opacity of that text box. The use of opacity here is to still render the background visible without sacrificing usability but opacity also has the added benefit of creating the illusion of smooth transition between the website’s background and the foreground elements. In cases like these, opacity serves both a functional and aesthetic purpose and it’s why opacity can be such a useful tool.
However, pivoting back to the point made in the previous paragraph, opacity as a tool is only useful as long as you know how to use them. From the explanation above, using opacity in web development sounds pretty simple but in practice, it is anything but. In clumsy hands, opacity can instead have a distracting effect that would hamper usability, which is a bit like buying a car to make it easier for your commute but you end up getting late to work because you don’t know how to drive stick. Learning to live with opacity thankfully isn’t as hard as driving a manual and the following 4 tips should be more than enough to get you started with this versatile design tool.
Play around with contrast using opacity
Opacity is most often used to give a see-through quality to text boxes, providing, as I’ve stated before, an illusion of smooth transition between the website’s backgrounds with the foreground elements. With regular text boxes, the transition can be a little jarring as the background is cut off and this would also limit your choice of background images or text box placements as you don’t want the background image to be cut off in awkward places. With the smooth transition provided by opacity however, it is possible for you to sidestep this issue as the background would still be visible underneath the text box as long as you make sure the text inside the text box is still legible.
The function of text box was to provide contrast when there’s none to be found as contrast has an important role to play in your website’s usability. Take a look at ice hockey for example. With the puck being so small and the speed of the game so quick, the fact that the game is played with a jetblack puck on a white field makes it easy for players and viewers to keep an eye on the game thanks to the contrast between the puck and the field. With opacity however, this contrast is somewhat muted as the text box is made more transparent and designers have to play around with the level of opacity to ensure that the contrast provided by the text box is still sufficient for the text to be legible.
The ideal level of opacity varies between images
It’s a mistake to consider that there’s a one-size-fits-all solution to a problem as everything, however similar, is unique and while it’s possible to use what you’ve learned from a problem to solve another, a subtle tinkering or two is still in order. The same philosophy also applies to opacity as you can’t simply use the same level of opacity with every single background image. Even if you find that 75% level of transparency works best with one set of image, it’d be unreasonable for you to expect that same level would work with every image. For some, it might be as little as 25% so you want to make sure to mess around with different transparency levels until you find one that’s ideal for your current situation.
Using opacity on the whole site
The majority of the discussion on opacity so far has been on how to use them sparingly on text boxes but if you’re feeling bold, it is actually possible to use opacity on the entire page, wholly muting the whole background and pushing every other visual element to the forefront. It this specific application, the concept of opacity isn’t used merely as a visual trick but as an overall design language while still providing enough contrast for the foreground elements to pop out of the screen. This visual style can be useful when the background isn’t particularly relevant and merely there to reinforce the overall message and/or tone of your website.
Opacity enables you to use video as a backdrop
I’ve seen this trick being used by music-related websites where instead of using an image as a background, they simply use the video of a live performance as the backdrop thanks to the help of opacity. Using anything other than static images as a background can be really tricky so to pull off this trick, you’re going to want to combine this with the preceding tip and simply use opacity for the entire page. As a side note, the video you’re using here should be relatively simple and not one that has a lot of movement as that can be incredibly distracting.