美文网首页
dribbble大神怎么样做一个响应式logo?

dribbble大神怎么样做一个响应式logo?

作者: 帅虎 | 来源:发表于2020-10-26 17:31 被阅读0次

来自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的形式,应用的广度和客户的愿景。

相关文章

  • dribbble大神怎么样做一个响应式logo?

    来自dribbble的Benjamin Oberemok分享了它设计响应式logo的过程。 Unfold团队与幕后...

  • 响应式布局

    由于最近想开发一款响应式系统,之前对于响应式都只是略有了解,没有怎么归纳整理,现在来做一个总结。 @media媒体...

  • Vue响应式的基本原理 - 实现一个Mini Observer

    今天看了一个尤大神介绍Vue中实现响应式基本原理的视频, 把视频内容总结一下。 首先是问题的提出: 什么响应式(R...

  • 响应式布局到底是什么?难吗?

    一、什么是响应式布局?   响应式布局就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是...

  • HTML5 响应式布局

    一、什么是响应式布局? 就是一个网站能够兼容多个终端,而不是为每个终端做一个特定的版本。 1. 响应式布局的优点?...

  • 动脑学院Rxjava预习资料 RxJava2 响应式编程介绍

    RxJava2 响应式编程介绍 响应式编程&RxJava基本概念响应式宣言响应式扩展响应式流规范 RxJava 基...

  • 响应式布局

    一、什么是响应式布局? 响应式布局就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解...

  • 教程 ▏通往手绘达人之路(十六)

    今天给大家解析dribbble大神Mike的手绘作品,用优秀的设计学手绘! 我们继续来画一个Mike大神的作品,另...

  • 响应式布局的那点儿技术

    第一:正确理解响应式布局 响应式网页设计就是一个网站能够兼容多个终端-而不是为每个终端做一个特定的版本。打个比方来...

  • VUE响应式原理

    VUE响应式原理 这里的响应式(Reactive)不同于CSS布局的响应式(Responsive), 这里的响应式...

网友评论

      本文标题:dribbble大神怎么样做一个响应式logo?

      本文链接:https://www.haomeiwen.com/subject/ckxzmktx.html