Opacity and Overlay Techniques- A Modern Change in Web Designing

‘Opacity and overlay techniques’ is a quite casual technique in web designing. One can spice up its boring design into a charming and exciting one with simple touch of style. Opacity and Overlay Techniques provides a better option for going in deep and in a sense of realism with designing. Also gives you an appropriate choice for abridging the textures, images and patterns.

Whole trend of designing is similar but some variations are there while working. Same variations are there with the Opacity and Overlay Techniques in web designing. Learning can be done with going through examples and even with developing our own techniques by observing transparent and semi transparent real object around us. Those can be blurry, clear, light, dark, colored, warped and others. Through this blog we would like to explain how opacity came into website designing from the real world. We have described Opacity and Overlay Techniques by using real world techniques and examples.

Opacity and Overlay Techniques

First of all let’s talk about the Opacity and Overlay Techniques. Light overlay uses the semi-transparent white, which is used over an image or a pattern. Light overlay is just the opposite of dark overlay where we use dark backgrounds behind the images and text. You can say dark overlay have more attractive effect than light overlays. But still light overlays are more advance and modern in a web designing and gives us a care free and a lighter feel when watching such sites.

Let’s elaborate it with some illustrations.

Moradito

If you see the illustration properly this design has a light and bright mosaic patterns and does not give us a gaudy feel even used added multicolor background.

Moradito has used its pattern quite well as you can see the content is properly visible, fully opaque while overlaps the whole transparency. In this illustration transparency is not used for the website element like navigation and moreover focused for design purpose only.It is also useful for Opacity and Overlay Techniques.

Opacity and Overlay Techniques

source

Imaginaria

Let’s start our light overlay with this Imaginaria, It has used its transparency on the top navigation and header and somewhere for the block of content written below but still it maintains a soothing pattern.

In this illustration, we can see that where the element in the webpage requires more attention has given with the dark texture and other with the light one. If you see it properly the text written “From Farm to Market” has more transparency than others.

Opacity and Overlay Techniques- A Modern Change in Web Designing

source

Ben Sky

Another illustration that shows pure features of light overlay can be cleared with Ben Sky. This has used very light transparency in the two sections on the webpage. First one you can see in the area where quotes are written and another one can be seen in the primary navigation.

If you see the transparent and background area they are enough dark to use with white text and also light enough so that you can see the dark text written on the website also. You can call it as a unique blend where dark and light text can be seen at one section only and makes a profound impact with the help of Opacity and Overlay Techniques.

Opacity and Overlay Techniques- A Modern Change in Web Designing

source

Squarespace

Another example will also clear you mind regarding the light overlay. Where you can see the large backgrounds with on the plain white screen, some portion is dark, some portion is semi-transparent and some is used with large text, image rather than typography.

If you see Squarespace, the high contrast disturbs the content placed over it. Somewhere used so transparent that you can easily see the background text. But, overall it is creating a unique blend of dark and light transparency.

Opacity and Overlay Techniques- A Modern Change in Web Designing

source

DARK OVERLAY

Now in the modern web designing, an overlay with the dark grey and black is very usual. The overview is attractive and is mostly used with the slideshow or images captions and the small area of navigation. This overlay can be done with CSS, and most of the times with the PNG overlays, that is used as browser backup those which do not have CSS browser transparency.

I would like to first start with WWF site, a suiting illustration to the dark overlay. Below you can see the example where the header background has created a lot of pattern and can be called as semi transparent. This illustration has two main transparency areas and both are utilized for navigations. First navigation is on the top of the website for the general information about the WWF panda’s community with a large drop down department locator. Second, navigation is the bottom navigation showing set of transparent tabs.

Both the areas reflect the earthy pattern and adding extra attraction to the Earthy design.

WWF

Opacity and Overlay Techniques- A Modern Change in Web Designing

source

Second Story

Well as the first illustration was about the navigation elements with the transparency in the header. Now the next illustration is of second story site, this has entirely following another approach for dark overlay.

As you can see below, this website has semi-transparent feature with the large dark image background on the entire page. To maintain the website look, transparency is kept low.The transparency is kept low so that we text and the images added in the site is clearly visible and also not to distract the content written on the site. It can be a perfect example for dark overlay.

Opacity and Overlay Techniques- A Modern Change in Web Designing

source

COLOR MIXES

Now talking about color mixes, it can be a final trend if we see. It is not so usual that we often see this but used with fine and pretty neat effecting designs which reflect the color mixes clearly.

In some sections, semi transparency can be seen on base. And in others you can see the blend of several colors to create a unique blend.

Let’s get clear with some color mixes examples.

Firstly taking this example as it reflects the colors mixes efficiently. 24 Ways is a mixes of three main colors basically including pink, blue and grey elements. When mixed it gives a unique look. If you see them, they all give the semi-transparent look at different levels making unique color combinations.

This can be a perfect example for adding depth to the various designs. A diagonal pattern has also been used on the web page, kept simple and creates a balance in the website designing.

24 Ways

24-Ways

source

Oliver Kavanagh

Another example explaining color mixes can be cleared with Oliver Kavanagh, which has used a color combination of black and red typography. Both the colors are semi transparent and create a unique blend. Overlapping is done so neatly with all visible effects.

This website design has used large typography as the navigation. If can be seen as an excellent example of color mixes.

Opacity and Overlay Techniques- A Modern Change in Web Designing

source

WRAP UP

Working with transparency and semi transparency has brought a new modern era in the website designing and giving an attractive and sleek style to the webpage. That result in great web designing with a lot of variety. If you find

Opacity and Overlay Techniques

are  interesting then do write your comments and feedback.

Jennifer Adam

The area of interest of Jennifer Adam is to cater technologically advanced and powerful tool which works remarkably with multiple browsers and devices. Being a talented professional of inkyROBO, she is capable of implementing the innovative ideas and also loves to write inspiration blogs.