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

初階網頁設計師:

 1、HTML、CSS
  • 當靜態網頁給後端工程師套程式時,仍時常會有網頁破版與樣式跑掉的情況發生:background背景延伸應用、瀏覽器內建BUG知識、常見問題
  • 開始嘗試使用一些進階技巧,依此提升網頁內容完整性:css sprites、多階層下拉式選單、各元素對齊與垂直置中。
  • 針對HTML5、CSS3的語法開始進行逐步性的學習與導入
  • 自行主動尋找熱門工具軟體,提升工作效率:Zen CodingLiveReload瀏覽器開發工具
 2Javascript
  • 會寫簡單的jQuery動畫效果(toggle、Sliding、animate)
  • 會套用jQuery plugin,並修改CSS變成自己所想要的樣式

中階網頁設計師:

 1、HTML、CSS
 2Javascript

高階網頁設計師:

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

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

 1廣納交友,每個同行都會是你的借鏡與學習對象
  • 參與實體社群與讀書會活動:一個人學習能力有限,藉由同行間聚會交流,可以吸收到不少相關知識與know how,可在短時間內提升一甲子功力。
  • 加入網路社群網站(Plurk、Facebook):當你在忙碌其他事情時,別人剛好在吸收新知並分享出來,你就可節省不少爬文的時間。如果剛好他發的心得連結剛好是你正頭痛的問題解法,那就真的賺到了。有困難時,將問題拋出來後,也可以從同行間獲得啟發並解決問題。
  • 不要吝嗇於分享,或擔心別人會恥笑你的心得文章:分享的用意是在於你希望你的文章可以讓還未掌握此心得的朋友們能有所收穫,勿忘自己的本意。
 2、新的一年如何規劃掌握哪些新的網頁技術
  • 不要盲目追求尖端技術,需衡量自身能力是否已足夠:舉個簡單的例子,如果妳基礎不好,就跑去學很難又專精領域的東西,當你花了一兩年學會這個東西後,又有更新的軟體出世。但因為自己基礎不好,所以在學習時,花的時間一定會比一開始就打好基礎的人還要久。
  • 導入新技術時,需考量到它的兼容性是否完善:例如使用了HTML5+CSS3新技術,但結果客源都是IE系列;故沒辦法支援,在客戶立場上又很難交代。或者是用了很酷很炫的jQuery動畫特效,但結果智慧型手機不支援,要修改但又是別人寫的code也無從改起,且也不好意思請客戶換另一種UI交互動畫等等,所以要導入新網頁技術時,需先評估風險與瀏覽器兼容性。
  • 跨領域學習結合應用,學習第二專長:人難免會對職業有倦怠時期,並產生自我懷疑,建議也可投資學習其他與網頁設計有關係的領域,例:UI/UX領域、電子商務行銷、人機介面、國際語言等等。
  • 逐步定位自己的專業方向:WEB技術無遠弗屆,我們時常會遭受到新的技術吸引而忘了原本初衷,定義好目標較不容易使自己的方向偏離。建議可找一個自己憧憬的前輩與職缺,規劃自己要花幾年的時間達到該門檻。
--

其他內容:



18 則留言:

  1. 為何網頁視覺設計除了要會切版寫css之外,一定要學寫Javascript呢??這不是程式設計師該做的事嗎?專業分工去哪了?

    回覆刪除
    回覆
    1. 網頁視覺設計在初中級僅是提出jQuery的簡單應用而已,
      我的文章也並未寫到需要寫原生的js code,
      jQuery只要用他所提供的簡單語法,就可以應用出適用的特效出來,
      以我所教過的學生,只要懂得HTML與CSS,只要兩堂課(2HR)便可以做出很多變化效果出來,
      且可以套用別人已寫好的jQuery plugin,
      所以這東西並沒有你想像的難的,

      且到後面的中階和高階你還是必須知道前端工程師該如何把你的html與css是怎麼樣變化出動畫效果,(譬如你click了某元素,某個div會如何從background-position會從0跑到1000)

      這樣你寫出來的html與css在轉交給工程師時,他們才會套得順利^_^

      刪除
  2. 那我想問一下,在做案子時會發現,當我套了一些網頁效果後再轉交給程式,但公司配合的程式並不會按照我所寫的效果去做修改,而是『參考』我做的效果,然後自己全部改掉,改成他所習慣用的語法來改寫。所以對程式而言,有時候要他『修改』我從網路上抓來的套件並不如他自己從頭寫來得輕鬆。我有必要去做這種多此一舉的動作嗎?

    回覆刪除
    回覆
    1. 如果你是與他人合作,那當然事前的溝通很重要,這樣就可以減少重工的機會。
      工程師把你的js拆掉便表示因為你的 HTML元素沒有個規則性,
      導致他無法套到動態資料庫網頁上面去。 

      當然也有可能其他原因,不過我建議在你要投入開發JS動畫時,
      可事先與工程師溝通,以避免重工的事件發生,
      (EX:你畫動畫草圖,讓工程師了解你的想法後讓他進行建置)

      刪除
    2. 這公司的程式設計是外包的,幾乎無法有完整溝通的可能性,網路活動的走期跟製作期本來就都很短,趕著來趕著上。但公司還是希望內部的視覺設計把『能做到的』盡量做到,之後再丟給外包程式套。想請問,你有在開課嗎??如何報名如何收費呢??

      刪除
    3. 不好意思,目前我只有在一對一遠端授課,沒有對外小班制教學,我想你可以先加我SKYPE後約個時間聊一下,我可以針對你目前的狀況給予您適時的資源與協助^_^
      我的SKYPE:sfisonly

      刪除
    4. 好的,那我就加你skype囉,謝謝你!!!!

      刪除
  3. 雖然我的例子有點奇怪 ! 但是我這幾年來 , 寫的網頁純粹都是用Flash , Sql 和 php
    (還有會少許的html)

    雖然上面都沒有提到這些 , 但是我覺得呢 .. 也是很好用的組合 , 能完成很多的需求 .
    數學運算交給php , 大量資料給Sql , 維持網頁美觀交給flash .

    回覆刪除
    回覆
    1. 你是視覺設計師轉網頁設計師嗎?
      如果是的話還蠻厲害的呢,
      通常視覺設計師挺排斥直接看程式碼與資料庫的東西,

      如果你自己已經有一個既定流程在跑,那就ok哩。
      不過這邊也提醒一下,IOS iPad與iPhone產品是無法瀏覽到flash動畫的,
      台灣的行動裝置市占率已經達15%左右,
      預估明年會到20~25%,
      所以也可以考慮投入ios設備也可以瀏覽的網頁設計方式嘍

      刪除
  4. 好文好文,也感謝推薦社群

    但是新手那關我過不了,有點想哭。

    回覆刪除
    回覆
    1. even 你言重了,

      在我心目中你可是神一般的存在啊XDD

      刪除
  5. 請問一對一教學費用如何計算

    回覆刪除
  6. 費用部分如果你對此課程有興趣,
    再+我skype並約時間討論即可。
    在此也提供相關課程內容連結:

    http://sam0512.blogspot.tw/2012/11/css.html

    回覆刪除
  7. 棒呆了!
    看完收穫良多~

    回覆刪除
  8. 版主真的是非常熱心的人。謝謝您 Claudia

    回覆刪除