iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 30
5

在前端職涯中,我常遇到許多視覺科系背景的設計師來詢問投入前端領域的可能性,我可以打包票和你說是百分之兩百適合,但礙於許多人會對所謂的「前端工程師」、「前端設計師」、「網頁設計師」的工作內容感到黑人問號,因為有些設計師本身也會一些網頁排版,那麼到底要具備哪些能力,才可以稱得上自己有投入到「前端」呢?

前端工程師與前端設計師的差異

在講解前端之前,先附上一張圖,左邊是前端設計師,右邊是前端工程師。前端設計師會比較著墨在 UI/UX 設計並轉為網頁格式,他們能夠確保所設計出來的 UI 能夠在網頁上忠實呈現。

https://ithelp.ithome.com.tw/upload/images/20180102/20040221DtmesseBzB.png

其實這段是比前端工程師還要來得有優勢的,就比方說前端工程師是必須拿到設計稿才能開始規劃前端架構,但是前端設計在設計 UI 時,就可以開始思考 CSS 模組化架構、JS 實作可行性等邏輯,而前端工程師則必須被動獲得設計稿後才有辦法開始規劃,流程上就慢了好幾拍。

在我輔導的學生當中,有設計經驗的設計師轉前端設計,拿的第一份薪水的平均值也高於前端工程的第一份工作,理由很簡單,畢竟前端設計除了前端技能外也包含了 UI 設計,無形間將自己打造為 T 型人才薪水也較高些。

若要分兩者的工作內容,我會說左邊是比較偏向「網頁 UI 視覺呈現」,右邊是偏向「程式邏輯」,雖然學的都還是 HTML、CSS、JS,但前端設計在學這些技術時是偏向「網頁視覺動畫呈現」為導向,前端工程是偏向「API整合、JavaScript 開發」為重點。

那麼你說你是設計師想要跨足右邊整個內容可以嗎?當然也可以,畢竟任何東西都可以靠後天培養的。

網頁設計師、前端設計師的差異

有很多人會搞不清楚,網頁設計師與前端設計師的差異,其實工作內容是差不多的,就是需要設計UI,同時也必須將 UI 轉化成前端介面。但若要以程式程度來細分的話,先不講設計功力,這裡用前端火侯來舉例:

不靠譜的前端設計師

  • 當設計完前端介面後,就將整包網頁檔丟過去給後端,但不瞭解後端開發邏輯以及是否好套版
  • 不懂版本控制語言,所以也不懂該怎麼跟其它工程師協作程式碼
  • 當架構變大時,不瞭解如何透過工具或程式語言進行優化 (gulp、Webpack、CSS 預處理器、NPM)
  • 不瞭解瀏覽器渲染原理,以致於在 debug 時,不知道該如何透過瀏覽器內建的除錯工具來除錯
  • 僅會套 jQuery Plugin 實作動畫效果,更進階要自己客製因為不懂 JS 底層與瀏覽器應用導致處處綁手綁腳
  • 還不太熟悉 WEB UI 介面,同時不清楚何謂 Guideline,例如 input 在 desktop、mobile 在各瀏覽器的渲染規則

靠譜的前端設計師

  • 比任何人都瞭解一個 HTML TAG 在各載具上的瀏覽器的兼容性。
  • 在圖形設計上,瞭解 CSS 的繪圖能力,不會任何東西都匯出圖形,能用 CSS 設計出來且又不影響網頁效能為主。
  • 知道 SVG、PNG、JPG 的使用時機,並瞭解螢幕 Retina 機制,不會設計會讓圖片糊掉的致命性錯誤。
  • 瞭解 JS、CSS 在開發網頁動畫效果的任何細節,擅長使用 SVG、Canvas、WebGL 設計各種 animation
  • 知曉後端資料庫合作邏輯,當 CODE 有問題時,會從 Git repo 拉下來切 branch,修改完再 merge 丟給後端。
  • 當前端介面需要統一化時,會主動出公司內部的 WEB Guideline,,方便其它同仁遵守規範進行設計
  • 會相當專注於網頁元素的設計細節,例如 web font、image、loading、文字設定(行距、字距、粗細、字形大小、標題權重)

而我認識這些靠譜的前端設計師,薪水級距也在年薪 80~120w左右,也是一個結合本身設計所長,開闢出自己的新道路的一個新的職涯方向,前端設計師

觀察職稱與工作內容,瞭解廠商究竟是要找什麼樣的人才

最終你還是要觀察公司在職缺網站填寫的工作內容,因為我還是會看到有些廠商職缺寫「前端工程」,但竟然要包含設計 UI,或是要找前端設計或網頁設計,但工作內容都是跟「平面設計」有關,寫 CODE 權重不到兩成。那以前端設計師來說,設計與寫 CODE 的時間差不多都一半一半,或者是寫 CODE 時間仍然偏多。

建議與求才廠商詢問工作比重,才能確保自己想投入的技術是否能在公司發揮長才,在靠譜的前端設計師,我也列舉了一些投入方向,若你有意轉職前端設計師,也歡迎找諮詢更多細節 :D


上一篇
時勢造英雄,奠定前端工程師的未來發展
系列文
前端工程師養成手冊30
0
564219
iT邦新手 5 級 ‧ 2018-01-02 10:38:35

糟糕,最後一天惹
還沒明確整理出想問的問題QQ
應該說,還沒整理出一個方向,不知道怎麼討論
然後,新年快樂 ~ <(' ')\

新年快樂哦 ^_^

0
阿成
iT邦新手 5 級 ‧ 2018-03-22 13:45:14

感謝分享投入前端的大小事,傳記非常的精采,一看就是4個小時,作為一個正準備投入前端世界的學生,改變了我許多原本的幻想XD
整本讀起來像心法,在枯燥的學習中覺得很受用

很高興這份手冊有幫助到你,預祝您求職順利 :D

0
jason0shi
iT邦新手 5 級 ‧ 2018-04-18 09:16:30

感謝作者花大量時間,將自己的實際經驗分享給我們,30篇我都全部看完了,我自己本身是寫手機
app的工程師,最近有興趣再多了解一些前後端相關的技術,看完以後讓我覺得學習的方向更加明確
,然後在求職的那幾章篇幅我感覺到非常有同感,跟我以前去面試的公司經驗相當雷同。

很高興這篇文章有幫助到你,有任何問題再請隨時和我說 :D

我要留言

立即登入留言