想從設計走到前端?先了解前端在幹嘛吧!

你是設計嗎?你想往前端發展嗎?那先了解前端在做什麼吧 :)

設計的工作流程

身為一個過來人,應該說我也還正在這條路上行走,有一些心得想跟大家分享。我是從設計起家的。設計的領域又可粗分為圖示設計跟排版設計…等等,而我是屬於排版這一塊。做網頁的流程大致是:

  1. 打開 PhotoShop / Sketch 從一張空白的圖層開始做出一個網站
  2. 進切版(用 PhotoShop / Sketch 切出需要的 icon) 以及 Layout (用 HTML + CSS 做出網站)
  3. 會碰到 JS 的互動時,我能找套件就先幫忙做好,不行就放著給後端
  4. 丟給後端套程式。

如果你不是純視覺,我想你的工作流程可能跟我差不多。那,這樣不算是前端嗎?

前端的工作流程

事實上,前端沒有大家想的那麼簡單歐,不過還是有個簡易版的工作流程(俗稱「看得到」),流程大致為:

  1. 收到視覺給的設計稿(通常是 PSD 存成的 JPG 圖片檔),跟視覺討論一下了解動線
  2. 開始切版(用 PhotoShop 切出需要的 icon,可由視覺提供,也可能自己要會一點 PhotoShop) 以及 Layout (用 HTML + CSS 做出網站)
  3. 開始做出 JavaScript 互動,不管是用套件還是自己刻
  4. 跟後端配合串資料,將後端提供的資料(通常是 API) 接到網頁上,使其能順利呈現資料

(按:「看得到」意指瀏覽網頁時看到的樣子,包含網頁長相 (HTML + CSS),用滑鼠或鍵盤點選的互動 (JavaScript),我們通常也可稱之為 Prototype )

前端與設計的工作流程差異

比對一下設計的工作流程,主要的差別在於:

  • 前端不產視覺 (廢話)
  • 前端跟設計都要會 HTML + CSS 做出靜態網頁 (除非你是純視覺設計)
  • 前端要比設計懂 JS,不只會套會用,還要會寫,厲害一點的人還會自己寫 plugin
  • 前端要懂一些後端的東西,包含如何互丟、接資料,簡單來說就是要懂得如何處理 Client 端 & Server 端的訊息

(按:「純視覺設計」一職通常是大公司才會開這樣的缺,有想了解其中差異的,可以留言告訴我你想看,這樣我才有動力再寫一篇XD)

有沒有開始覺得前端很令人抖抖?光是要會刻 JavaScript,應該就有很多設計卻步了吧!更別說還要跟後端串啊~!

畢竟從以前的觀念就是,做設計的畫面比較強(右腦發達)、寫程式的人邏輯比較強(左腦發達),除非很有才,否則很難左右腦都開發的完完整整。
但也別灰心,邏輯這東西是可以被訓練的喔!也許一開始寫的很差,只會土法煉鋼;但我相信寫久了、多看別人的 code,或是有好的主管帶領你,絕對可以慢慢進步!一起加油吧。

前端要做的工作

看到這,有沒有燃起了濃濃的信心!不過前面這些還只是前端「看得到」的工作,接下來,來告訴大家什麼是前端「看不到」的工作吧。
請先看這張流傳已久、強大的前端架構圖:

(圖片出處:好像已經找不到帳號的 Flickr 連結)

哈哈,有沒有驚了一下,所謂「看得到」的部份才只是冰山一角罷了。剛剛升起的自信心是不是又被打擊了呢!

假設你只是吞了一下口水,卻還是對前端很嚮往、很有愛,還是想轉前端試試看,我最後跟大家分享一下,你可以從哪些部份開始學起。(老話重提一萬遍:這是我自己的經驗,不是每個人都適用,所以大家可以參考看看,有喜歡的就吸收,沒喜歡的也別吐嘈,但歡迎討論)


從設計走到前端,推薦的學習流程

Step.1 結構化、模組化你的 HTML/ CSS code

我覺得設計跟前端寫出來的程式碼,最大的差別就在這。前端的邏輯性很重,他們會把自己寫程式的經驗往回套到 HTML / CSS 裡,並且以模組化和用 slim, scss 等工具為樂(尤其看到 HTML / CSS 可以使用 function 或是變數,眼睛就整個亮起來 XD)。

當然,我們這群轉職者不需要強迫自己眼睛亮起來,也不需要為了跟風而去用這些工具,就我所知還是有很多前端界的大老是不用 slim, scss 取代原本的 HTML / CSS,除非你真的從裡頭找到對你有幫助的點,否則工具只是輔助,你也還是要懂 HTML / CSS 的本質流程,才能寫出好的 code。

為了友好的跟其他前端人員 co-work,以及和後端人員溝通,你要先嘗試修改自己的 HTML / CSS code 發想思維,這部份很博大精深、也很看經驗,不過還是有幾篇文章可以給大家參考:
1. 成為 CSS 團隊的一員:CSS 團隊開發的最佳實踐 / MSDN Magazine
2. CSS-Guidelines : 編寫易於管理及維護的 CSS 的指導綱要

至於 HTML 的 markup 同樣也是很多眉角可以拿出來討論,加上每個人都有自己的想法,討論個三天三夜大概也說不完。如果你不知道要聽誰的意見好,那請以「你工作團隊的意見」為優先考量,畢竟你是要跟他們一起工作,而不是跟外面的那些討論者。多討論彼此能接受的寫法,並且嘗試將其他人的寫法吸收納入,等到以後你變成有決定權的人,就可以訂套 Guildline 出來啦(好像扯太遠了XD)

Step.2 JavaScript 不得不練,一定要練!

我想這沒什麼好說的了,這就是前端吃飯的工具阿 XD,你能不練嗎?如果真的學不起來 JS,或對 JS 沒興趣,那..你可以考慮往圖示設計或純視覺前進!?

前陣子在 JSDC,Even Wu 有個演講:如何教設計師前端技術。他在裏面提到:「不要丟一本工具書給設計」,設計是視覺的動物,你要先給他看網頁特效,如果他覺得有趣,他就會自己去學、去找。

大致來說是這樣沒錯,學做網頁本來就是要有興趣 XD。但有興趣只是領進門的必要條件,打好基礎才是能學到東西的重點。所以我認為,還是要給設計一本工具書,如果你想直接看網站文件也可以啦 XD。

工具書的重點是在打基礎,沒有這些基礎,你看到有趣的特效還是只會套用。但如果你真的想走前端,至少要懂得怎麼套用、怎麼改點 function、怎麼調用變數 … 等等吧!

雖然 Even Wu 演講的時候提到的例子是以 CSS3 為例,不過不管是 HTML / CSS / JavaScript…任何程式語言,「基礎」永遠是最重要的喔!,地基不先打穩,房子倒了都不知道是什麼問題呢 XD

Step.3 學會用 Developers tools 進行網頁除錯

Developers tools (開發者工具) 這也是一定要會的!有在寫 HTML / CSS 的人對他應該都不陌生了,利用開發者工具進行網頁除錯,應該是每個人必備的技能。

而如果要往前端邁進,必須將開發者工具的使用範圍擴大,除了「Elements」之外,你要開始學習「Network」、「Timeline」、「Console」…等這些面板的運用,假設你是使用 Google Chrome,Google 有提供一系列的相關入門教學,請大家好好認真研讀!!!

就連我自己也要認真研讀呢(握拳
如果很會用開發者工具進行除錯,對於網站的製作絕對可以省時省力(想想你們以前在用「Elements」的那種愉快之心吧 XD)

Step.4 你要開始在乎網頁效能

以往身為一個設計,只要把 layout 後的網頁檔丟出去就沒你的事情了(除非套程式的時候跑版 XD),但身為一個前端,你要開始注重網頁的效能,包含網頁讀取時間、網頁大小、連線數、元件載入的時間順序…等等阿裡不達所有關於「時間」的議題;甚至也要關心網站在 mobile / PAD 的效能喔。

其實說到這我一直很疑惑,以往 56k 逼逼逼數據機連線的時代,大家網頁動輒讀取 30 秒以上都在可忍受範圍,現在頻寬愈來愈大,大家卻連 1 秒都不願意等,這反差實在讓我百思不解(個人碎碎念請忽略)

至於哪些元件會影響網頁效能呢?舉凡所有網頁檔案都會喔,每個檔案都是一個連線數,所以這也是為什麼我們要用 css sprite, lazy loading, coding optimize 等技術,就是為了讓效能變好。這裡有一篇 20 個線上測試網站速度的工具 給大家做參考,我自己首推 Pingdom Tools

以上這些,是我自己的前端入門,所以我也推薦給各位,如果你覺得跟你的狀況雷同,不妨參考。


至於前端串後端,我倒是覺得可以慢慢來,因為反過來思考,後端也是要懂如何串前端,假使一開始不熟,可以先請教後端再慢慢補強。其他的前端工作也是一樣,都可以透過學習再慢慢加強,但我認為首重還是前面這幾點。

從設計轉前端,是一條強大且漫長的路,跨過去了就是你的;跨不過也不要氣餒,純視覺設計也是一條強大且漫長的路喔,大家一起加油吧 :)


  • vincent

    讚,寫到心崁裡

  • Kelvin

    阿木好厲害

  • siuon

    muki 請收我為徒!

  • 呂孟馨

    好文,受益良多。

  • 呂孟馨

    我要看 "純視覺設計" 的文章!!!

    謝謝

    • XDDDD 真感謝

    • alulu

      我也想看~~

  • 愉快之新? 愉快之心? 在下對前端不熟,還請指教 😛

    • 這跟前端熟不熟好像沒關係,就是個錯字!!! XD

  • appplesun

    現在的老闆都會叫設計做前端的工作,稿的我們有很多時候在那邊搞JQ搞動態以前還要跟後端配合去改他們已經套好程式的html~稿的自己要前端不前端的,剛跨過去又進步去這樣~
    最後變成了一個只會套JQ但寫不出的JQ的不知道什麼東西….@@然後自己又偏偏就喜歡非FLASH的動態~就只好死命的去看JQ文前端文然後垂牆壁 冏
    所以也就剛好來這晃了一圈~

  • 真的是很好的文章 , 謝謝 !

  • Kelvin

    雖然我不是這個行業,但文章寫很好,讓我了解多了。

  • 元 紹

    好 文

  • javascript真的是設計師的痛處,感謝分享好文!!!

    • 痛並快樂著(掩面

    • 呂孟馨

      好耳熟… …

    • rplus

      不痛,如何痛快! by 呂布(火鳳)

      XD

  • 李文權

    真是好文 說到心裡話了 XD

  • Wayne Lin

    好文!寫到心崁裡 受益良多 感謝!:D

    • 很高興這篇文章對你有共鳴,一起加油吧 :D

  • 我也是剛踏入這領域的新人,對於前端也滿有興趣的:)
    看你的文章的能得到收穫~

    • 哈哈,前端其實不好學,要下定決心阿 XD

    • 我有下定決心XD,所以做在一家公司當網頁設計師~~
      不過那公司不是專門做網頁的,可能幫他們用好網站,就得做跟網頁不相干的事了~
      所以想多充實充實自己,為未來好相關的工作 🙂

  • Steveice

    有推薦的書可以閱讀嗎 CSS & JS 方面的

    ps.我剛從mobile開發轉來web開發

    • 歐萊禮的吧 :)

  • Ken

    好文,謝謝分享。
    小弟是純設計出身,目前會html+css, 正邁向jQuery and Javascript之路前進……
    jQuery只會套用jQuery UI, 還不會自己寫…..希望2-3年內可以自己寫 XDDD

    • 先從簡單的小東西開始寫,如果可以自己寫出一個 jQuery library,應該就可以變大神了吧 XD 加油!!!

  • Davy

    求 muki 大大傳授心法 <(_ _)>

    • 甚麼心法 囧?

  • DennisHuang

    設計->人的表皮, 前端->人的皮膚, 後台->人的器官, muki妳是誰設計的, 設計的真不錯

  • 嗠可徐

    正在學習前端的技術,由於以前不是念設計出身,做視覺美術相關優勢不大,因此想投入前端領域,看到這篇真的受益良多!

    • 希望能對你有幫助 :)

  • Nicole

    加油!! 我也是考慮從設計轉職作前端設計,不過前端對社寄來說真的是困難,感謝你的經驗分享。

  • Ants

    我以前做java的,现在想转前端,是会js,但不太会html+css,还有切图片成html,看到你的blog,受到鼓舞了。一起加油喔。

  • Liu Chacha

    受益良多 謝謝:)

  • Metaphor

    好有收獲 🙂
    謝謝muki 老師

  • 緗暮

    哈哈哈XDD
    我剛好和muki相反呀~
    我不是設計出身的XD
    以前就是先接觸簡單的程式VB6.0開始的

    但又很喜歡視覺設計之類的東西
    但是沒有正規的學過
    所以設計什麼的基礎都不夠

    一直想有什麼是可以將程式和視覺設計集合的東西
    直到近一兩年崛起的前端設計師

    但是我又是程式和設計只會點皮毛
    不知該如何是好….
    PS算是比較熟練的 但是他無法克服失真的缺點一直讓我很頭痛
    所以最近想來學學AI 可是又有看到人家在說FW
    所以不知如何是好QQ

    我的問題好多XDD
    大概就是兩個問題
    1.我應該先練好程式還是學好設計的基礎?
    2.我應該學AI還是FW呢?

    真的是麻煩muki了> <

    • 抱歉喲,最近沒用 blog,比較晚看到 xD。
      1. 你可以試著了解自己比較擅長的是設計還是程式?或是對哪部分比較有興趣? 就先從那邊開始學習,遇到挫折也儘量不要轉移目標,讓自己先學個一年半載(畢竟不是一次就可以學完的)

      2. AI 偏向平面設計,如果你要走網站設計, AI 可以先略懂; FW 是 fireworks 嗎?我沒用過 FW 捏 XDDD

  • Rensky

    最近常常在思考前端的到底該如何發展,看到你這篇文豁然有些體悟,希望有機會能跟大家一起討論前端,因為我本身是公司唯一的前端,認識其他的前端也不多QQ

  • risumi

    中間”請先看這張流傳已久、強大的前端架構圖”似乎已經遺失了…請問方不方便補上呢?好想被嚇得倒退三大步啊!XD

    • risumi

      啊抱歉看到原出處還有,只是圖有點小就是了~

  • 小晴

    我居然今天才看到這篇文章呀。不是學設計出身的我,因為工作而開始接觸基本的PS排版做雜誌,發現自己原來對設計很有興趣,現在艱難自學中,也想把網頁設計也學起來,看到Muki老師的這篇文,忽然又鼓起鬥志了! 路漫漫呀~~

    好像沒有在Muki老師博客上看到你分享學習設計的經驗哦?