網頁設計師之路：從 Sketch 到 Terminal

很多人認為前端工程師與網頁設計師是一樣的角色，但我認為後者更著重於「設計」本身。Photoshop 與 Illustrator 只是技能之一，根本應是對於設計理論的熟習與美感的掌握。主修平面設計的同時，我憑藉著「想要做出一個漂亮的網頁！」的信念，在過去三年努力地自學前端開發。如今已經能夠獨當一面完成靜態網頁的設計與開發，近期的作品有： 5FPRO 伍樓專業、Ruby Taiwan、Ruby X Elixir Conf Taiwan 2018 與 亞洲首創公益電玩接力賽 WeGamersLove 等，以下將分享一個靜態網頁從設計到開發的流程。

網頁設計基本功

面對快速變化的技術與千變萬化的趨勢，網頁設計師還必須處理應接不暇的軟體和素材。儘管如此，擁有紮實的基礎功才能以不變應萬變，作為一個網頁設計師，你應該：

1. 熟練 Photoshop 與 Illustrator

再厲害的工匠少了工具也無法完成傑作，上述兩者可說是基本中的基本，畢竟一個網頁少不了圖片與素材。近年隨著 UI & UX 崛起，Sketch 已經成為網頁與 APP 的 UI 設計神器，以下將針對 Sketch 有更詳細的介紹。

2. 熟練 HTML 與 CSS

平面和網頁設計運用的是完全不同的思維，了解網頁是如何寫出來的就能避免設計時做出會讓工程師大翻白眼的畫面。如果自己有能力編寫，在開發時就能即時調整不理想的設計，也能大幅降低與工程師溝通的成本。

3. 熟悉各種裝置

沒錯，令網頁設計師又愛又恨的就是 RWD (Responsive Web Design)。除了針對大小視窗設計版面之外，還要在不同瀏覽器之間進行測試。提供使用者舒適的瀏覽體驗是網頁設計師的使命。

上述三點只是網頁設計的門檻而已，如果想了解更多可以參考這篇文章：網頁設計師必備的 10 種技能。

從 Sketch 到 Sketch App

對於繪圖軟體的依賴不應該讓你放棄草稿（Sketch）的繪製，相反地，我們更應該重視在初期發想上盡可能地繪製草稿。若一開始就進入電腦繪圖，很容易落入追求 pixel perfect 的窘境，到最後可能會浪費更多的時間在沒有結果的嘗試上。設計不等於美術，你不需要畫出漂亮的圖形或寫出工整的字，線稿和大綱就足以傳遞信息。草稿的重點在於短時間內確定畫面的佈局，並與團隊達成共識，同時也能幫助你檢視遺漏的部分並及時進行調整。

Sketch App 是目前最熱門且逐漸成為主流的 UI 設計軟體，它輕量又實惠，具有類似 Module 的 Symbol 設計、內建多種版型可以快速套用，是一款非常好上手的軟體。它的輕巧、快速與實用造就一個強大的生態圈，目前已經有許多外掛與範本能夠免費使用。此外，還能夠一鍵輸出多種尺寸與檔案，搭配其他工具如 Zeplin 或 InVision 進行協作等等，其好處不勝枚舉。

新手入門

如果你是第一次使用 Sketch App，你可以找幾個喜歡的網頁並試著用 Sketch 將頁面刻出來。在臨摹過程中熟記 Sketch 的功能、快捷鍵與外掛的使用。

• Keyboard Shortcuts for Sketch App
• 8 critical shortcuts in Sketch — InVision Blog
• 40 Powerful plugins for sketch

設計流程

以設計一個靜態頁面為例，當你完成草稿後，就可以開始使用 Sketch App 進行設計。以下簡述我個人慣用的設計流程：

1. 確定頁面有幾個 Section，以各個 Section 進行分類，並作為資料夾與圖層的命名。
2. 蒐集好頁面需要的素材與圖片，Branding 的部分會先用 Illustrator 完成設計，再以 SVG 的方式匯入 Sketch。
3. 開始進行頁面設計。先設計 Desktop 的版型，再逐步精簡成 Tablet 與 Mobile 兩個版本。除非有特殊狀況，否則上述三個版型就足以應付目前的 RWD。但絕對不能偷懶，1440 px 到 320 px 有著你無法想像的差距。
4. 設計過程中，請善用 Symbol 這項功能，將元素盡可能拆到最小單位，同時設定每項元素不同的狀態。Module 的思維與 Naming 的練習在往後開發上會有很大的幫助。
5. 除了 Symbol 之外，還有文字樣式與圖層樣式也請記得設定並套用在相同的元件上，之後進行修改與調整才不會有遺漏。

從 Sketch 到 Terminal

開發上我使用 Middleman，Middleman 是基於 Ruby on Rails 開發而成的前端框架。除了支援 Ruby on Rails API 之外，它能快速生成靜態頁面並直接進行部署。

 如果你已經熟練 Html 與 CSS，可以嘗試 Haml / Slim 與 Sass，以下是我一定會另外安裝的 Gem：

gem 'slim'
gem 'sass'
gem 'middleman-sprockets'
gem 'middleman-livereload'

其中 middleman-livereload 會在每一次檔案有所變動時重新刷新瀏覽器，能夠省去存檔後需要手動刷新瀏覽器的麻煩。

設計上會採用 Desktop → Tablet → Mobile 的流程進行設計，但在開發上則需要反過來執行，以最小的尺寸逐次往大尺寸開發，搭配現行的 CSS 框架如 Bootstrap 等，在 CSS 的編寫就能達到最好的效率。

在 Html 的編寫上，會以原先在 Sketch 就設定好的 Section 進行分割，再逐次引入 Index，這樣不僅方便管理檔案，也能避免後期程式碼越來越長造成混亂的情況。

如果你也懂得判斷和迴圈，Middleman 支援 YAML 的資料格式，讓你能夠有效地進行輸出與修改，你可以盡可能地讓 Haml / Slim 檔案裡面沒有寫死的資料。此外，學習 Command Line 與 Git 版本控制也會非常加分。

上述開發的部分有一定的學習成本且需要長時間的經驗累積，試著將目標細分，並循序漸進地突破能幫助降低過程中的挫敗感：

1. 著重設計的功力與成果，熟練 Photoshop / Illustrator / Sketch
2. 提升設計美感與視野，多方瀏覽如 Dribbble、Behance、Awwwards 等這類 Showcase 平台
3. 持續關注網頁設計趨勢，追蹤如 Webdesigner Depot 這類型的部落格
4. 能夠與開發者有效地溝通，了解網頁開發流程與術語
5. 學習 Html、CSS 與 JavaScript，網頁開發的第一步
6. 學習 Haml / Slim、Sass 等預處理器，提升開發效率與技巧
7. 學習 Command Line 與 Git，獨當一面又不會成為豬隊友

我從完全的新手到網頁設計師歷經三年的時間，其中不乏挫折、沮喪與停滯，但努力一定能夠有收穫，共勉之 🙌