网页设计做得很好：优秀的社论

许多网页设计讨论都与内容有关。 页面速度、设计系统、搜索引擎优化、框架、可访问性——不胜枚举。 这让我们在Smashing Magazine有很多可写的东西，这很棒，尽管值得提醒我们自己这一切都是为了什么。

在我们的Web Design Done Well系列的第三版中，我们正在磨练许多网站的跳动心脏：内容。 更具体地说，编辑内容。 网络为讲故事的人提供了令人难以置信的工具选择，作为一个偶尔的半胜任记者，我喜欢一个很好的独家新闻。

以下是网络技术与编辑内容相结合以将其提升到新水平的示例。 然后，我们将以更广泛的技巧结束对数字内容的创造性思考。 即使是现在，被内容生产线压得喘不过气来，好东西仍然闪耀着光芒。

路透社倾向于刷卡

在这篇关于美国系统性种族主义的文章中，路透社围绕滑动来塑造内容，将故事分成小块。 阅读感觉比通过传统的滚动方式更有目的性。 就像翻书一样。 在移动设备上，您实际上是轻弹到下一部分。 它可以提供快速、即时的报告——更不用说展示的出色数据可视化了。

我们生活在一个移动优先的世界。 珍惜这一点是没有意义的。 是的，杂志传播对它们有一定的分类。 是的，桌面视图为您提供了更大的画布。 现实情况是，大多数人会在手机上查看您发布的内容，因此请认真阅读。 对于类似的方法，《纽约时报》和Input的这些“新闻报道”也非常出色。 对于那些有兴趣进一步阅读以移动为中心的社论的人，强烈推荐传奇报纸设计师马里奥加西亚的故事。

纽约时报展示而不是讲述

尽管 COVID-19 大流行造成了所有可怕的事情，但它至少带来了一些令人惊叹的好报道。 这篇互动的《纽约时报》文章通过将读者带到粒子级别来解释口罩的工作原理。 您可以看到纤维如何捕捉颗粒，以及为什么不同的口罩具有不同程度的有效性。 任何傻瓜都可以使复杂的主题难以理解，但使它们易于理解？ 这本身就是一种艺术形式。

这里有很多元素在起作用。 图形、颜色、动画——如果你的船漂浮，甚至还有增强现实体验。 本来很容易成为枯燥乏味的主题的东西被赋予了生命。 最重要的是，它是至关重要的信息。 这就是为什么 Gabriel Gianordoli 在 2020 年新闻设计协会奖中被选为世界最佳设计师的原因。 粉碎。

华盛顿邮报可视化指数传播

大流行还迫使数据可视化登上了世界各地出版物的头版。 这篇关于 2020 年 3 月的指数传播的文章（还记得吗？）在可视化某些病毒如何以及为什么很快成为真正的大问题方面做得非常出色。 从全面的模拟到小型的在线迷你图，这是一个充分利用其数字设置的社论。

我特别喜欢这个的地方是它从不觉得无缘无故。 每一个视觉效果都改善了故事，以至于你几乎为任何不得不用文字来解释相同概念的人感到难过。 只需单击一个按钮，它就能以十几种语言提供，这是另一种美妙的感觉——提醒人们，Web 实际上是无国界的。 我只能想象这篇文章帮助了全世界多少人。

马歇尔项目混合媒体

在这里，马歇尔项目以儿童故事书的优雅和苦乐参半的美感展示了有关美国刑事司法系统的强硬新闻。 在“The Zo”中，创意写作、引人注目的插图、迷人的叙述和一个重要的故事相结合。 这是全流程的多媒体编辑。

他们说歌曲可以有多种形式。 在线编辑内容也是如此。 你在上面看到的灵感来自一篇 96 页的学术论文。 它可以通过在线动画系列找到新的观众，然后获得两个艾美奖提名，这证明了互联网的变革力量。

SBS 的互动图画小说并不新鲜

说到互联网的变革力量，互动故事怎么样。 我们都熟悉电影改编、广播剧改编、迷你剧改编等等。 为什么不进行网页改编？ 这正是澳大利亚广播公司 SBS 开始与The Boat合作的内容，这是对 Nam Le 同名书中的一个短篇故事的交互式复述。

页面的开头顺序将您拉入其中，当您阅读时，它的文字随着海浪倾斜和翻滚，雷声和雨声充满您的感官。 随着故事的结束，Matt Huynh 的插图像回忆一样飘过。 这是一种非常生动的体验，本身就很美，也是一种将文学带给年轻一代的精明方式。

周围的布丁猴

我希望我能及时看到这个鼓舞人心的网站系列的声音版。 没关系，它现在就在这里。 在一个真正精彩的数字编辑展示中，布丁并没有通过音乐来解释无限猴子定理。 不知道猴子定理是什么？ 好吧，您还在等什么，该页面的解释工作将比我做得更好。 我会等。

通过使用交互式四音符示例，文章让读者参与其中，同时也使概念易于理解。 作为最后的、令人愉快的触感，页面本身就是一个活生生的、持续的实验，随机地在越来越复杂的曲调中运行。 你可以期待它在大约 19 年的时间里搞定“七国军”。 人们想知道一只猴子在键盘上打字足够长的时间是否可以创建完美的 JavaScript 框架。 希望永不止息。

一个列表分开：一个类分开

对于所有关于数据可视化、音乐、增强现实和其他时髦工具的讨论，对于获得基本权利有很多话要说。 页面不必是拉斯维加斯大道的网络等价物才能引人注目。 A list Apart比大多数都好。 它对内容的处理方式将永远在我心中占有一席之地。 标题、插图、副本、蓝色超链接。 美丽的。

我现在意识到的是很久以前，我写了一篇关于“野蛮”网页设计的两个分支的文章。 我所说的要点是，一种方法是响亮而傲慢的，另一种方法是绝对实用的。 A List Apart显示了后者做得正确的美丽。 多媒体工具包是一项很棒的资产，但即使是现在，有时也只能靠文字来完成。

创造性地思考内容

无论好坏，网络绝对充斥着内容。 很多都很棒，很多都不是。 围绕它的很多讨论都带有冷酷的、计算的节奏，你会很快期望工业家谈论装配线。 上面分享的例子希望能说明抵制把事情搞砸的冲动的价值，但让我们成为现实：大多数网站没有像《华盛顿邮报》这样的资源。

然而，从个人博客到全球出版物，都有办法创造性地思考各个层面的内容。 这里有几个：

• 质疑您的默认方法。
  我们是习惯的生物，包括我们如何讲述我们的故事。 花点时间早点退后一步，问，我怎么能以不同的方式做到这一点？ 也许一篇照片文章会比一篇文章更谨慎。 也许热图比表格更好。 专业化当然很重要，但不要让它对其他通常互补的做事方式视而不见。
• 使用免费资源。
  互联网的伟大礼物之一是有多少令人惊叹的免费东西。 就像，实际上是免费的，故意的。 从摄影到图形设计到数据可视化工具再到音频编辑软件，您只需点击一下即可转换您的内容所需的资源。 我们的免费赠品标签是一个很好的起点。
• 给内容多种形式。
  正如马歇尔计划在“Zo”中特别出色地展示的那样，当故事呈现不同的形式时，它们可以找到新的受众。 写了一篇文章？ 太好了，为什么不录制音频版本？ 制作了数据驱动的报告？ 很酷，但是如果您开始将这些数字插入 D3 是否会像它一样酷？ 只有一种方法可以找出答案。
• 实验。
  这里的例子是最好的，但值得一提的是，尝试新想法和接受偶尔的失败会带来巨大的收获。 迭代是创作过程的关键。 如果您尝试某事但它不起作用，那没关系。 这是获得有效方法的唯一途径。

没有一刀切的内容方法，但尊重故事是必不可少的。 Web 技术是补充性的，而不是主要事件。 不要让他们成为摇狗的尾巴。 当故事与它的讲述方式相协调时，最好的结果就会出现。 这是多年来一直伴随着人们的内容。