Vanessa

大前端的点滴生活

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


欢迎注册黑客派社区,开启你的博客之旅。让学习和分享成为一种习惯!

留下你的脚步