Emotions of SoundAmplifon

Visit

Getting Emotional

The web is coming on leaps and bounds and as browsers become more advanced, we're able to express emotions in interesting ways - shown more clearly than ever within this sound-based interactive survey about exactly that - emotions.

Collateral

Website

Involvement

Design, Sound Engineering & Interactive Direction.

This project was completed at Epiphany Search

Visit The Guide

Simple Exploration.

The Emotions of Sound is an 8-question interactive questionnaire which gathers emotional responses to a range of sounds such as a happy child and tinkling bells, to then give a user back how they compare to other users who have also been taken through the piece.

The piece is visualised directly to best emanate emotions, through a morphing blend of colours which twist, turn and whirl into absorbing and engaging results. Animations throughout softly but swiftly blend upon the entrancing 'mood' backing track.

Google Chrome's (and Opera's!) excellent webkit-filter property allowed us to create an innovative interface which reacts to how a user is feeling (when hovering over answers) by morphing to appropriate colours to suit the particular mood, while simultaneously keeping image sizes amazingly low for the interesting visual result gained.

Emotion Morphing

Illustrator Gradient Meshes are used to blend one colour into another, while an object image is applied with Multiply, Overlay and/or Colour Burn on top with a touch of texture to sink them into the colours.

The feel and vibe of the animating loops are created using image-swapping to rotate the blends and move the object image, with colour hue-rotating to the parent element to give the colour warping effect.

Results Phase.

Results for each sound are shown upon answering each question, giving the piece a second function of allowing users to learn one-by-one, how other people react to sounds compared to themselves.

Area pie charts show the data next to one another while the interface continues to blend and morph behind - this morphing allowed us to get away with slightly riskier than normal type decisions, as white text will always at some stage be placed upon a darker background.

Other Browsers & Conclusion

The site is still respectful of users who aren't using Google Chrome - with image fallbacks to still represent emotional feedbacks, but simply using a new set of images to produce this effect.

As shown below, once a user 'feels' their way through all 8 sounds, they are then given how often they react to sounds emotionally like other people who have taken the test, this result then being individually sharable.

Give it a try