Dogstudio has been voted SOTM April! Thanks to everyone who got involved and voted for their favorite site, the winner of the year's Professional Plan in our Directory can be found at the end of the article. Coming up we hear more about their award winning site.
Well, it’s pretty self-explanatory: We have been in need of an update of our website for a long time now and this was the perfect opportunity to come out with a *bang*. We pulled back our sleeves and tried to come up with the best way to perfectly represent Dogstudio, and the evolution of our brand and offer of services. We always have had a focus on creating usable experiences balanced with immersive experiences and this project was the perfect opportunity to mix everything.
More than just coming with yet another portfolio, we wanted to create something not only easy to use, but at the same time visually challenging and above everything emotionally engaging. Each layer of our website is supposed to add to the consistency of the global experience. Between the animated model, the work on texturing, the global experience, the asymmetric layout, and the sound design. We wanted people to experience Dogstudio the way we believe in it.
Do you want to highlight something from the project? any anecdotes?
First a funny anecdote: The 3D model was created nearly 2 years from now…We started rebranding and then we got buried under serving our own clients…project can pushed again and again, and it’s only here in the last 2 months that we did most of the heavy lifting.
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 was a real challenge. 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. Most of the design and development processes were made in one month, so we didn’t have much time to find solutions to 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 performance and device limitations thanks to this process.
Technical Details
In this project the server architecture is quite simple. It's an Nginx server with PHP installed on it to let us use Wordpress for content management.
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.
Thanks for getting involved and voting, the winner of the year's Pro Plan is @Marindessables, please DM us to get your upgrade