Responses by Phellipe Wanderley, designer and developer, Young Dog.

Background: Mainly funded by the Brazilian government, Zona de Propulsão is an innovation hub and institute for cultural projects. This new website is part of a series of free workshop campaigns. As a nonprofit project, Zona de Propulsão initially wanted me to only design its website, but it actually ended up using my design as the identity for the whole workshop campaign. A second stage is coming that will launch student projects, news and more single pages.

Design core: The gigantic type is definitely the starting point of this identity, establishing an outer space–like environment through glare effects, circular gradients and GIFs of TV static. One of the objectives of the project was to demonstrate the technological capacity of the hub through contemporary programming with progressive animations. The color palette also reflects our concern to create something for everyone, moving away from the commonplace, masculine tech blue and making space for more inviting colors, such as pink and green.

Challenges: The navigation structure. Divided mainly into two columns, this became one of the most challenging elements during the design, because I only had a tiny spark of an idea as to what it would look like after it was programmed. Since we were running out of time, I made the layout in three days, and the development was finished in two weeks of working day and night to accomplish all the animations.

Divergent paths: If I had more time, I would definitely have found another solution for the blue horizontal timeline scroll in the About section.

New lessons: This was my first contact with GSAP and its ScrollTrigger plugin. I’ve learned how to optimize this kind of animation, because I always tend to resolve everything with CSS and use the least amount of JavaScript possible. One of my concerns is: What if JavaScript fails? I made sure the structure was still scrollable even if JavaScript doesn’t work on the user’s browser.

Navigation structure: We had too many sections but not a lot of long text. The thinking behind the navigation was to group similar content into greater sections and divide them into two columns—such as the About and the Timeline sections—and make sure that they fill the screen space side by side on desktop and above each other on mobile.

Special technical features: One of the project’s concerns was that all the content could be editable in WordPress. The site has a huge PHP back-end field modulation that makes it possible to create event-detail boxes in any layout the client needs, such as half, full, calendar and list styles.