React Router 品牌更新

我正式的设计培训早于我们现在所知的现代网络。在学校，我沉浸在古老的文本中，并接受了印刷设计师的培训，在那里我了解到未来总是受益于丰富的历史经验和参考。如果你密切关注时尚和趋势，你会知道这是真的。旧事物经常激发新的事物，虽然 Remix 团队一直在努力发布 React Router v7，但我们决定看看品牌标识，看看我们是否可以稍微更新一下。

我的名字是 Tim Quirino，我最近加入 Remix 担任产品设计师，此前 Shopify 收购了我的前公司（Threads.com）。在这篇博文中，我们将一起了解 React Router 的品牌更新。我将把它分成三个部分；从 logo 更改开始，接着是字标的更新，最后是创建标志此版本的连字。

更新 logo

React Router logo 已经是 React Router 功能的优雅抽象。对于任何不知道的人来说，它是一个路由树的视觉表示。连接的节点是正在积极渲染的路由。它从上到下流动并连接相邻节点的方式是有意义的，以呈现最快最简洁的路径。如果你读过Matt Brophy 关于战争迷雾的文章，你可以看到明显的相似之处。

我钦佩它的简洁，但从执行的角度来看，显然有改进的空间。

节点未对齐，位置不一致，仔细观察就会发现它们连接组织中的曲线并不平滑。虽然我花了一些时间探索替代 logo，但我意识到修复这些问题是重中之重。

更新字标

当谈到这个难题时，团队更渴望一些新的东西。自从五月份发布关于合并 Remix 和 React Router的文章以来，我们一直在考虑从视觉上合并这两个品牌的想法。特别是，我们想知道这是否是一个将 Remix“R”整合的机会，考虑到过去我们一直使用 Founders Grotesk Bold 作为这两个标识的 logo 字体。

最终，我们决定不进行视觉整合。Remix 品牌将保持独立，可以自由发展，因为我们将在 2025 年从午睡中醒来，发布新的 Remix 包。通过做出这个决定，React Router 字标将不再依赖于另一个 logo（也不会限制这种探索）。它让我们可以探索一些更特定于 React Router 的东西。

另一个问题仅仅是当包含在品牌标识中时，“React Router”这两个词太长了。与其创建 Logo + 字标的各种垂直和水平堆叠配置，我们想知道我们是否可以提供一个单一的、常青的解决方案。

受古代“紧凑型光盘”logo的启发，我们采用了嵌套“React”一词并强调“Router”作为更重要的概念的方法。从视觉上看，这是一种优雅的方式，可以解决长度过长的问题，同时为标识建立更准确的层次结构。

我保留了一些 Founders Grotesk 的使用，并创建了一个自定义连字，它更方便地允许嵌套。“u”与“t”的连接也是对 logo 中节点连接方式的视觉参考。

当“Router”一词以轮廓样式显示时，你可以更清楚地看到它背后的复古灵感。

为此次版本创建标志

最初，我认为我们不需要为“v7”提供独特的视觉标识。毕竟，React Router 已经存在多年了，以前版本从未获得过自己的视觉标识。但像这样的版本对于数百万 React Router 项目（以及 500 万行代码的 Shopify 应用）来说都是很重要的，我们非常重视自己的工作。

在科技之外的世界，重大版本通常会得到定制的处理。如果你有一个最喜欢的 Metallica logo，它可能与他们在那个时期发布的音乐有关。“帝国反击战”和“新希望”的 logo 是同一个团队，同一个演员制作的，但旨在传达故事的不同部分。正如 logo 和字标的制作都是有意的，标志此版本也是有意义的。

我包含了“v7”连字的演变，以说明我最初看到的机会在哪里。最初在输入“v”和“7”这两个字符时，默认的字母间距使它们看起来像彼此相隔很远的独立对象。

当将它们一起缩进时，嵌套开始显现为一个明显的方向。字标中嵌入了元素，所以这里嵌套元素在概念上也是合理的。完善这项任务的挑战在于找到一种平衡，既要保持字符与其余标识的比例一致，又要定制字符，使其感觉像属于一起。

我对这次品牌更新的结果感到满意，因为这个过程反映了 Remix 团队的工作方式。远非线性，这项任务充满了乐趣，却没有牺牲细节和意图。也许更重要的是，这是一次真正的演变——它让我们在保持灵活和创造性的同时，不断探索我们的身份——不会忘记我们是如何走到今天的。