响应式标志设计 - 2018 年权威指南

已发表: 2018-02-07

徽标是公司的物理符号。 当你想到一个特定的品牌或产品时,就会想到这个形象——比如苹果的半咬合苹果和耐克的旋风。 但随着新趋势的到来,标志成功和有效所需的条件也发生了变化。 现在他们需要干净、简约和简单。 但最重要的是,他们需要适应响应式网页设计。

现在是 2018 年——如果你没有响应式标志设计,你可能会被淘汰。 我并不是说那是戏剧性的。 我的意思是,你有没有在手机上打开一个网站,整个 UX 设计看起来很时髦? 或者,也许您打开了一封电子邮件,但徽标不成比例? 这是因为一些公司没有使用响应式徽标网页设计。

nike responsive logo designs

徽标是在计算机和智能手机时代之前创建的——早在响应式网页设计成为网页设计的主流之前。 但至关重要的是,您的徽标可以在响应式网页设计中生存和适应 - 否则,它会看起来凌乱和过时。

品牌被遗忘的时间要少得多。

因此,重要的是要了解响应式徽标设计实际上是什么,以及创建一个徽标的过程。 这不仅仅是确保您的徽标可以增长和缩小而不会出现任何重大故障。 您必须确保无论您使用何种媒介查看徽标,它都能脱颖而出——而不是因为它不成比例、像素化或被压扁。

在创建或更改您的公司徽标时,请记住以下几个关键提示——因为响应式徽标设计已经出现,您不想被排除在外。

audi logo design

简单

说到徽标,清洁很重要。 标志应该引人注目且易于识别——但不是因为它们的无耻(或令人讨厌)。 人们没有时间剖析一个令人困惑或混乱的标志。 他们只是不够关心。 这就是为什么选择简单、干净、时尚的标志设计是你的标志头脑风暴应该去的地方。 您希望人们看到您的标志,立即认出它,然后形成他们的意见。

你不希望他们眯眼或挠头。

尤其是在考虑响应式设计模板的适应性需求时,您不能有一个讲述冗长复杂故事的徽标。 它只是不会很好地转移。 它需要清晰和微妙,以免使事情过于复杂。 你的标志需要扩大和缩小——太多的副本、太多的离谱设计和华丽的颜色不能很好地移动。

你不需要让你的听众为它工作——他们已经足够工作了。

告别鲜艳的色彩、夸张的阴影、耀斑和发光,向干净的线条、光线、自然色和现代耀斑说再见。 当您在移动设备、平板电脑和笔记本电脑屏幕上查看时,确保您的徽标简单将增加其灵活性。

现代性

当谈到 2018 年响应式标志设计时,这给我们带来了另一个必须遵循的最佳实践。我们处于现代时代,我们的标志需要代表这一点。

良好的响应式图像和徽标设计时尚。 他们很坚强。 他们很干净。 它们并不过分复杂。 他们与新时代保持同步。 这意味着许多公司将不得不不断调整和改变他们的设计,以保持相关性和趣味性。

选择较少的颜色和简单的字体。 玩简单的形状,远离过于抽象的东西。 当然,结合您自己的风格并根据您的品牌建立您的徽标 - 但不要太过分了。

kate spade logo

极简主义

少即是多——在网页设计、印刷设计、公寓装饰——尤其是标志方面。 极简主义在,使极简主义的标志设计成为您的品牌或公司的必备品。 缩小细节是可以的,您的观众几乎不会知道其中的区别。

用于整理和缩小设计的微小更改和调整实际上可以提高您的可见性。 还有什么比现在更适合极简主义的时候了? 当从化妆品包装到家具的一切都变得极简时,一个不极简的标志可能看起来已经过时了。

适应性

改变是不可避免的,重要的是要明白你的标志会改变——即使你认为它的方式是完美的。 这就是为什么你需要创建一个标志来为不可避免的变化和适应性做准备。

多年来,一个过于复杂的设计将更难变形和简化——相反,你将首先失去原始标志的完整性。 如果你完全改变你的标志,你就会失去标志应该提供的品牌认知度。

尤其是在响应式网站设计中,拥有易于修改的徽标有利于让更多人看到您的徽标。 如果您的徽标不能适应,您的公司作为一个整体也将无法适应。

想要更多标志设计技巧吗? 注册我们的通讯!

您还可以做些什么来优化响应式网页设计中的响应式徽标设计?

根据屏幕尺寸,您的徽标可能需要变成全新的东西。

嗯,不完全是。 但是,根据查看位置的不同,您的徽标可能需要放弃其某些特征。

在某些情况下,如果您的徽标包含单词或短语或其他符号,则图像越小,它们就需要被留下。

根据您是在智能手机还是平板电脑上阅读,您的徽标可能必须放弃字标,重新对齐自己以使其堆叠而不是在一行中,丢失标语或以上所有内容。

这并不意味着您的徽标将失去所有可识别性。 它仍然是你的标志,但只是它的基本部分——每个人都与你的品牌或产品相关的图像或符号。

多米诺就是这样做的。 他们的主要标志如下所示:

dominos logo

缩小后,它看起来像这样:

dominos responsive logo

您仍然知道最后一张图片与 Domino 相关,它只是更容易适合较小的屏幕。

做对了的品牌

许多品牌已经开始改变他们的标志以适应响应式网页设计。 他们已经减少、简化、变得极简,并让他们的标志为他们和用户服务。

多年来,Twitter 只是一家更改其标志的公司——每一次新的迭代都比上一次更好。

twitter logo old

在早期,Twitter 有一个非常基本的标志设计,采用其标志性的蓝色。 它只是所有小写字母的名称“twitter”。

它简单、易识别且易于理解。 但是要缩小的话,只能把字缩小到难以辨认的程度。 他们的下一个标志设计引入了我们都知道和喜爱的 Twitter 鸟,但即便如此,似乎还有太多事情要做。

最近,推特的标志变得非常简约,保留了标志性的推特蓝色,但只使用鸟作为其标志性标志。

new twitter responsive logo

现在这是一个响应式标志设计!

但 Twitter 并不是唯一一家使用徽标的公司。 另一家在适应方面做得很好的公司是 Spotify。

old spotify logo

Spotify 从一个时髦的、独特的、面对面的标志开始。 对某些人来说,字体和颜色的选择看起来有点幼稚——但它对他们有用多年。

但考虑到他们几乎完全生活在移动设备上,他们需要一个更适合移动设备的响应式标志设计。

他们最近的迭代要简单得多,也更灵活。 当他们改变颜色时引起了一些骚动,但首席产品设计师 Tobias van Schneider 知道他需要加入现代潮流,正如他在博客文章中所说:

尽管我们习惯了旧的“西兰花”绿色,但我们觉得沉闷的品牌调色板迫切需要升级。 是时候让它焕然一新,并确保它与我们充满活力的新调色板相得益彰。 新的绿色更“流行”,在我们的新调色板中感觉就像在家里一样,已经发展到近三打颜色。 它不仅看起来更新鲜和现代,而且在眼睛上感觉更轻松,尤其是在全屏应用时。

new spotify responsive logo

Spotify为此采用了更亮的绿色和更简单、更清洁的设计。 它可以根据屏幕的大小轻松进行调整 - 并且可以正常工作。 没有看到“Spotify”这个词,您立即知道 Spotify 符号代表什么。 这就是重点。

另一个成功的标志更改是万事达卡,其标志仅略有变化,但产生了持久的影响。

这是他们的旧标志。

mastercard logo

如您所见,这个标志性标志绝对引人注目,但已经过时。 颜色在中间交替的方式有点刺眼,徽标内的名称虽然易于阅读,但看起来并不令人愉悦。 但是在一英里之外,您就知道这是万事达卡的标志。

然而,近年来,他们转向更简单的设计,更自然、更流畅地融合在一起。

new mastercard responsive logo

它的新标志将公司名称移到设计下方,并将字体更改为更清晰、更易于阅读的字体。 他们还在中间添加了第三种颜色,真正平衡了标志设计本身的各个方面。

这也是一个很好的更新,因为对于较小的屏幕尺寸,可以轻松删除字标。 毫无疑问,这个标志属于哪个品牌。

当涉及到您自己的徽标或您的图形设计师正在进行的徽标重新设计时,您可以真正从这些成功的徽标设计中学习。

品牌需要开始利用小而干净且易于识别的符号。 这样他们就不会仅仅依靠他们的名字来吸引注意力,也不必担心他们将如何适应响应式网站设计。

查看更多杀死它的徽标重新设计。

错误的品牌

笨重、不平衡和抽象——2012 年伦敦奥运会的标志不是响应式标志的材料。 它到处都是并且不平衡,乍一看,它并没有真正让您了解徽标的用途。 更重要的是? 设计中的文字确保当它变得太小时,您无法阅读它所说的内容。

london olympics logo

英国电信最近也进行了标志重新设计。 代替旧标志,新标志——这是 30 多年来的第五个标志——包括在不同颜色的球体前面的字母 BT。 虽然英国电信因简单而获得分数,但彩虹色根本不是现代或简约的。 不仅如此,该符号本身并不会立即适用于英国电信。 如果你还不熟悉这个品牌,你甚至不知道这是为哪家公司服务的。

british telecom logo

这看起来像是 1990 年代的标志。

你可以做什么

现在是 2018 年,如果您的网站或徽标没有响应,那么您已经放弃了。 在技​​术每天每时每刻都在不断发展的世界中,您的品牌不能被抛在脑后。 这就是为什么您需要了解和理解一些有助于您的业务成功的关键设计最佳实践——无论您是需要帮助改进您的设计流程、从平面设计师切换到网页设计师,还是需要不同类型设计的课程.

您的徽标是您品牌中最显眼的东西。 它需要脱颖而出。 它需要被识别。 最重要的是,它需要适应响应式网页设计。 如果您的标志不能适应和发展,那么您的品牌本身将无法发展。

响应式标志设计需要:

  • 简单的
  • 现代的
  • 极简主义
  • 适应性强

在徽标设计方面没有错误的余地。 如果你有一个坏的,每个人都会知道。 为了优化您的响应式图像和徽标设计,了解如何确保您的徽标适应非常重要。 为确保您的徽标针对所有屏幕尺寸进行了优化,您可以:

  • 去掉字标
  • 消除标语和短语
  • 重新对齐或居中您的标志设计
  • 选择单个符号

响应式标志设计是未来——不要留在过去。

你喜欢哪些标志设计? 在社交媒体上告诉我们!

想要更多的设计趋势洞察? 注册我们的通讯!