Do Use Transparency in Web Design!

Let’s figure out some basics of the use of transparency in web design. All of them are rather logical and understandable when you read current statements on the web. However, they may cause serious troubles in practice when you start building a website with high level of opacity.

That’s what you should pay attention to the use of transparent sections when designing a layout.

Transparency was thought out to make texts and images more understandable for users, that means more contrasting and evident. When using a multi-colored background or text over a picture it can be hard to create sufficient contrast to showcase content in a proper way. Beginner designers can fail on this stage and create an inconspicuous or irritating for eyes objects. Thus be careful when playing with images opacity.

Whether you’ve ever designed transparent content sections or not it’s always better to know what is OK on the modern web. So let’s go ahead and find out design elements that are very easy to become wrong with. We’re going to find the solutions that everybody can apply for online projects.

Transparent Elements Location

A lot of designers are sure that transparent backgrounds ensure good texts readability. In most cases it is true but not that much. When applied in wrong places it can harm the look of the entire design and bring other elements effect into nothing. When choosing placements for transparent sections try to avoid ‘hiding’ important image parts that relate to what’s saying on the page. For readers it is very easy to lose a sense of purpose of the site when content doesn’t coincide with the background. Don’t confuse visitors and provide a clear layout and readable texts.

Tony Chester, a web design firm owner from Saudi Arabia, uses a transparent layer to feature a short information about his business. On the site you can see two levels of opacity depth that are perfectly combined with the photo of Tony. In this example transparent effect is realized really good and it compliments for the designer.

Tony Chester

Very often you may need to add some text over image slides. Transparent bars can help you a lot with it. Any figures are good so you may choose a strip, circle or a rectangle that are the most popular shapes for content sections. Below you’ll see examples of different shapes with adjusted transparency settings.

Construction Website Template

Suavia

White Colored Interior Website Template

Portfolio Website Design

It seems a tricky thing to apply transparency effect to multiple images. But if you select these images in similar color schemes you may achieve good integration of the transparent bar with graphics.

Richness of Transparency

There is no perfect level of opacity to apply to your project to look great. Every design is special and requires its particular settings that are inappropriate for any other site. So don’t try to copy somebody’s work just because it looks nice. Find out your own recipe of a perfect transparency range.

If you want to have several transparent sections on a page play with opacity levels to find out the best option. However if you’re going to make a content background over the main website background you should choose lower transparent ranges just to lighten content sections. Don’t make them scarcely visible because in most cases it looks bad and destruct viewers impression.

Remember that you have to be a really cool designer to create large website sections touched with transparency. If you’re not so much professional you may think of applying transparency to small spaces like navigation bars, banners, titles, buttons, etc. As example we chose the Housing Works website that adds slight opacity to text sections over the header image slider. This fine technique works great within different site elements.

HousingWorks

Pizzaza is also a gorgeous design that has several interesting features to surprise you. Now we offer you to take a close look at the menu panel. It is illustrated and animated and, what is more, menu tabs are placed on a transparent black panel. The whole look of the site is just great!

Pizza-za

Transparency Doesn’t Mean Readability

There are people who are not competent in web design but from time to time they need to create something effective. Taking into account the extend use of transparency on the web they may decide to adopt the technique to make more attractive and influential designs. The idea is great (the best designs are commonly stilled, revised and renamed), but the realization is far from being perfect.

Texts won’t be more visible and readable just because you use transparent content background. This intermediate layer has to coincide with both website background and content placed over it. Current color hues, contrast and images does matter.

There are several examples of websites where transparency improves text readability.

West City Hotel

The GreenHouse

Blurb Creative

Transparency Can’t Be Accidental

Transparency is a full-fledged element of web design just like colors, shapes and animation. It can’t be used accidentally or just for fun. As there is a reason to brand a website in red there has to be another reason for using opacity masks or RGBa color variations. A thoughtless use of the effect can’t help driving understandable messages to users. In opposite, it can have a strongly negative impact on your site’s perception by visitors.

Try to search for perfect techniques instead of using casual tools and your designs will be special just like they have to be.