我们如何建立一个开源的设计系统来创造新的社区徽标

> 
> 了解 Ansible 的新徽标是如何根据相关人员的意见开发的，以确保整个项目的品牌一致性。
> 
> 
> 


![UX design Mac computer with mobile and laptop](/data/attachment/album/202211/08/123703nrcyz52pcoqvpn52.jpg "UX design Mac computer with mobile and laptop")


作为红帽的用户体验（UX）设计和 Ansible 产品团队的交互设计师，我们花了大约 6 个月的时间为 Ansible 社区设计了一系列徽标。这件事其实在更早的时候就开始了，当时一位项目经理要求我们为一个幻灯片提供一个 “快速而简单” 的徽标。在收集了一些需求后，我们在几天内就向相关人员展示了一个徽标，而且没有经过太多调整。几个月后，另一个相关人员说他们也需要类似的徽标，所以我们重复了这个过程。


于是，我们注意到一个模式：像这样的徽标资源不仅仅代表个人的要求，而是整个 Ansible 项目的共同需要。在完成了几个徽标要求后，我们有了一系列临时的设计，但在没有意识到品牌和设计惯例的情况下，这可能给整个 Ansible 的品牌视觉造成了不一致。随着这个徽标系列的增加，我们认识到了这个迫在眉睫的问题，并需要解决它。


我们的解决方案是创建一个 Ansible 设计系统，这是一个针对品牌的资源，可以指导未来一致的徽标设计。


### 什么是设计系统？


设计系统是一个可重复使用的资源和指导方法的集合，有助于告知任何数字产品套件的视觉语言。设计系统创造了一些模式，将独立的产品整合在一起，并通过可扩展性和一致性提升品牌。


特别是在一个有多种产品的大公司里，如果没有标准化，扩展起来就不容易，因为不同的团队对每个产品都有贡献。设计系统可以作为每个团队建立新资产的基线。有了标准化的外观和感觉，产品在整个组合中被统一为一个家族。


### 从头构建一个设计系统


在收到相关人员提出的为 Ansible 开源社区（如 Ansible Builder、Ansible Runner 和Project Receptor）创建徽标的一系列要求后，我们决定为我们的工作流程设计一个结构，并创建一个单一的事实来源，为之努力。


首先，我们对现有的徽标进行了视觉审计，以确定我们要做的是什么。Ansible 的原始徽标系列由四个主要图像组成：代表 AWX 的 Angry Spud，代表 Ansible 核心/引擎的 Ansibull，以及代表 AWX 的带翅膀的显示器。大部分的徽标都是用一致的红色阴影和公牛的形象联系在一起的，但是笔画的宽度、笔画的颜色、线条的质量和排版复杂而多样。


![Original Ansible logos](/data/attachment/album/202211/08/123717xdv8tzc0ddvobvdd.png "Original Ansible logos")


Angry Spud 使用棕褐色的轮廓和手绘风格，而 Ansibull 则是一个对称的几何矢量图。AWX 显示器是一个异类，它有细线画的翅膀，蓝色的矢量矩形，以及古英语字体（这里没有包括在内，但与家族中其他使用现代无衬线的字体相比，它是一个例外）。


### 确立新的设计标准


考虑到调色板、排版和图像，我们产生了一个一致的构图，以 Ansibull 代表所有核心的 Ansible 产品，以及大胆的线条和充满活力的颜色。


![Ansible design system](/data/attachment/album/202211/08/123727ws6ssdn4d4phrdh5.png "Ansible design system")


新的 Ansible 社区徽标设计风格指南详细说明了 Ansible 产品徽标的调色、排版、尺寸、间距和徽标变化。


新的风格指南展示了一种全新的、现代的定制字体，该字体基于瑞士独立字体厂商 [Grilli Type](https://www.grillitype.com/) 的 GT America 字体。我们为该字体创造了一个柔和的外观，通过圆润每个字母某些角落来配合图像的圆润度。


我们决定通过在光谱中加入更多的颜色并以原色为基础，设计一个更生动、更饱和、更普遍的调色板。新的调色板以浅蓝色、黄色和粉红色为主色调，每种颜色都有较浅的高光和较深的阴影。这种更广泛的颜色范围使系统内有更多的灵活性，并引入了 3D 的外观和感觉。


![New Ansible logos](/data/attachment/album/202211/08/123741zj0q6cfdgx5gxxdc.png "New Ansible logos")


我们还引入了新的图像，如 Receptor 和 AWX 徽标中的六边形，以保持视觉上的连续性。最后，我们确保每个徽标在浅色和深色背景上都能使用，以获得最大的灵活性。


### 拓展设计组合


一旦我们建立了核心徽标系列，我们就开始为 Ansible 服务创建徽章，如 Ansible Demo 和 Ansible Workshop。为了将服务与产品区分开来，我们决定将服务图形包围在一个圆圈中，圆圈中包含了相同的定制排版的服务名称。新的服务徽章显示了幼儿版的 Ansibull（来自 Ansible Builder 的徽标）正在完成与每个服务相关的任务，例如 Ansible Demo 指向白板，Ansible Workshop 则使用构建工具。


![New Ansible services logos](/data/attachment/album/202211/08/123752t8dkl0iqufzobeiq.png "New Ansible services logos")


### 利用开放源码进行设计决策


最初的 AWX 徽标受到了摇滚乐图像的影响，如翅膀和重金属字体（此处省略）。


![Original AWX logo](/data/attachment/album/202211/08/123809ya76zsoooifoqo3i.png "Original AWX logo")


(Fiona Lin and Taufique Rahman, [CC BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/))


Ansible 社区的一些成员，包括红帽多样性和包容性小组，提请我们注意，这些元素类似于仇恨团体使用的图像。


考虑到原徽标的社会影响，我们必须迅速与 Ansible 社区合作，设计一个替代徽标。我们没有像最初的徽标那样闭门造车，而是扩大了项目的范围，仔细考虑了更多的相关人员，包括 Ansible 社区、红帽多样性和包容性小组，以及红帽法律团队。


我们开始了头脑风暴，向 Ansible 开源社区征求意见。Ansible 的一位工程师 Rebeccah Hunter 在草图绘制阶段做出了贡献，后来成为我们设计团队中的一员。让一大群相关人员参与进来的挑战之一是，我们对新的徽标概念有了各种各样的想法，比如一条辅助电缆、一碗拉面等等。


我们勾画了五个社区贡献的徽标创意，每个徽标都有不同的品牌视觉：一个芽、一个火箭、一个显示器、一碗拉面和一个辅助电缆。


![AWX logo concepts](/data/attachment/album/202211/08/123819ott2een6mue38tk5.jpg "AWX logo concepts")


在完成这些初步的概念草图后，我们建立了一个虚拟的投票机制，并在整个迭代过程中使用。这个投票系统使我们能够利用社区的反馈，从五个初始概念缩小到三个：火箭、一碗拉面和显示器。我们在这三个方向上进一步迭代，并通过专门的 Slack 频道进行反馈，直到我们找到一个符合社区愿景的方向，即 AWX 显示器。


![New AWX logo](/data/attachment/album/202211/08/123829r4eekh2qfeqm4n2q.png "New AWX logo")


以社区的意见为指导，我们围绕显示器为 AWX 打造了徽标概念。我们保留了原徽标中的显示器元素，同时使其外观和感觉现代化，以配合我们更新的设计系统。我们使用了更鲜艳的色调，更简洁的无衬线字体，以及来自 Project Receptor 徽标的元素，包括六角形图案。


通过从一开始就与我们的社区接触，我们能够在公开场合进行设计和迭代，所有相关人员都有一种包容感。最后，我们认为这是取代一个有争议的徽标的最好方法。最终的版本被移交给了红帽法律团队，在获得批准后，我们用这个新的徽标替换了所有的现有资产。


### 主要收获


为设计系统创建一套规则和资源，使你的数字产品全面保持一致，消除品牌混乱，并实现可扩展性。


当你探索在自己的社区建立一个设计系统时，你可能会从我们在这条路上学到的这些关键经验中受益：


* 用设计系统来扩展新的徽标，比没有设计系统要容易得多。
* 当你使用投票系统来验证结果时，杂乱无章的设计方案就会变得不那么令人生畏。
* 将大量受众的注意力引向三套方案，可以消除决策疲劳，集中社区反馈。


我们希望这篇文章能够提供用于开源社区的设计系统的启示，并帮助你认识到在早期开发一个系统的好处。如果你正在创建一个新的设计系统，你有什么问题？如果你已经创建了一个，你学到了什么教训？请在评论中分享你的想法。


*（图像来自：Fiona Lin and Taufique Rahman, [CC BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/)）*




---


via: <https://opensource.com/article/21/4/ansible-community-logos>


作者：[Fiona Lin](https://opensource.com/users/fionalin) 选题：[lujun9972](https://github.com/lujun9972) 译者：[MareDevi](https://github.com/MareDEvi) 校对：[wxy](https://github.com/wxy)


本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创编译，[Linux中国](https://linux.cn/) 荣誉推出


OK
As interaction designers on Red Hat's User Experience (UX) Design and Ansible product teams, we worked for about six months to build a logo family with the Ansible community. This journey started even earlier when a project manager asked us for a "quick and easy" logo for a slide deck. After gathering a few requirements, we presented a logo to the stakeholders within a few days and without much need for iteration. A few months later, another stakeholder decided they would also benefit from having imagery for their materials, so we repeated the process.

At this point, we noticed a pattern: logo resources like these no longer represented individual requests but rather a common need across the Ansible project. After completing several logo requests, we had built a makeshift series that—without conscious branding and design conventions—created the potential for visual inconsistencies across the Ansible brand. As the logo collection grew, we recognized this looming problem and the need to combat it.

Our solution was to create an Ansible design system, a brand-specific resource to guide consistent logo design well into the future.

## What is a design system?


A design system is a collection of reusable assets and guidelines that help inform the visual language of any digital product suite. Design systems create patterns to bring separate products together and elevate brands through scalability and consistency.

Especially in a large corporation with multiple products in the portfolio, scaling does not come easily without standardization as different teams contribute to each product. Design systems work as a baseline for each team to build new assets on. With a standardized look and feel, products are unified as one family across the portfolio.

## Getting started building a design system

After receiving a series of requests from stakeholders to create logos for the open source Ansible community, such as Ansible Builder, Ansible Runner, and Project Receptor, we decided to design a structure for our workflow and create a single source of truth to work for moving forward.

First, we conducted a visual audit of the existing logos to determine what we had to work with. Ansible's original logo family consists of four main images: the Angry Spud for AWX, the Ansibull for Ansible Core/Engine, and the monitor with wings for AWX. Most of the logos were tied together with a consistent shade of red and bull imagery, but the stroke width, stroke color, line quality, and typography were vast and varied.

![Original Ansible logos Original Ansible logos](https://opensource.com/sites/default/files/pictures/original_logos.png)

(Fiona Lin and Taufique Rahman, CC BY-SA 4.0)

The Angry Spud uses a tan outline and a hand-drawn style, while the bull is a symmetrical, geometric vector. The AWX monitor was the outlier with its thin line-art wings, blue vector rectangle, and Old English typeface (not included here, but an exception from the rest of the family, which uses a modern sans serif).

## Establishing new design criteria

Taking color palette, typography, and imagery into consideration, we generated a consistent composition that features the Ansibull for all core Ansible products, along with bold lines and vibrant colors.

![Ansible design system Ansible design system](https://opensource.com/sites/default/files/pictures/design_system.png)

(Fiona Lin and Taufique Rahman, CC BY-SA 4.0)

The new Ansible community logo design style guide details the color palette, typography, sizing, spacing, and logo variations for Ansible product logos.

The new style guide presents a brand new, modern custom typeface based on GT America by [Grilli Type](https://www.grillitype.com/), an independent Swiss type foundry. We created a softer look for the typeface to match the imagery's roundedness by rounding out certain corners of each letter.

We decided to curate a more lively, saturated, and universal color palette by incorporating more colors in the spectrum and basing them on primary colors. The new palette features light blue, yellow, and pink, each with a lighter highlight and darker shadow. This broader color scope allows more flexibility within the system and introduces a 3D look and feel.

![New Ansible logos New Ansible logos](https://opensource.com/sites/default/files/pictures/new_logos.png)

(Fiona Lin and Taufique Rahman, CC BY-SA 4.0)

We also introduced new imagery, such as the hexagons in the Receptor and AWX logos for visual continuity. Finally, we made sure each logo works on both light and dark backgrounds for maximum flexibility.

## Expanding the design portfolio

Once we established the core logo family, we moved onto creating badges for Ansible services, such as Ansible Demo and Ansible Workshop. To differentiate services from products, we decided to enclose service graphics in a circle that contains the name of the service in the same custom typography. The new service badges show the baby Ansibull (from the Ansible Builder logo) completing tasks related to each service, such as pointing to a whiteboard for Ansible Demo or using building tools for Ansible Workshop.

![New Ansible services logos New Ansible services logos](https://opensource.com/sites/default/files/styles/medium/public/pictures/new_service_badges.png?itok=fviEJ21F)

(Fiona Lin and Taufique Rahman, CC BY-SA 4.0)

## Using open source for design decisions

The original AWX logo was influenced by rock-and-roll imagery, such as the wings and the heavy metal typeface (omitted from the image here).

![Original AWX logo Original AWX logo](https://opensource.com/sites/default/files/uploads/awx_original.png)

(Fiona Lin and Taufique Rahman, CC BY-SA 4.0)

Several members of the Ansible community, including the Red Hat Diversity and Inclusion group, brought to our attention that these elements resemble imagery used by hate groups.

Given the social implications of the original logo's imagery, we had to work quickly with the Ansible community to design a replacement. Instead of working in a silo, as we did for the initial logos, we broadened the project's scope to carefully consider a wider range of stakeholders, including the Ansible community, Red Hat Diversity and Inclusion group, and Red Hat Legal team.

We started brainstorming by reaching out to the Ansible open source community for ideas. One of the Ansible engineers, Rebeccah Hunter, contributed in the sketching phase and later became an embedded part of our design team. Part of the challenge of involving a large group of stakeholders was that we had a variety of ideas for new logo concepts, ranging from an auxiliary cable to a bowl of ramen.

We sketched five community-surfaced logos, each featuring a different branded visual: a sprout, a rocket, a monitor, a bowl of ramen, and an auxiliary cable.

![AWX logo concepts AWX logo concepts](https://opensource.com/sites/default/files/uploads/awx_concepts.png)

(Fiona Lin and Taufique Rahman, CC BY-SA 4.0)

After completing these initial concept sketches, we set up a virtual voting mechanism that we used throughout the iteration process. This voting system allowed us to use community feedback to narrow from five initial concepts down to three: the rocket, the bowl of ramen, and the monitor. We further iterated on these three directions and presented back, via a Slack channel dedicated to this effort, until we landed on one direction, the AWX monitor, that aligned with the community's vision.

![New AWX logo New AWX logo](https://opensource.com/sites/default/files/uploads/awx.png)

(Fiona Lin and Taufique Rahman, CC BY-SA 4.0)

With community voices as our guide, we pursued the monitor logo concept for AWX. We preserved the monitor element from the original logo while modernizing the look and feel to match our updated design system. We used a more vibrant color palette, a cleaner sans-serif typeface, and elements, including the hexagon motif, from the Project Receptor logo.

By engaging with our community from the beginning of the process, we were able to design and iterate in the open with a sense of inclusiveness from all stakeholders. In the end, we felt this was the best approach for replacing a controversial logo. The final version was handed off to the Red Hat Legal team, and after approval, we replaced all current assets with this new logo.

## Key takeaways

Creating a set of rules and assets for a design system keeps your digital products consistent across the board, eliminates brand confusion, and enables scalability.

As you explore building a design system with your own community, you may benefit from these key takeaways we learned along our path:

- Scaling new logos with a design system is a much easier process than without one.
- Juggling design options becomes less daunting when you use a polling system to validate results.
- Directing a large audience's attention on sets of three eliminates decision fatigue and focuses community feedback.

We hope this article provides insight into designing a system with an open source community and helps you recognize the benefit of developing a system early in your process. If you are creating a new design system, what questions do you have? And if you have created one, what lessons have you learned? Please share your ideas in the comments.

## Comments are closed.