This slider has a friendly and slightly retro design that uses white and grey. It would work well on websites with both light and dark backgrounds.
The main slider has a white border with a drop-shadow that creates a three-dimensional ‘frame’ effect. It has slightly rounded corners, which helps make it feel friendly and reinforces the ‘retro’ look.
Hovering over the slide brings up two navigational arrows, one on each side. These are small arrow-heads on a white square. The arrow heads have a slightly embossed look, and the squares have rounded corners. The use of grey shadows on the navigation arrow helps it feel friendly, tactile and not too stark.
Clicking on an arrow cycles you through the images.
There is a caption in the bottom left corner. It is quite a large caption, that emphasizes the text. It has dark text on a white rectangle with rounded corners. The use of shadows helps keep the background rectangle from being too stark, and the caption as a whole is semi-transparent which allows the image below to show through. The text looks slightly embossed, which reinforces the overall tactile feel of the slider.
The font used is Merriweather Sans, a semi-condensed sans-serif font that has a traditional feel. It is designed to be legible in low-contrast situations, so works well with the semi-transparent caption and is very readable. The big font and clear text makes this a great slider for websites aimed at slightly older audiences who often struggle with small text on screens and really meets accessibility guidelines for the visually impaired.
There is a series of white squares with rounded corners along the bottom of the slider. These boxes correspond to the different images in the slideshow. When the box linked to the current image on display, it turns grey. Again, the use of shadows and a slightly embossed effect helps the slider feel three-dimensional and tactile.
Hovering over a square brings up a preview of the relevant image and clicking on the square loads that image into the main slider. This allows the user to navigate to the images they are most interested in.
The default change effect is called ‘squares’. This divides the image into lots of squares and loads the replacement image one square at a time. It is an eye-catching transition, with a lot of movement. Almost any change effect would work well with this slider design. ‘Brick’ and ‘cube’ would both reinforce the tactile, three-dimensional feel of the slider, whilst ‘seven’ is quite similar to ‘squares’ but explodes the image off the slider.
This slider design would work well for software and IT companies aimed at an older demographic because it is so user-friendly and friendly in feel.