分享SNS社交网站的视觉设计经验

2016-02-17 04:08 7 1 收藏

生活已是百般艰难,为何不努力一点。下面图老师就给大家分享分享SNS社交网站的视觉设计经验,希望可以让热爱学习的朋友们体会到设计的小小的乐趣。

【 tulaoshi.com - 平面设计 】

时常和sns相关工作的同事们一起讨论社区类网站的风格设定,logo的设计,排版等等问题,这里就工作中的实践经验和大家做分享,还有很多不足之处期望和大家共同努力。

时常和sns相关工作的同事们一起讨论社区类网站的风格设定,logo的设计,排版等等问题,这里就工作中的实践经验和大家做分享,还有很多不足之处期望和大家共同努力。

关于视觉风格定位:

当时市面上已经有着一大批以不同明度,纯度的蓝色为主色调的sns产品

分享SNS社交网站的视觉设计经验,PS教程,图老师教程网

所以要让用户在众多同类产品一眼中认出来,必须给你的产品创造产异化,又根据校友的用户定位我们为校友选择了绿色作为主色调。

青葱岁月、绿色给人轻松、积极、清新的感觉,而且又和同类产品造成了视觉上较高的识别性。

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/pmsj/)

下图是对外发布的第一版的QQ 校友

分享SNS社交网站的视觉设计经验,PS教程,图老师教程网

校友至上线以来经过无数次小的迭代,下面是去年一次较大的改版:

分享SNS社交网站的视觉设计经验,PS教程,图老师教程网

改版中的过程稿:

分享SNS社交网站的视觉设计经验,PS教程,图老师教程网

关于logo设计:

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/pmsj/)

之前我们也给出了多个方案以及适用环境的效果比照。大家会倾向于选择写实四叶草的方案。

分享SNS社交网站的视觉设计经验,PS教程,图老师教程网

在产品推出公测前,我们对logo作了一次用户调查,得到了一个比较满意的反馈。下面是用研的方法和报告:

方法:以用户访谈的形式给20名在校大三以上的本科生和研究生看logo的设计稿件(包括环境使用效果图)请各自说出自己对各方案logo的理解并给出自己的评分(10分制)

分享SNS社交网站的视觉设计经验,PS教程,图老师教程网

关于构架布局:

这类网站的信息量很大、在整体界面的搭建上要简洁便于信息的阅读。因此网站栅格的搭建和信息的编排布局很重要。

分享SNS社交网站的视觉设计经验,PS教程,图老师教程网

关于文字编排:

由于大量的信息内容,文字的排版很重要,这里举出一些编排上的细节给予参考(以feed为例)。

分享SNS社交网站的视觉设计经验,PS教程,图老师教程网

注意:这类网站会有很多的子级页面所以在模块的分栏等细节设计上要考虑周全便于全站的统一。

关于icon:

这类社区网站使用到icon的地方会比较多,但这类图标起的是一定范围内适度上的提醒,而不会过度打扰到用户。

因此这期间我们对icon做了次较大的优化,优化方向在颜色上更柔,造型上更平稳方正。

分享SNS社交网站的视觉设计经验,PS教程,图老师教程网

关于其他设计:

常常讲到这类网站的设计约束性,但设计师更要为产品挖掘亮点,为产品加分。

分享SNS社交网站的视觉设计经验,PS教程,图老师教程网

以上仅是个人的实践和经验总结,欢迎大家指出不足之处并提供更多宝贵建议。

希望这些分享对大家做sns方面的设计能有所帮助。

讨论

来源:https://www.tulaoshi.com/n/20160217/1578354.html

延伸阅读
在工作我们经常会有banner设计需求,和大项目比较,需求方从设计成本方面考虑,不会给设计师太多的时间。那么我们如何才能在短时间内做一个出彩而效果又好的banner呢? 以下是整理的banner设计8技巧,现与大家分享: 一、主题明确 要突出产品主题,让用户一眼就能识别广告含义,减少过多的辅助干扰元素。切忌,banner被切割的太细碎,内容繁多...
对于设计师而言,拿知名网站作为练手的对象未尝不是一件百益而无害的事情。来看看Dribbble以及Behance上的设计师是如何再设计Twitter、Facebook以及YouTube三大社交网站的界面。 Twitter Twitter Redesign by Fred Nerby: http://nerby.com/project/twitter/ Twitter Redesign Concept by Zsolt Hutvagner: https://www.behance.net/g...
上周末,我参加了生平第一次黑客马拉松。你知道什么是黑客马拉松吗?那是一个出钱的人(投资者)寻找可能开发成功的项目,然后持续24小时的很长很长的马拉松式的编程活动。所以我和我的朋友们或多或少的建立并提出了一些现成的项目(无论从发展还是商业的角度去看),于是投资者选择在这些项目上投入。在一个项目发展的最新阶段上,我们在社交媒体图...
社会化网站也就是所谓的web2.0形式,可以提供新闻书签等内容,主要特点是在内容基础上提供会员之间交流互动,可以说社会化网站的参与度相比其他仅仅提供内容的网站来说要高很多,因此在设计这类网站时,更要注意用于的体验很感觉,大多数界面都会做得比较容易操作和使用,比如本文中推荐的这些。 1. DesignBump 这个社会化媒体新闻网的界...
一、温馨而柔和 相关地址:http://www.web-designers.cn/post.aspx?id=2481 高亮度,低饱和度的黄色和绿色色彩营造出柔和温馨的气氛,重要信息部分用饱和度较高一些的绿色和红色跳出。而背景中随机大小的圆形叠加增加梦幻、可爱的氛围。其余的设计元素,例如云朵般的曲线边缘、logo和导航的针脚线、导航条背景的大头针、宝宝日记的贴纸、...

经验教程

711

收藏

24
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部