「有好多好多廢物,在這裡~♪」

當海洋廢棄物成為博物館裡的傳世之作——
這一次,你會選擇不再放手,好好的收藏這些在大海上漂流的廢棄物;
還是認真思考每一次面對垃圾時,自己可以怎麼做咧?

Project:The Guidebook of Marine Debris 海廢圖鑑-台灣第一本海洋廢棄物百科
Client:RE-THINK 重新思考
PM:何雅雯 Amber、詹致遠 fzhan
AM:何雅雯 Amber、詹致遠 fzhan
Planner:湯又嫣 yyrubit
UI Design:張嘉年 nu
Front-end engineers:鍾良格 glenn
Back-end engineer:李宗翰 Louis Li、詹致遠 fzhan
Release:2018

海洋污染已是經年累月的問題,但面對危害地球與生存品質的垃圾,多數人仍選擇下意識地忽視。除了呼籲淨灘,還有什麼方式能喚起人們對海洋環境的主動關切?

這次,簡訊設計和致力於海洋保育x生活環保的RE-THINK合作了《海廢圖鑑》!如果走上沙灘比較難、如果千篇一律的宣導已聽膩,那就換個有趣的互動方式,讓人們置身事內吧!
GUIDEBOOK
FILTER
MAP MODE
一座將海洋廢棄物端到民眾面前的〈線上博物館〉

當RE-THINK找上門,提出將「海洋廢棄物」轉化為「精品」為大眾打造一場線上展覽時,這個新鮮又充滿衝突感的創意立刻吸引了我們。

怎樣突破大眾既有的認知,將又髒又舊的垃圾用美的方式在線上陳列?讓大眾覺得有趣,願意主動了解各式各樣的海廢到底是什麼?從哪來?又會到哪裡?甚至隨著一步步探索,和我們一起踏上解決環境問題的道路。

這不僅是對設計團隊的一大挑戰,奇妙的呈現對網頁建置來說也是很有趣的嘗試。
MARINE DEBRIS INFO
360 degrees
旋轉起來吧海廢!像玩玩具一樣的線上體驗
為了將互動一併思考進視覺設計裡,設計團隊以「展示品」作為出發,想讓大眾在操作螢幕時也能夠獲得3D立體觀看的體驗。

為了實現這個點子,設計團隊想到不妨在頁面上將海廢以360度旋轉的效果來做呈現,並主動向RE-THINK提案。
客戶很快地接受了這個大膽的提議,並全力支援101(個海廢)x 36(個角度)= 3636張照片素材的拍攝。透過來回的溝通、修圖,最後呈現的素材質感非常好。

不過真正成為現在大家看到充滿玩心的設計之前,其實還經歷過一次提案的推翻。
一開始視覺設計以〈精品美術館〉為主題,用去羅浮宮看展覽的概念來詮釋企劃中「海廢x精品x美術館」的精神,但我們最後推翻了這個想法!

由於海廢網站的目標族群廣、我們希望能達到普及、寓教於樂的效果,那麼高級、精緻化的詮釋方式是不是反而可能讓大眾產生距離感呢?為了解決這個問題,我們很快的做了第二次的提案。

第二次提案比較像是〈大人的玩具博物館〉,也是目前點進網站看到的樣子。這個設計增加了溫暖的色彩,並提高童趣、玩味的成分,同時注意不要讓視覺顯得過於幼稚。重點是要讓大人、小孩,都能在網站上同樣獲得愉快的體驗,吸引更多人參與。

畢竟,保護環境可是不分年紀的,對吧!
MARINE DEBRIS CHALLENGE
資源有限制,就靠內容設計來取勝吧—〈海廢大挑戰〉誕生!
最初RE-THINK提議網站上能製作類似抓寶可夢的互動內容,不過考量到既有的資源無法負荷這麼龐大的工程,那麼有沒有什麼互動是既能符合展覽主題,又有教育功能的呢?

不如,就來做益智問答吧!

〈海廢大挑戰〉的邏輯,是讓使用者看完圖鑑後,能立刻測試自己對海廢的了解程度。操作簡單,不管是任何年齡層的用戶,只需點選就能完成遊戲,即時獲得回饋、推播分享。

在這個設計上我們最自豪的,果然還是透過妥善的內容設計來創造互動,證明不複雜,也一樣能有好效果。

【設計師最想和你分享的是】
設計時,為了實現〈大人的玩具博物館〉的概念,花了較多心力在配色和互動的設計上。網站配色既要豐富、趣味、明亮,又不能顯得雜亂,強調網站的空間感,同時考量與大眾互動的邏輯來進行設計,讓體驗能夠完整舒適。
當中最喜歡的,當然是海洋廢棄物360度旋轉的效果。
用不一樣的角度看世界,即使是海廢也有其獨特的魅力所在,希望大家能透過挖掘它們,了解更多關於海洋的事。
特別感謝RE-THINK的大力支援與素材提供,感謝擁有這次合作的機會!
海廢圖鑑 The Guidebook of Marine Debris | 網頁設計 Web Design
59
863
0
Published:

海廢圖鑑 The Guidebook of Marine Debris | 網頁設計 Web Design

台灣第一本海洋廢棄物百科
59
863
0
Published:

Creative Fields