Masking in Website Design – 10 Fantastic Examples and 6 Ways to Get Started

  • Share
  • Share

There are a whole slew of ways of conveying an overwhelming first impression. Starting from adopting original fresh ideas like abstract dynamic animations and ending with sticking to traditional and time-proven means like a catchy slogan, the designers are spoilt for choice, possessing a quite arsenal in their hands.

The diversity is staggering, yet still photo manipulated ‘welcome’ sections occupy the leading position, looking much trustworthy and beneficial. It can be a picturesque landscape scene, spectacular cityscape shot, stationery-themed composition or mind-blowing professionally-treated surreal photo. What caught our eye recently was a professionally re-imagined double exposure effect.

It is not just a typical superimposition of two images that you have seen a million times; it is something more unusual and striking. Thanks to clipping and masking that are available in CSS the technique has undergone changes, having become even more powerful tool for drawing attention. The developers employ not only static multimedia but also videos and short animations as well as opt in favor of various shapes thereby giving front pages a certain ‘wow’ factor. We have built up a collection of 10 websites that thanks to this solution won its place in the sun.

Inspiration

  1. KLM iFly 50

The team has implemented a smart idea that provides the front page with a fantastic layering aesthetics and a cutting edge feel. The outstanding take on a double exposure magnetizes with its liveliness, dynamics, powerful natural vibe and feminine notes. It is certainly strong. Sound effects only strengthen the impact, delivering an immersive user experience.

  1. Nurture Digital

The website owes its beauty to vector approach paired with inventive traits. The interface is clean and minimal, yet it is highly engaging, visually appealing and has that very piquancy that makes people stay. Each slide is personified by a letter taken from the agency name. It serves as an improvised ‘window’ to the works done that lifts the veil of each portfolio piece in an intriguing manner. What’s more, the mouse cursor is accompanied by a relatively big spot that lets peek under the overlapping canvas. Such behavior is also created with the help of masking.

  1. Poignee de main virile

Much like the previous example the website greets the online audience with a full-screen slider that has a nice twist. It breaks away from the traditional horizontal carousels thanks to a helping hand from clipping and masking techniques. Two bold stripes that elegantly enter the page and can be slightly extended on a mouse hover are here for two reasons. First of all, they give zest to the front page; and secondly, they bolster the brand identity by echoing with the logotype.

  1. Craze

The team leans more forward minimal utilization of masks that results in a pretty impressive outcome. The homepage exudes an image of elegance, modesty, and creativity. The technique of double exposure is used to demonstrate a video that gives the page a subtle sense of motion. It strikes the eye and fulfills its purpose well.

  1. Alexandr Mocreac

Before entering the personal portfolio of Alexandr Mocreac, online visitors should meet an aggressively simplified splash page that, surprisingly, serves as a strong opening. Intricate logotype that is placed in the heart of the page is a centerpiece that creates the whole buzz. The artist turns masks to his advantage enhancing the first impression with just one element. The idea is simple yet brilliant.

  1. Sons of Gallipoli

The website is enriched with numerous outstanding details, scenes, and tweaks; and the double exposure piece that is made with the help of masks is one of them. Not only does it add visual complexity to the interface and finish off the composition, but it also contributes to the journey, embellishing the story and making it more interesting and captivating.

  1. Personal Portfolio of Nicolas Lanthemann

At first sight, it seems that the website is pretty plain, but give it a try. Although the artist capably embraces minimalism, yet he is managed to enrich the interface with impressive details, including both static and dynamic ones, and at the same time, remain faithful to the direction. The ‘welcome’ screen is marked by a small geometric piece that thanks to masks elegantly incorporates little more personality and creates an intrigue.

  1. Akiuwine

Here masks are used to take the display of portfolio pieces to the next level.  These original installations that are made from transparent and solid non-static triangles look fascinating and offbeat. The solution plays perfectly well with the overall aesthetics and prevalent geometric vibe. They keep the theme alive and user experience cunning and sapid.

  1. Adidas Climazone

Typography in tandem with masking and clipping forms a powerful alliance that in a subtle way is able to pull off the sophistication and make the entire design stand out. The recent Adidas’ campaign can boast of lots of trendy features such as layering aesthetics, duotone effect or overwhelming videos. Nevertheless, the titles and slogans that may seem lost in such a motley environment always remain on the surface thanks to this winning combination, which naturally intensifies the lettering.

  1. Heroes of Tomorrow

The front page is a bit content-heavy; however, skillfully arranged focal points allow the visitors to follow the flow swimmingly in a required way. There are two details that strike the eye immediately: huge title and a picture of a man on the right. While the first one gets its visual weight from bold capital letters, the other one charms with its intricate outward achieved with the help of overlapping technique paired with videos.

Where to get started?

We have compiled a short list of tutorials and code snippets that serve as an excellent starting point if you want to create something alike.

  1. Double Exposure Effect Photoshop Tutorial by Spoon Graphics

This is a fantastic video tutorial that is a must-have for all the newbies. It lasts less than five minutes and covers basics and several advanced techniques that lead to an impressive surreal double exposure effect.

  1. Photoshop Tutorial: Create double exposure photos in Photoshop

Tigz Rice shows the simple way how to combine several photos together and recreate a fascinating depth between them by making some parts transparent and some solid.

  1. CSS and SVG Masks By yoksel

To understand how masks work in CSS you should visit this pen. It includes an explanatory material with supporting code snippets and illustrative images.

  1. Text mask with mix blend mode by Jon Reece

For those of you who are perfectly aware of a routine of reproducing double exposure effect via masking and clipping, there is a code pen that demonstrates text mask in practice. Use it to spice up titles of your website.

  1. Netflix Sign In Concept by Mike Cheshire

The video behind the logotype is so neat and clean that the solution can be quickly adapted to various projects. Scan the code to get the hang of the essentials.

  1. Text masking with Snap.svg by Rachel Smith

Rachel Smith gets the most out of Snap.svg, a pretty powerful JavaScript library. The effect is simple yet prominent and effective. Find out how to put masks and abstract animation together.

Conclusion

Masking and clipping hide a great potential, opening vast possibilities to the designers and developers. Used wisely they are able to create dramatic attention-grabbing masterpieces that enrich user experience. The examples above show that paired with videos, the re-invented double exposure effect looks best.

About the author

Nataly is a web developer from Sevastopol, Ukraine. She runs a blog for web designers and developers where you can find some inspirational and useful stuff. In her spare time she reads books, unlocks secrets and plays volleyball.

Leave a Comment