A Material Design inspired slider with effective communicating animations.

What is Communication Design?

A recent example of communication design would be Google’s Material Design language which has transformed our view on how it’s possible to communicate with the end user.

“Communication design is a mixed discipline between design and information-development which is concerned with how media intermission such as printed, crafted, electronic media or presentations communicate with people.” -Wikipedia

How it works

When we hover over a square, a.k.a a menu item, we get a preview of what that slide looks like. This communicates to the user whether they can expect text, or an image, or both. The animations are simple CSS transforms triggered on :hover and the slide animations use the same CSS classes but are triggered with jQuery.