網頁設計師基本功

 

　　@Akane_Lee ：不少做平面的設計師想轉行走網頁設計這條路，做網頁和做平面是完全不同的思維，加上還要熟悉或了解html和CSS代碼，所以就很考驗設計師的自學能力了。而且還有一點，我們在設計網頁的過程中，並不是你想怎麼設計都可以的，還要考慮編碼實現和用戶體驗。那麼今天我們就來和您聊聊，想轉型成為網頁設計師，需要必備的一些技能知識點：

　　Photoshop

　　Illustrator

　　HTML

　　CSS

　　Responsive

　　加分：Bootstrap、Sass、Compass、Susy…等，會套用現成的 jquery 包、JS 包之類也就差不多了。再深入就是F2E的領域。

　　Photoshop

　　基本中的基本，只要是任何單位是「PX」、給屏幕用的圖稿我都建議用 Photoshop 制作，Illustrator 是印刷用軟件，對 PX 支持度很差。

　　Grid

　　現在新開發的網頁通常會要求制作 Responsive ，為了要方便套用 Bootstrap 或 Susy ，Grid 就是一定要懂的觀念。

　　切圖

　　當你會寫 Html、搞懂 Div、Css 後，你就知道怎麼切圖了(無誤)，不會寫 Code 的視覺設計師切出來的圖常常被退貨也只是剛好…做個蛋糕需要糖和巧克力粉、材料供應卻老給他鹽和胡椒粉，是想逼寫 Html 的人從種甘蔗和可可樹開始嗎?

　　Illustrator

　　既然都是平面設計師想轉型，這套一定用的非常熟悉，可惜我對這套的定義就是「送印刷廠」用。在我的制圖過程中，所有能用向量繪制的部份我都會用向量。PS 的向量工具不太好操作，遇到比較復雜的圖型我會在 AI 裡畫好、貼進 PS 為形狀圖層，再來調整圖層樣式。所以 AI 只會用到畫向量的功能，其他全進 PS 處理。

　　HTML

　　推薦：HTML5

　　不會切圖、不會手寫 Code 的不要說自己是網頁設計師，做網頁只靠 Dreamweaver?和蒸飯箱蒸出來的便當感覺差不多，勉強能入口但很難吃。有的 RD 會接受用 Dreamweaver 之類可視化軟件產生的 Code，這要看和設計師配合的 RD 接受度到哪裡。通常平面想轉網頁設計很大部份是薪水可以喊比較高，如果想拿更高的薪水就不要依賴 DW ，老老實實的練英打吧。(推薦：死亡打字員)—— YouTube視頻，自備梯子。

　　想當個網頁設計師， W3C 是一定要懂的。當然非常多的元素不會每個都記得，把這個網址當目錄用吧，不懂或忘記就跑來查一下。All Standards and Drafts – W3C

　　補充：

　　W3Schools Online Web Tutorials

　　W3Fools – A W3Schools Intervention

　　CSS

　　推薦：CSS current work & how to participate

　　margin、padding 是初學者最容易搞混的兩個值;Float 很常用但不小心就破版;熟悉 Background 可以玩出很多花樣…等等。在 CSS 細節部份就可以偷懶一點用現成的了，雖然產出的 Code 比較丑不優雅，但 RD 比較少去動到這一塊，所以還可以接受。我自己常用的偷懶工具如下：

　　圓角框：CSS Border Radius Generator

　　陰影：Box Shadow CSS Generator

　　按鈕：Buttons – A button library built with Sass and Compass

　　可以看 browser 對 html、css 等等的支持度：Can I use… Support tables for HTML5, CSS3, etc

　　當然很有很多其他在線生成或是外掛包，歡迎大家補充，好讓我能更偷懶一點…

　　Responsive

　　先把 Html 和 Css 練熟了再來看 Responsive 這個大難題。要做好一個 RWD 從 Wireframe 就要規劃好。在 Wireframe 階段我習慣先設計 Desktop 版本，功能最多最完善。但在寫 Code 的時候會是反過來、先從 Mobile 的尺寸開始刻。剛接觸 RWD 的先套 Bootstrap 增加成就感和手感，等熟悉了覺得不夠用綁手綁腳的時候，差不多該踏進 Sass、Compass、Susy 的領域。

　　別用現成的軟件做 Responsive，除非是純靜態網頁不需要和 RD 合作，原始碼髒就髒沒關系反正不會有人看了。目前我看到「排排版就好」的軟件產出的 Code 沒有干淨的，只要是之後有人還要接手的產出、拜托維持它的干淨整齊。有沒有打開廁所門看到一團亂產生暈眩感臉色發青的經驗?看到惡心的 Code 就是這種感覺。

　　結論

　　以上寫的非常粗淺，只能算是給個方向讓初學者知道要怎麼學習。最好還是去找個 F2E 拜師學藝一下，靠自己自學寫出來的東西一定會被正規 RD 嫌棄，我就被老公罵過「這是什麼邪魔歪道」，邊哭邊學被他嫌棄了一整年才得到勉強及格的評語。

　　如果能把上述 5 項都練起來，就能自己接案賺外快了。只要和程序無關的靜態網頁都難不倒你。網絡上有些套裝的特效包可以拿來改一改套用，看起來也很炫。(遇到需要套程序接後台的可以兩手一攤說這超出網頁設計的領域要找 RD 配合。)

　　網頁設計和 F2E 職務范圍部份重迭，都要寫 Html、Css，注重使用者體驗等等。最大的差別在於網頁設計師要畫 Flow、Wireframe、Mockup、切圖、(標示文件)，會寫 JS 特效最好，不會寫也沒關系。但 F2E 就要對 JS 很熟悉了。網頁設計師算是一腳踩在 UI/UX 圈、另一只腳踩在 F2E 邊在線的角色。千萬小心在 Code 上不要和 F2E 起爭執，請謙虛求教，沒事拿自己的弱項去撞別人的強項做什麼?RD 寫 Code 輸給設計師是哪門子笑話?設計師強的當然是視覺啊!