如何建立一个强大的品牌插画系统

Yihui Liu是一名UI/视觉设计师和插画家，对以人为本的设计有着极大的热情。在北京学习和工作后，在大学完成了她的第二个硕士学位。目前在柏林担任Spacebase的设计负责人。

品牌插图是一个建立公司视觉品牌一种有效的方式，本文中给大家概述了如何建立一个强大的品牌插画系统过程。

 

写在前面

品牌插图是一个建立公司视觉品牌一种有效的方式。在这篇文章中，Yihui Liu 概述了她如何建立一个强大的品牌插画系统过程。她在中国和欧洲的10多年研究和专业经验使她的方法得到完善，并从她作为Spacebase首席设计师的工作中提取了一些例子。

在大量的在线内容中，公司依靠其品牌形象生存或死亡。一个品牌形象必须表达公司的信息并与用户建立联系，用户应该能够通过不同的媒体去识别它。

品牌形象通常是由不同的视觉元素构成的，比如logo、调色板、特定的字体。除了这些，插图是另一种强大的视觉传达手段，对于在UI的界面上也越来越需要了。

为什么？因为插图可以将叙事元素引入视觉内容中，并从微妙的情绪或更复杂的情况中表达。包括人的形象使思想变得活跃和更容易理解，通常以一种轻松或异想天开的方式。插图脱离了现实主义，让你构建品牌所看到的世界。

那么，你应该如何着手设计一个有效的品牌插图系统呢？带你看看我的设计过程，并以最近我们在Spacebase进行的设计为例。

 

研究品牌

首先要知道你要设计的品牌，这可能听起来很简单，但是不要低估你所涉及的工作。即使你认为自己已经掌握了工作知识，也值得花时间更新或加深对你对品牌的理解。

深入的了解公司及其产品或服务背后的文化。他们的主要信息是什么，他们现有的视觉标识采取什么形式，公司想要朝什么方向发展？一开始你就彻底地去研究这些，避免你以后遇到更多的麻烦。

 

组织灵感

一个情绪板对于掌握你接收到的信息和组织你的想法是很重要的。收集竞争对手或公司在该领域与你的预期目标类似的图像，然后汇编成一个资源。这是一个对于自己激发灵感的方法，也可以作为你想要实现的整体基调的指南。

对于Spacebase设计，我特别受到Airbnb、IBM和Shopify插图的启发。简单的人物和空间设计让我印象深刻，让我更加感兴趣的是它们柔和的调色板如何使插图集中，又不会淹没图案元素。 它们给人一种平静、温暖和包容的感觉。

 

设计概念设计

经过研究和情绪板之后，我开始在PS上进行草图绘制。有时我使用Wacom手绘板，但主要是我使用钢笔工具来控制鼠标。我使用形状创建一个基本结构，并使用钢笔工具添加细节和加强基本轮廓。

记住，你设计的图像应该结合在一起形成一个统一的系统，而不是形成独立的场景。因此，即使这是第一次迭代，也要使插图具有独特的风格，将来可以在不同的场景设计中使用它们。

借助Spacebase插图，我们将重点放在人的性格和配色方案上，使图像与其他视觉品牌元素保持一致。

我开始画人物的基本轮廓，来感受他们所代表的情感。我想要流畅的线条，给他们动态的轮廓和动作的建议。我还想避免任何看起来过于沉重的内容，轻量级和友好是关键字。多样化对我来说也很重要，因为Spacebase是一家国际公司，我一直希望插图的观看者能看到自己。

除了人物之外，我还希望对象和环境具有一种独特的风格（抽象），未来主义和前卫设计。我们想要展示明亮和美丽的内部空间，让用户参与到空间动态中，并且使用一些物体建一个理想化的专业工作环境。同时，这些也不是为了分散注意力。Spacebase致力于激发会议室的灵感，品牌更多的是关于使用这些空间的人。这需要多次的迭代才能得到正确的结果。

草图经过细化之后，我想到很多种配色方案。色彩非常有力，可以引起即时反应，所以对我来说，重要的是不要压倒插图。我想要细微的阴影来增强和补充场景。色彩方案也要体现品牌的个性，与其他视觉元素相匹配。对于Spacebase配色方案，重要的是要打破单色并远离通常与会议室相关的色调颜色。他们的主要品牌色是橙色，所以我用更柔和的色调来平衡，比如紫色、天蓝色、灰色和芥末黄。

 

收集反馈

在第一次迭代之后，尽可能收集所有的反馈。显然，你需要与主要涉众沟通，谈谈他们对设计的看法。但如果你有用户或同事的意见，也要试着征求他们的意见，尤其是那些不在设计领域工作的人。他们的回答可以引导你下一步应该采取什么样的步骤来改善插图。为真实的目标用户设计，而不是想象的需求。

总的来说，我更喜欢听到人们的意见。夸奖虽然是挺好的，但用处不是很大。我们了解用户的痛点，告诉他应该把注意力集中在哪里。即使他们不同意你的想法，涉众和他们的用户也必须喜欢这个设计。好的设计取决于用户的眼光。

我在Spacebase中最纠结的一个插图是取消邮件的横幅。当用户取消预订或当Spacebase取消预订时，他们就会收到这些信息。没有人喜欢看到不好的东西，所以我希望设计能够给用户传递一些理解。不过早期的版本太复杂了。

最后，我们把所有的人物都去掉了。这是一种避免插图变得过于情绪化并给人以更中性的感觉的方法。最新的迭代最小化了戏剧性，它通过半抽象的屏幕表现来呈现一个问题，但也指出了取消之前的预期。

当你在画插图的时候，建立一个你已经使用过的不同元素的资料库是很有用的。这意味着你在以后可以去参考它们，可以确保你的风格在不同的插图上保持一致。从长远来看，保持插图的一致性是系统整体有效性的关键。

我们经历了很多阶段才达到了最终迭代…

不断的迭代是一个成功的视觉识别的最重要的部分，不断的创建新的版本，获取反馈，并设计新的迭代。一切都是原型，你必须保持调整的态度，以使你的品牌尽可能贴近用户。让相关人士了解最新情况和参与进来，并为意外的转折做好准备，设计也是一个过程，每一步都让你更接近一个更好的结果

只要你专注于研究和反馈，你就会朝着正确的方向前进。这就是我从设计中获得的最大收获，我对正在进行的过程充满了动力，当我感觉自己在不断改进时，我很乐意做我所做的事情。

原文地址：smashingmagazine

译文地址：小阿田的设计笔记（公众号）

作者：By Yihui Liu

译者：Tzw_n