前端工程師 V.S. 設計師

心得分享

職場上網頁設計師和美術或設計師合作的心得

Wireframe

Mockup

Prototype

以設計廚房水槽來說

設計師 決定水龍頭樣式和位置

前端工程師 安裝水龍頭與水管

後端工程師 讓水管有水

響應式網頁設計

Responsive Web Design

舉例: 螢幕寬度為 1366px 時

會使用 lg 的樣式

網格 Grid

https://getbootstrap.com/docs/5.1/layout/grid/

https://www.adobe.com/products/xd/learn/design/layout/web-design-best-practices.html

一致性

重複利用，關聯性

重複利用

• 文字大小
• 間距
• 顏色
• 前端特效
• 按鈕

https://www.kikk.be/2015/

網站圖片

使用圖片時要注意的是...

• 圖片格式
• 圖片壓縮
• 減少不必要的圖片

JPG? PNG? GIF? 

SVG? WEBP?

一般情況下選擇 JPG

需要透明底的時候選擇 PNG

需要動畫時選擇 GIF

不怕 IE 和 SAFARI 的時候選擇 WEBP

簡單的輪廓與形狀選擇 SVG

Fontawesome

https://fontawesome.com/

減少不必要的圖片

圖片壓縮

懶人包: https://tinypng.com/

Zeplin

https://zeplin.io/

按鈕

https://xd.adobe.com/ideas/process/ui-design/designing-interactive-buttons-states/

網站文字

系統字體？

雲端字體？

https://fonts.google.com/

文字流動 不可避免

文字大小 不可按比例縮放

常逛好網站蒐藏！

https://www.awwwards.com/

Q&A

謝謝大家