页面浅谈公司形象网站的设计流程

浅谈公司形象网站的设计流程文档信息

目录

一、绪论

20世纪90年代以来

二、 网站策划

1.网站策划的职责

2.主题色的选择

3.素材的搜集

4.网站结构的划分

1.页面美术风格

2.网站色彩方案

3.页面的“图窗”

4.分页面版式设计

四、技术制作

1.网站制作技术的选择

2.留言板的制作

正文

摘要本文试图以制作思沃特公司网站的经验总结出此类公司形象网站的一般制作流程并阐释其中的一些重要问题为设计实践活动提供一定参考

关键字形象网站设计

一、绪论

20世纪90年代以来互联网开始在国内迅速普及互联网主要通过大量的、每天至少有几千人乃至几十万人访问的网站 以前所未有的效率广泛传播着信息。

笔者曾为武汉思沃特房地产顾问有限公司制作过一个网站。该公司希望拥有一个简单的网站将其作为公司宣传策略的一部分其中与业务相关的实际内容并不多。因而此网站显然属于形象展示型的公司网站应按相应的模式来设计。

二、 网站策划

1.网站策划的职责

很多人都知道网页设计需要“美术”与“技术”两方面的相互配合一个较为普遍的原则是“美工先行”  即由美工先作设计再由技术人员制作但这只是就单个页面制作层面而言若从更广义的网站整体规划角度来说本文认为在以上工作开始之前还应该有一个“网站策划”的环节。

有别于纯粹从“形象思维”出发的美工设计策划具有一种“理念先行”的思维方式他的职责在于准确地了解和把握客户的意图并综合美学、人文、心理学等多方面因素进行理性思考进而对网站的主题、规模、结构、风格提出要求作出整体规划。

如果缺少策划的全盘考虑和指导美工设计很可能陷于为形式而形式为美观而美观无法取得最合理的传达效果。

2.主题色的选择

思沃特公司的宗旨是“体验优质地产服务” 。核心价值观是“诚信 团队创意灵活分享” 。通过比对和联系我发现蓝色的含义与其企业文化正好吻合很好地诠释了他们对于专业服务和团队合作的追求于是在网站主题色和同期制作的VI标志上都选择了蓝色。不过 网站的主题色采用了一种与标志中最深的阴影部分相同的深蓝色这是因为深一点的蓝色更加沉稳、睿智排除了浅蓝色所带有的忧郁等其它感觉。

3.素材的搜集

网站制作的前期工作还包括搜集素材素材包括图文两方面的内容。 网站的文字内容一般是从委托方得到如公司介绍等。

图片素材包括装饰性图片和插图它们的搜集工作通常是由美工在制作过程中“顺手完成”的本文却认为素材搜集的随意性和分散性和美工单纯考虑画面的倾向容易导致图片与网站主题联系不

强。不如在设计之初 由对网站主题有着深入了解的策划预先对图片进行统一的准备和采集包括实地拍摄等。

4.网站结构的划分

网站结构是指组成网站的各个页面及相互之间的链接关系从简单意义上可以理解为网站栏目的划分。在策划阶段要以网站的实际内容和访问者的浏览习惯为基础划分栏目从而决定分页面的数量和链接方式。还要从信息的易获取度方面考虑采取尽量简化的原则。

三、美工设计

1.页面美术风格

从策划角度讲为了体现该公司现代、高效、新锐的精神气质需要一种简洁、 明快、清新的美术风格我在美工阶段按此基调进行了页面设计调动各种视觉元素使其与此风格相符如: (1)压缩页面大小边缘留空。 (2)减少页面信息量。 (3)字体、 图片尺寸小巧 以刚好能为观者识别为准使页面就显得紧凑与精巧。

2.网站色彩方案

在美工阶段我继续完善了网站色彩方案将主题色深蓝色用在了导航条上选择了浅灰色、 白色作为辅助色用作页面中大面积的底色。灰色和白色在饱和度与明度上与主题色有着较大差异能够对其起很好的陪衬作用 同时这两种颜色都具有中性冷静的特质与主题色的语境相通。

3.页面的“图窗”

由于页面信息量相对不足如果再静止不动那么网页将会有些单调乏味。因此我便参照了很多网站的做法在首页导航条下方放置了一块很大面积的FLA SH动画去活跃和丰富页面。 FLA SH约占据了页面有效部分的3/5大小这是美学中的黄金分割比例也是我常常处理图块之间大小关系的比例可以使得页面有一种大小、主次的对比。

4.分页面版式设计

其它几个分页面的版式设计是以静态图片充当页面“图窗” 并采用了两种基本版式: (1)图文左右混排。 (2)图文上下混排使得各页版式有一定的变化避免了千篇一律。 “联系方式”一页内容较少就没有用图直接以名片般的版式列出了信息一目了然。

也有一个设计缺陷:部分页面的顶部图窗过于臃肿造成页面文字栏目被向下积压访问者如果不滚动浏览器窗口就难以看到多少有用的内容。这其实是犯了网页设计中“第一屏”信息不足的错误。第一屏即指打开浏览器不翻页的情况下看到的内容这个区域一般高为700像素在设计中要集中页面有用信息于此才能让访问者不至于感到内容空洞、查看费劲。

四、技术制作

1.网站制作技术的选择

网页制作技术的选择在制作中期决定了美工用什么软件去完成设计及代码编写人员用何种方式去实现网页的最终效果。

目前采用较多的网页制作技术主要有三种: (1)用Flash制作网站。Flash软件创建图形和动画的功能强大并可凭借Actiocript代码实现用户交互所创作的网页有着最为丰富动画效果 因此被一些追求新颖张扬个性的站点用来进行整站制作不过缺点是技术上相对复杂。 (2)用HTML语言制作网站。 网页文档依靠HTML语言组织图文信息设计师可以通过编写这种语言实现制作也是国内外大多数网站采用的技术。它的优点是简单易掌握缺点是代码冗余和非“语义化” 有被互联网逐渐淘汰的趋势。 (3)用XHT ML+CS S语言制作网站。制定网络标准的W3C组织在HTML语言之后针对其弱点又推出了改良语言XH TML并与C S S样式语言混合使用语法规范成为当今网页制作新的技术标准。缺点是需要手写更多的代码对美工的形象思维方式提出了挑战。

2.留言板的制作

“在线客服”页面中公司需要搜集访客的留言信息。这一功能可以通过表单、论坛等形式实现而一种能够即时发言和显示的ASP留言板对该网站则最为合适。 ASP留言板除对网站服务器空间稍有要求外但制作、发布和维护都很简单。我从网上选择了一套ASP留言板模板对其页面外观加以修改以配合网站整体风格之后上传到服务器 即可正常运行。

参考文献:

[1]佚名.网页设计中的色彩设计艺术.

 2007. 10.

百度.知道关于软件Flash的解释.

“浅谈公司形象网站的设计流程”文档源于网络本人编辑整理。本着保护作者知识产权的原则仅供学习交流请勿商用。如有侵犯作者权益请作者留言或者发站内信息联系本人我将尽快删除。谢谢您的阅读与下载