work
blog
about us
jobs
contact

we are supersteil
team
clients

Taking interaction to the next level

A new branding also meant a new state-of-the-art website for Sound of Data. It needed to be 'futuristic', and that's where we came in!

Combining the newest HTML5 and CSS3 animations with smartly applied JavaScript and jQuery, we created eye-candy interactive visuals to help Sound of Data present their complex technical

solutions in a user friendly way. We, at Supersteil, always aim to overplease the client and with this project we feel like we raised the bar for our own standards.

"Is this for real? This is pure..."

Jeroen van Velzen (CEO)

An interactive welcome

You don’t just visit the Sound of Data website, you go on a whole visual tour through their services

With three large interactive visuals that link to corresponding product pages, a quick overview of the latest news items and animating counters displaying Sound of Data's client interaction, the homepage gives you a clear idea of what the Sound of Data website has to offer.

Services

It feels like 3D, but it’s simply magic

For Sound of Data's three service categories -"Travel", "Customer Care" and "Media"- we created several objects in a 3D space to demonstrate what each service means. The initial design had the 3D objects visualized within. Soon after the development started we realized that some objects had to be completely redesigned to be shown exactly from the front which when hovered over with the cursor would rotate into 3D space. This brought more interactivity and realism to the design.

A touch of personality

At Sound of Data everyone is equally important

With 32 employees, working together as a team to deliver a top-notch customer service, Sound of Data is like a one big family. To emphasize this, ten randomly chosen employees are placed on the page on each visit.

On the "Why us" page, we placed five unique objects supported by text explaining what makes Sound of Data the ideal partner to work with.

News... but fun to read

Interactivity doesn't have to stop on a less interactive page

For the "News" page we created an amazing little script that looks at the item's image height before deciding where to place it. With infinite height possibilities, a slider to filter between the categories and a user-friendly archive-search function, the news page is guaranteed to look highly dynamic and visually pleasing.

Contact

For the best travel, customer care and media solutions you will need to be able to contact Sound of Data. A pull-down interactive map with a custom location pin and fold marks makes even the normally oh-so-boring contact form something special.

Final Designs

Oh, and it responds to the accelerometer!

Launch project

Tweet

disclaimer

twitter / facebook / dribbble