web 开发：网页设计步骤及工具推荐

自娱自乐版：

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 了下，免费的网页原型工具介绍 这个介绍貌似不错。

本文是使用 B3log Solo 从 Vanessa 进行同步发布的

原文地址：http://vanessa.b3log.org/webpage-tool-step