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

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

設計的工作流程

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

  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

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


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

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