Loading ...

Responses by Gabriela Baka.

Background: This website is a digital business card for Adam Nocek, who works at the intersection of philosophy, design, media and the biological sciences. In both theory and practice, he seeks to expand what we mean by technology and reimagine how it designs and mediates life on earth. His most recent work focuses on the political, economic and ecological exploitation of computational design at scale. The site features a wide and varied look at Adam’s body of work, which includes books, writings, talks, teaching and collaborative projects.

Design core: The main challenge of creating this site was to find a way to visualize Adam’s interdisciplinary approach. One of the core features specifically tailored for this site was the hero section, which resonates with his core practice—moving and working at the intersection of various disciplines. By moving the cursor, users interact with fluffy bubbles and flowing typography. Bubbles join, stretch and can be pushed apart from each other. This interaction elevates the visuals and brings playfulness to the site. Each time users enter the page, bubbles and discipline names appear in different places and sizes within a predefined range.

Besides the hero section, there are two other bubble animations in the menu and in the page transitions, where we see smooth movement and morphing in the metaballs. The rawness of elements and refinements in animation clash, creating the site’s unique flow and language. To accompany this contrast, I selected a straightforward typeface: Favorit by Dinamo, a low-contrast grotesque that combines geometric rigidity with subtle oddities and humorous touches. Minimalistic but bold, the typography springs to life through jumpy microanimations. The website animations with their organic, morphing features resemble Adam’s practice, where he mixes views and techniques from independent disciplines and uses them to table current global issues.

Navigation structure: The navigation is simple, boiling down to the type of work Adam does. It is accessible through the menu and a bar at the bottom of each subpage. As users scroll to the bottom of the page, a link to another category appears so that they can easily navigate from one subpage to another without using the menu. Additionally, we added the spinning Back to Top button as, after some time, pages can get filled up by content. Also, Adam’s name abbreviates in the navigation to AN, displaying the full name upon hover.

Technology: To give Adam elasticity when adding new content, we used WordPress as a reliable CMS. On the front end, we wanted to keep it simple and lightweight. To create the visual effects, we heavily relied on dynamic SVG manipulation together with GSAP. To create the seamless subpage navigation, we used the lightweight JavaScript framework Ovee.js, which enabled us to easily incorporate other tools like the LocomotiveScroll library and custom transitions with Barba.js. The biggest technical challenge was creating the metaballs for the hero section, which we achieved with WebGL.

adamnocek.com

Browse Projects

Click on an image to view more from each project
X

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Subscribe
Already a subscriber or have a Commarts account?
Sign In
X

Get a subscription and have unlimited access
Subscribe
Already a subscriber?
Sign In