Edifícios Nuevos.

Edifícious Nuevos is the architectural platform of Pieter Sitsen. It's a place for him to talk about his vision of architecture, sustainable materials, and how to renew the old to bring forth the new. Edicíous Nuevos translates to New Buildings in English.

Read more+

Pieter is a renowned Dutch architect and partner at the architectural firm KOW. KOW has been around for a long time and has helped realize hundreds of projects in the Netherlands and Europe.

Pieter asked Naam Agency to realize a platform where he could present his manuscript to voice his view on the state of modern architecture. I was Digital Creative Director and lead designer on the project.

Services
UX/UI Design
Prototyping
Creative Direction
Homepage Load Animation.
Four phones on a grey background showing the Edificios Nuevos responsive design
Responsive design.
Scroll Through the Homepage.
Screenshot of all the sections of the Edificios Nuevos Homepage
Homepage Section Overview.

Transition to Detail.

One of the elements I focused on was the ability to create a visual transition from the home page to the article page. Like in architecture, when you move from room to room, the experience is smooth and refined. I wanted to achieve a similar sensation with this transition, making it feel like one continuous page.

Edifícios Nuevos is quite a small website with only three article detail pages, so I wanted all details to be spot on. With the use of Barba.js and GSAP Flip, an effect like this is achievable without interfering with the users' experience. In fact, I believe it enhances it.

Explore ↓
From Homepage to Detail Page Transition Animation.
Detail page scroll-through.
Full-page screenshot of the Edificios Nuevos Detail page
Full-page screenshot of the Detail page.
A tablet on a grey background showing a full-screen image block on Edificios Nuevos' Detail page design
Detail page full-screen image block.
From Detail Page to Detail Page Transition Animation.
A tablet on a grey background showing the Menu on Edificios Nuevos' website
The Menu.
Menu Open Animation.

Hand-it-over

I built the prototype for Edifícios Nuevos in Webflow and created all the interactions inside it to ensure the team would copy all the correct values and details. To help them further, I made a visual style guide containing all metrics from text sizes to interaction animations.

Unfortunately, the website hasn't been released to the public. To this day, it's ready for launch on Naam Agency's internal servers, and I hope one day it will still become available for people to visit. Much like a building without a purpose, the code, without maintenance, will slowly fall behind and decay over time, which is fitting, considering the website's topics.

Explore ↓
Style-Guide scroll-through.
Two tablets on a grey background showing the Edificios Nuevos website style-guide
Style-Guide Overview.
A tablets on a grey background showing the Edificios Nuevos website style-guide
Easily find the colors.
A tablets on a grey background showing the Edificios Nuevos website style-guide
All interaction values are listed.
Client
Pieter Sitsen
Services
Digital Design
Creative Direction
Webflow Development
Sector
Architecture
Year
2020
Details
Design
Timothy Maurer
Development
Lieneke Koenen
Jaõa Bairrada
Strategy
Timothy Maurer
Creative Direction
Timothy Maurer
Team
Agency