专注于网站建设和搭建网络营销体系
商视互联,北京做网站公司
北京做网站,商视互联 您的位置:网站首页 > 商视动态 > 网页设计 > 正文
标准网页设计流程(草图设计-PS效果设计实例)附PSD下载
作者:商视互联   来源:北京网络公司   日期:2013/7/6 19:21:07   热度:℃   [ 标签:网页设计 ]

  对于很多刚入行的网页设计来说,总有很多迷惘和不安,特别是在设计过程中,遇到反复修改,更是有想揍人的冲动,有句话怎么说来着,每一次网页设计师背后,都有一群指点江山的大神。
  这里,就说一下我过往的一些经验,以及一个网站的设计流程,尽量让更多的新人少走弯路,踏入网页设计这一行业。
  前期策划:
  在做一个网站之前,必须对它有足够的了解,从各方面入手,最好的情况就是,有一个好的产品,给你一份详细需要求,或者是直接参与讨论,对网站的定位,背景,收入,预期,有一个足够清楚的认识。
  这是一个关于旅游的网站,类型是电子商务,主要客户群是欧美用户,针对性旅游,地点是西藏。有团体旅游,量身打造,普通旅游几种类别。通过PAYPAL进行支付的一个方式。
  希望呈现给客户的,是一种专业的特色的旅游线路的这么一个网站。当然,你也可提出你的意见或建议,这也是初期参与讨论的好处。
  好比我们的案例,产品认为,这应该是一个极具西藏风情,充满了花纹与图腾的网站,我认为它是一个电子商务网站,其次,才是西藏旅游网站。我们要做的是推销我们的产品,也就是路线,而不是传播文化。


  原型图:
  在前期讨论一定的结果后,这个时候就可以开始设计草稿了也就是初稿,可以是纸质也可以是电脑的简单图形,只要能做一个简单的初始交流就行。如果有一个好的产品,会给你准备妥当,如果没有我想大部分都有没有吧,就得自己来了。
网页设计草图

  初稿不用太规整,只需要排出需要的模块,以及功能,网站的走向流程就行。体验下网站是不是能走通,功能上是否有缺失,功能模块的摆放是否有问题,产品如果通过了就可以下一步了。
  这个时候,我们可以做一个比较详细一点的原型图了,方法当然不限,只要最后有东西就行。这里推荐使用axure,可以很好的模拟网站,简单的线框,就能达到网站上的效果,特别是不爱写代码的设计师的一大利器。
网页设计架构图

网页设计架构图

  线框原型图完成后,就可以和产品进行沟通交流了,因为这个网站的雏形已经出来了,上线后,大概的样子也有了,然后可以大家一起使用一下看看有什么不妥,流程是否通畅体验是否妥当。
  当原型图没有任何问题的时候,那我们就可以开始下一步的工作了也就是各位WEB设计最喜欢的一步。

  效果图:
  根据前面的一些准备工作,那UI的设计就可以开始了。整个网站的主色调,我们使用了西藏的常用色,喇嘛红。
  根据网站的需求,在首页上,重发的是凸显BANNER,那我们除了让BANNER明显,还要让周围的模块弱化,以达到这个需要。而在细节上,并没有过多花哨的设计,几个简单的渐变,以及纯色块。更加符合我们的定位,受众群。
  当然,还有一些小图标,使用西藏独有的元素,以增加氛围。
  特别注意的是,网站必须规整,严谨,才能体验出我们的专业,很多新手在规整上总是马马虎虎,这是很大的弊端。
网页设计效果图

网页设计效果图

 

  完成以后,就可以提交了,然后就是讨论了。不过要注意的是这里的讨论并不是按需求的喜好来,而是根据我们前期的定位进行一个探讨。这样才不会出现无意义的反复修改。比如你的需求突然告诉你,我更喜欢蓝色黄色的网站,你就可以毫不客气的进行反驳。
  这样一个网站的设计流程,就到这里结束了,剩下的就是前端,程序……

网页设计流程图

  当然这个教程,只是一个大概设计流程,不权威,不独一,每个公司,大小规模不同,肯定流程也会不同。只是希望能够帮到新入门的设计师们少走一些不必要的弯路。谢谢浏览 (作者:半醉人间)

 

下载PSD网页设计原件:
网页PSD设计下载


本文网址:
更多