2013年9月19日

中秋赏月赏屌丝

又是一年中秋,祝大家节日快乐哈。每年这时候,策划们都喜欢整些奇怪的玩意,自从去年开始,已经第二年了。

对于做为美工切图仔的我们而言,每年都希望技术和思想上多些新的变化。今年,尝试了在网页中混搭些漫画的元素,不管成熟不成熟,有点变化总是好的。

它应该是个漫画:

 

很多时候,创意从哪里来?这是个挺有意思的话题。前段时间听前辈的课程,说到一个概念“生活创意”。就是到一个地方,你能观察到什么东西。就像普通的机场,认真从设计的角度看看,能看出很多不合理的地方。当然,大部分时间我们都容易匆匆错过。

同样的话题,拉回我们平时最喜欢的活动中。类似漫画,除了欣赏到剧情和画风,其实也有很多值得借鉴的地方。

最简单的就是版式,仔细观察,很容易发现这东西是划分成一个个格子。而在网页中很少有这方面的应用延伸。这可能就是跨界思考能带来的不同。

漫画的特点

  • 斜划分的格子
  • 黑白的人物
  • 夸张的对话框

 



真正的使用过程也是有这些特点,不过唯一的不同是不能只是黑白线条。借鉴不是抄袭,而是有选择的提取有特点的部分叠加进我们的设计中。

这便是我们的东西,有源头有创新。当然,这也便是选择“漫画”这个载体的动机吧。

 

屌丝精神再次狂欢:

 

通过一年的演变,去年这个时间,也做过类似的尝试。上次是无心插柳,这次是有心栽花。

也就是说,成功的几率是很小的。不过自己却为此弥补去年的交互遗憾。增加了导航,优化了指示。还有,呵呵,向某些喜爱的漫画致敬。

最重要是对屌丝精神的进一步思考。什么是屌丝精神?话说这东西在网络上真的很重要。我们将其称为一种认同感。是对精英阶层的博弈结果,是满足大部分网友的调侃习惯。应该是反映这种,大部分人都能做到的状态。当看到所谓的低劣甚至弱智的做法时,所产生的自我满足感。应该是这样的,满足一会我也是精英的感觉。

屌丝的精神:

  • 元素粗糙化,例如直接截word文档
  • 排列无序且有一定喜感,这层的构成挺巧妙,一般前面说的东西很正规,突然后面来个大转弯就容易引发笑点。(风格间有明显的差异)
  • 大小对比,巨大差异会产生很强的视觉冲击

 

【相关网址】

去年:http://gd.qq.com/zt2012/zqywzn/

今年:http://gd.qq.com/zt2013/zqywzn2/

 

【延伸阅读】

超赞!如何增强你的页面表现力

Photoshop 照片转漫画手绘效果教程

 

 

我的微博:http://t.sina.com.cn/drizzlep

我的豆瓣:http://www.douban.com/people/drizzlep/

2013年6月5日

61致青春!儿童节专题

       儿童节对于我们这类大孩子,更多不是回忆,而是感慨。或许,父母辈并没有我们那时候的物质,对于童年他们感触并不是很深。对于那代人,更多是阳光,草地和广阔的田野。而我们,留下来的则是是很具象的东西。可能是某个品牌,某种游戏,某个场景,某个.......

减法!挑一种重点

除了跳格子,童年还有记忆。周五上班时,看到公司正在派发红领巾和三道杠。似乎看到了当时值日时的场景,还有小学校门前,一排排敬礼的同学和老师。如果真要表达青春,能代表的东西实在太多了,不可能都一一呈现。挑选某个片段,放大某个细节,突出一两点就可以了。往往以前做设计,都喜欢一股脑子的将各种想到的素材都放上,最后对这些东西调整时,是很困难,该做做减法。

  • 红领巾&五道杠(主体)
  • 粉笔纹理(辅助装饰)
  • 拼音(辅助装饰)

引自自己lofter的一段话“纪念即将逝去的童年,那抹彩虹,那个袖标,那么那些格子......和依然静静躺在那里的水泥地.....61儿童节快乐,青春不朽。”

 

致青春!跳格子

主体文字有了,当然是想到视觉。在这个设计中,操作流程其实是反的。刚开始草稿上只有下面那个跳格子。那时唯一想清楚的就是,我需要用跳格子成为网页主视觉。当然,不是所有的格子都需要是白粉笔的样式,想想课堂上,很多时候还是有不同颜色的粉笔。同时,在实际操作时偷了懒,并没有完全模拟粉笔的效果。想的更多的是,用不同色块将重点勾勒出来,如果仅仅完全仿照白粉笔,可能效果会有所打折。

  • 重点区域:

    刚开始自己过于执着于构建完整的跳格子模型,将最重要的部分下移。即活动参与区域,看上去整体虽完整,但是却不易不察觉。设想利用稍微重点的底色,对比其他格子而言,且可点击的区域采用了“微闪烁”的效果。目的很简单,让用户了解到这里可以点击,这里是最核心的部分。

  • 信息层级:

    尽量将文字放在格子内呈现,呈现的模型应该是:

    线上互动区>线下活动>微信参与方式>其他文字

    其实专题的架构很简单,就是只有文字和两条链接,设计师要做的是将它们架设起来。使其感觉有参与的冲动。这里引发自己思考的是,信息层级和创意物如何结合的更自然。如果下次不是跳格子,而是别的东西,怎么植入信息?感觉上面那套信息层级公式还是蛮有用的,至少能让设计师在动手寻找素材和绘制图形时,更有针对性的配置视觉。

     

那些青春的飞机稿

  • 第一稿

1)大框架是使用儿时跳格子的模式,仔细研究会发现格子一般只有白色,之所以用彩色只是为了让它视觉呈现更为集中在中间区域。而且小时候,彩色粉笔也是常常使用的东西。

2)真正的专题和呈现稿有些不一样,没找到特别合适的主体人物,大家说那女孩子像女鬼...同时将核心参与区提前,虽然格子的形式被破坏了些许,但是用研角度看,需求方的要求是蛮合理和准确。

  • 第二稿

  • EMOOD

    那个马路转下来的面,感觉给人像悬崖陌路。路过的小吐槽下,嘿嘿 (6月5日 23:09):是路的转面问题,可以过度的不那么急 (6月5日 23:22)

  • 地址:http://gd.qq.com/zt2013/Children/index.htm

【延伸阅读】

儿时记忆!日本动漫人物

 

我的微博:http://t.sina.com.cn/drizzlep

我的豆瓣:http://www.douban.com/people/drizzlep/

2012年2月15日

原创设计-春节专题设计的思考-大粤网2012新春网页设计

 

1.项目背景

     春节是中国人的传统节日,一般也是宣传自身品牌的良机。如何从众多的新年专题里做到和而不同呢?

    相同点:

     1)一般以暖色调为主,尤其是红色和橙色应该是要做为主色调使用。满足大众的心理预期,色彩上别过于另类。

     2)新年的元素不可缺少,不过最好能突出一个元素,围绕这个元素营造气氛。想表达的意思丰富,容易胡乱的堆砌,反而会使页面档次下降。

     不同点:

      1)形式上的突破,尝试传统模块与专栏设计的结合,不过要注意两者间结合的问题。制作元素使这两者能够较好的融合在一起,多观察身边的事物~让自然与机械的感觉柔和的结合

      2)使页面放大看一种感觉,缩小看又有另一种滋味。

 

 

2.专题设计

大粤春节专题

大粤春节专题

大粤春节专题

大粤春节专题

【出门左转逛花市】 http://gd.qq.com/zt2012/hs/

 

大粤春节专题

大粤春节专题

【腾讯大粤网新年贺卡】http://gd.qq.com/zt2011/newyear2012/index.htm

【感谢广东好人】

 

【大粤网新年贺卡】

3.新的位置,新的开始

大粤春节专题

新的办公室~

大粤春节专题

前台两只很受欢迎的公仔~人气指数超高~看那么那凌乱的衣服就知道有那么受欢迎了

大粤春节专题

大粤春节专题

新的座位

我的微博: http://t.sina.com.cn/drizzlep  欢迎交流~

2012年2月14日

原创设计-专题图设计的九阴真经

每种技能其实都有规律可寻,当然,这也包括专题图设计 。武林曾有句话,打通任督两脉,即可功力迅速提升。现实中可能不过有这么夸张的表现,可是,当掌握某种特定的规律后,确实能让我们做事效率提高,同时打出绝妙的招式机会也能增加。这里便是在探讨一种专题图以及广告图的某种设计规律。

 

、重点文字突出
通过文字传达主题的核心信息,有利用迅速抓住用户的视觉。如果将这个标题“感谢广东好人”直接平铺呈现,视觉效果会减弱不少。所以设计师要把握住标题文字的强弱,并且适当的突出其中某个元素,当然,除了将核心元素做大做醒目外,其余的元素也要做相应的变化。

 

 

、背景尽可能简单

但凡学会绘画的童鞋都会知道,画面细致与否并不是指全部元素面面俱到,而是有些元素需要深入刻画有些元素则因一笔带过。

  1. 背景简单不代表没有没有背景,尽可能隐约的纹理,用户仔细看能发现其中的细节。
  2. 背景是用来烘托主题,背景在靠近主题元素的地方应该对比强烈,其余部分则渐渐隐去。

 

三、营造主题气氛

对于网页而言,创造富有意味的图形难度显然很大。尤其是针对浏览型页面,编辑的加入必然导致网页模板化。那么,留给设计师发挥的空间显然小了许多。

  1. 充分利用版头和背景的特点,渲染页面的主体氛围。
  2. 在框架栏目间,混合迎合气氛的装饰,画面传递的效果显然能提升一个层次。
  3. 每一屏里都尽可能有一个视觉焦点,方便用户得到愉悦的阅读体验。

 

四、信息以群组出现

  信息一般指文字以及图形信息。在设计中,保证核心信息和辅助信息有层次的出现外,还要注意每一层级的信息是以块状呈现。比如“扮靓攻略为你HOLD住桃花运”突出关键字的同时保证紧接的信息不要离得太远。或者说,眯着眼睛看,它们是处在同一区域。

  1. 同一层信息的色彩和距离不要相差得较远。
  2. 阅读的重点一般在左面,尝试将主要元素放在那里。
  3. 方型区域为强文字视觉区,圆形为次级视觉区。

 

【扩展阅读】

1.字体推荐

 偏正式主题:微软雅黑 | 偏活泼主题:方正粗圆简体

(另外部分字体推荐)·方正正黑系列 ·方正兰亭系列

2.图库推荐 

全景网 http://www.quanjing.com/  | Getty Images http://www.gettyimages.cn/

 

 

 

 

 

 

 

我的微博: http://t.sina.com.cn/drizzlep  欢迎交流~
我的相关日志:

2011-12-08 | 【原创设计】内容与形象的创意合体
2011-10-14 | 【原创设计】PPT设计带来的思考
2011-10-19 | 【原创设计】大洋视觉频道的设计思考
2011-10-30 | 【原创设计】平衡之美—大洋网汽车频道设计
2011-08-08 | 【设计交流】从大粤网看区域门户设计之道_图标栏目篇

2012年2月13日

原创设计-情人节专题的再度思考,如何向现实要灵感

    

    一年又至,再次碰到这类型专题。相比去年,表现手法确实变得熟练,素材的使用也更加精确。如果对自己还有什么要求的话,我觉得是对栏目间跨越时的视觉处理。不好把握啊....很多细节要考虑,需要多参考高手的作品~

1)向现实要素材灵感
    要想做个超凡脱俗的设计家,必须先成为超凡脱俗的生活家,这是从优秀走向卓越的唯一道路,因为这个世界上所有的灵感,都大大方方地摆在生活里最明显的地方,可是大多数人却总是视而不见,他们只是会低头加班的设计农夫,根本就没有情怀去打量生活。
    尝试用手中的工具,记录身边的点点滴滴。试着观赏、触摸、感受商品,利用生活中真实的场景融入设计。而不是简单的素材堆砌。
2)更多关注设计有效性
   从“好设计”的观念过渡到“对设计”的观念,是一个设计师职业生涯步入成熟的开始。“对设计”会让设计师放弃对新鲜技巧的崇拜,而转变到对客户需求的理解和认识。这是一个非常重要的转变,就像经久不衰的音乐著作都不需要过分炫技和过多音符一样。

【别人的作品与自己的作品】
    1)多参考别人的作品,提炼其中有趣的创意和技法。是不断取得进步的途径之一。
    2)不时整理自己的作品,很容易发现当时思考的局限性。同样是条不错的学习方法。
    3)收集整理同类型作品,并将其做成专辑的形式。比如情人节这类型的主题,每种事物都有其自身规律,在掌握这种的规律上进行创新,往往能得到事半功倍的效果。

【情人节创意素材壁纸】

我的微博: http://t.sina.com.cn/drizzlep  欢迎交流~
我的相关日志:

2012-02-04 | 【原创设计】专题图设计的九阴真经
2012-01-28 | 【原创设计】春节专题设计的思考
2011-12-08 | 【原创设计】内容与形象的创意合体
2011-12-04 | 【原创设计】制造真实的气氛-广州好人榜
2011-11-28 | 【原创设计】米田在大洋的工作碎碎念

___
© 2009-2020 imiten.com 版权所有

ICP证:粤ICP备15075518号


 

___
站酷 ZCOOL    
花瓣HUABAN    
 

 


知乎ZHIHU         
豆瓣DOUBAN    
  

___
时间在哪里,成就在哪里