Loading ...

Responses by Bruno Choinière, associate creative director; Denis Poucet, art director; and Maxime Veilleux, web developer, Akufen.

Background: Montréal-based AR and VR creative studio Dpt needed to position itself as a pioneer in the art of storytelling through the use of new technologies. The diversity of its output required a platform to match the quality of its projects. Understanding that the site needed to speak to employees of cultural institutions and high-ranking people at technology companies equally, we had to keep its navigation clear and fluid throughout while creating an unusual appearance.

New lessons: Having a great relationship with the team at Dpt and knowing they are very interested and invested in the web and digital environments, we decided to work in a more “agile” way for this website. We had regular meetings with them to discuss each step in the design and development phases, which allowed them to be really involved in the process and for us to adjust things as needed. It was great to see them be more enthusiastic with each meeting, and their feedback was always positive. Their creative team also worked on the menu-button animations and the psychedelic 404 page.

Special navigational features: We decided to go through a different approach than the usual menu at the top of the page. We thought putting the main links in each corner of the page reflects the main activity of Dpt, which is transforming 3-D spaces in different experiences. Once we placed the menu and ensured it would be sticky as users scrolled down, we realized that every call to action sent the user to the same pages displayed in the menu. So, instead of putting links inside the pages themselves, we decided to send the user to one of the corners of the page with arrows. That decisive idea proved to shape many other elements of the website.

Technology: We are proud to say that this is our first project using our new development stack for 2021. This project is built with Nuxt.js, a Vue.js framework that makes a lot of things easier and faster to do, such as project structure, routing, SEO and server-side rendering. All app-related features were written in JavaScript, HTML and CSS. We used WordPress as a headless CMS to manage our back-end data and content. Our custom back-end functions were written in PHP. Apollo and GraphQL connect and retrieve our data for the app. We are also using libraries such as GSAP and its new ScrollTrigger extension to animate elements on scroll events, Swiper to manage our sliders, Lazysizes to lazy-load things, Lottie for our fun SVG icon animations, and Locomotive Scroll.

dpt.co

Browse Projects

Click on an image to view more from each project
X

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Subscribe
Already a subscriber or have a Commarts account?
Sign In
X

Get a subscription and have unlimited access
Subscribe
Already a subscriber?
Sign In