Peace

artgital官網十週年改版

Type

Website / Corporate Website

Responsible

風格定位 x 網站架構 x 介面設計 x 工程交付

Client

artgital

Year / Time

2026 / 6 months

#讓專案成為主角的官網

Background

使用約十年的舊官網，風格與維護方式已跟不上公司現階段的需求。

業務與客戶都需要透過大量案例激發想像，但舊站的專案資訊不夠完整，後台也不易維護。這次改版的目標，是讓風格更明確、專案資料更完整，並讓後台能長期維護。

Solution

以「簡約 × 科技」定調，讓專案成為網站的主角。首頁以 3D 透視呈現精選案例，搭配標籤篩選與關聯案例，讓大量專案好看也好找；內頁改為區塊模板，企劃可自行更新；動態由程式端製作，兼顧互動效果與載入容量。

View Website

artgital官網十週年改版

Type

Website / Corporate Website

Responsible

風格定位 x 網站架構 x 介面設計 x 工程交付

Client

artgital

Year / Time

2026 / 6 months

#讓專案成為主角的官網

Background

使用約十年的舊官網，風格與維護方式已跟不上公司現階段的需求。

業務與客戶都需要透過大量案例激發想像，但舊站的專案資訊不夠完整，後台也不易維護。這次改版的目標，是讓風格更明確、專案資料更完整，並讓後台能長期維護。

Solution

以「簡約 × 科技」定調，讓專案成為網站的主角。首頁以 3D 透視呈現精選案例，搭配標籤篩選與關聯案例，讓大量專案好看也好找；內頁改為區塊模板，企劃可自行更新；動態由程式端製作，兼顧互動效果與載入容量。

View Website

artgital官網十週年改版

Type

Website / Corporate Website

Responsible

風格定位 x 網站架構 x 介面設計 x 工程交付

Client

artgital

Year / Time

2026 / 6 months

#讓專案成為主角的官網

Background

使用約十年的舊官網，風格與維護方式已跟不上公司現階段的需求。

業務與客戶都需要透過大量案例激發想像，但舊站的專案資訊不夠完整，後台也不易維護。這次改版的目標，是讓風格更明確、專案資料更完整，並讓後台能長期維護。

Solution

以「簡約 × 科技」定調，讓專案成為網站的主角。首頁以 3D 透視呈現精選案例，搭配標籤篩選與關聯案例，讓大量專案好看也好找；內頁改為區塊模板，企劃可自行更新；動態由程式端製作，兼顧互動效果與載入容量。

View Website

成果

為使用十年的舊站，重新建立「以案例為主角」的官網。我負責從風格定位到工程交付的設計流程，並規劃區塊式後台，讓企劃能自行更新專案。

  • 流量
    上線 3 個月，瀏覽量已達舊站去年全年的 80%

  • 效能
    影片自動轉檔後，手機版容量降低至少 50%

  • 維護
    專案資料改以區塊式後台管理，讓企劃編輯更加順暢無門檻

成果

為使用十年的舊站，重新建立「以案例為主角」的官網。我負責從風格定位到工程交付的設計流程，並規劃區塊式後台，讓企劃能自行更新專案。

  • 流量
    上線 3 個月，瀏覽量已達舊站去年全年的 80%

  • 效能
    影片自動轉檔後，手機版容量降低至少 50%

  • 維護
    專案資料改以區塊式後台管理，讓企劃編輯更加順暢無門檻

要解決的問題

官網的使用者分為四類：業務、客戶與代理商、企劃，以及所有進站的訪客。我們依據公司內部對舊站的使用情境，整理各類使用者的使用目標，並找出舊站在各個情境下的痛點。

要解決的問題

官網的使用者分為四類：業務、客戶與代理商、企劃，以及所有進站的訪客。我們依據公司內部對舊站的使用情境，整理各類使用者的使用目標，並找出舊站在各個情境下的痛點。

解決方法

這次改版的核心目標是「讓專案成為網站的主角」。為了讓各部門對方向有共同標準，我們以三個關鍵字作為設計判斷的依據：簡約、直覺、互動、易維護。並列出以下四個優化項目，依序說明。

解決方法

這次改版的核心目標是「讓專案成為網站的主角」。為了讓各部門對方向有共同標準，我們以三個關鍵字作為設計判斷的依據：簡約、直覺、互動、易維護。並列出以下四個優化項目，依序說明。

優化項目一｜簡約

先統一風格認知，再開始設計

改版最花時間的不是畫面，而是讓各部門看見同一件事。因此在設計前，必須先建立共同的風格語言

優化項目一｜簡約

先統一風格認知，再開始設計

改版最花時間的不是畫面，而是讓各部門看見同一件事。因此在設計前，必須先建立共同的風格語言

做法：

  • 整理公司近期的形象關鍵字：持續進化、碰撞、變形

  • 依五個面向蒐集參考案例：整體調性、頁面功能、首頁動態、局部亮點動態、文字動態

  • 最終定調為「簡約 × 科技」

做法：

  • 整理公司近期的形象關鍵字：持續進化、碰撞、變形

  • 依五個面向蒐集參考案例：整體調性、頁面功能、首頁動態、局部亮點動態、文字動態

  • 最終定調為「簡約 × 科技」

優化項目二｜直覺

讓案例成為主角，並降低搜尋門檻

業務與客戶進站是為了看案例，舊站卻讓縮圖被標題遮住，大量專案也缺乏編排。因此從兩個方向著手：

優化項目二｜直覺

讓案例成為主角，並降低搜尋門檻

業務與客戶進站是為了看案例，舊站卻讓縮圖被標題遮住，大量專案也缺乏編排。因此從兩個方向著手：

Phase 01 | 讓案例被看見

  • 首頁以 3D 透視排列精選案例，打破平面框架擊

  • 資訊於 Hover 時才顯示，畫面完整留給首圖

  • 設計 Top10 專屬版面，避免大量案例造成視覺疲勞，同時把近期最有亮點的專案排在前面

Phase 01 | 讓案例被看見

  • 首頁以 3D 透視排列精選案例，打破平面框架擊

  • 資訊於 Hover 時才顯示，畫面完整留給首圖

  • 設計 Top10 專屬版面，避免大量案例造成視覺疲勞，同時把近期最有亮點的專案排在前面

Phase 02 | 讓案例好搜尋

  • 新增「形式」分類，加強搜尋專案的準確度

  • 關聯案例：看完一個案例後延伸瀏覽

  • Load More：分批載入大量專案

Phase 02 | 讓案例好搜尋

  • 新增「形式」分類，加強搜尋專案的準確度

  • 關聯案例：看完一個案例後延伸瀏覽

  • Load More：分批載入大量專案

優化項目三｜互動

讓訪客感受網站的「活」，並控制動靜比例

互動公司的官網，不該只是被動閱讀文字。我希望訪客在瀏覽過程中，能感受到網站是「活」的。但動態過多會造成視覺疲勞，因此在繪製 wireframe 時，就先決定「動的區塊」，評估互動比例，該靜的地方維持靜。

優化項目三｜互動

讓訪客感受網站的「活」，並控制動靜比例

互動公司的官網，不該只是被動閱讀文字。我希望訪客在瀏覽過程中，能感受到網站是「活」的。但動態過多會造成視覺疲勞，因此在繪製 wireframe 時，就先決定「動的區塊」，評估互動比例，該靜的地方維持靜。

Phase 01 | 首頁動態

  • 3D 透視展開前，加入 LOGO 滾動進場

  • Hover 推進時，文字以輸入程式碼的方式呈現，呼應科技風

Phase 01 | 首頁動態

  • 3D 透視展開前，加入 LOGO 滾動進場

  • Hover 推進時，文字以輸入程式碼的方式呈現，呼應科技風

Phase 02 | 局部亮點動態

  • Gallery 頁面的「We love...」按鈕，點擊後綻放Emoji

  • 分類標籤新增「魔法」，點擊後放大並跳出 pop up 視窗

Phase 02 | 局部亮點動態

  • Gallery 頁面的「We love...」按鈕，點擊後綻放Emoji

  • 分類標籤新增「魔法」，點擊後放大並跳出 pop up 視窗

Phase 03 | 文字動態

  • Header 的創意語句，以紅色矩形向右滑動切換，內容帶黑色幽默，凸顯公司調皮的形象

  • Footer 的閃爍驚嘆號，象徵持續向訪客打招呼

Phase 03 | 文字動態

  • Header 的創意語句，以紅色矩形向右滑動切換，內容帶黑色幽默，凸顯公司調皮的形象

  • Footer 的閃爍驚嘆號，象徵持續向訪客打招呼

優化項目四｜易維護

用結構取代人工，讓企劃自己更新

企劃需要在專案結束後即時更新資訊，舊站的後台卻多半得仰賴工程師。隨著專案與數位資產快速增加，我們啟動管理後台的規劃，從資料結構開始整理：

優化項目四｜易維護

用結構取代人工，讓企劃自己更新

企劃需要在專案結束後即時更新資訊，舊站的後台卻多半得仰賴工程師。隨著專案與數位資產快速增加，我們啟動管理後台的規劃，從資料結構開始整理：

  • 梳理專案資料與標籤分類，建立有條理的後台編輯架構

  • 內頁改為可替換的區塊模板，包含專案基本資訊、圖片、影片、說明內容、合作廠商五種區塊，後台欄位同步規劃

  • 依原型逐一調整後台編輯畫面的細節，例如刪除不必要的區塊、降低「刪除」鍵的視覺層級，避免誤觸

  • 需要特殊排版的圖片，由設計端先切好上傳，工程師不必額外切版

  • 梳理專案資料與標籤分類，建立有條理的後台編輯架構

  • 內頁改為可替換的區塊模板，包含專案基本資訊、圖片、影片、說明內容、合作廠商五種區塊，後台欄位同步規劃

  • 依原型逐一調整後台編輯畫面的細節，例如刪除不必要的區塊、降低「刪除」鍵的視覺層級，避免誤觸

  • 需要特殊排版的圖片，由設計端先切好上傳，工程師不必額外切版

  • 以 Claude Code 製作可互動的 HTML/CSS 高保真原型，驗證複合篩選在真實操作下是否順暢

  • 以 Claude Code 製作可互動的 HTML/CSS 高保真原型，驗證複合篩選在真實操作下是否順暢

問題與取捨


問題與取捨


動態

問題：如何在動態美學和容量之間取得平衡？

做法：設計端以 AI 協作產出 CodePen Demo，由程式端實作，避免輸出大量動態素材

動態

問題：如何在動態美學和容量之間取得平衡？

做法：設計端以 AI 協作產出 CodePen Demo，由程式端實作，避免輸出大量動態素材

專案數量的取捨

問題：專案全數搬遷後，如何兼顧好找、輕量與不失焦？

做法：將Top10精選專案置頂，也製作獨立首頁，重複增加精選專案的曝光度。瀏覽時也設置『Load More』按鈕，降低載入負擔

專案數量的取捨

問題：專案全數搬遷後，如何兼顧好找、輕量與不失焦？

做法：將Top10精選專案置頂，也製作獨立首頁，重複增加精選專案的曝光度。瀏覽時也設置『Load More』按鈕，降低載入負擔

先圖還是影片

問題：影片該置頂還是後置？如何讓客戶既看得到影片，又願意繼續瀏覽專案內容？

做法：維持內容在前、影片置底的排版，但另外在首屏設置『滑至影片』按鈕，底部則增加『返回首屏』按鈕

先圖還是影片

問題：影片該置頂還是後置？如何讓客戶既看得到影片，又願意繼續瀏覽專案內容？

做法：維持內容在前、影片置底的排版，但另外在首屏設置『滑至影片』按鈕，底部則增加『返回首屏』按鈕

Result

  • 確立公司形象風格「簡約 × 科技」

  • 上線 3 個月，瀏覽量達舊站去年全年的 80%（折算月均約 3 倍）

  • 手機版影片容量降低至少 50%

  • 企劃可自行更新專案資訊

Challenge

  • 對焦
    挑戰不在美感技術，而在讓各部門對公司的想像一致，因此前期聚焦風格定位

  • 協調
    外部專案同步進行時，持續推進進度，並對焦各部門資訊

  • 收穫
    投入最多的是資訊統整、後台規劃與內容模板化，也因此對設計系統產生更多興趣

Next Time ?

  • 載入速度
    大量圖片與影片仍有讀取延遲

  • 間距細節
    圖文間距可再細調

  • 手機版與英文版 RWD
    因排程調整，未做細部檢驗，下次預留檢驗時間

  • 成效指標
    改版前先設定 2–3 個指標，例如專案頁瀏覽深度、相關案例點擊、詢問來源，才能確認是哪項設計帶來變化

Result

  • 確立公司形象風格「簡約 × 科技」

  • 上線 3 個月，瀏覽量達舊站去年全年的 80%（折算月均約 3 倍）

  • 手機版影片容量降低至少 50%

  • 企劃可自行更新專案資訊

Challenge

負責公司網站形象設計的主責設計，除了美感的技術力之外，更多的挑戰來自於大家對公司的想像，所以前期的聚焦更顯得重要。而在外部專案同步進行的排程中，進度的推進、追蹤，以及各部門的資訊對焦，也是我在這個專案不斷注意和把關的。過程中我也發現在前期的資訊統整、後台介面規劃、內容的模板化的部分特別投入，也令我對於設計系統產生更多興趣。

Next Time ?

  • 載入速度
    大量圖片與影片仍有讀取延遲

  • 間距細節
    圖文間距可再細調

  • 手機版與英文版 RWD
    因排程調整，未做細部檢驗，下次預留檢驗時間

  • 成效指標
    改版前先設定 2–3 個指標，例如專案頁瀏覽深度、相關案例點擊、詢問來源，才能確認是哪項設計帶來變化

I am Peace

Let’s create some cool stuff :)

Phone

0973-311-322

E-mail

abc20020413@gmail.com

LineID

@haha1017

I am Peace

Let’s create some cool stuff :)

Phone

0973-311-322

E-mail

abc20020413@gmail.com

LineID

@haha1017

I am Peace

Let’s create some

cool stuff :)

Phone

0973-311-322

E-mail

abc20020413@gmail.com

LineID

@haha1017