Sliders taken to the next level are no longer considered something new. Although they are certainly regarded as extravagant and sophisticated, however tendency of enriching carousels with stylish features and effects was born several years ago. Therefore, in 2020, it only continues to grow and mature.
Developers combine tools that enhance performance with tools that were created solely for entertainment purposes to tell a story about the brand in full color. Let us consider some exceptional examples to see how the latest instruments revamp one of the essential elements of the hero area and find out whether they improve or ruin the user experience.
Collection of Sliders Taken to the Next Level
Sandy Dauneau has one of the most original sliders on the web.
While in a core, there is nothing special. It is just a horizontal carousel spruced up with the standard transition effect. The deal is that the artist steps away from the lavish solutions and skillfully embraces the ideology of minimalism. At the same time, she uses charismatic animated illustrations to present her works. This fascinating symbiosis brings about an outstanding result.
However, what about the practical point of view? Well, the slider works consistently across various viewports. The idea and quality do not suffer. While animations may slow down your PC a little bit, still it is not critical. The Pingdom gives Sandy good grades in performance.
As for delivering the message, the idea of using animated illustrations is excellent; however, this abstract approach does not give us much information, though it certainly drums up interest.
Emanuele Mitella also shows everyone how a minimalistic approach can bring benefits. At first sight, the slider looks almost ordinary. However, the situation changes when you start to move around the screen. It becomes evident that it is packed with modern tricks.
First, a multilayered layout creates a wonderful sense of depth. Secondly, a vertical rhythm gives spice to the titles. Thirdly, transitions are incredibly smooth. Finally, an outstanding liquid effect triggered by the mouse makes interaction playful and engaging.
Personal portfolio of Emanuele Mitella is a rare occasion when many tiny modern features are brought together under the same roof without overwhelming users. The deal is that minimal approach helps to hit the balance as well as deliver the message without much ado. On top of that, smooth transitions, as well as liquid behavior, contribute to user experience.
Even though the slider is intricate, it is still easy to use thanks to the intuitive interface. As for performance, according to Pingdom, it takes nearly 1 second to download completely. Impressive.
Although the team behind Cusp did not pursue the minimalistic approach like Emanuele Mitella, still these two websites have many things in common.
Again, you can see how the smooth liquid behavior sets the tone to an innovative one transforming slider into a playground. Despite overwhelmingly big titles, the densely packed together layout still creates a feeling of minimalistic approach. Also, the vertical axis adds some extra points to overall originality.
However, there is a fly in the ointment. There are no traditional controls. Besides, if you try to drag the scene, you will move to another page instead of the next slide. In a word, the user experience is a bit confusing, though certainly intriguing.
Unlike the previous examples, the home screen slider of Foudamour has a charming awry feel. The transition between slides nicely complements the lopsided layout. The overlapping technique, in tandem with flat style, gives the slider a traditional magazine appeal. As a result, everything looks as intended: lovely, and professional, exactly what the doctor ordered for a wedding photography portfolio.
As for drawbacks, there are a few. First, the scene is a bit messy. You constantly fail to read the name of the website on the back that is a bit frustrating. The title of a slider lacks contrast. Finally, yet importantly, there is no previous button so that you are obliged to move forward only.
The idea is fantastic. However, it requires a bit of polishing.
Clarity has an outstanding hero slider that, despite its modest structure, looks and feels incredible. Much like in the first example, here, each slide is a subtle 3D scene. However, this time the parallax effect powers it. As a result, interaction with the slider is pleasing and comfortable. Circles, bubbles, line style typography, and some other fine details produce a powerful general impression.
There is just one thing. The carousel has 3 slides that are featured on the screen altogether. At some point, it is an exciting solution. However, when you hover over the first title, its accompanying image appears right near the third option, and vice versa. This causes a slight confusion. You cannot connect the dots properly. Therefore, a small polishing is required.
Everything is so bluish here. The website radiates of businesslike vibe that ensures reliability and trustworthiness. The design establishes a serious atmosphere, so does a slider. It perfectly blends in.
The team has adopted slightly reimagined traditional tricks. For instance, here, you can see a classic sliding transition effect that, thanks to the shutter effect applied to the typography, feels modern. The modest mouse cursor also has an ace in a hole. It becomes much bigger once it hits CTA.
As for user experience, there are some flaws. Although the dragging works perfectly much like the scrolling, however, at some point, it feels like controls such as prev and next buttons may come in handy. What’s more, since images on the back are made in duotone effect with blue as a core, at some point, you can lose sight of the cursor that may be a little confusing not only for those who have vision problems but also for other people. As for the rest, the slider is a mere pleasure.
The personal portfolio of Constantine Kiriaze is another example where the hero slider is teeming with modern dynamic features. Although the transition between slides is merely conventional, the hover effect is what worth your attention. The artist was managed to bring distortion effect into play here. The idea is brilliant.
However, since this is another slider with scroll or drag navigation, it is here where the problem occurs. Again, there are no obvious controls that are a bit intimidating for regular users. And, the dragging is a bit unpolished: sometimes it does not work correctly. These tiny defects upset the overall user experience a little bit, yet still, the message is delivered.
The homepage of Studiovs is a full-screen vertical slider. What does make it so unique? Well, there are several things. First and foremost, transitions between the slides are beautiful transformations of background shapes. Secondly, accompanying effects for the appearance of each block of the scene are charming. Finally, the layout is neat, clean, and moderately intricate.
Thanks to such a modest yet perfectly structured layout, the audience gets the point straight away. Unlike the previous example where lack of visible controls is confusing, here, scrolling and numbered navigation on the right side are enough.
The official website of Studiovs is a perfect example where dynamic effects and modern features were used wisely. The team did not sacrifice user experience in favor of extravaganzas and still managed to pull off a fantastic user experience.
You can adopt various approaches to take slider to the next level: dynamic effects, beautiful transitions, intricate layouts, animated illustrations, mouse-triggered effects, trendy features, etc. While this will undoubtedly bring more focus to your works and produce quite an impression of your company, you should still exercise caution.
Some tricks may be outstanding at first sight. Nevertheless, if they confuse users at some point, for instance, ruin the comfortable experience or upset optimal readability, then they will do more harm than good. Therefore, it is good to take banal sliders to the next level; however, finding the balance between extravagant solutions and enjoyable user experience is even better.