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:
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
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.