Das Buro Creative Agency

Challenge

Get inside the client's head to manage expectations

As a creative agency, your website must be of good quality to show the world what you are good at. Creativity has to jump off the screen. Das Buro came up with a creative design and a wish list for animations at Slik. Das buro knew how to deliver a good design that could make the animations should work technically. Now for the technical implementation.

The challenge: to get inside Das Buro's head to get a good idea of their ideas for the animations. Our goal was to build a smart WordPress website that meets Das Buro's expectations on the back and front, with extra attention to the animations.

Animations

Animations with Javascript and Lottie.js to make the website shine.

The website of Das Buro contains animations throughout the whole website. Animations are small, moving interactions on a website. We also call them micro-animations. Small animations can often be seen in icons, buttons or arrows that move or change color when you hover over them with your mouse. They are not immediately noticeable, but they still give you as a user an 'extra feeling'.

Click through the website yourself and discover the various small and larger animations. Or walk through it with us:

• Go to the website of dasburo. A video starts immediately, without sound. Click on 'play with sound' and you will witness a subtle transition where the video starts again and the content fades out.
• Click on 'Projects', scroll down and see what happens to the navigation. Depending on the background color of the images, the text color of the navigation changes. For this we used CSS mix-blend mode. This code specifies how elements should blend relative to each other 🎨
• At 'Projects' there is a lot to be seen, thanks to the moving images with the projects. Das Buro can upload videos in .webm format via WordPress. WebM is a file format specifically used for online video sharing. Videos in .webm are less heavy to load and still contain a high quality. Good for the performance (speed) of the website. Google also prefers this technology a lot more. 😃
• Scroll through the 'Projects' page over the images. If you hover over this with your mouse, the shape of the image will change. Impressive! This also happens with the sections 'Projects insights' and 'The latest gossip'.
• Now click on one of the projects. Wow, did you see that? The project page slides across the website with a smooth transition. It makes us warm 🔥. For this transition, we created an illusion with Javascript. As soon as you click on a project, we first color an area over the entire page with the color that belongs to the project. Then we send you with Javascript to the project page, so that you will the illusion of a transition.
• Scroll through the 'Process' page. You will encounter all kinds of animations at the different bullets. We made these special animations, which play in the background while scrolling, with Lottie.js. This is a technique with which you turn animations from Adobe After Effects into an animation that is customizable with Javascript. With Lottie.js, we link the animation to how far you scroll down. This way, a textual page is still visually attractive.
• Now that you have seen all the animations from previous points, you may have noticed that there are even more animations on dasburo.nl. Such as, for example, the delay in loading content when you scroll. In other words: delayed online scrolling. An interaction with a major impact on the user experience that we like to apply in our projects.

The customer

It’s all about building brands

With a solid foundation and some good brand DNA, Das Buro ensures a unique positioning of brands. Brand DNA with a vision that inspires, a mission that ignites an inner flame and the values that the brand constantly demonstrates. Das Buro breathes new life into brands through a brand plan.

With a strong team of strategic thinkers, designers and creative marketers, this agency works daily with the most beautiful brands and special projects. Would you like to see more of Das Buro and the special website with animations? Then quickly visit the website!