

2021
由CSR@天下團隊2021推出「為淡水河做一件事」企劃,透過調查報導網站、藝術策展與影像紀錄等等,創造跨域對話,企圖喚起更多水系公民加入行動行列,為河川發聲。
網站期望打造沈浸式閱覽體驗,各章節以滿版呈現,垂直滾動閱讀,如同引領觀者深入淡水河中,了解污染真相。背景色漸變主導閱讀情緒起伏,由藍轉向黑暗,一步步接近污染真相,經過民間、企業各方長期努力,每個事件里程碑成為盞盞點亮河川的明燈,色調逐漸轉向明亮的水藍色,迎向清澈美好的河川未來。設計上以漸變、透明度、簡練的線條等,展現水的流動性與通透感。
Loading page & Homepage

草圖 Wireframe
網站主要內容為一頁式,根據內容性質區分段落,第三段(調查報導)與第四段(大事紀)中內容繁多,以橫向滑動閱覽,避免一頁式過於冗長,閱讀體驗不佳。河底選物為獨立頁面,點選泡泡中物件會連結至對應角色頁。

設計稿 Layout
整個數位專輯內容包含引言、深入完整的調查報導、歷年大事紀、關鍵數據以及跨域(藝術和民間企業)合作等,並以圖像視覺輔助,帶領閱覽者由淺入深消化龐大的資訊內容,期望喚起更多人的關注與行動。
裝飾與設計元素緊於水,以液態流動的造型曲線呈現時間軸,漂浮的雜質微粒強化水中情境與空間感。不同於硬式的色塊分割,漸變的背景色展現軟性流動變化。色彩規劃以白色與藍色系為主,重點資訊以其他顏色輔助,適度的光效營造氛圍感,風格簡練精緻。
















「河底選物」互動體驗
天下雜誌邀請藝術家與北藝大學生參與,透過擬人化的角色互動方式探討淡水河污染議題。










Credit
Client 客戶:CSR@天下
Report 報導:黃昭勇
Project Planner 數位專輯:高偉倫、陳亭妤、楊郁盈
Project Manager 網站專案管理:SyndAvant、張希慈
Report 報導:黃昭勇
Project Planner 數位專輯:高偉倫、陳亭妤、楊郁盈
Project Manager 網站專案管理:SyndAvant、張希慈
Web Design 網站設計:柳佳妘
Year 年份:2021