Responses by Gil Huybrecht, design and Baptiste Briel, developer

Background: Ark-Shelters are prefabricated, fully finished modular units. The shelters are built in one piece, which gives people the incredible mobility to reach their dream locations, whether it’s by a lake, deep in a forest, at the edge of a field, a steep mountain hill or at your city rooftop. Ark-Shelter’s website was managed by Ollie, a design and strategy studio. Gil Huybrecht took care of the design, while Baptiste Briel took care of the development.

Highlights: The website is completely built around the idea of inspiring users with video and images, using a minimal style that doesn’t compromise information retrieval by users. By using just one font and only black and white in the design, the main focus is on the images and videos. We enriched the whole experience with smooth micro interactions, like the cursor that says, “drag me” on the slider instead of working with regular arrows and transitions; and the sound of nature. These are all in line with the philosophy behind Ark-Shelters. The core feature of the website is definitely the sub navigation for the purpose pages.

Navigational structure: The structure of the website is built around the purposes that Ark-Shelter can be used for: It can be lived in, worked in or relaxed in. Apart from those three main purposes, there is also a page for custom projects. Those four pages make up the heart of the website. Every page can be shared as a landing page, and has its own contextual loading animation. To tie these purpose pages together, we built a sub navigation where you have all the purpose pages next to each other and can see the video before you click on a purpose. These navigational features make the whole experience more fun and high-end.

Technical features: The site was crafted from scratch in HTML, CSS and JavaScript. We used Backbone.js as a base JavaScript framework. We also used TweenMax for animations and timelines, and Three.js for video and 360 viewing experiences.