Revamping and supplementing a design with custom animations

Eigen Fabrikaat

Scroll

THE PROBLEM

A new website to suit their unique proposition

Eigen Fabrikaat is a unique marketing agency where individuality comes first and foremost. “Standing out by being yourself” is a quote that is reflected in the creed of this innovative company.

However, a small problem occurred at their headquarters: their website was so outdated that the agency’s own unique character was difficult to find. Of course, we gladly helped fix that.

Visit Eigen Fabrikaat

Partners


Eigen Fabrikaat


Deliverables


Design refinementUX DesignDevelopment

THE CHALLENGE

Bringing the website into 2020

Eigen Fabrikaat came prepared. They had drawn up a clear briefing and had their own well-developed designs and wireframes in place. It was up to us to refine and animate their designs in such a way that the final website was 2020-compatible. We tackled this challenge by doing a number of sessions with the client, in which we worked out a motion graphics concept and set up a development backlog.

THE CREATION

Great project ownership

We took the cool design by Eigen Fabrikaat and tweaked it for a better User Experience (UX). Besides, we have structured the proportions of all pages. Because Eigen Fabrikaat knew exactly what they were doing and clearly understood the added value of certain aspects, we were able to create some very nice engaging elements. For example, we designed and animated a fullscreen menu to enhance visitors’ experiences and hid smaller animations everywhere on the website.

MAKE IT MOVE

Bringing it all to life

The process of animating the website started with delivering the design to our motion designer, Sander. He thinks about which elements are suitable to animate. We base this decision on a number of principles: what looks good, what is practical, and what is nice to look at when animated. Of course, we also take into account the parts of the website that should draw the most attention. Where possible, these are given an animated touch. To give the website the zest that characterizes Eigen Fabrikaat all too well, we also created a number of custom animations.

GETTING TO WORK

Animations for a vibrant experience

At Wirelab, we have the fortune of employing a number of developers that have specialized in building and implementing animations. For example, using the Bodymovin plugin, Folkert implemented the advanced animations on Eigen Fabrikaat’s new website. The page loader, cookie bar, and menu are interactive and several smaller animations are triggered when you hover over them. That makes the new website a lively experience for the visitor.

BUILDING IT

Bit of building, bit of hacking

We built animations in all different shapes and sizes, and sometimes even ‘hacked’ them into the system. Some animated things must, of course, be adaptable by the end-user. We made this happen by writing a custom animation in JavaScript, like the header. The text in the header can then be adapted by Eigen Fabrikaat to their heart's content.

THE RESULT

A crate of Grolsch...

Not only Wirelab comes from Twente, but the project owner at Eigen Fabrikaat is from the region, too! That's why we thought it would be an endearing addition to deliver a crate of Grolsch to their office, together with their brand-new website. And in addition to the beers, the actual end product was very well received by the employees and customers of Eigen Fabrikaat. The cases are now much clearer, the website is far more interactive and easy to navigate, and it’s all wrapped in a sleek design that breathes the unique character of the agency. It’s very 2020, it’s very quirky, and most importantly, it’s very Eigen Fabrikaat.

MOVING FORWARD

Keeping the website (a)live

A website is not a static being and should be updated in terms of content, design, and software. The work doesn't ever stop! Together with Eigen Fabrikaat, we are in a continuous development process. We’re taking the next step in terms of automation, KPIs, and lead generation. Next up: a HubSpot demo with our very own Cheryl.

LET'S CREATE TOGETHER

How can we create your perfect digital solution?

Get in touch