Architecture For Dog

如同實體看展般的體驗

THE CHALLENGE

在開發官方網站時,團隊面臨著兩個主要挑戰:如何實現頁面兩種檢視模式的流暢切換,以及整合大量藝術家、作品和展覽資訊。同時,網站的目標是讓使用者無論是否能參加實體展覽,都能完整瀏覽展覽內容,激發他們對狗與人之間關係的反思,並啟發狗主人們參與社群,共同創造屬於自己狗狗的專屬狗屋。

THE OUTCOME

AFD 網站重建專案成功打造了兼具設計美感和互動性的線上平台。提供流暢的瀏覽體驗,使用者可輕鬆切換畫廊和資訊模式,深入了解每件作品。創新的設計和技術確保了作品的獨特價值得以展現,有效吸引使用者參與。

SCOPE OF PROJECT

網站設計

CLIENT

Architecture for Dogs (AFD)

Architecture for Dogs (AFD) 是由 Kenya Hara 創立,並由 Imprint Venture Lab 聯合創立的專案。該專案與世界知名的建築師、設計師合作,設計一系列針對不同品種狗的特性的建築。過去幾年間,AFD 前往世界各地展覽,並計劃在米蘭有新的展出。專案研究將探討 AFD 官方網站的重建過程,以及如何打造良好的線上觀展體驗。

Concept
AFD 網站的重建不僅僅是資訊的重整,更是為了創造一個能夠延續實體展覽體驗的線上平台。網站的亮點集中於兩大頁面:展示 14 件精美設計作品的 Gallery 頁面,以及涵蓋 2012 年至今展覽足跡的 Exhibition 頁面。在 Artwork 頁面中,使用者可以體驗兩種互補的檢視模式:畫廊模式和資訊模式。畫廊模式讓使用者能透過流暢的幻燈片瀏覽每件精心設計的作品,而資訊模式則讓使用者深入了解作品與小狗的獨特連結,並探索創作者的背景與創作理念。

這種雙重模式的設計旨在提供全面而深入的體驗。使用者可以快速瀏覽所有作品,同時對每件作品產生強烈的興趣,進而點擊進入每個作品頁面以獲取更詳細的介紹。這種方法不僅增強了用戶參與度,還確保了網站能夠有效地展示每件作品的獨特價值和創意理念,真正延續了實體展覽的魅力。

難題與如何解決
在過程中,團隊遇到了兩大挑戰:如何實現 Artwork 頁面的雙模式檢視流暢切換,以及如何整合並展示大量的作品、藝術家與展覽資訊,為使用者提供猶如實地參觀的數位體驗。

為了解決檢視模式的切換需求,團隊採用了 Framer Motion 和 Next.js 框架,並利用瀏覽器 API 精確偵測頁面元素的大小和位置,透過數據驅動的動畫轉場效果,使頁面切換更順暢,提升了用戶的互動體驗。

在資料整合方面,團隊設計了資訊架構與層級,並善用了過濾、收合等方法來呈現重點內容。此外,為了讓使用者了解到這是一個全球巡展的展覽,團隊在首頁特別設計了專區進行介紹,並在展覽位置頁面創新地加入了「展館照片」和「地圖模式」兩種瀏覽方式,讓使用者可以自由切換。

這些解決方案不僅使用戶即便無法親臨現場,也能透過網站流暢瀏覽作品,享受隨時隨地的沉浸式觀展體驗,突破了地域和時間的限制。

Result
AFD 網站重建專案成功地打造出具有設計美感的網站介面,同時帶有良好、直覺的互動操作。團隊不僅實現了讓使用者在網站上瀏覽也能如在展場現場觀展般順暢的目標,還在使用者操作感受能夠簡易、直觀的條件下,符合品牌該有的簡約、質感調性。

然而,如何讓實體展覽在非展期期間能持續延續主題的熱度,並延伸至社群媒體與線上、線下活動,將會是團隊持續思考、迭代的議題。這個專案不僅展現了設計和技術的融合,更體現了如何將實體展覽經驗轉化為引人入勝的數位體驗的創新思維。

CREDIT

Creative Director: Sam Kuo
Art Director: Winnie Chen
Visual Designer: Ching Kuo, Tizzy Chen, Rita Chen
Product Designer: Janice Chen, Shuting Chen
Creative Developer Director: Pofu Lu
Developer: Alex Su
Product Manager: Bruno Hao

More Works

Scratch off calendar

Toyota - KCON 2019

台新銀行 - 2024年 AI 龍年禮盒

Cher Ami - 瓶中信