「網頁切版 PK 戰」是六角學院所舉辦的切版挑戰，挑戰者要切出一個甜點電商的網站。而簡報在介紹此次設計稿的設計流程，分成設計需求、資料蒐集、草稿繪製、與設計完稿共四大階段。

3. 設
計
完
稿
設
計
需
求
資
料
蒐
集
草
稿
繪
製

4. 了了解設計需求
——設計的⾸首要任務

5. 了了解設計需求
✦ 電⼦子商務網⾴頁
✦ 主題可依照素材種類來來挑選
✦ 版型規劃以「CSS 切版」為主要考量量
✦ 可採⽤用 Bootstrap 4 規範來來設計介⾯面
設計需求

6. 了了解設計需求
✦ ⾸首⾴頁
✦ 產品列列表⾴頁
✦ 登入⾴頁（需提供社群平台登入）
✦ 購物⾞車車⾴頁（以表格來來設計）
✦ 結帳⾴頁
✦ 結帳成功⾴頁
⾴頁⾯面需求

7. 旅遊/訂房/餐廳/成衣

8. 旅遊/訂房/餐廳/成衣
＊甜點店＊

9. 了了解設計需求
✦ 免費圖片資源好不好取得
✦ 需求的六個⾴頁⾯面好不好發揮
主題考量量

10. 了了解設計需求
✦ 有難度、具挑戰性
✦ 新⼿手老⼿手都能同樂
✦ 排版儘量量不要重複
隱藏需求

11. 資料去哪蒐集
——在開始繪製之前

12. 資料去哪蒐集
✦ 相簿整理理：Collections
✦ 不同風格：Light versus Dark
✦ 挑選技巧：風格⼀一致性
免費圖庫
Unsplash

13. 資料去哪蒐集
✦ 相簿整理理：Boards
✦ 直式⽂文字：japanese web design
✦ 類似風格：more like this
版型靈感
Pinterest

14. 資料去哪蒐集
✦ 相簿整理理：Collections
✦ 風格篩選：E-commerce
✦ 參參考重點：特殊的排版
版型靈感
Awwwards

15. 開始繪製草稿
——確立網⾴頁粗略略排版

16. 開始繪製草稿
✦ 確定網格系統數值
✦ 使⽤用單⾊色⾊色塊排版
✦ 選擇網站主要⾊色彩
繪製要點

18. 開始繪製草稿
✦ Assets Colors
✦ 從圖片擷取⾊色彩
✦ 配⾊色靈感：Adobe Color CC
選⾊色技巧

22. 設計完稿階段
——各區塊的細節設計

23. 設計完稿階段
✦ 視覺動線流暢
✦ 預留留資訊增減空間
✦ 響應式排版
繪製要點

24. 設計完稿階段
✦ 直式⽂文字
✦ 區塊疊合
✦ 不對稱設計
✦ ⽑毛玻璃特效
設計細節

26. 設計完稿階段
設計標注 ✦ 物件尺⼨寸與間距
✦ 網⾴頁標準⾊色⾊色票
✦ 字體樣式
✦ 格線欄欄位

29. Q&A