Resn Website — A Masterclass in Web Design by Marcus Brown

Marcus Brown crafts an iconic web design for the Resn portfolio, pairing tactile click-and-hold mechanics with audiovisual surprises.

Resn has long held a singular reputation across the global digital landscape for irreverent humor, surreal eccentricity, and uncompromising technical precision. Leading creative direction and design alongside collaborator Simon Jullien, Marcus Brown engineered a portfolio experience that balances agency personality with a disciplined presentation of client work. The visual tension relies on high-contrast obsidian fields punctuated by a 3D faceted, refractive crystal droplet that anchors the brand symbol. Chromatic aberration and RGB color splits fringe clean white letterforms, turning dark-mode interfaces into a tactile playground where digital surfaces feel tangible and reactive. On contact views, floating shattered emerald and crimson crystalline shards drift in deep dimensional space, echoing the studio presence across Wellington, Amsterdam, and San Francisco.

Tactile Interaction Mechanics and Web Design Craft

At the core of the typography architecture is an airy geometric sans-serif set in light weights with calibrated kerning and generous negative space. Primary navigation anchors including About, Work, and Contact float across the viewport, supported by micro-typographic coordinates. Fixed perimeter anchors establish intuitive digital ergonomics: the crystalline droplet mark in the top-left corner, modal discovery toggles in the top-right, and an audio waveform monitor at the lower edge. Horizontal slider grids allow users to browse client case studies, including Chekhov is Alive for Google Creative Lab, KFC Hall of Colonels, and adidas Climachill. This structural discipline ensures client metrics and creative credits remain legible without compromising the rebellious art direction.

The defining breakthrough of this web design is the pioneering click-and-hold mechanic. Rather than relying on passive scrolling or standard navigation links, holding down the cursor triggers dynamic transformations, altering soundscapes, bending geometry, and unlocking surreal interactive experiments. Explorers encounter a kaleidoscope mandala of eyes and lunar spheres, an iridescent gradient cylinder, and hypnotic monochrome infinity tunnels. Built with real-time WebGL shaders and spatial audio, the portfolio secured Site of the Month honors from Awwwards, FWA of the Day, and CSS Design Awards, proving that interactive agency portfolios can entertain as deeply as they inform.

See more from Marcus Brown on Behance.