Interactive Web Design for Resn’s Portfolio by Marcus Brown Resn has long been a legend in the design community thanks to its delightfully quirky humor and insanely high level of technical craftsmanship. Under the art direction of Marcus Brown alongside Simon Jullien, Resn’s portfolio site brings the studio’s distinct brand personality to life while keeping project showcases crisp and clear. The edgy, high-contrast obsidian backdrop sets a captivating mood, anchored by a 3D polygonal crystal logo that demands attention. Slick effects like chromatic aberration and RGB color splits pop against the clean white typography, transforming dark mode into a vibrant digital playground. On a conceptual level, those colorful crystal shards floating in 3D space represent the lively connection between the studio’s offices in Wellington, Amsterdam, and San Francisco.
Layout-wise, the typography shines with a lightweight geometric sans-serif and perfectly tuned kerning. Key navigation items like About, Work, and Contact float effortlessly across the screen alongside micro-data details. Visual anchor points sit neatly in the corners: a crystal drop logo on the top left, a menu toggle on the top right, and an audio wave icon along the bottom. Exploring stand-out case studies like “Chekhov is Alive” in partnership with Google Creative Lab, “KFC Hall of Colonels,” or “adidas Climachill” feels smooth and intuitive thanks to a horizontal scrolling grid.
The real showstopper on this site is the click-and-hold interactive mechanic. Instead of standard scrolling or simple clicks, pressing and holding the cursor unlocks a wild mix of motion effects, dynamic audio shifts, and crazy geometric morphs. Surprises keep rolling in with kaleidoscopic visuals, color-changing cylinders, and endless warp tunnels. Blending real-time WebGL shaders with spatial audio, this masterpiece secured top industry honors, including Site of the Month on Awwwards, FWA of the Day, and CSS Design Awards.
More details on this project by Marcus Brown are available on www.behance.net/gallery/64801205/Resn-Website.
Thiết Kế Web Tương Tác Cho Portfolio Của Resn Bởi Marcus Brown
Resn từ lâu đã nổi tiếng trong cộng đồng thiết kế nhờ phong cách hài hước độc lạ cùng độ tỉ mỉ cực cao về mặt kỹ thuật. Dưới sự chỉ đạo nghệ thuật của Marcus Brown cùng đồng nghiệp Simon Jullien, trang portfolio của Resn đã thể hiện trọn vẹn cá tính thương hiệu mà vẫn giữ được sự rõ ràng khi giới thiệu các dự án. Điểm nhấn thô ráp nhưng cuốn hút nằm ở phông nền obsidian tương phản cao, kết hợp cùng khối pha lê 3D đa giác đóng vai trò là biểu tượng logo. Những hiệu ứng thiết kế như quang sai màu (chromatic aberration) và tách dải màu RGB được điểm xuyết trên nền chữ trắng, biến giao diện dark-mode trở thành một sân chơi tương tác đầy sống động. Ở góc nhìn liên hệ, những mảnh pha lê sắc màu lơ lửng trong không gian ba chiều còn đại diện cho sự kết nối giữa các văn phòng của studio tại Wellington, Amsterdam và San Francisco.
Về mặt bố cục, hệ thống typography sử dụng phông sans-serif hình học dạng light-weight với khoảng cách kerning được tinh chỉnh kỹ lưỡng. Các mục điều hướng chính như About, Work, Contact được đặt rải rác lướt nhẹ trên màn hình cùng các thông số vi mô. Điểm cố định thị giác được phân bổ hợp lý ở các góc: logo giọt pha lê nằm ở góc trên bên trái, nút chuyển đổi menu ở góc trên bên phải và biểu tượng sóng âm thanh đặt ở cạnh dưới. Để xem danh sách case study như “Chekhov is Alive” hợp tác cùng Google Creative Lab, “KFC Hall of Colonels” hay “adidas Climachill”, người dùng có thể thao tác qua dạng lưới trượt ngang rất thuận tiện.
Điểm sáng tạo nhất của website này chính là cơ chế nhấp và giữ chuột (click-and-hold). Thay vì chỉ cuộn trang hay bấm link đơn thuần, việc giữ con trỏ chuột sẽ kích hoạt vô số hiệu ứng chuyển động, thay đổi âm thanh và biến đổi hình học độc đáo. Bất ngờ sẽ liên tục xuất hiện với hình ảnh kính vạn hoa, khối trụ đổi màu hay đường hầm vô tận cực kỳ thu hút. Nhờ sự kết hợp giữa WebGL shader thời gian thực và âm thanh không gian (spatial audio), sản phẩm này đã ghi tên mình vào bảng vàng giải thưởng với các danh hiệu Site of the Month trên Awwwards, FWA of the Day và CSS Design Awards.
Có thể xem thêm chi tiết dự án từ Marcus Brown trên www.behance.net/gallery/64801205/Resn-Website.
