来自dribbble的Benjamin Oberemok分享了它设计响应式logo的过程。
Unfold团队与幕后工作人员分享了他们根据实际客户项目来设计响应式logo的过程。

什么是响应式logo呢?
网上有不少好的文章已经介绍了响应式logo以及我们为什么需要它。在这篇文章中,我将不对众多案例做深入的细节分析,但是我将用一个真实的客户案例来一步步地告诉你我们怎么做设计响应式logo。
响应式logo是一个有设计元素的logo,它会根据不同电子设备以及屏幕的大小作微调,显示会有所不同。
如果你对响应式logo这个概念了解的话,这里有个简单的解释:响应式logo是一个有设计元素的logo,它会根据不同电子设备以及屏幕的大小作微调,显示会有所不同。但是不会损害品牌形象。设计元素包括icons,公司名字,slogans,颜色,背景,轮廓和其他细节。
现在,让我们回到我们团队怎样完成一个响应式logo的设计的项目上来。
项目主题:设计一个新一代测试工具的logo。
前一段时间,Tesmo团队跟我们联系。他们开发了下一代的测试管理工具,用来帮助团队开发高质量的软件。tesmo的创始人解释说“软件变得越来越复杂,用户急需体验更好性能更高的app,我们就可以帮助他们做到如此的app。
在与客户沟通确定视觉方案后,我们开始设计他们的logo。因为我是这个项目的至今负责人,第一时间,我就投入了这个测试软件和该领域相关的图片和标志研究中。在我的研究过程中,我发现了一篇叫做“测试人员的六角形结果”的文章,然后决定用六角形去设计一个logo。
这个想法进行的很顺利,经过几次的修改后就获得了一下概念设计:

但是,在把设计稿给到客户之前,我们先要认真地思考并且做足够多地测试以确保logo可以适应各种不同地设备。
第一步:单色版本
我们先做一个单色版本的logo,因为如果这个logo在黑白状态的时候就没有使用,那么在技术上来说它就不是一个logo,因为logo需要添加不同程度的样式。举个例子,在dribbble上,你会看到很多标题为logo的漂亮镜头。但是,一个logo并不是只一张好看的图片或者插画,它应该使用与各种不同的情景下。


最重要的是,由于产品成本,有的时候只有单色是可行的。所以logo就必须重新用一个颜色进行设计。在这种情况下,logo和符号必须遵循深色背景浅色logo的原则进行设计,也可以是浅色背景深色logo来设计。
也是在这个时候,我们为logo去选择适合它的板式。我们会挑选适合的字体去尝试,如果有必要的话,我们会调整字体去适应logo,让他们看上去更和谐。
第二步:多色版本
如果单色版本顺利通过,那么我们将开始设计多色版本。通常情况下,这是一个横向基础版。横向版本主要用于网站,名牌,广告牌和其他商业赞助产品。
最大的挑战是寻找一个可以在浅色和深色背景下都表现不多的颜色。这可不是一件简单的工作,有的时候,logo在浅色背景下可读性非常棒,但是在深色背景下却不尽人意。找一个对的颜色需要反复尝试,当这个工作完成后,你就可以给一个清晰的总结。



第三步:小尺寸版本
当设计logo的时候,我们在Unfold遵循了这个一个准则:少即是多。换一句话说,我们的目标是让logo更简洁,深刻同时也需要独一无二。这个目标是比较难达到的,但是这样的logo也会是经得起时间的考验的。不过在小尺寸的情况下,简单的形式会降低它的可读性。因此,我们需要额外为小尺寸logo做一个易读的版本
我们进行了很多的尝试,最后确定了不同尺寸logo的大小。我们并不推荐在小于24像素的情况下使用全logo版本。相反,我们额外做了一个小尺寸版本专门应用于这种情况。但一切都取决于logo包含了多色细节。


在设计小尺寸版本logo的时候,我们在保留整体设计的基础上,去掉了一些细节。比如,我们删除了线条,形状和一些不必要的颜色。
第四步:灰度版本
如果logo的颜色多于一个,我们会做一个灰度版本。由于某些限制只有颜色阴影可用时,灰度版是很必要的。另外一个原因是如果logo要在有颜色的背景下展示的时候,灰度版本可以避免把logo减化成单色版。


下面,我将展示4个版本的logo,这些logo可涵盖了大多数的响应式应用。

第五步:竖向版本
在我们完成横向logo之后,我们设计了一个竖向的logo版本。
竖向版本被用于方形或者垂直布局的格式。比如,用于印刷产品,T恤,马克杯,即时通讯工具,社交网络,招牌等。

额外版本
Testmo是一个典型的设计响应式logo的项目。在用户品牌项目上,我们也做过其他的logo版。例如,一个底部有描述的竖向logo,或者一个圆形版本等等。这些都取决于logo的形式,应用的广度和客户的愿景。
网友评论