在網頁開發時，通常會有一版美編設計，但是通常只有部份頁面，常常只看到登入，首頁，有點常識的會給列表，表單，資料明細一份，然後通常就沒了…沒辦法，美編是以頁面計價，就算只是表單多加一個欄位，或是列表多一欄，對他而言就是「新的一頁」。所以比較熟悉生態的專案經理，或是主管長官，會請美編配色，畫圖，做圖示，跟做部份主要的頁面，懂的會加上幾條微調的條款，然後再來靠工程師依樣畫葫蘆發揮。

所以身為沒有美感的工程師，只要碰到做網頁，多少還是會先被要求生出美感出來…然後等長官看到這真的是「工程師」風格搭不上後，才會想說要再找美編補強（一般軟體部門不會配專職的美編，所以主管通常都會先看工程師可以做到那裡，真的不行才再看怎麼辦…）

不過工程師大多本份還是在寫code，沒有太多的時間去做視覺，主要還是利用既有的框架，或相對接近結果的框架去套跟修改。所以重點放在怎麼利用手邊資源組合實作出結果比較重要。

對於網頁的視覺設計，除了圖片，圖示外，最重要的部份就是配色，版面，風格，通常我都會把他叫theme。關鍵字通常我是用「css framework」，先看主流框架有那些，主流的都會提供非常豐富現成的css class定義，讓你忘了style 這個屬性的存在（嗯，他的重點就是希望消滅 style，利用 class 來實現一致性的規範/ guideline）。

但是有class規範還不夠，網頁都還是有配色，版面，元件樣式議題，這些組合起來就會變成theme。所以再框架名加theme去查，例如「bootstrap theme」、「tailwind theme」，各派有自己的概念跟用法。像bootstrap 是透過 less/sass 來做設定（wiki：https://zh.wikipedia.org/zh-tw/Sass ），tailwind則是透過js來設定。

bootstrap 對於 theme 的概念，可以調整的部份可以參考 https://getbootstrap.com/docs/5.2/customize/overview/ 他的優點是全部的設定都有預設值，而sass 的特性可以 override，所以可以在原始碼外面，附加一個客制化的檔案，專門只調參數就可以。例如：

至於配色的部份，這邊列幾個我平常拿來用的參考：

• material design color palette
  • 早期整理的配色系統，他把常用色系的色卡都做好了，很實用。material design 3 已經不用色卡，而是動態計算顏色去做色階，雖然彈性更高，但對於入門者，現成色卡比較好決定。
  • https://m1.material.io/style/color.html#color-color-palette
• color hunt
  • 各種情境的四色配色，依用色比率排序，很容易懂，主要是這站的色系我個人覺得看了比較順眼
  • https://colorhunt.co/
• huemint
  • 有提供bootstrap 的版型，調調顏色，可以快速看到相對的應用的感受。這類型的網站也蠻多的，但這站的操作，跟產生的原則還蠻不錯的。除了可以產生配色，若結合上面的選色，到這邊來預覽一下也是蠻方便的。
  • https://huemint.com/bootstrap-basic/

其實bootstrap 本身也有其內見的色彩色階，不過相對於 material design的選項，我覺得顏色項目較少，顏色彩度也比較高（單純個人喜好問題），所以，通常我只會使用內建的灰階（$gray-100～900），灰階就沒有顏色問題XDb。有需要用到的顏色，都透過 scss 設定，透過 bootstrap 的 utils製作成 root var 參數來應用，也方便限制住整個網頁顏色的應用，避免顏色過多的雜亂問題。

webfont 圖示資源的部份，跟大部份工程師用的差不多：

• bootstrap icon
  • 內容全部免費，傳統用法，有提供svg
  • https://icons.getbootstrap.com/
• fontawesome
  • 部份免費，傳統用法。拿著募資賺來的資金，再賣商業圖示很會圈錢？！的一個團體/公司？（早期靠募資起家，現在已經是商業網站了，怕通通都變商業要收錢，就僅量別用）
  • 最後一版免費的應該是v4： https://fontawesome.com/v4/icons/
  • 目前版本：https://fontawesome.com/search 怕用到要錢的，選free就可以，提供svg檔
• material design icon
  • 內容免費，新版的material icon 的缺點就是改用法，在網頁coding上看起來就容易不一致。主因material icon 內容也沒多到只用這一套就解決，所以目前屬於觀望態度
  • https://fonts.google.com/icons 已被列入成為 google fonts 的一環（建議用chrome開啟）。可下載svg，但沒有html copy選項

通常我會看webfont 有沒有svg，svg的好處在於，可以直接貼在html，或者直接引用svg，只是要用一兩個時，不用下載整個webfont 的內容。而svg也方便用在figma（最近流行的網頁設計軟體）與各種設計繪圖軟體再加工使用。

至於舊的material icon 版本，我覺得現在不用去追尋他，因為現在的Bootstrap icon 有比以前豐富好用，真的要比量，fontawesome 還是贏。想當年， bootstrap icon免費的部份很少，他當時有賣收費的版本才比較多一點點；fontawesome那時靠募資免費（募資超標賺很多，當年爆紅的成功案例），icon量最大，但問題是品質較差，常會碰到icon偏移，基線不對齊，有的大小寬度還有差，導致常要再下style微調位置讓他看起來對齊一點點；而後起的material icon 量蠻多的，品質也好，加上和material design的概念風潮一起，所以曾經成為主流一陣子，新版改寫法，對於很多人都很不適應，舊版升新版改code更是苦工。

最後在補充一下圖庫，基本上要工程師去翻圖庫，應該可以叫血汗了，不過通常是有些人強迫症發作，要自己看順眼才行，或者是純興趣。也記錄一下自己目前會用的免費圖庫：

• 插圖 unDraw
  • 做demo時，若想要有個插圖好看一點（填滿示意畫面，不要空虛），來這邊通常可以找到，或免強搭個邊也行（只是demo而已），提供svg，還可以選一個配色，優質網站。他現在應該沒更新，因為有出另外一個需要授權應用的網站了，但還是佛心，至少不是把舊的關掉只剩營利。
  • 使用svg圖檔的優點是，內建背景透明色，搭在那種色系或是版型都很順不會突兀。
  • https://undraw.co/illustrations
• 圖片 unsplash
  • 若是需要圖片，照片時，可以先來這個站找一下，不用登入，不會偷夾帶商業圖片廣告
  • https://unsplash.com/
• 圖片/影片 pexels
  • 也是免費的圖片網站，也有影片，示意demo有需要，搭一下就有fu
  • https://www.pexels.com/zh-tw/

免費的圖庫網站，通常用在demo 或示意圖上還可以，但因為視覺是很吃電波的，如果是正式的網站，沒有美編繪圖，那就找商業圖片網站買一下就好。但是一樣的問題，吃電波，所以在跟客戶溝通的期間，可以考慮選有提供浮水印示意用的圖商，至少挑到後放上去，fu是比較差，但比較不用擔心侵權的部份，之後正式確定那張圖再買就好。

不過最難的，應該是怎麼在圖海裡，下對關鍵字，選到想要的圖片吧！有時後挑圖花的時間，可能都比簡易加工製圖（找對類似樣本或背景圖，再自己加字調整）還慢。

總之在處理這些視覺，或是偏美編的工作上，最簡單的判斷方式就是，如果花N小時（自訂成本上限）還沒搞定，就直接報告主管另請高明處理吧！