這篇文章是我在 【前端工程師養成班】系列文章的其中一篇。
在這個系列，我會分享工程師養成班的課程規劃、各技能的學習內容與實務應用，讓還沒走上這條路的人可以一探究竟，再決定是否要走上這條不歸路。
本篇著重在前端工程師養成班所學的視覺設計，以及從業一年多的前端小白，在實務上的視覺設計應用。
關於我 | 餐飲背景，在決定報名養成班之前，對工程師、寫程式一點概念都沒有，大學科系與數理、資工、資管完全零交集。
而上課的年紀，正是鄉民熱烈討論工程師應該要退休的年紀。
這樣的背景，在半年的養成班苦讀後後成功轉職，目前在間不錯的接案公司做政府的案子，辦公室有大落地窗可以遠眺美麗華摩天輪與台北 101 ，過著朝九晚五、咖啡喝到飽、work life belance 的生活
什麼是視覺設計
對於網頁開發，視覺設計是指對網頁的整體設計進行規劃、組織、美化和優化，讓使用者能夠以最簡單的方式理解網站的內容
視覺設計的主要目標是增強網站的可用性、易用性和使用者體驗，並提高網站的美觀度和吸引力。
視覺設計通常包含以下範圍
- 布局設計：對網頁的版面進行規劃，包括內容的排列、尺寸和間距等
- 色彩設計：選擇適當的顏色搭配，以達到更好的視覺傳達，同時也要考慮與品牌的一致性
- 圖像設計：選擇合適的圖像元素，創造網站主題的一致性以及更好的視覺效果
- 字體設計：選擇合適的字體類型、大小和顏色等，以增強網頁的可讀性
- 動畫設計：設計適當的動畫元素，以增加網頁與使用者的互動以及吸引力
為什麼前端工程師要學視覺設計
與設計師溝通
實務上，有些團隊會編制設計師，工程師照著設計師畫的設計稿去寫出網頁
設計師可能畫出超美的畫面，但不一定符合 “網頁使用” 的需求，工程師寫不出來、或是切換裝置時版面會很奇怪，這時候就需要溝通，而良好的溝通的一環就是先了解對方的語言或思考方式，這系列的課程就可以補足這塊
自己設計網頁
又或者，小團隊沒有設計師、或是如果想要接案，必須從頭到尾自己來的時候，基礎的美感就很重要了！
當然也可以說：啊我就不懂設計阿，不然你自己來設計！(然後 $$$ 就少收點 ) 或是做個超級醜但功能齊全的網站交出去
面對網頁，人人都是外貌協會，就算功能齊全，要是網頁太醜，就是會讓使用者的體驗變差。
其實另外一個目的，應該也是養成班最主要的目的，是因為要製作個人及團體網頁為結業作品，要是零美感、零設計概念的成品，醜的慘不忍睹，可能連點進去看功能的興趣都沒有，以至於找不到工作… 況且養成班也需要些漂亮的作品來做宣傳是吧！
拓寬職涯道路
工程師養成班用心良苦，希望同學畢業後的職涯道路廣一點，除了網頁前端工程師以外，若發現對設計更有興趣，想往網頁設計師、或 UI/UX 發展，都有基本觀念及知識，能有面試機會，所以安排了不少程式碼以外的課程，視覺設計就是其中一環
養成班的視覺設計了教什麼
雖然很多人說美感是天生的，但基礎程度的設計，絕對可以靠練習或跟著簡單公式補足。
前端工程師養成班的訴求是讓大家能設計出一個漂亮的網站、畫出設計稿
色彩 | 多不如精
關於選色對整體視覺的影響，繽紛的選色會眼花撩亂容易失焦、精準的選色除了營造網站的整體視覺外，也可以帶出想傳達的感覺、並且可以讓使用者產生連結
例如亮黃 + 亮藍會想到 IKEA、褚紅 + 米色會想到無印良品這種視覺印象或聯想，對品牌來說都是好的
排版
課堂上老師用大量的設計範例來說明相同元素、不同排版會產生多大的影響，衝擊很大！
關於留白有多重要，印象最深的就是老師說：永遠都留得比你想像中再多一些就對了 XD
間距
基礎就是固定寬高。比例一樣怎樣都不至於太醜
內容相關的二個區塊間距縮小，帶出他們是一起的感覺；不相干的內容兼具則拉開，原理一樣
字體大小的搭配、圖文方向的延伸 ( 這我有應用在個人專題，入口頁首圖的美女圖，向著文字與 Logo、第一平屏的帥哥照片，面對著文字的標題，引導使用者的視線 )
很多基本原則，就算不懂設計，跟著原則走，基本上不會畫出太醜的網站
工具
Illustrator
學會設計簡單的 logo、icon、或不會繪圖的同學，可以從開源網站下載的圖檔，參考並修成自己要的樣子
Photoshop
簡單的去背、修圖用 Photoshop 處理
這部份很難，一結業就完全還給老師了 XD
順便抱怨一下，與 Adobe XD 相較之下，Photoshop 的使用者體驗真的很差，一堆圖示都不知道可以幹嘛，功能藏在功能裡，雖然強大，但新手不友善的工具，沒有人帶或教學媒介 ( 書、教學影片)，真的很難自己摸索！
Figma
這雖然不是養成班教的工具，但因為是我目前最常使用的設計軟體，所以一併放在這裡說明
畢業前夕，發現 Adobe XD 有匯出數量限制、同時又非常吃網路流量
結業後就花了點時間自學了這個超容易上手的設計工具，基本上如果會 Adobe XD，或是用過任何繪圖軟體，Figma的基礎功能都可以算是無痛上手，因為所有功能的 icon 都長的一樣
複雜一點、或特定功能，也多半可以用關鍵字在Youtube 上找到手把手的教學影片，很適合沒有繪圖軟體背景，但需要經常做設計稿的前端工程師使用。
學習心得
我是本來就很喜歡視覺設計，決定轉職方向時，曾經考慮過去念視覺設計的研究所，也一直想學繪圖軟體，無奈各種現實因素所以作罷。
報名前端工程師養成班課程，得知視覺設計也打包進來對我來說是賺到了！
幸運的是，這門課的老師本身有深厚的設計背景，是從設計師轉工程師的前輩，他也是上了這系列的前端功能師養成班，轉職成全端工程師，所以他完全知道二個角色的盲點或心態、也完全可以體會轉職的我們目前可能遇到的困境，每次有問題都可以給我們很實用的解答，是大家超喜歡的老師之一。
視覺設計之於前端工程師的職場應用
前端工程師一定要學視覺設計嗎 ?
如果公司沒有專門的編制，視覺設計會是沒人帶，但你最好會的軟實力
前面提到，有規模 / 大公司 / 重視使用者體驗的公司會編制專門的職位，但不是所有公司都有這樣的預算可以編制設計，也不是人人都有機會 / 運氣 / 能力可以加入這樣編制的公司。
以轉職來說，要比底層觀念，不可能比得過本科系念四年的 ，要說比 coding 邏輯或語法，也比不過有些從國小國中就把寫程式當興趣在發展的年輕人
而從另一個現實面考量，轉職工程師相較於本科系畢業生，技術水平或底層觀念通常是弱勢。
並且許多喜歡用轉職工程師的主管，看中的是全方位技能，而不只是會寫程式，這樣看來，求職時 coding 以外的技能，就是轉職者可以作為優勢的部分了
如果有行銷背景、設計背景或美術底子，視覺設計或許會是你比其他人更容易上手的項目，在轉職的路上就是小加分的機會，而那些前端包設計的公司，就會是你可以發展的方向
我自己的經驗，通常內部系統沒那麼在意視覺設計，好看的設計就是可以最快開發完成的設計。
但如果要做形象網站或品牌網站，就一定需要一些設計底子了！
在理想世界，會有懂網頁設計的設計師畫好設計稿給前端工程師開發，但在現實世界，設計師不一定存在，而客戶的想法通常很模糊。
以自己經手的專案為例，曾有過同一個網站前前後後改了 3 次設計，三次都是程式碼寫好，完成部署的程度（這客戶比較特別，不看設計稿，要用網頁形式來溝通）
從一開始完全沒提需求，憑空通靈（參考其他需求類似的網站）先出一個版本給客戶
這時候客戶就會開始產生一些相法、提出一些模糊的文字，像是活潑、活力、現代、親切等形容詞，或是明確告知想要或不要某些元素。
在來回溝通後，可能會得到以下這些代表客戶主觀用語的需求，就可以從這個方向繼續通靈開發。
活潑 ＝ 彩度高、又繽紛的畫面
親切 ＝ 插畫風格
現代 ＝ 酷炫動畫
在現實世界，大部分的客戶很難把喜好描述的很精準，通常需要靠專業的 pm 或業務去釐清網站設計。
但如果開發團隊沒有編制人來釐清設計需求，前端工程師就會是首當其衝的負責人，如果完全不會設計，最後花時間(加班)改 code 的苦主也會是前端工程師本人。
我就是不會設計能做前端工程師嗎？
可以的。
我的第一份工作，開發的系統都是內部使用，像是醫院面板等，大多是沒有要漂亮的畫面，而是實用方便操作為主。
這種情況，通常會選擇特定前端元件庫來使用，最常見的表單、按鈕、表格、主選單、麵包屑等，都會有寫好的樣板可以直接使用。
就業至今，我用過的元件庫有 Bootstrap ( 原生 html 或 vue 都用過 ), Buefy (vue), Vuetify (vue), Element-ui，都是可以讓零設計基礎的前端做出整體視覺效果還行的網頁。
而目前的工作是有 1/4 時間在做網頁設計。
但這份工作在面試時，就有被問到 ”會不會使用繪圖軟體？用過什麼繪圖軟體？”，所以這樣的工時分配，想想也不太意外。
考量就業市場供需，通常是需要一人多工的小團隊、或新創比較會有前端兼任視覺設計的需求
而這份工作需不需要會設計，求職時通常可以在職務描述、或是面試時得知
所以我認為，對於前端工程師來說，視覺設計應該算是僅加分不扣分的技能環節
如果喜歡我的文章，可以拍拍手讓我知道，更歡迎你追蹤並持續關注更多的分享。
想轉職工程師、對養成班有興趣、或對前端工程師有興趣的朋友們敬請期待 ~
網頁開發世界，我們不孤單，我們下篇文章見！