iLikeTofu

Ever since sliders were introduced to web design world, they have revolutionized the way of presenting featured products/items.

Sites having a slider on home page experienced a much higher CTR to their featured products. For an experienced web designer, implementing a slider is pretty simple. The code basically consists of a container with navigation controls and looping content. A slider is the most engaging visual component of a site, so it should be designed with extra efforts.

Designers create different variations of sliders using transitions but they have not yet explored the myriad other ways to make the slider even more engaging. In this article, we have highlighted 8 creative ideas that will help you design an innovative slider.

Experiment with Parallax effect

Parallax scrolling doesn’t need any introduction and is growing in popularity. Many legacy sites are gradually making a move towards implementing Parallax to keep up with competitors. As a result, the unique charm of Parallax is slowly fading away with time but if it’s implemented wisely then it can still create the ‘Wow’ factor. A perfect example of this can be seen on Matthieu Tourdes’s website.

Parallax effect

Matthieu Tourdes’s Portfolio Site

He has created a stunning slider by combining Parallax with Sensation of Depth. The slider looks fresh, intriguing and alive.

Utilize Three.js

Many of you might have heard of this powerful JavaScript library that offers numerous functions. Although there are some cross browser compatibility issues but if you can work through them then you can create effects that are hard to produce with other libraries out there. You can see live example of this on Booreiland’s site which features a highly engaging animation with liquid wobble effect. Gradual effect of the animation increases viewer retention on site.

Booreiland

Booreiland

Bring out the Artist in you

Traditional artistic approach in web design will never go out of fashion. In fact, designs created using artwork looks even more appealing. The reason is simple, artistic approach has it’s own charm and authenticity attached to it which can never be achieved using modern design techniques.

iLikeTofu

I like tofu – Homepage

Just have a look at www.iliketofu.eu. As soon as you land on the home page, you get enthralled by the artistic and ornamental scenes. Each slide is packed with artwork & motion, making it vivid. The navigation is also designed cleverly using circular elements which turn into preview icons upon click. Overall, the slider looks fantastic.

Try a different Angle

Ditch the regular horizontal or vertical sliders. If you want to impress your client with a futuristic design then create carousals that slide in diagonal directions. Not sure how it would look? Take a look at ufomammoot.de’s home page.

Ufomammoot

Ufomammoot.de

The guys at Ufomammot have taken slider design to a whole new level by taking visitors to a random direction on each move. The unique slider along-with the futuristic design of the site really makes it look out of this world.

Exploit Colors

Don’t underestimate the power of Color. Usually designers use color to set the underlying theme of the site. For instance, business sites invariably use a Blue & White color combination. However, the role of color is not limited to this, you can exploit the true potential of color to create some jaw-dropping sliders as can be seen on Laborfit.com.br site.

Laborfit

Laborfit.com.br

Each slide is designed using nothing but color. The slides have a unique radial shape combined with smooth animation. The end result is just awesome and draws visitor’s attention towards the center of the slide. Selection of colors inspired by material design further enhances the design.

Be creative with Transitions

The good old transitions are designer’s favorite when it comes to Slider design. However, you can achieve some very refreshing design using transitions by making use of unconventional effects.

Transitions

Workshop.ddd.it

Team at Workshop.ddd.it demonstrate this technique really well. The unconventional transitions between slides stand out enhancing the user experience.

Make use of Block Reveal Effect

Block reveal effect is the latest trend in slider design where the content is revealed in a schematic box. This kind of design is very popular now a days because it offers a playful and a professional look at the same time.

Block-reveal

Exteta

Exteta.it illustrate this effect nicely with a highly engaging slider design.

Split in half

By using Split layouts and sliders together, you can create some fabulous designs. Split layouts enable you to display two parts of information separately but at the same time which immediately draws the attention.

Innovative Slider Design

www.7h34.fr

A fine example of this concept can be seen on 7h34.fr site. The design team behind this site have made use of a split layout and spruced it up with subtle animations. The resulting design is eye-catching and conveys the message visually.

As can be seen from above designs, even the most trivial elements of the interface can give you numerous possibilities. Hope you like these 8 inspiring, creative and cutting edge solutions for designing a kick ass slider.