Vitra Gift Finder: A Dynamic, Interactive Grid Experience Ditching traditional rows and standard product categories, the Vitra Gift Finder project by studio Build in Amsterdam turns gift-hunting into a completely interactive visual experience. The site opens up into a constellation-like display against a crisp white canvas, where iconic Vitra creations—like the Eames House Bird, cork stools, plywood elephant, and the fluid Panton chair—appear in varying sizes with freedom and flair.
Finding the ideal gift feels effortless thanks to rounded tag filters tailored to personalities like “Bookworm,” “Couch potato,” or “Art lover”. Plus, a vibrant rainbow color bar lets users filter the collection by shade, capturing the relaxed, tactile joy of browsing a physical display shelf.
Behind this intuitive interface lies a meticulously calculated grid system. Build in Amsterdam engineered a structure allowing full control over element positioning, sizing, and fluid animations between states. Through a real-time GUI tool, the design team and client fine-tuned every motion to achieve a natural, organic flow. The typography remains wonderfully minimal with small sans-serif text, stepping back to let the visual focus shine entirely on the products.
The product detail page maintains a completely fluid browsing experience, allowing effortless switching between tags or viewing extra images without interruption. A wishlist feature makes it simple to save and share curated gift selections. On the responsive side, the dense circular grid on desktop automatically transforms into a clean, single-column scroll on mobile devices, all built on a reliable headless architecture.
Vitra Gift Finder: Trải Nghiệm Chọn Quà Tặng Bằng Lưới Tương Tác Linh Hoạt
Thay vì sắp xếp sản phẩm theo các hàng cột danh mục thông thường, dự án Vitra Gift Finder do studio Build in Amsterdam thực hiện đã biến việc tìm kiếm quà tặng thành một trải nghiệm tương tác trực quan. Giao diện trang web mở ra một không gian hiển thị dạng chòm sao trên nền trắng, nơi những vật dụng thiết kế nổi tiếng của Vitra như chú chim Eames House Bird, ghế đôn bằng gỗ bần, voi gỗ ép hay chiếc ghế Panton tự do xuất hiện với các kích thước khác nhau.
Bộ lọc của trang web sử dụng các thẻ bo tròn đại diện cho sở thích như “Bookworm” (Người thích đọc sách), “Couch potato” (Tín đồ xem phim) hay “Art lover” (Người yêu nghệ thuật). Ngoài ra, một dải màu dạng cầu vồng giúp phân loại toàn bộ bộ sưu tập theo màu sắc, mang lại cảm giác nhẹ nhàng tựa như đang dạo quanh một chiếc kệ trưng bày thực tế.
Ẩn sau giao diện trực quan này là hệ thống lưới (grid) được tính toán tỉ mỉ. Build in Amsterdam xây dựng cấu trúc cho phép tùy biến chính xác vị trí, tỷ lệ của từng vật thể và hiệu ứng chuyển động giữa các trạng thái. Thông qua một công cụ GUI hỗ trợ thử nghiệm theo thời gian thực, đội ngũ thiết kế và khách hàng đã tinh chỉnh để các chuyển động đạt độ mượt mà tự nhiên. Phần typography được giữ tối giản với font sans-serif chữ nhỏ, nhường lại khoảng trống thị giác tập trung vào sản phẩm.
Trang chi tiết sản phẩm duy trì luồng thao tác liên tục, cho phép chuyển đổi giữa các thẻ tag hay xem thêm hình ảnh mà không bị ngắt quãng. Tính năng danh sách yêu thích cho phép lưu trữ và chia sẻ danh mục quà tặng đã chọn. Về mặt thiết kế đáp ứng (responsive), bố cục dạng lưới tròn mật độ cao trên máy tính sẽ tự động chuyển thành giao diện một cột cuộn đơn giản trên điện thoại di động, hoạt động trên nền tảng kiến trúc headless ổn định.
