UI/UX
Web
Grid System
RWD排版
主視覺設計
icon設計
插圖設計
表單設計
色彩規劃

關鍵字廣告行銷 服務頁

2021年

01. 專案概況

該公司為數位廣告行銷公司,有官方網站,關鍵字廣告為公司的主要核心產品。
舊有頁面色調深藍色過重,加上有新產品要重新整合,為提供使用者完整的產品服務內容,與讓網頁搭配關鍵字優化,所以製成單頁式頁面做為廣告投放使用,獨立拉出產品重新規劃頁面設計。

專案角色

與 PM 互相合作與討論,負責UI/UX設計與產出、整體風格與插圖設計,針對用戶體驗與安排交互設計,最終切圖交付給工程師。

專案目的

將公司的核心產品業務,提供使用者完整的服務介紹與添增活潑感,所以重新規劃頁面及改變網頁風格。

專案目標

希望展現專業與信賴感,有完整服務介紹及服務流程,特別設計線上報價系統,讓價格透明化與供用戶篩選需求的報價單設計。

專案挑戰

保留官網少量插畫與深藍色元素,但又想添增活潑感,再依照服務內容設計新創插圖,又可以展示產品內容的重要性。

02. 設計流程

03. 設計產出

整體使用隔線系統 Grid system 與響應式 RWD 排版設計,給予設計師自訂整體風格。
PM 這次有在部分設計上提出明確需求與參考樣式,我的角色則是在每個區塊提供排版上的建議,與提供用戶好的體驗,並在設計上做決策。

痛點發現

  • 舊網站主色調為深藍色,整體顏色較黯淡
  • 提供使用者完整服務內容,如何清楚呈現說明
  • 客戶案例太少,無更新
  • 身為企業如何展現專業服務、透明資訊

解決方法

  • 遵循原品牌色,另外調配相近色調,選較明亮色彩
  • 完整服務內容較多,調整文字對比度
  • 圖片全面重新規劃,搭配更符合內容的圖片設計
  • 使用透明收費方式,讓使用者可線上模擬報價

專案明確需求

  • 主視覺背景想要不規則形狀點綴,網頁版主視覺文案呈現方式要交錯排列,圖片則改為插畫風格。
  • 網頁選單 CTA 按鈕有提供參考設計,想要改為文字 + icon
  • 服務內容圖片沿用官方網站風格,新插圖圖片再設計

一、首要主視覺:原本視覺較意象,文案不明顯,整體畫面偏黯淡,再重新調整整體設計,改較明亮帶點活潑感風格

二、服務特色:此區塊內容佔據主要範圍,在這裡我著重給用戶易讀性,並將眾多資訊歸納出統一性的呈現。換掉免費素材,改為更貼近內容說明的插圖;圖文不符,改為條列式說明與統一性圖標的 icon 呈現

三、附加服務:此區塊為企業附屬服務介紹,在這裡我根據資訊的重要性,減少大範圍版位設計,使用輪播圖方式呈現,為了整體內容更一致性,附加服務的插圖也重新設計

四、收費方式透明化:此區塊是企業網站重點設計之一,因此較大版面設計,方便讓使用者可以自行試算服務價格,依需求客製報價

五、增加客戶案例:設計滑鼠經過會顯示客戶心聲內容,考量手機用戶沒有Hover效果,在畫面添加箭頭指引,供手其他裝置用戶也能點擊後顯示內容

六、結尾FAQ:仍保留品牌原本識別色,優先顯示一項問題與解答,其餘項目則安排點選設計。
最後填寫表單:添加淡藍色背景滿版填色,作為重要資訊區塊的設計,以便使用者區分不同資訊內容。

手機版設計

G Suite 產品頁

- RWD排版
- 整體設計與配色
- 主視覺與插圖設計
- 價格表設計

查看作品

Valuecard 產品頁

- RWD排版
- 整體設計與配色
- 插圖設計

查看作品

稻吉數位 服務頁

- RWD排版
- 主視覺設計
- 插圖設計
- 表單設計

查看作品

說明會產品頁

- bulma樣板架構
- 主視覺設計
- 手繪風格
- icon設計

查看作品

田中系統 官網

- menu navigation
- footer
- 手繪風格

查看作品

富泰旅行社 官網

- RWD排版
- 整體設計與配色
- 主視覺與插圖設計
- 價格表設計

查看作品

田中系統 官網

- 手繪風格圖片
- menu navigation design
- footer design
- form design

查看作品

獨角獸 MVP

- 圖片設計
- Guideline
- Components
- UI Kit

查看作品

回應式廣告投放

- Google多媒體廣告
- FB廣告

查看作品

固定式廣告投放

- Google多媒體廣告


查看作品

電子報

- 封面設計
- 內容排版
- 活動宣傳

查看作品

簡介資料

- 下載簡介資料
- 排版設計
- 圖片設計

查看作品