收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 1668|回复: 2

[教程] 网页设计进阶实例--琼花品牌变迁及产品表现

[复制链接]
发表于 2013-5-31 15:21:58 | 显示全部楼层 |阅读模式
网页设计进阶实例--琼花古筝品牌变迁
文/weilaixu 禁止转载 原文地址:http://weilaixu.cn/read.php/464.htm

月前,琼花古筝确立了品牌形象转型方案,CI及web相关的一切都必须全部重新设计。主要工作由我和赵毅(平面设计师)完成。特此记录并分析,与产品表现形式的深入研究合并为一篇文章,作为网页设计进阶系列文章中的实例之一。

logo1.jpg
琼花古筝,这个不是LOGO的LOGO陪我们走过了很多个岁月。每每需要用到她的时候,我总是很憋闷!一来,这一个名家名品并不是logo,印章也只是为了构图和提升视觉系数的存在;至于这上边的“琼花古筝”这四个字,我甚至都懒得去吐槽了。

公司在04年甚至更久之前,CI由曲老师负责,网站由林老师来做,这两个玩音乐的人做这样的事,在技术层面上,经过我多年的打击,依然保留着一丝自豪!在那个时候,确实也算是不错了,不过一个网站5个栏目就有5个后台这样的糗事,我还是不说了吧。

不过,百家筝鸣古筝艺术中心www.100zheng.com的logo就是曲老师用手比划出来的,从意识形态引导的思想层面来说,他们有很多值得我们学习的东西。我曾经问曲老师,百家筝鸣的logo上的那只手,对于男女性别之分,存在怎样的引导和说法。曲老师的回答是,虽然学古筝的以女生居多多多多,但真正的大家还是以男性为主,我们采用男生的手,还有一个目的,是为了能够从侧面给广大家长一个正确的引导,引导的目的是让家长明白,男孩子也可以学古筝,并且能学的很好!

经过多年发展,琼花古筝品牌转型已经是势在必行并且是迫在眉睫了。在同古筝接触的这些年里,我敢说任何一个直销类的古筝网站上都有我的作品的影子。在上一篇网页设计进阶之感官的延伸中,我提到过设计风格及元素的运用也贴合项目本身。而古筝这个东西,现在的行业中,满眼的中国红、古典、浅黄、书法、水墨....

“要从这个漩涡里跳出来,做出不同的东西,给人不同的感觉,贴合‘琼花’这个扬州市市花的形态和另外一种别人不敢用的绿色。”

琼花长的是这个样子:
qh.jpg

赵毅从琼花的形状出发,在并不需要多少文化内涵的情况下,以琼花的形状作为基础,定稿如下:
logo2.jpg

在将logo、基色定稿之后,琼花古筝的产品在工艺和材料上还要做出一定的调整,受制于没有产品进行拍摄,所以平面类的工作只好暂停。在其他商业及表现逻辑层面没有清晰指导的情况下,以及后续项目即将铺天盖地涌来的时候,我回顾了过往这些年的一些事情,尝试着深入剖析定稿的三种基色,稍显仓促的时候,开始着手设计。琼花古筝自2007年开始发力,短短一年时间里百度指数上扬400%,在传统渠道的古筝品牌中,琼花古筝已经牢牢站稳并有余力继续攀登,在足够了解这个品牌的力量和影响力的前提下,综合琼花古筝的市场定位,定下了“奢侈感”的路线。

约半年前,在上一个项目的时候,我就尝试着对产品及产品列表的表现形式进行突破,拟定了两个形状,第一一个是扇形,随即就用掉了。

但仍要先突破产品的表现形式。扇形被我启用的时候,其实只是单纯地想从形制上进行突破,运用扇形的品牌,在市场定位上要远远低于琼花古筝。而琼花古筝新的列表形制,必须要能够贴合琼花的市场定位以及网站视感的设定。

我庆幸的是,早在半年前我就已经给出了方案和实例。

现在回顾起来,怎么也想不出当初到底是什么触动的我。身在扬州,自然经常会到园子里去逛一逛,而我去的次数也颇多了点。大学时期也曾读过园林设计的课程,最终莲花的形制,来源与何园的窗子。

何园的窗子我非常非常喜欢,我习惯叫它们4个圆、5个圆、6个圆、8个圆、大莲花、小莲花,回廊后的戏台,是一个非常非常利于声音传播的地方,三面被长廊环绕,一面临水。早几十上百年前,女人是不能抛头露面的,所以每当有大戏的时候,那形制各异又异常优美的窗子后边,各有一个或温婉或典雅的女子... ...

看,这就是何园的窗户:

h1_4.jpg
h1_3.jpg
h1_2.jpg
h1_1.jpg

大莲花的形状用于产品列表,那么,产品详细页面的大图应该如何表达呢?我凭着记忆,在脑海里又逛了一遍何园,瞬间有了答案。

h2.jpg
这图中有一水井,站在水井旁向那莲花窗望去,左边大部分的莲花在面前,右边有一直立假山,整体还是在一个矩形的范畴内,唔,得解,如图:

pro.jpg

之后我发现,莲花的尖角和琼花古筝logo上的尖角很类似,于是我遵循另外一篇没有完成的文章《网页设计进阶之节奏、韵律的表达》,增加了边角的元素,而这一元素也被赵毅采纳并用在平面类的设计中。

在大篇幅的纯色下,我有如倒行逆施一样,采用了巨大的书法字体,并大幅度提升网页底部的阅读性和使用性,短短一天,立刻定稿。

qhgz3.jpg

分页面侧边导航:

sub.png

回顾琼花古筝早期网站:

qhgz1.jpg
qhgz2.jpg
qionghuax.jpg

从一开始定下侧边15度角筝尾展示,到矩形边框、圆形边框再到扇形到再到莲花,增加一点点成本,增加一点点图片体积,增加一点点篇幅,能够让用户体验到更好的设计,这是很值得的。而在古筝类的产品来说,经过5、6年的沉淀,我已经取得了突破。

所谓成本,指的是处理图片的时候额外给一个步骤,或者说把古筝抠出来放到那个形状里去,然后输出两种格式的图片。对于抠图,我始终坚信把古筝抠出来再处理,最终效果是最好的。

所谓篇幅,在上一篇《网页设计进阶之感官的延伸》我已经有所提及,在网速普遍提升的今天,大篇幅的存在更具价值。

由此延伸出去,我相信就算是钢琴、扬琴这样体积大的乐器,一样可以找到更好的表达方式。

网页设计理念2008-5-25
网页设计进阶之一 (步骤和大局观)2008-5-25
网页设计进阶之二  论摹仿和抄袭.2008-5-25
网页设计进阶之三 设计步骤及思考2008-5-25
网页设计进阶之四 关于素材和言志2008-5-26
网页设计进阶之五--构图的均衡与视觉引导、曲线/弧/光和影的运用2008-5-26
网页设计进阶之六-- 守住那些不能丢的东西!2008-6-10
网页设计进阶之七-- 给那些效率低的同仁们!2008-8-22
网页设计进阶之八--层次、空间(透视、立体)的浅入2008-9-12
网页设计进阶之九--用客户的眼光去设计2009-7-8
网页设计进阶实例--品牌变迁及产品表现2013-5-7
网页设计进阶之十--细节的表达(一)2009-7-17
网页设计进阶之十一 -- 快速设计:元素堆叠的中国风网站2010-8-2
网页设计进阶之十二 -- 快速设计:元素迭代的中国风类营销网站2010-8-2
网页设计进阶之新手教导篇:如何成为一个网页设计师2012-8-14
网页设计进阶十三--屏幕之外2012-12-5
网页设计进阶之感官的延伸
发表于 2013-6-14 15:22:24 | 显示全部楼层
logo和banner的设计不错,页面普通些!
回复 支持 反对

使用道具 举报

发表于 2013-6-18 11:06:57 | 显示全部楼层
来由说了很多篇幅,但整体效果个人认为并不太好,尤其对这两种色调的强烈对比感觉难以接受,而且产品小图的边框展示,有点过于追求形式,显得,稍有点繁锁和死板。当然创新精神非常值得肯定。个人认为花形边框,可以在几个重点大的部位有所展示就行了,现在的产品缩略图边框和角度展示了细节花纹,然古筝挑选是否是以前面那些花纹是主要挑选标准,而不用看整体,如果需要看整体的话,则体验度便失掉了一些。
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-9-29 09:46 , Processed in 0.110074 second(s), 10 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表