【如何成為網頁設計師?】網頁設計師必備5大技能

不少做平面的設計師想轉行走網頁設計這條路,做網頁和做平面是完全不同的思維,加上 html 寫完後要交給 F2E (Front End Engineering,前端工程師) 套特效套程式,並不是平面可以怎麼做、網頁就能怎麼做。就算是人畜共通疾病如口蹄疫、你可以把治療豬的藥方療程直接套到人類身上嗎?

想當網頁設計師需要具備甚麼技能?

如果你想轉型成為網頁設計師,請必備下列技能:

1. Photoshop   

2. Illustrator    

3. HTML    

4. CSS    

5. Responsive

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

 

網頁設計師五大技能逐一介紹

 

1. Photoshop

基本中的基本,只要是任何單位是「PX」、給螢幕用的圖稿我都建議用 Photoshop 製作,Illustrator 是印刷用軟體,對 PX 支援度很差。

 

2. Grid

現在新開發的網頁通常會要求製作 Responsive ,為了要方便套用 Bootstrap 或 Susy ,Grid 就是一定要懂的觀念,Grid 的運用:PS外掛 能幫助你在 PS 裡快速建立參考線。

 

3. 切圖

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

 

4. Illustrator

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

 

5. HTML

推薦:HTML5 不會切圖、不會手 寫 Code 的不要說自己是網頁設計師,做網頁只靠 Dreamweaver?和蒸飯箱蒸出來的便當感覺差不多,勉強能入口但很難吃。有的 RD 會接受用 Dreamweaver 之類視覺化軟體產生的 Code,這要看和設計師配合的 RD 接受度到哪裡。通常平面想轉網頁設計很大部份是薪水可以喊比較高,如果想拿更高的薪水就不要依賴 DW ,老老實實的練英打吧。(推薦:死亡打字員)想當個網頁設計師, W3C 是一定要懂的。當然非常多的元素不會每個都記得,把這個網址當目錄用吧,不懂或忘記就跑來查一下。

 

擁有強大的網頁設計美感,是網頁設計師第一個要求。

點我成為 Toby 的網頁設計服務供應專家

 

Responsive (回應式網頁設計)

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

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

新手如果想看各方大神現成 code 可以去 Google developers 社群問問題,也可開個 Github 帳號上去看看,你可以把程式碼上傳到這些平台與人交流,你也可以在這些平台上找到開源專案,觀摩其他人的程式碼,或甚至加入開源專案的協作。

 

結論

以上寫的相對入門,只能算是給個方向讓初學者知道要怎麼學習。也可以用  Toby 找導師,靠自己自學寫出來的東西一定會被正規 RD 嫌棄。

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

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

現在就成為 Toby 的網頁設計專家 馬上接案

 

——

延伸閱讀: 想接案或者拓展客源?Toby 幫你配對服務,解決生活大小事!

相關閱讀:【 2020 在家工作攻略 】九種在家打工賺錢方法

密切關注 Toby Blog 跟 Toby TW 粉絲團,隨時隨地找 Toby 幫忙!

Leave a Reply

Your email address will not be published. Required fields are marked *