Design Guideline
字體規範
顏色規範
元件模組
表單設計
佈局設計

田中系統 網頁設計規範

2022年

01. 專案概況

專案目的

減少開發與設計的時間成本,也方便工程師了解規格,也幫助跨職能角色上合作提升工作效率。

專案背景

內部資訊快速的變動之下,總是花費大量時間產品或網站頁面,故制訂好規範讓人員從中挑選樣式,更好掌握商品快速公開時間。

專案目標

提供使用者良好體驗,達成裝置與平台使用的一致性,自訂公司內部系統網站規範,以利維護與開發,並提高用戶體驗。

專案挑戰

全站改版頁面較多,還要考量中英文版本共用,及有新的頁面規劃,制定佈局上花比較多時間,全網站分批次進行。

02. 設計流程

03. 設計產出

遵循隔線系統設計 Grid system ,公司有購買基本樣板,再從中自訂屬於公司的網站系統規範 Design Guideline,以利工程師了解規格,取得更有效率開發,也能保持介面一致性。

痛點發現

  • 每次開發產品網頁皆要從無到有,耗時又耗工
  • 製作的網頁 CSS 樣式都沒有統一
  • 資訊豐富想完整呈現,不知如何佈局頁面資訊,如何規劃易讀性與有效傳達內容

解決方法

  • 制定網站規範,以利維護與開發與保持介面一制性
  • 設計模組與元件,方便跨職能應用,快速提高工作效率
  • 易讀性:文字的級距與考量欄位多寡的頁面佈局設計

一、以下為子頁,較完整呈現多佈局與元件的設計,完整的規範無對外公開,不便詳細露出。
字體規劃:使用無襯線字體,字體級距設計、免費字型優於網站速度

二、佈局間距:使用Bootstrap 框架欄位排版,並在規範安排多種佈局分別單欄、雙欄、多欄制定間距

三、色彩規劃:常用文字、表格、按鈕等設計皆有統一用色,保持介面一致性

四、按鈕與表單設計:分別設計主要與次要按鈕,表單則依照類型設計 (諮詢表單、下載簡介等、預約表單等)

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多媒體廣告


查看作品

電子報

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

查看作品

簡介資料

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

查看作品