Web Design

1. 網⾴頁設計規劃
從設計介紹開發中的注意事項
1

2. 預告：開發習慣及注意事項
定義主要的 Grid
選出標準的⾊色彩
⽂文字字級、字體套⽤用注意
固定⽂文字規範設定
margin, padding 套⽤用倍率固
定概念念
元件設計
圖片輸出設定
陰影設定美化概念念
圖層管理理技巧
不同裝置的設計
素材來來源推薦
設計⼀一個⼯工程師看得懂的網⾴頁
2

3. WIFI
DAKUO-GUEST
55555555555
3
問題發問：
app2.sli.do/event/bbmu7j4h

4. 王志誠
4
設計師轉 前端⼯工程師
⾼高雄前端社群 - 常客
技術鐵⼈人賽 - 四次優選
六⾓角學院 - 共同創辦⼈人兼講師
擅長 設計前端、前端開發

5. 5
其它
4%
因為是 WEB 相關
80%
SKETCH 聽說很強
4%
設計的我都要
12%
單選：
對於今⽇日主題
參參與的主因是？

6. 6
複選：
在場使⽤用的比例例是
0
2.25
4.5
6.75
9
Illustrator Photoshop Sketch

7. 本次會⽤ SKETCH
介紹 WEB 設計上的細節
7

8. SKETCH 優點!?
8
所有參參數都可以在 Web or UI 上開發
快速的切圖輸出功能 (且精準度⾼高)
直接可在裝置上模擬
擁有 Grid 設計功能
插件多、主流、更更新快

9. 9
格線觀念念
960 Grid
http://960.gs/

10. 10https://www.president.gov.tw/Issue/139

11. 11
940px (Total Width)
60px (Column Width)
20px (Gutter Width)
10px (Gutter on outside)

12. 格線重點
欄欄位數是否具有彈性 (12, 16, 24)
column, gutter 是否有⼀一致性
12

13. 13
Menu Content
Header
Footer
940px (Total Width)
10px (Gutter on outside)
20px (Gutter Width)
700px (Column Width)220px

14. 14
⾊色彩配置
https://material.io/design/color/the-color-
system.html#color-theme-creation

15. 15

16. 16

17. 17

18. 18
https://color.adobe.com/zh/create/color-wheel/

19. 19
http://colorsupplyyy.com/app/

20. 20
系統⾊色
⽂文件⾊色
RGBA⾊色碼
明度
彩度

21. 21
⽂文字
⽂文字包含以下：
字型、⼤大⼩小、⾏行行⾼高、字間、
⾏行行間、段落落距離

22. 22
系統 系統預設 英⽂字體 中⽂字體
Winwdows Segoe UI
Microsoft JhengHei /
微軟正⿊體
Mac OS -apple-system
San Francisco /
Helvetica Neue
蘋⽅(PingFang) /
Heiti TC
iOS -apple-system
San Francisco /
Helvetica Neue
蘋⽅(PingFang) /
Heiti TC
Android Roboto Droidsansfallback
系統配置的⿊黑體

23. 你的字體其它⼈不⼀定有
23

24. 題外話，微軟如何設置他的字體
24
.zh-tw * {
font-family: "Microsoft
JhengHei",PMingLiU,MingLiu,"Segoe
UI","Helvetica",Garuda,Arial,sans-serif!important;
}

25. 25
https://www.justfont.com/fonts
https://fonts.google.com/earlyaccess

26. 26
⼤大⼩小、⾏行行⾼高、字間、段落落距離、固定
⽂文字規範 (網⾴頁中的設置參參考)

27. 27
固定的 Spacing
https://material.io/design/layout/spacing-
methods.html#spacing

28. 28
Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Warning! Better check yourself, you're not looking too good. ×
Oh snap! Change a few things up and try submitting again.
Card title
Some quick example text to build on
the card title and make up the bulk of
the card's content.
Card title
Some quick example text to build on
the card title and make up the bulk of
the card's content.
Card title
Some quick example text to build on
the card title and make up the bulk of
the card's content.
Some quick example text to build on
the card title and make up the bulk of
the card's content.
元件設計

29. 輸出參參考
Zeplin
Sketch Mesure
svg, png, jpg 的運⽤
尺⼨
29

30. 下次預告：開發習慣及注意事項
圖片輸出設定
陰影設定美化概念念
圖層管理理技巧
不同裝置的設計
實戰資源
30

31. 發問時間
31

32. ⾃自介時間
- 怎麼稱呼
- 現在職務是甚麼 / 現在做什什麼
- 接下來來想做什什麼 (或研究)
- 想聽哪個⽅方向
32