Background: “After living amongst the Amsterdam canals for a number of years, the project was created as a design and content piece to celebrate the city's rich history,” says Brown. “Overall, it’s a self-initiated passion project that’s intended to live as an editorial-style digital experience, appealing to a broad audience.”
Design core: The site’s core feature is its use of a horizontally scrolling navigation to move through a number of magazine-like pages, each containing custom layouts of typography and imagery. The art direction is purposefully very bold, drawing its color palette from the Amsterdam flag and combining a number of typefaces together. Each typeface was chosen for either its historical look, readability or in reference to the shape of the canals.
Favorite details: The final balance between all of the site elements and how the content remains the hero. Special attention was paid to the motion design, in particular which typographic elements had transitions on them, which elements had interaction and how the images were treated during scrolling. We didn’t want to distract from the visual design, so we carefully balanced finding the most elegant solutions.
Challenges: The content. The first challenge was to decide on the overall concept, then coming up with the sections of the site and organizing the content for each. It involved lots of research via books and online, writing, and then sourcing imagery that could be paired with the copy.
Navigation structure: Inspired by magazine layouts, the site was designed to scroll sideways with “pages” sitting next to each other, left to right. In combination with the scrolling, we implemented dragging for a tactile feeling. Four anchor points were added to the beginning of each of the sections, which can be accessed via a fullscreen overlay menu.
Technology: HTML, CSS, JS and PHP are the languages we exploited on this project. The entire website is built from scratch, which means that no libraries or frameworks were used. This enabled us to only have 74 Ko (592 KB) of scripts before gzipping the whole project.
The main difficulties were to manage the horizontal scroll with the significant content (the document object model), and also to deal with the different layers: HTML elements behind the WebGL canvas, elements over it and WebGL layers between themselves. Because of the horizontal scroll, we had to render pictures in WebGL to prevent any janks on scrolling when an image comes in to view. The WebGL also permitted us to use parallaxes and scales on full-screen pictures without impact on performance.
We did a dedicated version for mobile devices with a classic vertical scroll. In this way, we didn’t need to use WebGL or a preloader, which makes the website really reactive—the most important thing for us in creating a mobile experience.