Atlassian 品牌改版背后的故事

九月份著名协作平台 Atlassian 进行了一次品牌形象升级。他们设计团队的设计师 Leah Lin Pincsak 对这次工作进行了一个回溯。下面我们跟随她的文笔,来看看她和她的团队在进行升级工作时遇到了哪些事。

项目简介,以及潜在的挑战

重新设计品牌并不是画一些小猫小狗的图形。这事其实很复杂,你会面临不同的观点,产生不同的情绪,需要无缝的协作来实施落地。 这就是为何我们必须确定这是值得去做的事情,而且时机恰当。

这是项目中比较轻松的环节。

我们都承认,虽然目前的形象系统已伴随我们很久,但并未跟上公司发展的步伐。我们的产品和业务已经发生了很大变化,比如我们最近重新修改了产品的UI设计,配色方案和插画风格(您可以在 Atlassian Design Guidelines | Atlassian Design 上了解更多信息)。此外,公司的产品线一直在扩张,Trello,Statuspage 和 Stride 在过去一年中加入了我们。

然而,我们的品牌形象系统并没有随着业务的发展而进化。不同产品的 logo 风格各异。 我们有三个产品的 logo 长得一样。 logo 所用的字体 – 一个定制版本的 Klavika 字体 – 缩小使用就会遇到易读性问题,因此并不能展现我们所想表现的信息层级。这一堆品牌元素随着时间的推移,越来越不像“一家人”。 另外,我们许多 logo 的内涵并不匹配。例如,原来的 Atlassian logo(被用户亲切地称为“Charlie”)暗喻 Atlas 独自撑起天空的姿势,这是因为我们原来专注于服务和支持

最后,这个项目不仅是做几个 logo。而是要为14个风格各异,放在一起很不和谐的 logo 创造一个灵活,持久的形象系统。并且也要提升主品牌价值,让它可以比以前发挥更大的作用。

项目成员:我自己,logo 设计师 Angy,品牌设计师 Sara,策划 Megha 和字体设计师 James 。我们是一个小而精悍的团队。

探索阶段的一些深坑

我们从观察每个产品的本质和特色下手。在绘制草图前,脑爆可以极大的帮助我们更加全面地思考产品。也就是说,我们思考过下面这些事:

  • 操作:用户在产品内可以实现的操作
  • 价值:成功使用这个产品后可能成功带来的价值
  • 隐喻:产品中所有的符号,都代表了什么
  • 内容:所有在产品中处理的内容类型

为了帮助我们进一步缩小每个标志的含义范围,我们使用了抽象谱。Jira 软件可以用一些具象事物(比如一个产品核心元素 – 票)或如箭头般(比如表示向上,前进,进度等含义)抽象的事物来表示。

专注于简单而具象的描述(如 Jira 产品的“ticket”或 Confluence 的“page”),导致我们遇到了第一个死胡同。这些简单的描述太具象了,局限很大,尤其对于那些含义丰富的产品。

我们还发现,当我们试图在产品上执行这种“具象”规则时,我们仍然需要使用无形的,隐喻的概念来解释产品的细微差别。我们的产品名称范围从抽象(例如 Jira)到具象(例如 Statuspage,Bitbucket),这妨碍了我们对每个 logo 使用纯粹的“具象”规则。

过分如何(通过统一概念)使 logo 看起来像一家人,导致我们进入第二个死胡同。我们发现,对统一概念的痴迷使我们意识不到每个标志应该代表什么。示例如下:

所以我们从头再来,重新聚焦于每个产品单一的“概念”。这意味着要回到草稿阶段,虽然听着很沮丧,但这是我们在整个项目中做出的最重要的决定。我们分开来观察每个 logo,把他们作为14个不同的品牌,并且我们在确定基调前不去考虑选择样式。Jira 软件的流程示例如下。(注:ADG = Atlassian Design Guidelines,它定义了产品和业务上执行时的原则)

结果是当我们试着将比喻混合时,发现设计系统(ADG)其实无比强大,并产生了一个有趣的,通用的思路,以把这些品牌串起来。你可以看见初期的形象系统。

前期测试,良药苦口

我们知道针对形象系统以及之前所做种种假设进行压力测试,是很有帮助的,即使结果和我们的预估相差甚远。使用 Optiomal Workshop 的服务,我们开展了一些前期测试,收集来自用户对新 logo 的一手反馈。在过程中,我们能看到是否存

在消极的反馈,或者说 logo 的含义是否传达到位。

Atlassian logo

一直以来,Atlassian logo 本身就是一个大 IP,常常被用户用在 T 恤上,指示牌和 Confluence 文档中。我们重新设计的替代 logo,需要在合适的场景下有足够灵活。

同时,我们需要这个 Atlassian 的符号好用好记,能表征巨大的产品库。既然我们意图不采用具象的 Atlas 含义,那么就要足够抽象,一个单词缩写,非选项。)

最后,我们希望 logo 不仅是一个形状,而是充满表现力,并容易让人理解,可以让我们在其中感受到内涵、生命以及空间。

在品牌形象系统中添加字体部分

我们知道用好字体,可以让整个品牌形象系统的信息层级分明而流畅。我们在过去的那些年将 Klavika 和 Circular Pro 搭配使用,以此在程序、物料、标记等其他特殊场景保持品牌的一致性。

Circular Pro 有着友好而中立的印象,被我们使用了很多年。但当我们看向未来时,会担心非衬线艺术字体可能会过时,即使近期还看不到征兆。

产品设计团队最近选定了新的产品用字体,我们需要在此基础上,立足市场的角度,将印刷用粗体字等需求纳入考量。

按照这个项目的传统,我们首先做了大量的研究,决定使用一种独一无二的自定义字体。我们选择 Charlie Sans 作为新字体,它可以反映品牌个性中的友善,乐观和古怪。同时我们以 logo 中“A”中的微妙弧线向以前的 logo “Charlie”致

敬。我们的品牌形象系统至次已浮出水面。

破茧而出

在这个项目开始时,我们花了比平常更长的时间来解决问题。但这些工作得到了回报,在最终的评审中,我们得以在一堆候选中选择新的Atlassian logo。

虽然所有入围者看起来略有不同,但他们都很简洁,放在一起有着逻辑和美学的统一性,分开来看也有各自的优点。

我们靠着胆量一路走来,竞争对手在背后虎视眈眈。这意味着我们需要立足现在,考虑将来,为公司选择一条适合的道路。神奇的事发生了,其他的项目关联角色(包括我们的两位联合 CEO)都一致定下了同一个候选者作为 Atlassian 的 logo。有人说看见了两个人举手击掌,有人说看到了一条通往山顶的道路,还有人说看到两艘竞赛的帆船。

我们相信新的 Atlassian logo 平衡了专业性和易懂性。它很强壮,同时也很灵活。最重要的是,它延续了我们品牌的优点,同时开启了 Atlassian 的新篇章。

Atlassian logo,各个产品 logo 和新的字体一起组成了一个统一的品牌,他们步调一致,作为一个更好的平台来支持我们的团队工作。

我为我们的作品感到自豪。是时候把它公之于世了!

文章总结:

作为一名交互设计师,翻译品牌设计方面的文章果然遇到了不少障碍,很多设计方法和术语并不是很熟悉,所以反反复复校对了很久。不过一篇文章翻译下来,还是了解到了很多有趣的东西,关于 Atlassian,也关于品牌设计。如果大家有什么意见或者发现什么翻译问题,欢迎私我。

扩展阅读:

  • Sketch 插件:CRAFT | Sketch Material | WeSketch | Runner
  • Sketch 教程:Library | 换色文字 symbol | Symbol 嵌套 | 字体样式库
  • Graffle 教程:绘制流程图 | 搭建文档 | 绘制表格
  • 设计工具:InVison Studio

译文地址:非科班设计(公众号)

作者:Leah Lin Pincsak

译者:徐小马

(0)

相关推荐

  • 百度网盘品牌升级背后的故事

    视频观看,请点击下面链接 项目背景 网盘是提供的个人云存储服务,自2013年上线至今,通过强大的技术能力以及承担高额的带宽成本,为7亿用户提供文件存储.备份.分享.共享等服务,成为行业领先位置.这5年 ...

  • MEDIUM 2.0新LOGO背后的故事

    @龟途漫漫:Medium最近换了一个新LOGO,褒贬不一,想知道内幕,不如来看看这家专注于生产优质文字的网站是如何通过新Logo 表达自己的改变与创新的. Medium,这是每个平时爱写点儿东西去表达 ...

  • 丁香园 8.0 全新改版升级,设计背后的故事

    丁香园 App 是丁香园面向医生.医学生与医疗行业从业者推出的一款综合性应用.专注于通过病例讨论.话题互动的形式开展深度的社区交流.从专业技能.医学考试.职称晋升等方面真正帮助用户成长. 发现问题 在 ...

  • 百度竞价推广背后的故事

    现在有的人为了能够更好地做好网站优化工作,都在进行百度竞价推广,这是非常有效的,但是在百度竞价推广的背后又有哪些故事呢? 1.做百度推行的企业网站,点击的主要来源其实是一些销售型公司的业务人员,国内如 ...

  • QQ默认表情优化背后的故事

    小编:经常使用QQ的同学都知道前不久,QQ的自带表情发生了变化,而对于这个改变也是褒贬不一啊.一时成为了大家热议的话题.那么又是出于什么原因发生了优化呢?以及优化同时所考虑的问题以及细节又在哪呢?今天 ...

  • QQ飞车W喷背后的故事5

    很多人知道w喷,但并非人人都清楚它的来龙去脉. 而我是个很喜欢去挖掘事实背后故事的人.下面是我来讲一个关于W喷的故事 步骤/方法 01 寻根问祖为几何---W喷法名号繁多需整合 W喷,就其根源就是氮气 ...

  • QQ飞车W喷背后的故事3

    很多人知道w喷,但并非人人都清楚它的来龙去脉. 而我是个很喜欢去挖掘事实背后故事的人.下面是我来讲一个关于W喷的故事 步骤/方法 01 极限追求---谁动了我的速度? 倘若你足够细心,往日里我们过弯后 ...

  • 高手经验:进行APP设计改版的15个技巧

    提到这个话题有两层不同的讨论方向,在工作中对公司项目进行设计改版和利用业余时间进行自由主题的改版练习.这次我们主要以后者为出发点进行讨论,其目的是为了给部分设计师在利用自己业余时间上面探索出一个新的方 ...

  • INSTAGRAM 为什么要改图标?

    为什么人们会认为它变得平庸?Instagram希望成为一个怎样的产品?这个更改其实与设计风格关系不大,而与Instagram自身定位和未来计划更有关联.一起来看设计背后的故事. 作者:好奇心日报-朱凯 ...