artgital官網十週年改版
Type
Website / Corporate Website
Responsible
風格定位 x 網站架構 x 介面設計 x 工程交付
Client
artgital
Year / Time
2026 / 6 months
#讓專案成為主角的官網
Background
原官網已使用約十年，風格與維護方式都跟不上公司現階段的需求。
artgital 的主要訪客是代理商，需要大量案例來激發想像。但舊站的專案呈現資訊不夠完全、後台也不易維護。公司希望藉此次改版，讓風格更明確、專案資料更完整，並讓後台能長期維護。
Solution
我們以「簡約 × 科技」定調，讓專案成為整個網站的主角：首頁以 3D 透視呈現精選案例，並透過標籤篩選、關聯案例與 Load More，讓過往的大量專案都能有系統性的編排，降低搜尋的門檻。
專案內頁改為可替換的模板，後台欄位也一併規劃，讓各部門人員皆能自行上傳。動態以程式端製作，並以 Demo 與工程師交接，在美感與載入容量之間取得平衡。
View Website
artgital官網十週年改版
Type
Website / Corporate Website
Responsible
風格定位 x 網站架構 x 介面設計 x 工程交付
Client
artgital
Year / Time
2026 / 6 months
#讓專案成為主角的官網
Background
原官網已使用約十年，風格與維護方式都跟不上公司現階段的需求。
artgital 的主要訪客是代理商，需要大量案例來激發想像。但舊站的專案呈現資訊不夠完全、後台也不易維護。公司希望藉此次改版，讓風格更明確、專案資料更完整，並讓後台能長期維護。
Solution
我們以「簡約 × 科技」定調，讓專案成為整個網站的主角：首頁以 3D 透視呈現精選案例，並透過標籤篩選、關聯案例與 Load More，讓過往的大量專案都能有系統性的編排，降低搜尋的門檻。
專案內頁改為可替換的模板，後台欄位也一併規劃，讓各部門人員皆能自行上傳。動態以程式端製作，並以 Demo 與工程師交接，在美感與載入容量之間取得平衡。
View Website
artgital官網十週年改版
Type
Website / Corporate Website
Responsible
風格定位 x 網站架構 x 介面設計 x 工程交付
Client
artgital
Year / Time
2026 / 6 months
#讓專案成為主角的官網
Background
原官網已使用約十年，風格與維護方式都跟不上公司現階段的需求。
artgital 的主要訪客是代理商，需要大量案例來激發想像。但舊站的專案呈現資訊不夠完全、後台也不易維護。公司希望藉此次改版，讓風格更明確、專案資料更完整，並讓後台能長期維護。
Solution
我們以「簡約 × 科技」定調，讓專案成為整個網站的主角：首頁以 3D 透視呈現精選案例，並透過標籤篩選、關聯案例與 Load More，讓過往的大量專案都能有系統性的編排，降低搜尋的門檻。
專案內頁改為可替換的模板，後台欄位也一併規劃，讓各部門人員皆能自行上傳。動態以程式端製作，並以 Demo 與工程師交接，在美感與載入容量之間取得平衡。
View Website
Background
改版最花時間的，不是畫面，而是讓大家看見同一件事
我是這次改版的設計主責，負責從風格方向到工程交付的整條設計流程，並以編輯者的角度參與後台介面的規劃。與我協作的有設計主管、PM、企劃、動態設計師與工程師。
前期最大的工作是風格定位。我先整理公司近期形象關鍵字，例如「持續進化、碰撞、變形」，再蒐集案例，分成五類：整體網站調性、各頁面功能與風格、首頁動態、局部亮點動態、文字動態。
Background
改版最花時間的，不是畫面，而是讓大家看見同一件事
我是這次改版的設計主責，負責從風格方向到工程交付的整條設計流程，並以編輯者的角度參與後台介面的規劃。與我協作的有設計主管、PM、企劃、動態設計師與工程師。
前期最大的工作是風格定位。我先整理公司近期形象關鍵字，例如「持續進化、碰撞、變形」，再蒐集案例，分成五類：整體網站調性、各頁面功能與風格、首頁動態、局部亮點動態、文字動態。
Pain Points
設計符號過多，與公司現階段定位不符
專案縮圖上疊著標題，遮住底圖
專案內頁只能放圖片，文字沒有標題分類，閱讀不順
網頁動態少，以靜態文字為主，無法呼應互動公司特色
後台更新不易，多半透過工程師
Pain Points
設計符號過多，與公司現階段定位不符
專案縮圖上疊著標題，遮住底圖
專案內頁只能放圖片，文字沒有標題分類，閱讀不順
網頁動態少，以靜態文字為主，無法呼應互動公司特色
後台更新不易，多半透過工程師
Goals
明確定義公司風格
增加網站動態及互動性設定，加強網站亮點
完整呈現專案資料，提高競爭力
降低案例搜尋門檻，增加曝光度
降低後台長期維護的成本，打造一套全公司都能使用的系統
Goals
明確定義公司風格
增加網站動態及互動性設定，加強網站亮點
完整呈現專案資料，提高競爭力
降低案例搜尋門檻，增加曝光度
降低後台長期維護的成本，打造一套全公司都能使用的系統
Homepage Visual
首頁把精選案例以 3D 透視排列，打破平面框架。Hover 時有順暢的推進效果。刻意保留不完整的資訊，用畫面吸引點擊。
手機版的部分，則改以畫面中間的專案作為 hover 狀態。
Homepage Visual
首頁把精選案例以 3D 透視排列，打破平面框架。Hover 時有順暢的推進效果。刻意保留不完整的資訊，用畫面吸引點擊。
手機版的部分，則改以畫面中間的專案作為 hover 狀態。
Animation
用程式做動態，把容量留給內容
為了在美感與載入負荷間取得平衡，動態以程式端製作為主。我用 Google AI Studio 以 Vibe Coding 製作可執行的 Demo，把程式碼放上 CodePen，工程師直接取用調整，不必從零開始。
Animation
用程式做動態，把容量留給內容
為了在美感與載入負荷間取得平衡，動態以程式端製作為主。我用 Google AI Studio 以 Vibe Coding 製作可執行的 Demo，把程式碼放上 CodePen，工程師直接取用調整，不必從零開始。
Interaction Highlights
不斷流動的設定
我們希望這是一個『活的網站』，為了確保每個頁面不流於『靜態』，除了動態之外，在滑鼠滾動或位移時，我們設定一些觸發事件和彩蛋，讓整個網站像一個大型的互動專案，由多種小巧思組合而成。
持續對話的網頁
在Header部分，不斷切換的創意語句，像是和造訪者對話的大聲公。瀏覽頁面的過程，也設置互動按鈕，增加網頁的趣味性，而頁底的Footer，也有持續閃爍的驚嘆號，在瀏覽的最後也保有對話的狀態。
Interaction Highlights
不斷流動的設定
我們希望這是一個『活的網站』，為了確保每個頁面不流於『靜態』，除了動態之外，在滑鼠滾動或位移時，我們設定一些觸發事件和彩蛋，讓整個網站像一個大型的互動專案，由多種小巧思組合而成。
持續對話的網頁
在Header部分，不斷切換的創意語句，像是和造訪者對話的大聲公。瀏覽頁面的過程，也設置互動按鈕，增加網頁的趣味性，而頁底的Footer，也有持續閃爍的驚嘆號，在瀏覽的最後也保有對話的狀態。
Project Info
資訊呈現最大化：
將畫面留給專案的首圖，資訊在Hover後顯示。
主推專案的排版變化：
大量專案的排版容易流於視覺疲勞，所以我們特別設計Top10的版面設定，讓近期我們認為最有亮點的專案排列至前，除了吸引造訪者目光外，也讓版面更加靈活，在空間中留白並加入新的亮點。
Project Info
資訊呈現最大化：
將畫面留給專案的首圖，資訊在Hover後顯示。
主推專案的排版變化：
大量專案的排版容易流於視覺疲勞，所以我們特別設計Top10的版面設定，讓近期我們認為最有亮點的專案排列至前，除了吸引造訪者目光外，也讓版面更加靈活，在空間中留白並加入新的亮點。
Page Flow
內容順序的決策：
我們希望體驗者先看完專案內容，再看約一分鐘的專案影片。但考量直接觀看影片的可能性，所以首屏右下角有按鈕可直接滑到影片區塊，最底部也有返回首屏的按鈕。
Page Flow
內容順序的決策：
我們希望體驗者先看完專案內容，再看約一分鐘的專案影片。但考量直接觀看影片的可能性，所以首屏右下角有按鈕可直接滑到影片區塊，最底部也有返回首屏的按鈕。
Backend Editing
編輯模板化：
以『區塊』的概念建立結構化的內容編輯器。
減輕工程負擔：
需要多種排版的圖片，由我先切好直接上傳，工程師不用額外切版。
Backend Editing
編輯模板化：
以『區塊』的概念建立結構化的內容編輯器。
減輕工程負擔：
需要多種排版的圖片，由我先切好直接上傳，工程師不用額外切版。
Collaboration & Handoff
設計稿以 Figma 標註交付，動態以 CodePen 交付。每週一次進度會議與工程師對接，每月一次大會議與各部門主管確認問題、取得共識。
Collaboration & Handoff
設計稿以 Figma 標註交付，動態以 CodePen 交付。每週一次進度會議與工程師對接，每月一次大會議與各部門主管確認問題、取得共識。
Project Results
影片自動轉檔後，手機版容量至少降低 50%（工程師端實作）
上線三個月後，頁面瀏覽次數約為舊站去年全年的 80%（此數據僅供參考）
Project Results
影片自動轉檔後，手機版容量至少降低 50%（工程師端實作）
上線三個月後，頁面瀏覽次數約為舊站去年全年的 80%（此數據僅供參考）
Summary
負責公司網站形象設計的主責設計，除了美感的技術力之外，更多的挑戰來自於大家對公司的想像，所以前期的聚焦更顯得重要。而在外部專案同步進行的排程中，進度的推進、追蹤，以及各部門的資訊對焦，也是我在這個專案不斷注意和把關的。過程中我也發現在前期的資訊統整、後台介面規劃、內容的模板化的部分特別投入，也令我對於設計系統產生更多興趣。
Challenge
專案數量的更新共識
為了呼應十週年的改版初衷，以『進化』的形象和客戶見面，我主張過濾過往大量的專案量，只保留價值性高的專案。而業務部則主張保留所有專案，考量到造訪者多是需要激發想法的創意窗口，專案的豐富度有助於縮短後續接洽的流程，讓客戶有更明確的合作想像。
最後經過取捨後，我們選擇保留所有專案。
Next Time ?
設計系統的建立
這次元件庫在製作中累積，事後較亂。下次會先定義 Token 與命名規則，再開始排版。上線前定義成效指標
改版前沒有設定目標，上線後才回頭取得瀏覽次數，只能做粗略的前後比較，無法確認是哪項設計帶來的變化。下次會在改版前設定 2–3 個指標，例如專案頁瀏覽深度、相關案例點擊、詢問來源等。
Summary
負責公司網站形象設計的主責設計，除了美感的技術力之外，更多的挑戰來自於大家對公司的想像，所以前期的聚焦更顯得重要。而在外部專案同步進行的排程中，進度的推進、追蹤，以及各部門的資訊對焦，也是我在這個專案不斷注意和把關的。過程中我也發現在前期的資訊統整、後台介面規劃、內容的模板化的部分特別投入，也令我對於設計系統產生更多興趣。
Challenge
> 擔任創意的發想者而非執行者，須將想法具體化
> 整理Design System，降低與品牌的溝通成本
> 在品牌的既定風格中，拿捏創意的比例
> 與客戶面談時，要精準表達創意、聚焦想法
Next Time ?
設計系統的建立
這次元件庫在製作中累積，事後較亂。下次會先定義 Token 與命名規則，再開始排版。上線前定義成效指標
改版前沒有設定目標，上線後才回頭取得瀏覽次數，只能做粗略的前後比較，無法確認是哪項設計帶來的變化。下次會在改版前設定 2–3 個指標，例如專案頁瀏覽深度、相關案例點擊、詢問來源等。
I am Peace
Let’s create some cool stuff :)
Phone
0973-311-322
abc20020413@gmail.com
LineID
@haha1017
I am Peace
Let’s create some cool stuff :)
Phone
0973-311-322
abc20020413@gmail.com
LineID
@haha1017
I am Peace
Let’s create some
cool stuff :)
Phone
0973-311-322
abc20020413@gmail.com
LineID
@haha1017