2013年網頁設計師等級表

在教課的這一年來時常會被問到視覺平面設計師假使要跨領域做網頁設計師，究竟要達到什麼樣的水平，才能夠去應徵該職缺。

所以這篇文章是寫給視覺平面設計師欲轉型為網頁設計師的參考門檻等級表(HTML、CSS、JS)，以及一些個人的心得分享，提供大家參考學習。J

新手等級（尚未達到應徵門檻）：

　1、HTML

• 各DOCTYPE文件的HTML撰寫方法：HTML4、XHTML 1.0 Transitional、HTML 5
• 不了解熱門HTML標籤的使用時機：div、h1、ul li、img、a、p、table、br
• 對於HEAD與META標籤的應用仍還在摸索階段

　2、CSS

• 僅會用網頁編輯軟體自動產生CSS碼，但並不了解CSS的基礎知識：選擇器、行內(inline)與塊狀(block)屬性、權重覆蓋
• 尚未掌握box model、float、position、reset的CSS排版觀念
• 設計出來的網頁版型僅能兼容單一瀏覽器，網頁排版門檻至少需兼容IE8↑、chrome、firefox

　3、Javascript

• 尚在學習jQuery的應用方式：jQuery官網、國內教學連結、國外經典教學(需註冊)
• 不曉得該如何將別人寫好的jQuery動畫效果套至自己的網頁上

初階網頁設計師：

　1、HTML、CSS：

• 當靜態網頁給後端工程師套程式時，仍時常會有網頁破版與樣式跑掉的情況發生：background背景延伸應用、瀏覽器內建BUG知識、常見問題
• 開始嘗試使用一些進階技巧，依此提升網頁內容完整性：css sprites、多階層下拉式選單、各元素對齊與垂直置中。
• 針對HTML5、CSS3的語法開始進行逐步性的學習與導入
• 自行主動尋找熱門工具軟體，提升工作效率：Zen Coding 、LiveReload、瀏覽器開發工具

　2、Javascript

• 會寫簡單的jQuery動畫效果(toggle、Sliding、animate)
• 會套用jQuery plugin，並修改CSS變成自己所想要的樣式

中階網頁設計師：

　1、HTML、CSS：

• 對基本網頁Layout已有一定的水平，並嘗試學習其他網頁呈現方式：瀑布流(Waterfall)、Fullscreen Design、視差滾動（Parallax Scrolling）、前端框架(Bootstrap)
• 逐步了解後端工程師套版流程與邏輯，(template、字數限制、img伸縮性質)
• 漸進式網頁效能優化，並提升HTML、CSS之可利用性、維護性：OOCSS、SMACSS、PageSpeed 
• 開發流程效率已逐漸面臨瓶頸，並開始評估是否要投入研究新的軟體工具與網頁語言，進以加速開發網頁版型效率與品質：Sublime Text 2、Compass+sass、Less
• 已掌握一種以上的行動裝置網頁排版方式：fluid grid、jQuery Mobile、Responsive Design

　2、Javascript

• 已能寫簡單的jQuery動畫效果：toggle、Sliding、animate
• 可套用jQuery plugin，並修改CSS調整為所想要調整的樣式：jQuery UI、Lightbox 2、jcarousel
• 了解HTML與CSS是如何透過javascript來做出動畫效果：CSS overflow、background-position、JavaScript Event。
• 有能力自行找相關資源，利用js來兼容HTML5+CSS3瀏覽器兼容性問題：CSS3 PIE、Respond.js、html5shiv、video4all、selectiviz

高階網頁設計師：

　1、HTML、CSS：

• 對於現今PC/Mobile網頁設計的知識已具備全面性的了解與應用經驗，可與UI設計師、前端工程師共同協作，並規劃出友善的網站動線設計
• 網頁設計中可規劃針對各瀏覽器導入漸進增強/優雅降級之理念設計：no-js、CSS3 Animations 、HTML5 Canvas
• 隨時掌握趨勢潮流之網頁知識與技術：Retina、WebFont、Responsive Design、Font Awesome
• 注重使用者介面(User friendly)、有能力可以建立Wireframes，並對UI / UX 設計規劃具備一定水平

　2、Javascript

• 可與前端工程師共同協作，設計出具前瞻性產品：Hybrid App、軟硬體結合之產業應用、HTML5 GAME

不論你是任何時期皆可開始投入的建議事項：

　1、廣納交友，每個同行都會是你的借鏡與學習對象：

• 參與實體社群與讀書會活動：一個人學習能力有限，藉由同行間聚會交流，可以吸收到不少相關知識與know how，可在短時間內提升一甲子功力。
• 加入網路社群網站(Plurk、Facebook)：當你在忙碌其他事情時，別人剛好在吸收新知並分享出來，你就可節省不少爬文的時間。如果剛好他發的心得連結剛好是你正頭痛的問題解法，那就真的賺到了。有困難時，將問題拋出來後，也可以從同行間獲得啟發並解決問題。
• 不要吝嗇於分享，或擔心別人會恥笑你的心得文章：分享的用意是在於你希望你的文章可以讓還未掌握此心得的朋友們能有所收穫，勿忘自己的本意。

　2、新的一年如何規劃掌握哪些新的網頁技術：

• 不要盲目追求尖端技術，需衡量自身能力是否已足夠：舉個簡單的例子，如果妳基礎不好，就跑去學很難又專精領域的東西，當你花了一兩年學會這個東西後，又有更新的軟體出世。但因為自己基礎不好，所以在學習時，花的時間一定會比一開始就打好基礎的人還要久。
• 導入新技術時，需考量到它的兼容性是否完善：例如使用了HTML5+CSS3新技術，但結果客源都是IE系列；故沒辦法支援，在客戶立場上又很難交代。或者是用了很酷很炫的jQuery動畫特效，但結果智慧型手機不支援，要修改但又是別人寫的code也無從改起，且也不好意思請客戶換另一種UI交互動畫等等，所以要導入新網頁技術時，需先評估風險與瀏覽器兼容性。
• 跨領域學習結合應用，學習第二專長：人難免會對職業有倦怠時期，並產生自我懷疑，建議也可投資學習其他與網頁設計有關係的領域，例：UI/UX領域、電子商務行銷、人機介面、國際語言等等。
• 逐步定位自己的專業方向：WEB技術無遠弗屆，我們時常會遭受到新的技術吸引而忘了原本初衷，定義好目標較不容易使自己的方向偏離。建議可找一個自己憧憬的前輩與職缺，規劃自己要花幾年的時間達到該門檻。

--

其他內容：

　1、個人參與的前端實體與網路社群：

• 高雄前端社群
• KSDG - 高雄軟體開發者社群
• RGBA
• HTML5與CSS3在台灣
• JavaScript.tw