什麼叫笨蛋，我就是笨蛋，不小心按了發送所以要多寫一篇
在我們開始講解版型之前先大概分享我個人在做網頁版型的步驟
那如果你不是設計師的話其實可以跳過今天XD

1.先畫線框稿(Wireframe)，去除所有視覺化的元素，簡單編排頁面

而其實通常我都是畫在紙上，不過因為要簡單明瞭一點所以我有用工具簡單的畫一下
那如果你不知道該怎麼編排好，其實可以先從比較常見或是你喜歡的的版型去設計

2.Mockup 靜態的原稿

也就是將我們的線框稿視覺化，簡單說就是最後設計師設計出來的畫面吧XD
在這裡我就會規劃出每個元件滑鼠移過的效果，或是動畫的樣子
那如果你可能現在臨時要用圖片不知道要去哪找可以到這邊 Unsplash
這裡面的圖片都很漂亮畫質又高，然後可以免費下載

3.Prototype (原型)

把所有的設計稿串起來模擬成品的展現方式
那因為教學用的版型我只先設計一張所以我沒有做 Prototype XD

我個人是使用Adobe Experience Design (XD) 去做我的版型設計
我在設計版型的時候最大的顧慮是自己切不切得出來這件事
以及思考目前專案得需求去做版面的設計，不會因為這個元件擺在這邊比較漂亮所以把它擺在那邊

那以上是今天版型分享部分//
接下來會利用今天設計的版型去切版，裡面的頁面部分會放接下來三十天會教的各種CSS用法範例
那希望可以在三十天過去了，你也能製作出一個屬於自己的網頁

想到就更新專業 樂樂
有任何問題都歡迎一起提出來討論>_O