当前位置: 首页 > 图文教程 > 网站运营 > 建站经验 > 35.com专题页面网站制作过程和经验分享

建站经验
如何做好本地二手站
新媒体整合营销之六:意识占有率 影响范围 影响力
国外域名注册之新手指导 注册就是如此简单
域名搜索工具汇总
张鑫武:搜索引擎促企业减低推广成本
GODADDY域名的免费邮箱使用教程
从龙讯网的倒掉看我在爱搜书遇到的问题
网络世界的真实应该同现实世界的真实结合
张何:行业网站SEO最佳关键词的选择技巧
IDG曹迪军:风投看重团队背景 关键在商业模式
地方社区的一点初期运营经验
天使投资人 想说找你不容易
教你如何瞬间摧毁自己的博客
提高你博客性能的十条建议
靳生喜:网站改版需要把握思考的几个问题
大流量网站如何应对WEB2.0流量挑战
一个网页设计师的成长经历
营销型网站十大参考标准 核心的网络营销
分析下未来的互联网 我们站长未来发展模式
站长如何定位自己的网站?

建站经验 中的 35.com专题页面网站制作过程和经验分享


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-26   浏览: 186 ::
收藏到网摘: n/a

10年经验,万家客户!对于专门负责网站建设的兄弟部门来说,是一个足以回顾前程的台阶。而作为设计这次专题页面的我们,觉得有必要把设计过程记录下来,作为记忆的同时与大家一起分享。

先看看最后上线的部分截图:

final_01

接下来,简单回顾下整个设计过程(为什么加个简单呢,因为码字还是比较累的:P):

需求分析阶段

此次的需求十分简单明了,就是在网建10年之际做一个简单的专题页面,让浏览者在页面中能够看到以往的客户案例。从需求来看整体页面不需要有过多的内容,因为客户最关心的案例部分已经做成电子杂志和在线浏览两种方式以供观看,所以我们要做的实际上就是一个专题形象页面。既然已经明确了需求,那就展开讨论吧。

创意讨论阶段

有讨论的时候就是有口福的时候:),几瓶可乐,几个小点心,拉出白板拿起画笔,开始了叽里呱啦的讨论过程,此处省去三万两千字……

经过菜市场喊价杀价般的讨论后,最终确认了以下几点:

  1. 以蓝天、白云为背景:云是一种高度的象征,而天空则是另一种更高的高度象征;辛苦攀登了10年已经值得回望,但在回望之后还有更长的路要走;
  2.  以10年为中心:正因为经历了10年的攀登,才会有今天的高度,因此这个中心点肯定要牢牢抓住;
  3. 以案例为辅助:有付出就会有收获,10年的付出换来的是超过万家的客户,无数的案例就是最好的见证。

几个核心点已经达成共识,那么接下来就是体现手法了(因为要记录硝烟弥漫的讨论过程难度那是相当的大,因此只给最后的讨论结果留了张照片,请各位观众见谅见谅):

final_02

一共是三个方案,统一都用蓝天白云作为背景。左上角的草案是对众多的客户案例进行阵列排版,凭借天空的纵深感来展现出磅礴的气势;右上角的草案则是将10字大大的立于云端之上,然后用看似成千上万的案例环绕在10的周围,体现出10年历程的背后有着无数的客户肯定;而最后左下角的草案是由无数的案例拼凑成10的形状,体现万家客户共同见证的10年历程。

为了重现“火拼现场”的雄姿,Juns拿起了画笔,Cat摆起了姿势,用彪悍的作风让本已收起相机的摄影师十分委屈的给他们补了张俊照……看,当时就是这个姿势。

final_09

咦?奇怪,此次的主要设计师饭特稀呢?这个,看来是讨论时意见不合被这两人给废了,估计正躺在公司的某个过道上-_-!,这两个人在部门可是号称……刚写到这里又感觉到强烈的杀气,Yang觉得还是算了,再写下去就不单单是变成亚健康状态了-_-。

设计阶段

在有了3种草案后,那么接下来当然就是各显神威的时候了。但是Yang怎么看怎么觉得左下角的草案很眼熟啊,经过一番翻箱倒柜查找,终于找到了“罪魁祸首”(看右图):

final_04 final_05

很相似吧,算了,既然已经被微软先入为主了,那么作为强烈支持原创的我们来说,只好放弃了这个草案。

评审阶段

在经过兄弟们很多很多~~~很多很多(回音)小时的埋头奋斗后,设计稿终于出炉,显而易见,两稿中最后通过评审并最终确定下来的是稿二。

稿一草图和最后实现效果:

final_06 final_07

从实际效果来看,整体展现不出“万家”客户的宏伟气势,注定被Cancel。
(由于是未采用的设计稿,因此只用小图体现,请各位看客多多包涵)

最后看看稿二完善过程的效果图:

final_08

稿二最终定稿效果图:

final_01

剩下的就是广告banner等周边配件的设计和页面实现阶段了,再此就不多废话了,看图,收笔:)

首页Flash Banner截图:

有兴趣的可以直接访问专题页面观看整体效果:
网建10年专题页面:http://www.35.com/promotion/site10years/default.html
广告Banner更新页面:http://www.35.com