Responses by Anthony Du Pont, senior front-end developer, Dogstudio
Background: Thirteen years ago, a group of friends created Dogstudio. Since then, the agency has evolved through our websites, as well as our branding. Now in 2019, we have reached another milestone in the life of our agency; and boy, what a milestone. We wrote an article to explain this change, and we wanted to rethink our website and branding to better reflect the new direction we are taking.
Highlights: With no doubt, the core element of the website is the interactive 3-D dog that represents us as Dogstudio. While discovering the website and our projects, the look of the dog changes to show that Dogstudio can craft emotional award-wining projects, but can also adapts to its client needs.
Challenges: Integrating the 3-D dog inside a website along with keeping good site performance, so that our target audiences—including clients, prospects and new profiles—would be able to navigate smoothly. At Dogstudio, we love to create emotional projects, and it was a requirement for us to make users feel emotions on our own website, through the interactive 3-D dog, sound and animations. The problem was that combining all those requirements can result in poor performance and create an unusable website, which was a no-go for us.
Navigational structure: To keep an immersive experience, we worked with a custom transition manager called Highway that helped us create page transitions and get rid of the native hard-reload feature of the browser. This enabled us to play with the sound and reveal animations during navigation as well.
Time constraints: Most of the design and development processes were made in one month, so we didn’t had much time to find solutions to tackle those problems. Finally, using the right technologies and taking device limitations into account lead us to this final result that runs smoothly on the most-used browsers, phones and tablets based on our website analytics from those past years. We learned a lot about web performances and device limitations thanks to this process.
Technical features: We used classic HTML, CSS and JS—with a bit of unicorn dust—to make the magic happens. The unicorn dust comes from our stack, which currently includes Webpack and Gulp, to let us use SCSS and ES6+ features to write modern and maintainable code supported by major browsers. The 3-D dog is manipulated with Three.js and TweenMax to give him life while most of the content of the website is managed with Wordpress.