使用 Grid System 來設計你的網頁
前言
現今網頁製作上使用 grid system (栅格系统)已經十分普遍,即使沒有聽過 grid system ,只要你使用過熱門前端框架--twitter Bootstrap 或是 Zurb Foundation, 其實你背後就已經使用過了 grid system 。
為什麼 grid system 會這麼普遍的原因是它提供給我們了富有彈性並方便的網頁排版及模組化方法,也提供了網頁設計師與前端工程師共同溝通的語彙。
對我來說,建立網頁設計師與前端工程師共同的溝通模式是很重要的。目前在前端工程已經有相當多 grid system framework ,這個觀念在前端已經是相當普遍。但從平面設計師轉換到網頁設計師的人,一開始必須重新建立網頁排版的概念,不論是學習設計適應各種大小螢幕的設計還是建立網頁資訊流( Normal flow )的概念, grid system 可以幫助設計師有所依歸。
這篇文章將會簡介 grid system 以及如何在 illustrator 設計 wireframe 或是視覺稿時運用自己的 grid system 。