前端修煉第零週：我不會網頁設計啊啊啊！
一切都從這個挑戰開始
六角學院在這個月辦了「The F2E 前端修煉精神時光屋」的活動。這個只要你有興趣都能來參加的時長九週的挑戰，週週公佈新主題，目前已累積超過 1,300 位挑戰者參與；而我，就是負責產出每週網頁設計稿的設計師。
目前挑戰已經進入了第四週，看起來一切都進行得很順利。但其實在開始挑戰前得知要為這個活動提供所有的網頁設計稿時，我整個人焦慮到不行；因為⋯⋯我只會做平面設計啊！
修煉前端之前得先修煉網頁設計
網頁設計什麼的、甚至是 Sketch 這套設計軟體我幾乎也都沒有碰過；於是，為了能夠給挑戰者們一個能用的網頁設計稿，我必須在挑戰開始前的這不到一個月的時間裡，讓自己成為一名網頁設計師。
第一步：用臨摹熟悉軟體操作
首要任務當然是先解決 Sketch 的操作熟練度。我用類似 Daily UI 的模式，每天早上選擇一個主題並臨摹別人的作品，並限定在兩個小時做完。幾近無腦地刻出一模一樣的臨摹作品對我來說並不是件難事（畢竟目前本業還是平面設計）；反而因為日常工作的時間也因此被壓縮，變成只能用下午的時間完成之前一整天的工作量這點，才是當時最大的挑戰啊⋯⋯
下面也順便分享一個很讚的網站，當時臨摹的設計稿幾乎都從這裡找的，每天早上就是隨機點一個主題，然後挑一個網頁或桌面應用的作品臨摹。這個網站的作品大部分都是搜集自 dribbble，有時候找不到喜歡的版型，我也會直接到 dribbble 上搜尋。
不到一個禮拜，對於軟體的基本操作已十分熟練（如果想從認識介面與基本操作開始的話可以看看美勞哥的這個直播）。對我來說這個步驟的目的只在於熟悉軟體操作，附加的好處是能概略知道各種類型的頁面會需要什麼樣的元件與排版；而當你開始有時間亂想其他事情的時候，就可以準備進入第二步了。
第二步：學習網頁格線系統
熟悉了軟體之後終於可以開始學習如何像一個真正的網頁設計師開始規劃設計稿了，而我被建立的第一個觀念就是網頁格線系統——960 Grid System 這個經典的網頁架構。
那麼像上一步我們從網路上找來的設計稿不一定都有遵循 960 Grid System，又或者是看不出來原有系統的時候，要怎麼開始練習呢？
我的做法是：畫出與現有設計稿最相近的格線系統。
通常我都會先確定欄與欄的間距（ Gutter Width），只要從多欄式的版位裡就能找到。而欄位數盡量都會使用 12 與 16 這幾個常見的數字，因此確定欄間距之後再去算欄寬，答案就都呼之欲出了。
第三步：參考現有框架規範
網頁的骨架有了，接下來便是網頁上會出現的元素了。但如果繼續藉由參考別人的設計稿來了解規範，需要花費的時間太多，也不確定從這學到的是不是通用規格；所以，老闆建議我可以直接研究現有的網頁框架：Bootstrap。
這部分我的練習重點是：把臨摹的設計原稿全部調整到符合規範。
怎麼做呢？
可以先從調整字級與行距開始（例如字級最小保持 16px 與 1.5 倍行距）；有時候我也會刻意將比較大尺寸的臨摹稿，等比縮放成較小的尺寸後，再去大幅度的調整（例如 1440px 縮小成 1024px，然後套用 960 Grid System）。
雖說並不是一定要全部都照著 Bootstrap 的邏輯去設計，但對於一個網頁設計的新手而言，有一個規範能夠參考會是一個不錯的開始；畢竟它所規範的內容大部分也與現今的常用規格相去不遠，也是目前非常流行的網頁框架。
然後我就成為網頁設計大師了！
當然沒有（笑）。走完這三個步驟，只代表自己對於網頁設計算是略懂略懂，因為從臨摹到原創，完全就是兩碼子的事。但也還來不及感到慌張，第一週的挑戰緊接著就要揭開序幕了⋯⋯
下一篇文章開始，我會分享在繪製各週主題時的一些發現與體會，這其實也是我主要想要開始寫文章的原因，裡頭有許多有趣的地方可以記錄下來。
總之，希望看完文章的你能夠得到一些幫助。自己對於網頁設計也還是個新手，非常歡迎在留言處跟我討論這些學習方式的不同見解。
