自娛自樂版：

1.原型設計

通過和搭檔的交流，在腦海中，你便可以知道你需要做什麼，你們的需求大概是什麼，需要幾個頁面。這時，你便可以找張紙，找支筆開始框架、輪廓、佈局的勾勒。這對自娛自樂是非常有效的，因為你的原型設計不需要經過眾多人的評審，不需要提供給客戶，不需要具體的表現出每一個連結的跳轉，每一個按鈕的結果。這一切只需在你原型的空白處加以簡單的註釋。

到這裡，貌似原型已經設計完畢。 No，接下來的一步非常重要。自娛自樂的時候，約束、文件會比較欠缺，這可能會導致你所表達的想法並非和我理解的一致。這時，交流和確認就是必須的了。它不僅可以再次確認你們的共識,還可以讓需求更加明確、定位更清晰，乃至碰撞出更好的想法。

至此，可以不斷的重複這一環節，直至你的原型出殼。

工具推薦：紙+筆

2.風格確認

原型出來後，便需要一個漂亮的介面。在五花八門的模版中，你可能眼花繚亂、“意識模糊”、失去了確認的能力。每每看到優秀的模版就會覺得“嗯，不錯，就用它了。。。但這裡有點美中不足”。花費了大量時間可能毫無結果。亦可能想著自己去創作，摸心自問，你真的有那個能力麼？也許你從配色到 PS，再到使用者體驗都會，但你畢竟不夠專業。這時便需不去在乎“模仿、山寨”的頭銜，大膽的採用“拿來主義”，許多成功人士不也是這樣“站在巨人的肩膀上”麼 ^^

“拿來”也要有一定的範圍，要不如同大海撈針。在原型確認，主題明確，使用者群體定位後。便可以確定整個應用的風格、色調，進一步縮小“拿來”範圍。找到合適的模版即可採取其優點，摒棄其不足。對於不足之處，如有能力可進行適當的自我創作嘗試,否則可採用配色的基本常識進行改進。

至此，可以得到一個平面的設計了。

模版參考網站：

http://www.qianduan.net/

http://www.freecsstemplates.org/css-templates/

http://www.instantshift.com/2009/09/29/99-high-quality-free-xhtmlcss-templates/

http://www.cglink.net/cglink_link/cglink_49.htm

http://www.wordpressthemespark.com/

http://www.openwebdesign.org/

圖示下載網址：

http://findicons.com/

http://ajaxload.info/#preview

http://www.iconfinder.com/

工具推薦：

http://www.sumopaint.com/app

http://www.aviary.com

專業版:

目前國內很多公司都還沒有劃分出前端組，有些甚至一人從頭包到尾。即使有些跟潮流劃分了前端和後端。但仍是職責不明，分工不合理，沒有前後端的意識。昨晚看了淘寶小馬對淘寶整個前端歷史的講述。這在國內應該算很不錯的了，尤其是計劃今年前端將擴招至90人，God，規模，分工將會多麼的細緻，所帶來的又會是何等的專業呢？管理運維又將是如何？這不再是自娛自樂了，每一步都應該會使用到一些工具。

如今還是有很多開源軟體可供選擇，他們也是一樣非常的優秀。像 Gimp， Firefox 相關外掛。

由於自己平時都自娛自樂，只粗略玩過 Axure 和 Firefox 的外掛 Pencil。今天本來想嘗試胸毛使用的 Balsamiq Mockups，可惜公司網速不給力。於是 Google 了下，免費的網頁原型工具介紹 這個介紹貌似不錯。