How We Redeveloped a Media & Design Agency’s Website

Working with agencies can be extremely challenging. They always have strict requirements regarding the quality and timely delivery of services. 

Over the years, though, we have learned to give agencies the exact results they expect. We love working with agencies and the case we discuss in this post is a good example of a successful cooperation with one of them. 

The Client 

GDC Media & Design is an award-winning full-service design agency from Nuremberg, Germany. It provides a broad range of design services including UX design, digital design, print design, branding, and more. 

Among the awards that GDC Media & Design has recently received are the “German Brand Award ’22 Special”,  the “German Design Award Special 2022”, and others. The long list of their successful projects features Hive, Tadano, Sinascope, Geiler Schwede, and Mioty. 

The Challenge 

GDC Media & Design has an in-house team of highly professional web developers and designers with years of experience under their belts. However, the agency sometimes finds itself overloaded with orders and short on development resources. That’s when they hire us to handle certain projects and tasks for them.

This time around, the agency’s management was planning on relaunching their corporate website. We were contacted by André Wirth, the agency’s Art Director, who told us that they required our front-end and WordPress development services. 

That was a great honor and responsibility for us since GDC Media & Design entrusted us with rebuilding their own website.  

André provided us with the complete designs for two pages: 

• Front page
• Detail page 

Our task was to create markup and animations/interactive effects for them.  

Additionally, the client requested a hamburger navigation menu for a better user experience on mobile devices. 

André also wanted us to use the default page editor Gutenberg on the back-end. 

The Solution 

Technologies and Tools 

• To create the animations and interactive effects on the pages, we used the cutting-edge WebGL JavaScript API. The best thing about this library is that it requires no plugins, leveraging the capabilities of the hardware graphics acceleration of the user’s device. Developers can use WebGL in <canvas> HTML elements that render on any compatible web browser. 
• To build the default and custom blocks for the web pages, we used Gutenberg, as requested by the client. 
• To create the markup, we used the staple web technologies – HTML5 and CSS3. 

Interactive Effects and Animations 

Here are the effects that we added to the pages. 

Anchor navigation with smooth scroll

AJAX load more / Infinite scroll

Smoke animation

Project image parallax

Footer background animation

Hamburger menu

We also developed a hamburger navigation menu with items that become solid on hover. 

Custom mouse cursor 

At the client’s request, we created a white circular mouse cursor with a mix-blend mode, meaning that it changes its size when you hover over interactive elements. 

Magnetic buttons 

Finally, we added the “magnetic effect” to the buttons, as this animation illustrates:

The Outcome 

The client had some comments and update requests when we delivered the project for his review. For instance, on the back-end, we made a custom block with Gutenberg, whereas André wanted us to use a default one. It didn’t take us long to fix that. 

In general, the client was fully satisfied with the work we did. The GDC Media & Design website is now intuitive to interact with and easy to navigate not only on desktop computers but on mobile devices as well. It also has some engaging interactive effects and animations. 

We completed the project in 47.5 business hours which was broken down like so: 

• Front-end: 25 hrs
• JavaScript: 10 hrs 
• Back-end (WordPress, Gutenberg): 6.5 hrs
• Quality assurance: 6 hrs 

Want to be our next happy client? Let’s talk.