昨兒架好我們的免費虛擬主機後，終於要進入我們的正軌了～

開始設計個人網站的版面配置，這邊大概說一下網頁應用程式的整套流程為

企劃→設計→製作開發→測試→發布→更新

那我因為我主要想做的是個人作品集嘛～
我們在day5的時候已經大致規劃好需要的頁面了，今天來做一個版面的設計～

小妹我最不會的就是設計了～嗚嗚
記得在網路上看到有一說，

「設計人的思考是橫向的、程式人思考是直向的」

我簡陋了畫了一個初稿，在紙筆上畫出最直接的想法～

~哈哈～真的超簡陋的XDD~~

有了初稿後，在用繪圖軟體規劃一下實際在電腦上看到的頁面～

在這邊繪圖軟體使用Sketch（只支援mac OS系統）

如果你是win系統的話，沒關係～
可以使用Adobe出的Photoshop、illustrator等等不設限....

其實我比較常用的是Photoshop CC版本，但是因為Sketch有出一些Web Design的Template，鐵人賽講求快速的話，是一個不錯的選擇～（但我不太會用....）

下圖是Sketch的RWD的格線系統Layout模式，直接清楚明瞭的讓你看在各個平台上輸出的模樣

左到右為的版面為：電腦HD（桌上型）、電腦（比較偏筆電）、平板、手機版

要做RWD網頁的話，可以開啟格線系統Layout模式，他會直接給你12條格線方便你排版，排完後可關起來看整體的感覺～
當然如果你不要制式的12條格線，下面有Layout Settings讓你自己調整格線的間距和格線數目

如果是畫UI設計的話，可以開啟輔助格狀模式，我現在一格調整為20像素(px)，一樣可以透過Grid Settings去設定你想要一個多大等等.....

（小妹我因為沒有準備好圖片，所以花了一點在修圖等等的....sorry....）

首先想要的效果是簡單、現代化、視覺化，花了一些時間畫出我的首頁layout，在製作過程中，可以看到我的文字和圖片對齊至格線，這樣之後在Coding時搭配Bootstrap格線系統，會相較好掌控並比較容易撰寫！

以下是我在畫layout的過程，貼上來給各位看看～希望大家不嫌棄可以提出建議~呵呵~

首頁的部分：

首頁的成果視覺Layout：

電腦版 版面配置（HD）

電腦版 版面配置（小螢幕）

那今天就先設計到這邊囉～明天再來設計平板＆手機版的頁面囉～

文後-

我真的很不會視覺設計啊.....

同步連載於blogger-"King 學習前端之人生"
[ 著作權為 Ying-chi Tzeng所有，轉載請告知～]