Beyond Glitched: Using Distorted Images in Web Design
It began in 2017 when designers started to play with the glitch effect. It was seen everywhere: videos, animations, and of course, images. This effect perfectly blended into a wave of nostalgia that took both the virtual and real worlds by storm.
However, the time has passed. And even though TV series centered around the 80s and 90s like Young Sheldon or Stranger Things are still in the lead, 2019 promises us some new trends and obsessions.
These days, the glitch effect is experiencing a decrease in popularity. However, it has managed to give life to another stylish solution: distortion in image display. It is gaining popularity among designers each day.
The approach is quite universal. While it may seem at first that it is another smart idea for enriching transitions between slides, it can also be paired with various details of the interface. Even a simple static image block can benefit from it.
Let’s take a look at some examples that show this new trend in action.
Yuen Ye
While it does not feature a traditional distortion effect in our understanding, nevertheless here the images are still deformed. The artist was able to pull off a realistic curtain-like effect that forces the pictures to fly in the wind while you are scrolling down.
In such a modest environment and minimal design, the effect simply shines. It makes the entire website look sophisticated and simply outstanding.
Dallara Stradale
No one can say that the official promo website of Dallara Stradale is boring. The site is a true masterpiece, much like the car created by the Italian-based team. It is packed with innovative features to meet the ideology of the product itself.
So it comes as no surprise that here, every detail counts. And every aspect is modern and stylish. The fantastic image distortion effect that accompanies each shift between the main sections on the homepage fits like a glove.
It transforms simple scrolling into a performance, giving each area a dramatic entrance. What’s more, thanks to its blurriness, it naturally imitates a sense of speed that is also a characteristic trait of the Dallara Stradale.
Planetary
While in the previous example, a feeling of speed lies in the heart of the transition effect, here a trendy liquid-like effect tries to win over readers with its flowing nature. As is often the case, here the image distortion effect is used in the home screen carousel.
Instead of an annoying sliding effect, we can enjoy a lovely transition with a smooth nature and charisma that gives every scene change a twist. What’s more, the effect also corresponds with the nameplate of the agency – strengthening the extraterrestrial high-tech atmosphere.
Max Colt
The personal portfolio of Max Colt, a world-recognized visual effect producer, also features a distortion effect. Much like in the case of Planetary, it improves the shift between the slides in the carousel that depict the most impressive works by the artist. It has the same charisma, due to its water-inspired nature, yet it looks a bit different in comparison with Planetary’s solution.
Bizmates
This website stands in startling contrast to the others in our collection, thanks to its geometric-based distortion effect. The other examples are centered around a ripple effect that twists the images. Here, the relatively wide vertical panels and rhombuses deform the surface of the scenes.
The solution goes perfectly well with the overall boxy vibe, making an important contribution.
1MD
1MD is the first example in our roundup where the distortion effect does not accompany any shifting. It is just used in one of the sections presented on the homepage to set it apart from the others.
Not only is it a part of an animated background, but it is also a medium for giving the tagline in the middle some spice. As a result, the section is inspiring, whereas the call-to-action that leads to the “About Us” page looks clickable and alluring.
Precision Run
The team behind Precision Run also goes for a similar route. Yet this time, they use this trendy solution to make a simple static picture an eye-catcher.
Here the homepage includes retro-inspired elements like duotone coloring. The distortion effect that is skillfully paired with the double exposure adds a wonderful old-timey feeling to the entire interface. It perfectly plays with everything else on the website and effectively places the image into a spotlight.
Sass Café
The team behind Sass Café shows a different way to derive benefits from distortion effects. They have combined the effect with masking and mouse interaction, transforming the hero area into a playground.
A clean black canvas with two bold taglines greets the online audience at first. If you start to move the cursor around, you will notice that something is hidden inside. There are two background images. Each one comes into focus when you hover over the tagline. The rest of the time, the picture stays heavily deformed.
The solution drums up the interest from the get-go. It is just a brilliant idea.
Ada Sokol
The personal portfolio of Ada Sokol is also marked by the little tendency of messing around with the image display. This is another example in our collection that steps aside from the usual well-worn path and used in tandem with the mouse cursor.
As you may have already noticed, the hero area accommodates several titles that represent the works of the artist. Each title is supported by a picture that appears when you hover the mouse cursor over it.
In this case, when you move the cursor, the picture leaves a trace of distorted graphics behind. It reminds of the situation when a graphics card lacks the necessary bandwidth and can’t keep pace with the user’s movements. This original solution naturally encourages us to play with the website, thereby making us stay for while.
Adding an Unexpected Twist
Standard image effects are still in favor, yet you have to admit that they have lost a desirable “wow” factor. It becomes more and more challenging to draw attention with the help of well-worn sliding or bouncing.
So, it is not surprising that developers are always trying to come up with something new to keep their websites compelling. And the infamous distortion effect that used to be avoided now saves the day.
Even though the solution implies a deformed and twisted appearance, it is still quite universal. It plays nicely with various details. But it’s not just sliders that benefit from it.
As practice shows, the technique perfectly collaborates with solutions based on mouse cursor interactions and regular scrolling. The effect makes ordinary things look refreshing and inspiring.
The post Beyond Glitched: Using Distorted Images in Web Design appeared first on Speckyboy Design Magazine.