台大創創中心官網 NTUTEC

一個運作超過十年的生態系，累積的資源、計畫、關係網絡是真實的厚度。但厚度不等於清晰度——這正是這次改版想要解決的核心問題。

NTUTEC 旗下有加速器、車庫、天使會、企業合作，每一塊都有自己的受眾和邏輯。但在舊版網站裡，這些資源彼此之間的關係是模糊的——創業者、投資人、企業夥伴各自來到網站，卻不容易在第一時間看清楚「這裡對我意味著什麼」。資訊是有的，但路徑不清晰。

另一個現實問題是更新頻率。NTUTEC 的內容一直在動——活動、成員、案例、計畫——但舊版的製作模式讓每次更新都需要大量的人力介入。這次改版從一開始就把「讓團隊能自己維護」納入設計條件，而不是事後才想到。

版面左上與右下的大面積斜切，是整個視覺系統最直接的結構決策。它來自 LOGO——LOGO 本身就有明確的斜切幾何——我們把這個語言從 icon 尺度放大到版面尺度，讓它變成整個網站的骨架。 斜切帶來的不只是形狀，而是方向感。畫面不再是靜態的方塊堆疊，而是有張力、有動線的空間。這跟 NTUTEC 這個生態系本身的狀態也是吻合的：各方能量在這裡交會、匯聚，而不是靜止地並排存在。

NTUTEC 有既有的品牌色，我們沒有打算推翻它。但舊的用色方式缺乏層級——什麼是主角、什麼是輔助、什麼是功能性的提示，界線是模糊的。 這次我們重新定義了主色、輔助色與功能色的使用邏輯，並引入了更大面積的深色背景。深色讓整體的重量感提升，視覺上更接近一個有十年深度的機構該有的姿態，而不只是校園網站的輕盈感。配色系統的設計目標是：各子站可以有自己的氣質，但放在一起時，還是看得出來是同一個家族。

字體的選用邏輯很簡單：標題要有重量、有錨點，內文要能讀、不費力。這兩件事在同一個頁面裡要同時成立。 更重要的是密度的控制。首頁是分流的入口，設計重點是讓使用者快速判斷自己的位置；進入子站之後，資訊才開始加深。這個節奏感不是靠內容決定的，而是靠間距、模組高度、文字量的比例關係設計出來的。排版本身就是資訊架構的一部分。

這次合作裡，NTUTEC 的開發團隊有一個很明確的需求：他們希望在我們完成核心頁面之後，有辦法靠自己繼續把其他頁面做出來，而不是每次都要回來找我們。 這個需求從一開始就影響了我們建立 Design System 的方式。

我們在完成核心模板的過程中，同步把所有的設計決策系統化：色彩變數、字體比例、間距單位、元件狀態、版面骨架，還有斜切模組的使用規則。這些東西不是做完設計之後補上去的文件，而是設計過程的一部分。

有了這套系統，NTUTEC 的團隊在延伸天使會、企業合作、校園相關頁面時，有明確的規則可以依循。配合 AI 輔助的開發流程，新頁面的產出速度和一致性都能維持在一定的水準，不需要每個環節都靠設計師盯著。 對我們來說，這也是一次對自己設計理念的驗證——好的設計系統，應該讓設計師從重複性的執行裡解放出來，去做真正需要判斷力的事。