Responses by Tom Eele, creative director; Barend Eijkenduin, junior designer; Ruud Luijten, developer; and Ruben van Grinsven, front-end developer, Gewest13.

Background: This website is part of our total branding for Nieuw Bergen, a real estate area developed by SDK Vastgoed in the city of Eindhoven, Netherlands. In area development projects like this, it’s important that everything ties together properly. We took the architecture of the buildings—the characteristic roofs with 45-degree slopes that add more light and livability to the neighborhood—and tied it to the branding to communicate Nieuw Bergen’s identity. We also named the seven buildings after the seven prismatic colors by Isaac Newton that form the spectrum of white light.

The aim of the website is to make prospective residents fall in love with this new city district. While no stone has been laid yet, we wanted to tempt the target group to sign up for the project through an experiential website. The visuals and images are of high quality, and visitors are constantly tantalized by the lifestyle they could embrace in Nieuw Bergen. Over the next twelve months, we’re going to roll out a smart online campaign to reach the international target audience.

Design core: Forming the heart of the website is the presentation of the buildings, which appear as large digital posters with a nod to classic print movie posters. All functionalities are either built around this presentation or set up for it. The posters are very large images, yet the loading time is minimal thanks to invisible technology that contributes to the overall experience.

When users enter the site, we wanted them to visually understand what Nieuw Bergen is with a huge portrait timelapse animation that moves while you scroll. In this visual, the Nieuw Bergen area transforms from evening to nighttime. We created a sequence from about 30 high-res images and animated it using the native Canvas API for a better performance.

Time constraints: Fortunately, the client gave us the space and time to work out the total concept properly. This also gave us the opportunity to experiment with small value-adding features, such as the 3-D feature in the buildings. It is important to have a good relationship with clients; they must be able to trust that the extra time they invest will pay off.

Navigation: The website uses two different types of burger navigation: a site navigation and a building navigation. The site navigation gives users all the information regarding the project: the iconic architecture, the central location and overall project information. The building navigation lets users switch between the seven buildings with a horizontal slider. The buildings are the main characters of this website, so we thought it was important to give them central positioning in the navigation as well. That’s also why the buildings are featured in several call-to-action banners on the pages. We’re always searching for the fine balance between experience and conversion.

Technology: We always tend to go for a modular approach on our projects. That means every component or module can be used on every page, which gives you a lot of options on how to build the site pages. We used WordPress to store all our data and handle flexible layouts. Some other tools we used for the site were GSAP for most of the animations, Highway for custom transitions, and virtual-scroll for smooth scrolling on all pages and in the buildings slider.

For the building navigation, we created a smooth parallax effect on the slider images, which you can either scroll or drag through.

On the building pages, we wanted to visualize each heading in the biggest way possible. For each building, we created a “fake” 3-D header where you can rotate the building and its surroundings by moving your cursor on the image. This effect is built with PixiJS where we manipulated the static image with a grayscale depth map.