点击这里给我发消息 点击这里给我发消息

阿里妈妈博客皮肤设计解析

添加时间:2010-4-8
    相关阅读: 设计 框架 项目

2月13日,阿里妈妈UED的博客换肤项目正式启动,博客对于团队宣传的重要性可想而知,而博客皮肤就像人的外表,没人不希望自己的漂亮些,何况这皮肤是可以主观改变的。翻着这些资料和草稿,我们今天抖一抖,回顾一下换肤的过程吧。

既然要换肤当然得有个目标,作为UED团队,视觉上拉风抢眼,操作上良好的交互性是团队成员一致认同的。

OK,做事从收集情报资料开始。我们首先收集了一些国内比较有名的设计类交互类团队博客的截图,就皮肤的视觉效果和交互性上做了一定分析。从视觉上来看团队博客在设计上特别拉风的并不多,大多是选用稳重干净的颜色与质感。这时矛盾产生了,同样作为团队博客,妈妈到底是要拉风抢眼的外观还是随大流。先不管那么多,两条路都走走,于是有这样一些草稿。

阿里妈妈博客皮肤设计解析(图一)

第一稿,只做到了头部设计,似乎有那么些思路,但又没完全放开。

阿里妈妈博客皮肤设计解析(图二)

第二稿可以说是第一稿的延续,想法也较为简单,拉风嘛,顶部如果有一幅插话就好了,大致用素材摆弄了一下,如果这稿要深入下去顶部插话至关重要。颜色方便没有过多的考虑,并没选用阿里常用的橙色。

阿里妈妈博客皮肤设计解析(图三)

往集团颜色上靠一靠。但似乎一切的一切和UED团队没什么关系,这个思路PASS掉。

阿里妈妈博客皮肤设计解析(图四)

继续拉风着,拉风导航,试验一下罢了。

阿里妈妈博客皮肤设计解析(图五)

阿里妈妈文化衫中大鱼吃小鱼概念的引入,把这样有故事的图案放在博客顶部,博客在设计上会有一些阿里妈妈的味道在。

阿里妈妈博客皮肤设计解析(图六)

      念念不舍异性导航条,将其简化一下再加入小鱼概念,整体感觉“妈妈”了。

      阿里妈妈博客皮肤设计解析(图七)

      抛弃异性导航,纯色简化版小鱼皮肤。

      阿里妈妈博客皮肤设计解析(图八)

      接下来是在白板小鱼的大框架下做了一个小调整的草稿。主要在于导航,标题栏背景以及各标签之间排列的一些尝试。

      阿里妈妈博客皮肤设计解析(图九)

      橙色微玻璃质感,和谐型设计。

      阿里妈妈博客皮肤设计解析(图十)

      干练的橙色风

      阿里妈妈博客皮肤设计解析(图十一)

      紫色版,由于色彩的原因被PASS掉,最终版选用了他的框架结构。

      阿里妈妈博客皮肤设计解析(图十二)

      最终版,还是选用了稳重的色彩,顶部的小鱼LOGO显出妈妈团队特质,局部的结构上做了些小创新

    本文作者:未知
    咨询热线:020-85648757 85648755 85648616 0755-27912581 客服:020-85648756 0755-27912581 业务传真:020-32579052
    广州市网景网络科技有限公司 Copyright◎2003-2008 Veelink.com. All Rights Reserved.
    广州商务地址:广东省广州市黄埔大道中203号(海景园区)海景花园C栋501室
    = 深圳商务地址:深圳市宝源路华丰宝源大厦606
    研发中心:广东广州市天河软件园海景园区 粤ICP备05103322号 工商注册