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

建站经验
高校贴吧集体被封:你的网站就是你的吗?
浅谈如何寻找合适的免费空间
web2.0助站长寻找全新模式
菜鸟建站须知:一个好网站是如何炼成的!
揭秘八种常见的网络广告防作弊技术
区域旅游网站 怎样做大做强
老站长教你如何选择优质域名解析商
简单8招 教你如何提高网站的用户体验
新手做电影站一星期IP过千的经验分享
优化购物流程设计
解决地方论坛百度收录问题的五点体会
站长原则 简单,可依赖
浅谈新手站长如何选择服务好的供应商
经验:百科让我的站点如虎添翼
一天赚了3500,踩狗屎外的一些真经验
一个月把热门关键词做到百度第3位的经验
做地方分类信息网站的经验谈:本地、人性化、互动
抛“网”引“砖”,谬谈宗内网的运营定位
建立b2c、c2c商城的构架与排名策略
想提高网站收入 AdSense还是不要频繁换动为佳

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-26   浏览: 150 ::
收藏到网摘: 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