[故事分享]關於我從零轉職成網頁前端工程師的那檔事(中)

#職場故事 #網頁設計 #前端工程師 #轉職 #跨領域

五、網頁設計師要做什麼？

說實話，每間公司不一樣。

我不是只面試一間而已，光是網頁設計我應該至少投了十間以上，我問到的職務內容跟範圍不全然相同。依照公司規模和用的框架，會有滿大的差別。

網頁設計主要分成以下工作：

1. 前期需求討論：需取得案主的LOGO、企業形象，以及需要的頁面跟功能
2. 主視覺設計：通常會先設計首頁最上方Banner，須配合LOGO及企業形象規劃
3. 版面規劃、設計：主視覺確認後，開始規劃網頁的所有頁面編排以及流程
4. 切版：將設計圖寫成html+css+js的程式碼
5. 串接資料：網站需要資料庫（登入、購物車…等功能）的情況下才有這一步，靜態網頁（純展示圖片及資料）就不需要。

【註1：什麼是串接資料？】

值得一提的是，如果前後端溝通的方式不同，需要負責串接資料的人也不一樣。

以傳統網頁設計來說，網頁設計師（前端）只需要用html+css+js程式碼完成前面的架構，但你的html檔案必須改用php檔，輸出的網頁就會是php網頁，你把程式碼交給後端工程師，他會負責完成串接資料的工作。

php檔案也可以做簡單的模組化管理，比方說統一管理Menu，不用一樣的Code寫好幾個地方，方便維護。

總之，傳統網頁設計中，前後端的程式碼會混在一起，不利管理。

新型態的網頁設計會把前端跟後端分開，前端會開始使用Vue、React、Angular等框架語言，讓網頁專案的管理更加便捷，前端跟後端的程式碼總算不會混在同一份檔案內，可以完全個別作業。而在這種合作模式中，串接資料就是網頁前端工程師的工作了。

【註2：什麼是API？】

前端會透過呼叫Web API的方式取得(GET、POST)、修改(POST、PATCH)、刪除(DELETE)資料。在任意網頁按F12打開開發人員工具切到Network欄位，選項選Fetch/XHR，再按F5重整網頁，你就可以看到這個網頁中，前端call了哪些API。

這些API資料是完成目前網頁需要取得的資訊，可能是登入資訊、商品資料、搜尋結果等等，這些是後端工程師提供給前端工程師的資料，我們需要將資料塞進設計好的網站中，讓網站能夠正常運作。

這邊的知識算進階，有考慮往前端工程師發展才需要知道，網頁設計師不知道也沒關係。

因為我待的是小公司，除了前期需求討論是老闆做以外，主視覺、版面規劃、切版都是我的工作。

剛入職時，我已經會切版了，只是寫程式的速度挺慢，也有很多需要優化的地方，但好歹是能做到的程度，真正讓我感受到災難的是設計……

我不是設計科系出身的，雖然有畫過漫畫、排版過小說封面，但做出來的作品要跟真正的商案相比還是只能用一個字形容：「菜」。

入職的前半年，因為我做出來的設計實在太醜，被老闆娘嫌的不行，但他們還是有給我零星的案子讓我練手（那段時間的作品我沒放進作品集……），沒有能練手的案子就讓同事設計完再給我切版，或者做些修圖的簡單美工。

這半年間，我一有時間就開圖庫網看別人的設計，也有去買書、查資料，學構圖、色彩、版面編排，大量吸收資訊後，我慢慢內化成自己的能力。終於在半年後，我做出來的設計已經能夠稱得上是設計公司出品的了，從那之後我經手的案子也慢慢變多，自信心慢慢建立起來。

不得不說，網頁設計師經歷的前半年很生不如死（精神上）。遭受批評跟成為需要他人照顧才能活下來讓我受到很大的打擊，從這裡也看得出我是自信心極高的人，在那半年期間，我僅存的自信心都徹底瓦解了。這個事件讓現在的我回頭來看，是很五味雜陳的。

因為那段回憶，我遭受過強烈的批評，連我自己也覺得自己做的東西跟屎一樣，導致我現在很難肯定自己的實力，不管做得多好都覺得還不夠。

但也因為那段經歷，我才慢慢學會可以依靠別人，不要什麼事情都獨自承擔，就算我不那麼可靠，也有其他人能夠擋在我前面。說來很難過，但我從小到大，不曾從父母身上感受到這種感覺，反倒是我替父母擦屁股的經驗居多，小時候我總是感到自己很孤獨，而且還不時會有大浪把我捲走，捲到一個新地方要我重新適應。

這也是為什麼我覺得自己這次沒有退路、只能硬著頭皮硬幹的原因。我家是沒有後路的，我甚至在待業期間還要給家裡錢，不然家裡會繳不出房租，然後我還有學貸跟保險要繳，沒工作真的只能吃土。

但我不得不說，如果沒有把我逼到這個程度，我想我應該會逃跑，我不會耐著性子、忍受著批評學習這麼多專業技能，背水一戰的心情大幅促進了我的學習動力，也成就了現在的我，所以……

是福是禍，真的很難說。

六、為什麼要從網頁設計師轉職成前端工程師？

很膚淺的理由，一開始只是因為前端工程師薪水比較多，職稱聽起來比較猛。

別懷疑，就是這麼無聊。網頁設計當時的平均薪資是30~40k，我因為是超菜新人所以薪資談到28k，而且因為老闆沒有順應潮流做改變，又剛好遇到疫情，年終發不出來、也不會調薪，我就開始找下一份工作了。

我那時候查前端工程師的薪資大約是40k~65k，實際面試真的有給到40k的還真不多，除非你已經有一年以上的前端工程師經驗，才能談個42k~55k，不然像我這種轉職的很多都開35k~38k……喔我這邊說的是台中的狀況，如果台中你願意去博弈確實很多新人都給你40k起跳，但因為我想避開博弈業，整體薪資就會少個幾千。

對那時候的我來說，我心裡想：哇底薪40k耶好多喔~~~

……QQ

幹，現在想想都覺得以前的自己好可憐，買什麼都要考慮好幾個月。

七、網頁設計師轉前端設計師需要什麼技能？

基本上就是：

1. Vue.js、React.js、Angular.js這三個框架任選一項專精
2. • 建議Vue或React，Vue的難度低較容易上手，React遠端工作機會多
2. 熟悉JavaScript，至少ES6、ES7要熟悉
3. 會使用Git做版本控制，沒有大型專案經驗至少要看過教學、稍微使用過

以技能面來說，上面這三點是基本盤，性格部分的話：

1. 自學能力強
2. 可獨立作業
3. 有解決問題的能力
4. 擅長溝通佳（需團隊合作）

如果以上三個特質都有會很加分，因為寫程式實際上是個很孤獨的工作，大多時間都是看著自己的電腦坐著一整天，有Bug通常都自己想辦法解決。

但是前端工程師又需要跟後端工程師密切合作，後端工程師講的技術語言你其實常常會聽不懂，思考邏輯也跟一般人完全不同，這種時候最怕的就是不懂裝懂、沒有追問，我們做出來的東西就會不能用，多耗一堆時間，所以擅長溝通的人因為能降低誤解機率，工作效率就會高很多。

從網頁設計轉職成前端工程師，因為我會偷用上班時間學習，所以沒什麼銜接期，但也是用個半桶水響叮噹的狀態四處投履歷，面試了幾間，到某間被洗臉說JavaScript功力根本不夠，我玻璃心又碎了滿地……我回家邊哭邊氣邊查資料，好不容易才把面試時解不出來的題目解完了，又驚覺自己的實力還是不夠！繼續惡補自己的各種知識，又多學了一些必備技能。

過了幾天，現在上班的公司找我去面試（期間還有很多別間的面試），我跟主管聊的還算愉快，但筆試考題很多都寫不出來，我心知自己的專業能力遠遠不夠，我就問主管說：「為什麼會找我來面試？」

他回說：「因為妳的設計作品集不錯。」

聽到這裡，我心底很感動，也很自豪。

我曾經被嫌棄地一文不值的設計能力，到了現在，竟然成為我最大的武器。

我們又聊了一陣子，他問我還有沒有其他間找我面試，我說明天還有一間，好幾間在等通知（實話）。

他就說：「好啦！不然你後天上班行不行？」

當下我超級驚喜，一口就答應了。

雖然最後談得底薪比預期低，但我第一次領公司獎金時被數字嚇到，算一算年薪在台中已經是挺好的待遇了。

-----

因為故事挺長，我會分成上、中、下三篇發佈。

目前已經全部寫完了，最後一章會在本週五更新。

如果喜歡我的故事，歡迎留言跟我互動，跟我說你最喜歡哪個橋段哦！