期望

台北政經學院為新設院校，原本沒有網站，需要從0開始建置，也因為是新設院校，教職員想法非常新穎、國際觀十足且參考目標也非常明確，來回溝通與建制大約花了4個月左右，初版網站就出生了。

一開始除參考網站外，與台北政經學院初步討論後，有了個幾個發展的方向，這些方向也為網站的後續發展奠定了基礎。

首先，希望網站主色調為「紫色」，用以代表台北政經學院與清華的連結，同時希望避免傳統網站設計中大面積的顏色運用，讓紫色活潑且輕盈。

（圖：台北政經學院簽約典禮實拍圖，可見原設計中的大面積紫色應用。出處/延伸閱讀：清華大學將設立台北政經學院TSE）

第二，國際化，除網站全英文外，參考歐美院校，版面需乾淨整潔，盡量以塊面的方式呈現。

最後，需要活動式的網站後台，未來可讓學生、教師一同參與編輯網站照片或撰寫部落格等，增添學校色彩。

呈現

綜合以上幾點需求，我們想出了解決對策。

讓紫色活潑且專業

為了顛覆紫色原本給人的沈重感，首頁照片設計上，我們將紫色遮蓋在照片上，並將透明度調低，透出背景照片，像是落地窗上的薄紗，看得到景色的同時適度遮擋陽光，幫紫色增添時尚、國際、活潑化的效果，同時不失專業氣質。

不只首頁，在其他元素中也可以找到許多漸層、從淺到深的表現手法，試圖打破紫色的沈重氛圍。許多游標輕輕滑過才會出現顏色的設計，可以減輕紫色的厚重感，讓其低調卻顯眼。

國際化的版面設計

參考國外大學作法，將視覺塊面化，讓「News & Events」像卡片一樣，一張張地接續在首頁滿版照片之後出現，並且會不斷地自動推送，讓網頁看起來更有朝氣。

將目錄裡出現的「About」做成一張張卡片，陳列在首頁，讓造訪者能先快速瀏覽，再點選需要的資訊進一步閱讀，這樣以塊面取代傳統條列式的閱讀方式，是使畫面簡潔的重要設計。

活動式後台

為配合學院對於師生未來可以參與製作網站的期望，我們將許多權限開放給校方，例如News&Events文章編寫上，所有封面照片、字級與顏色都可以自由變換，還可以插入照片，網站內建表單也可以直接在後台管理，屬於活動度非常高的後台。

除了所有文章、活動、關於學校等內容外，這次網站建置中，花了許多心力在做「簍空字」設定。

台北政經學院非常喜歡「背景細線」，認為其理性且具設計感，但礙於與學校網站調性不合，只好忍痛放棄。最後我們還是決定要換個方式將它融入設計中，於是出現了將首頁標題第一行字簍空的想法，作為與細線設計的呼應。

為了讓網站活動度更高，首頁照片上所有文字皆可於後台調整，為因應本次設計，後台的文字編輯區塊，從一般的只有一區改動所有文字，變成一區更改簍空文字，另一區則是實心文字，別小看這一步，當初工程師可是下了苦功呢！

加分項目：動態效果應用

動態效果是一項簡單卻危險的技術，使用過多可能會讓畫面失焦，但是點到為止的動畫效果可以讓造訪者感受到網站設計的小心機。

本網站中就使用了許多「輕量」的動態效果，像是稍稍用游標滑過，就會產生的類似縮放或漂移的效果，除美觀、有趣以外，也是一個增加造訪者參與感的設計，讓學生或造訪者每個選項都想點進去，多了解學院一點點。

就連頁尾資訊欄中也有出現游標停留在文字上會變成紫色的設計，像是在提示「這邊這邊！字可以按喔！」，誘發造訪者觸點擊。

貼心的小巧思

由於台北政經學院並不在台北，而且是校中校，所以若在Google Map上直接輸入地標名稱是搜尋不到的。關於這一點，在 ’About TSE’ 頁面最下可以直接連到Google Map的設計真的很貼心，也可以在任一頁尾點選地址連到Google Map，若訪問者為較不熟悉中文的外籍人士，這個設計可以大大減少他走彎路的時間。

Contact Information也非常方便，省去跳出網站寫Email的時間，可以加速諮詢進度，讓原本可能因為不想撰寫制式化email，而猶豫不前的觀望群體，可以用更輕鬆的方式進行發問。