对于我们的网络团队来说，彻底改造我们的主页和博客是一次真正充实的体验。由于他们是一个小团队，设计师在任何项目的早期阶段都能够与开发人员紧密合作，将每个人的专业知识汇聚在一起。就主页重新设计而言，它还提供了一个很好的机会，通过突出展示 Sketch 创建者来回馈社区。
最近，我们与网站幕后团队进行了交流，以了解更多关于该项目是如何诞生的。
您是如何想到新的主页设计的？您能带我们了解一下您的头脑风暴过程吗？
这一切始于一个想法：在主页上展示和宣传其他设计师的作品，而不只是页面中间的一个小部分。我们的产品是设计师每天用来完成工作的东西，所以为什么不展示可以用 Sketch 实现什么，而不是仅仅销售工具呢？这是主页英雄设计最初的概念。
定制主页的想法是后来产生的，考虑到我们只有有限的时间来创建这个页面。我们从 11 月开始着手进行，并在今年 1 月发布。
我记得在一个 Slack 线程中写下了这个想法，我们当时正在讨论并收集来自设计师的不同作品，我们希望将这些作品展示在我们普通的主页上。我们希望通过在我们的主页上展示他们的作品来表达我们对社区中少数设计师的感谢，并附上一个定制的 URL。
我们的产品是设计师每天用来完成工作的东西，所以为什么不展示可以用 Sketch 实现什么，而不是仅仅销售工具呢？
我们成功地于 1 月 4 日推出，当时有 14 个定制主页。后来又添加了几个，我们很乐意创建更多。（嘘！给我发个信息，我可能会把你的 Sketch 作品带到我们的主页上！）
我们对相关设计师都保密，每个人都很喜欢它。最近，我们还添加了几个新版本——一个展示了我们 One Layer Challenge 的获奖者和入围者，另一个是为情人节准备的。当然还会更多！— Augusto Lopes，首席网络设计师
看起来更好 实况 😉
您在技术上遇到的最大挑战是什么？您是如何克服的？
信不信由你，最大的挑战是主页和 Beyond the Canvas 博客 上最小的、可有可无的功能！
在设计主页时，我的目标是让它看起来尽可能接近产品，同时又要显得自然。然而，模拟光标移动提出了挑战。仅仅使用 CSS 关键帧来写几个光标位置看起来并不自然。相反，我选择使用 Perlin 噪声 及其 JavaScript 实现。这使我能够在二维空间中生成多个彼此靠近的坐标，从而使光标看起来像是在随机（并且自然地！）移动。
另一个挑战是完善与英雄部分的画板和其他 UI 元素的交互——例如评论和原型箭头——使其行为与 Mac 应用中的行为完全一致。确保点击、拖动、放置和其他交互在所有不同的场景和分辨率下都能正常工作绝对是困难的——但也正是这个项目工作中有趣的一部分。
至于 Beyond the Canvas 博客，最大的障碍是确保我们所有现有的博客文章都完好无损，即使有了新的设计。拥有一个适当的设计系统绝对在这个过程中帮助了我们，因此，返回到旧的博客文章并进行调整以适应新的设计并不是什么大不了的事。— Vladan Vukmanov，营销网络主管
您为什么认为是时候对 Beyond the Canvas 进行彻底改造了？您希望这种新设计能带来什么？
我们有这样一个想法：让 Beyond the Canvas 成为一个平台，让我们可以在 Sketch 品牌的限制之外更广泛地讨论设计行业话题。将其转变为更多在线杂志，用于分享有趣、发人深省和有用的文章、视频、观点等等。简而言之，Beyond the Canvas 是我们 Sketch 设计行业内容的新家。
就整体设计方法而言，我们希望它成为 Sketch 中的一个独立子品牌。外观和感觉有所不同，但仍然没有完全偏离主品牌——仍然辅以相同的字体和其他一些小细节，将其联系起来。在我们抛出想法时，我们都同意它需要足够简单，让内容成为全部亮点。
最后，我们想出了这种新的复古风格设计，色调柔和、简洁而精致的插图以及直观的布局——让我们能够在不同的部分和组件之间切换。我们从主品牌中剥离了许多细节，例如阴影、不透明度、圆角等等，几乎将其恢复到基本状态，真正将重点放在文章及其多样化的内容上。
对我们来说，作为内部网络团队，这种新的基于组件的方法为有效地构建新部分和进行快速更新解锁了许多功能。对我们的作者来说，这是一个制作新颖和令人兴奋内容的坚实平台。对 Sketch 爱好者和整个设计社区来说，我们希望它成为设计界所有事物的良好资源！— Osvaldas “Oz” Poviliunas，网络设计师
最好的感觉是，当类别颜色和博客标题恰好匹配时💅
从开发角度来看，您对博客重新设计的哪个功能最自豪？
很难指出确切的功能，因为它是一个完整的重新设计，但我可以举一些例子，我乐于完成这些工作，事实证明它们更具挑战性。
我们最初对这个项目的方法是将其构建为一个组件库，然后将其全部组装起来。这种方法是对我们合作能力的一次极好的考验。我开发了项目的最初阶段，但是当我不在的时候，Miguel 接手了，一切都非常顺利。这对我们网站未来基于组件的方法是一个很好的概念验证。
我真的很喜欢为帖子列表工作，因为它最初是三个或四个不同的组件，最终压缩成了一个更简单、更高效的组件。Oz 简洁而模块化的设计是其可重用性的关键。
另一个非常有趣的组件是主页英雄滑块和类别页面上的英雄——让那些大的色块栩栩如生，并根据当前文章或您在网站上的位置进行调整，这是一个巧妙的小挑战。
最后，虽然我在开发中没有参与太多，但我最自豪的功能是我们的导航栏——它看起来很棒！🤩 — Daniel Pereira，网络开发者
您对新主页设计的哪一点最满意？
令人惊叹的英雄及其多功能性！它必须是它的多功能性！我第一次看到设计文件时，没有看到它的全部潜力。我当时对它看起来的样子表示怀疑。然后我看到了实现。我喜欢它。很有趣。你可以像在 Sketch 中的画板上一样拖动图片。不错的彩蛋，对吧？
后来我才知道我们会有一个针对社区中几位设计师的定制主页，比如 Gavin 和 Viviane。每个人都会得到一个完全定制的英雄，展示他们的作品。这有多棒？这可能是那一周有人想出的最好的主意。如果不是，它也感觉像那样。
然后，到了二月，我们在海牙，天气很冷，我们正在参加公司会议。有人在想着夏天，建议我们可以使用我们全新主页的 hero 来展示海滩、阳光和五颜六色的遮阳伞的图片。一个沙堡桶，一只凉鞋，还有一个 Bola de Berlim — 一种带葡萄牙风味的德国甜点，已经成为海边必备品。
这太疯狂了！ 我听到我的脑海像美国肌肉V8一样咆哮着。我们可以用它来推广活动和特殊日期。有无限的 possibilités。那么，在2月14日收集 情人节的箭 怎么样？
设计及其开发使我们能够非常轻松地改变主页的整体风格。因此，对于一个复活节彩蛋迷来说， hero 是我最喜欢的网页元素。— Miguel Antunes，网页开发者
错过了这个特别版的首页？敬请关注我们的下一个版本！
未来会有什么
除了像情人节特别版这样的更多有趣的探索之外，网页团队目前正在致力于采用基于组件的方法，以便设计师可以从模拟开发人员在他们端所见内容的库中进行工作。目标是提高效率，减少质量保证的轮次。
对于开发人员来说，与设计师一起工作有助于设定挑战，使他们的工作更具活力。我们的主页就是活生生的证明。他们由两名设计师组成的团队，通过视觉上令人惊叹的设计，找到了一种新的摇滚网页的方式。而我们的博客——Beyond the Canvas——让团队探索了一种组件驱动的方案。他们仍然很兴奋地继续在我们的网站上取得更多成就。
敬请关注更多！
