设计和开发我们自己的(不那么无聊的)公司博客

我不太记得我的第一堂网页设计课了。但我清楚地记得第一次使用Paintshop Pro中的滴管工具。我记得我直接从我的页面上的一张照片中挑选了一种颜色，然后将该十六进制值复制/粘贴到我的CSS中，并更改了我的*整个*网站的文本颜色。好匆忙啊。改变人们在网上阅读的体验的能力，无论有多小，对设计师来说都是值得的。重新设计我们的企业博客也没什么不同。我们对我们的博客现状不满已经有一段时间了，最后我们决定让我们自己设计和建立自己的博客。

我相信你可以找到很多关于“如何设计最好的博客”的内容营销文章，所以我将主要跳过过程性的内容。*但我应该从哪里开始，如何开始呢？*我总是被这个问题搞得手足无措，所以我对过程的唯一指导来自约翰·凯奇(John Cage)的一句话：

我们就是这么做的。我们把我们的小组聚集在一起，询问我们对博客的目标是什么，我们的指导设计原则应该是什么。接下来，我和Dylan(这个项目的开发人员)开始了我们各自的工作流程。他开始了后端和迁移过程(您可以在这里阅读)，我完成了设计，在此过程中我们删除了彼此的拦截器。我们有四个设计原则指导我们：

在Mux，我们花了大量精力写博客文章。这是我们交流想法和分享新功能的主要方式之一。我们写的是深入的技术帖子和深思熟虑的故事，而不是人们为了寻找图片和链接而浏览的列表。内容必须是重点。不是CTA的，不是注册的，不是订阅表。我们的观众是由开发人员和视频专家组成的，他们想要彻底阅读，而不是被打断。

在设计博客时，这似乎是一个显而易见的目标，但如果你花时间浏览一下公司博客，很明显他们还有很多其他相互竞争的目标。设计一个好的阅读体验的关键是，它主要是对事情说不。

没有薄的浅灰色字体(我们以前的视觉身份很喜欢这些字体)。取而代之的是，我们采用了更大的文本大小和更深的颜色，以便更容易访问。

没有评论或讨价还价，我们更愿意在Twitter或hackernews之类的地方进行讨论(专业提示：你会想要有适当的策略来准备应对这种野兽)。

支持细微的队列，如阅读时间和进度指示器(非常适合在移动设备上阅读较长的帖子)

好的，听起来很田园式的，但我们仍然是一家企业，我们的网站有目标要实现。那么，假设人们确实有很好的阅读体验，那么他们下一步应该做什么呢？我们希望他们采取的理想行动是什么？

将流量推向mux.com。令人惊讶的是，这是我们旧博客的一个大问题。该模板不允许我们设计与正常网站紧密结合的良好/直观的导航体验。读者通常是Mux的新手，他们想要更多地了解我们的公司，但以前他们没有一个简单的单击方式来访问mux.com。

分享(与同事或在社交媒体上)我们最成功的一些博客帖子通常是那些登上黑客新闻头版或在我们高度评价的公司/团队内部流传的帖子。

多读我们的文章。相当直截了当。如果读者喜欢我们的作品，我们希望他们能找到更多。

订阅我们的时事通讯。如果读者喜欢他们读到的内容，并且想要随时了解Mux正在做什么，请进入Good Ol‘时事通讯。

这就是我认为很多博客搞错的地方。他们把这个行动清单看作是一个清单。他们知道如何让所有这些动作同时提供给读者，但实际上，这些动作在读者之旅中都有非常不同的位置，需要不同的上下文。我们的第二个设计原则帮助我们分解了这些动作，并找出了如何在读者的整个旅程中使用它们。

从Twitter打开一篇博客文章的常见情况足以让我们专注于移动优先的方法，但它也帮助我们在开始设计时锻炼了约束。只需将所有操作集中在一起，即可轻松实现宽敞的桌面体验。因此，在开始任何视觉设计之前，我创建了一些非常简单的线框(也添加了桌面)来帮助我们回答“你想从这里走到哪里？”读者旅程中每一部分的问题。

让我们从个人帖子的顶部开始：可以说是最有价值的部分。它也是最容易被我们谈到的额外垃圾弄得乱七八糟的部分。如果读者没有读完这一节并真正阅读了这篇文章，他们在这一点上还会关心什么呢？一种常见的情况是，浏览者当时对阅读不感兴趣-也许他们只想看看Mux是谁，或者他们想看看博客概述，看看我们写了些什么。这就是重要的地方，有一个链接到我们的主网站以及博客主页/概述。另一种情况是某个人回访，他记得以前的帖子，并希望在复制链接分享之前进行验证。

半途而废：人们很早就形成观点，在读完之前就分享文章。我们都这么做。要共享某些内容，您需要URL，而大多数开发人员(包括我自己)都会删除添加到末尾的垃圾跟踪参数，所以让我们同意不这样做。我们坚持使用一个简单的点击复制按钮，为您提供仅限基本地址的url。

然而，首先在移动设备上测试之后，我意识到最常见的移动浏览器(Safari和Chrome)现在都有简单的“复制链接”选项，只需点击两次即可。我们最终将其从梦寐以求的移动房地产市场中剔除。

当你读到一半的时候，你很可能忘了你正在读的东西的标题，当你分享它的时候，你会想要标题来了解上下文。我们认为，如果我们将标题添加到固定的导航栏中，就不需要滚动回到顶部并分心了。同样，这在移动设备上是不需要的，因为你在点击共享图标后会看到一些链接预览。

那些写到帖子底部的很棒的人：虽然这可能是我们最投入的观众，但很少有人在读完博客帖子后立即签约参加产品试用。更有可能的情况是，他们会访问我们的网站来更多地了解我们的产品，也许会阅读更多我们的作品，或者寻找一种方式来获得更多的信息，以便在未来获得更多的我们的作品。

首先实现移动体验的好处在于，它允许您以更有趣的方式使用桌面空间，比如扩展真正可以利用的组件的宽度(例如图像、代码块、数据表)。

我们博客设计的美学选择大多来自社论出版物，而不是其他公司博客。我开始注意到的一个问题是，我们喜欢的很多社论和博客例子都依赖于委托的艺术和摄影，或者是内部的插图设计师来设计封面图形。作为一家没有接触到这些的小型初创公司，我选择了严重依赖排版来发展我们一开始的美感。

我创建了一个are.na频道来收集我们喜欢的布局、交互和类型处理。

我们从很早就开始使用Lineto的Akkurat字体。然而，在早期，我们使用了200磅的阿库拉特，当与我们的浅灰色相结合时，它变得非常难以接近。取而代之的是，我们现在采用了一种大胆的处理方式，真正接受了我们直接的、偶尔也是厚颜无耻的博客标题。平衡这一点与Akkurat Mono在注释细节方面的技术天赋可以形成坚实的配对。

博客视觉设计最明显的出发点是正文。它是文字的主要载体，其他一切都只是为了支持它。文本正文的宽度通常由字体、比例和可读性的组合决定。我通常在桌面上拍摄平均每行12个单词，而在移动设备上则将其减半。

什么是打字秤？我为什么需要它？如果你真的想了解字体刻度背后的数学和美学原理，那就向蒂姆·布朗这样的专家学习吧。我过于简单化的结论：为了视觉上的一致性，你想要限制你使用的数字标题大小，为什么不把这些选择建立在一个自然的、视觉上看起来不错的数学标尺上呢？这不是关于“这应该是H1还是H2”，更多的是关于这里的乘数，给你一个可以选择的步骤列表。我们已经知道的步骤会看起来很好，让我们保持一致。幸运的是，有一个方便的小在线工具可以帮你解决问题。

全面披露：在去年设计我们的字体秤时，我更多地将此工具用作指南，而不是一套硬性的规则。让我的工程师处理任意的小数位感觉很愚蠢。在阅读了弗兰克·奇梅罗关于他自己的重新设计过程的出色的深入研究后，我感到放心*这是可以的*😅。

67/50/38/28/21/18*/16(基数)/12。

*等等，18岁不在你的“完美第四”尺度上！不，不是的。但是我想让这个博客更大，与网站的其他部分截然不同，你猜怎么着，只是看了一眼之后看起来很不错。正如我之前说过的，我认为打破看似武断的规则是可以的，只要背后至少有一些意图\_(ツ)_/。

这是我设计的完整Mux类型比例的静态图片(很快就会应用到mux.com的其他部分)。

我想快速解决一个关于行高的问题：在这个过程中的某个地方，通用的150%是最易读的行高规则已经在每个开发人员的头脑中根深蒂固。这只是一个建议，仅适用于正文文本，因为正文文本通常较小，篇幅较长。较大的显示字体需要的行高要小得多，因为你将它们作为一个单独的包阅读，即不是一个连续阅读体验的标题。

样机只能告诉你一个设计在如此广泛的内容下会有多好的效果。疯狂的长标题到三个单词的标题，小gif到宽宽高比的封面图片，代码样本，多个作者，等等。有这么多要可视化的东西，我无法预测所有的内容会有什么反应。我们的原型制作过程更多的是在前端完成，而不是使用设计工具。因为Dylan能够快速迁移我们的旧博客帖子内容，所以他能够构建快速的前端原型，我可以在其中检查元素并调整Chrome开发工具中的内容，看看感觉如何。紧挨着坐着*在细微差别的细节上来回穿梭，实际上让这件事变得很有趣，让我们可以完善那些经常被忽视的小细节。*在您开始担心社交距离之前，我应该补充一句，这显然是一个早熟的世界，尽管我非常希望看到远程工作的繁荣，但我绝对怀念办公室允许的轻松协作。

我最初希望最后一个设计原则是“让写作变得愉快”，但老实说，写作很难。这并不是每个人都能享受到的。相反，我们专注于改善所有那些让这一过程如此令人沮丧的小不便。我们认为，简化发布博客帖子的工作流程本身就是一个巨大的胜利。

这永远是一场比它需要的更多的斗争。许多博客模板都有封面图片作为这些大的、漂亮的全宽占位符。这会给作者带来额外的压力，因为这会让形象变得更加重要。取而代之的是，我们让它们的大小更容易管理，更灵活，并将它们放在标题旁边，以帮助增加上下文。

^^我们以前的方法(和大多数博客模板)：“嘿，添加一张漂亮的照片，它将占据打开的登录页面的一半，并且是你写作的视觉表现。没有压力。哦，你可以自己找到它，并确保它与页面上的其他元素(如徽标)配合使用。“。

^^我们的新方法：添加任何适合您帖子基调的图片。从模因的gif到技术图表，我们的新版面将使其发挥作用，并将其与您的标题放在一起作为上下文。

你的帖子被查看的方式和位置决定了它是否被点击和阅读。这在搜索结果中会是什么样子？这在推特上会是什么样子？我的头衔是不是太长了？我的形象是不是太模糊了？如果以这种非常具体的方式来看，它会是什么样子？对于一个作家来说，所有这些小小的未知数都可能会使他步履蹒跚。

迪伦不仅建立了一个很好的网络预览，而且他还在CMS中添加了SEO预览。

因为我们是为开发人员编写的，而且我们的许多作者都是开发人员，所以我们真正关心的是如何导入和显示代码。起初，我认为简单地拥有易访问的颜色、漂亮的线条高度和等宽字体就足够好了，但我很快就了解到，我们必须让它变得简单，并与开发人员的工作流程兼容。对于具有特定语言要求的长块，语法突出显示确实是必要的。对于与实际的Github Gist文件同步的非常长的代码样本，需要Archer。稍后，我们还添加了类似于glitch代码编辑器的沙箱，以实现更具交互性的代码示例。

很少有项目是完全单独完成的。就像让团队成员帮助构建一些东西要容易得多一样，也更容易让人帮助编写关于您构建的东西。

并不是每个人都可以访问Google Analytics，或者即使他们这样做了，他们也不太可能登录，也不知道在哪里可以查看他们帖子的表现。我们添加了一些集成到CMS中的基本统计数据。我们认为，让它看起来像排行榜也可能会增加一些很好的竞争激励。