過程

姿態繽紛的報刊企劃：《Anne's Time 安妮新聞》

過往的美感教育官網也由版塊設計負責製作，當時使用該計畫的識別Logo延伸為Pattern，貫穿於全站。團隊首先提出希望在風格上沿用美感教育官網，讓使用者認知兩者系出同源。

我們則用宏觀、微觀兩尺度觀看安妮新聞。每期報刊都自帶一個主要的命題或議題，加上大量與內容呼應、風格迥異的插畫；而拉遠看，會發現每期刊物皆繞著安妮新聞計畫的核心打轉，構築為樣貌豐富的系列作。個體間的同與不同、既可獨立存在也可並存的模式彷彿宇宙中星球與星球之間的關係，以此基礎轉譯、再加上自由拖曳（探索星際）的互動形式，每步設定都朝著讓TA探索的精神靠攏。

「能不能把維特魯威人加入網站呢？」

我們在初次提供設計稿時，解說了上述概念，團隊的顧問老師非常喜歡，並和我們分享計畫的識別Logo幾何造型其實是簡化自達文西的《維特魯威人》（換句話說，該Logo背後藏著維特魯威人），該作為文藝復興時期代表作品，涵蓋了黃金比例、天圓地方、人文與科學⋯⋯等重重概念，正好與安妮新聞系列的選題原則不謀而合。

討論至此，眼見這個巧合，顧問老師追加了要求：能不能把維特魯威人加入網站呢？

我們將《維特魯威人》安排在網站 Loading 完、進首頁前的開場，由 ① 地球圖片 → ② SVG 勾勒線段動態 → ③ 人形浮現 三段敘述組合而成，作為進入安妮宇宙前的鋪墊。

考量到反覆瀏覽時的易用性，此動態僅在使用者第一次拜訪網站時才會出現，在 ① 首頁切至其他頁面、② 其他頁面切至首頁、③ 不清除暫存，首頁重整 以上三種情況下，改為呈現簡易版本的轉場畫面。

首頁互動地圖

進到首頁時，展開星球上的物件會在拖曳過程產生視差，收合星球則會吸附靠近的游標，提示使用者此處可以點擊。

宏觀視角：主題象限圖

星球分佈依照美感團隊提供的座標分類，以相對位置鋪排在畫面上。
（散佈在星球旁的小項目則是互動式跨頁）

微觀視角：主題星球

每顆展開的星球皆由四大元素構成，由上至下、左至右分別為 ① 分類主題 、② 星球（含插圖視覺＆星球環）、③ 相關文章 、④ 延伸閱讀（外部連結） 。

Typography＆Color Setting

全站字型使用紙本刊物的設定，串連線上線下兩方。
顏色則是選擇灰階搭配飽和度較高的黃色，視覺上留白多，大方向與美感教育官網相同。

高自由度的文章內頁組件

我們統計報紙上的版型，將其歸納成 16 種組件、外加 1 式分隔線。
使用者在後台上稿時，從區塊排序、圖文順序、卡片尺寸都有許多選擇，讓不同版型的文章內容都能重現在網站上。

全組件示範影片

覆盤

與客戶團隊來回拋接想法，激盪出更完整的概念

過往大部分專案都是由我們（乙方）提出完整的概念，恰好這次遇上本身也有藝術背景的客戶；或許顧問老師對網站設計或動態特效等技術層面不熟悉，依然提出了幫助我們抵達更多可能性的好概念。
與美感教育團隊一同討論、最終完整地將概念落地，這是非常難得的體驗。

習得無障礙網站製作要點

政府網站一般至少需要取得無障礙 AA 等級標章，需留意對比度、動態回饋的明顯程度等等層面。
製作企業官網或品牌形象網站通常沒有無障礙等級需求，但從通用性設計 Accessible Design 的角度來思考，此次製作經驗依然可以活用到其他專案上。