什么报纸可以教我们有关网页设计的知识

在网站主页之前,有纸质的“首页 ”,—— 从古腾堡原则到网格系统再到折页,报纸教给我们很多有关网页设计的基础。Web技术正在不断改进,如今网站开发人员可以应用许多强大的功能。不过,每一种艺术都有其古老的大师。就网站而言,就是报纸。

当您深入研究新闻设计的基本原理时,与网络的重叠是经常发生的,而且常常是无法区分的。许多网站设计最佳实践可以直接追溯到新闻设计。归根结底,网站是供用户参与并希望返回的。几个世纪以来,报纸一直在玩这种游戏并赢得了胜利。

任何对网页设计怀有浓厚兴趣的人都将从了解新闻设计的工作原理以及工作原理中受益。本文将研究报纸设计的几个原则,并展示它们与在线最佳实践的联系。这种联系的核心是简单易懂的童趣化原则,一个报纸和网页设计师都会很容易记住。

保持主页

报纸自17世纪以来就存在。他们为自己的规则而努力,并且由于其内容每天都在变化,因此规则必须是抽象的。我们在任何给定报纸上看到的百分之九十五将在第二天不出现。对于将报纸的内容整理成一定形状,这是必不可少的。

我们将要研究的是该框架。将报纸连在一起的一些看不见的规则,他们主要关注形式以及读者如何处理信息。与网页设计的相似之处很快就会变得清晰起来,并且希望这些课程也可以。让我们从一个明显的问题开始-折页之上。

折叠之上

如果您在网络上工作,那么您可能会听到“首屈一指”的意思,这意味着您进入网页时会遇到的内容。这是一个报纸术语,可以追溯到几个世纪以前。由于报纸的大小,通常将报纸叠成两半,因此,折叠上方的字面意思是在报纸对折上方可见的内容。这是潜在读者看到的第一件事。这通常是给人留下深刻印象的唯一机会,因为人们只需要了解更多,就可以使他们购买副本。如果报纸不值得登上头版,那么有什么理由认为它完全值得拿起呢?

折叠上方的空间是主角故事的领域,主角故事是整篇论文中最重要的信息。它必须勾住读者。这通常等于大标题,关键信息和惊人的图像。也就是说,没有严格的格式。吸引人们注意力而又不歪曲真相的一切,都将成为赢家。

在首屏上是报纸对“酒吧测试”的第一个也是最重要的答案,——如果您在酒后告诉某人故事的症结,您会脱口而出。如果您有机会告诉您的朋友们昨天人们在月球上行走,那么您可能不会对涉足的鞋子品牌感到满意。您会冲刺大喊:“人类在月球上行走!” 在这里,报纸将当今最重要的一个或多个故事浓缩为要点。

同样适用于网站设计,这无疑是术语沿用至今的原因。网页设计中的“首屈一指”(在线意味着您在滚动之前看到的内容)是网站对发布测试的回答。人们应该知道的最重要的一件事是什么?尽管这与主页特别相关,但它适用于所有地方。

根据去年对2500万浏览器的一项研究,“首屏”是网页上最常被查看的部分,其参与度仅次于峰值。从新闻到电子商务再到社交媒体,都适用相同的原则:直截了当。

古腾堡原则


因此,您吸引了某人的注意。恭喜你 您需要了解古腾堡原则-或Z模式。古腾堡原则受到“报纸设计之父”埃德蒙·C·阿诺德(Edmund C. Arnold)的拥护(稍后会详细介绍),是思考人们如何处理页面内容(无论是纸还是像素)时的一个很好的经验法则。

古腾堡原则指出,当面对同质内容时,我们从左上角开始,到右下角结束,并随即从右向左滑动。这源于一个叫做阅读重力的想法。西方世界的人们一生都在从左到右阅读,从左下往右滑动以到达下一行的起点。报纸的设计趋向于迅速发展。

以前面显示的《纽约时报》头版为例。您的眼睛每行都曲折,“植物标志”出现后,您的眼睛在哪里闪动?几乎可以肯定是“来自月球的声音”。打破这种流程往往会使读者感到烦恼,因为它与一生的阅读习惯背道而驰。您多久看到一次主导故事紧紧抓住页面右侧而不是左侧?不经常。

相同的流程适用于网页设计。史蒂文·布拉德利(Steven Bradley)在Smashing Magazine上发表的有关合成流和节奏的文章探讨了在线环境中的原理,当然值得一读,但我想补充一下,看一下它在印刷中的应用具有巨大的价值。毕竟,这是在万维网问世之前已经应用了数十年的原则。新闻设计协会决赛入围者的任何入围名单都将是内容流的大师班。

现在要清楚一点,阅读重力并不像重力那样具有约束力。你们中间的老鹰可能已经注意到了限定词,它主要适用于“同质”内容。更重要的是,它不是基于人性的天赋,而是基于语言。在从右到左阅读的语言(例如阿拉伯语)中,同样的原则适用,但是被翻转了。

在印刷之日,这无关紧要。论文通常仅限于某个地理区域,并且可以反映该区域受众的主要语言。在在线领域中,任何人都可以在任何地方访问您的网站,因此了解古腾堡原则不仅很有价值,而且设计出可以根据所读语言而改变形状的网站也很有价值。

古腾堡原则不是人们与内容互动的唯一方式。眼动追踪研究表明,F形图案在网上也很常见,例如,随着读者越往下走,“跳跃”越多。

这些模式都是有用的。它们不是规则,而只是趋势。强大的新闻设计不会盲目地遵循Z模式,这可能会发生什么;它以此为基础。网页设计也是如此。如有疑问,请记住,但不要崇拜它。人眼的阅读重力已根深蒂固,但出色的设计却引人注目,而不是跟随。

网络的适应性为内容呈现开辟了惊人的新可能性。古腾堡原则的教训是可以并且应该实践的起点。最好的规则破坏者通常确切地知道规则是什么。

logo

每个报纸都有一个铭牌。这是您唯一可以保证不会因版本而异的事情。它位于首页的顶部(或偶尔在侧面),由出版物的名称和徽标组成。

其中许多本身就是标志性的。诸如《华盛顿邮报》和《太阳报》等出版物的铭牌已深深地渗入了公众的意识。铭牌是品牌,上面写着:“我们不是其他报纸。我们是这份报纸。它可以传达您是谁以及您的身份。

它还充当一种目录。报纸的铭牌上常常带有挑逗性的文字,使读者看到的故事虽然不一定能在首页上引起关注,但仍然值得一读。它是上述倍数游戏中的关键角色。停在附近。继续阅读。这里有适合您的东西。牢记古腾堡原则,铭牌可能是读者首先会看到的东西。

实际上,每个网站都有一个铭牌,只有在我们称为标题的网站上。Smashing Magazine拥有一本,Amazon拥有一本,Facebook拥有一本。一个网站没有一个网站,而且没有出现在每个页面上,这很奇怪。在网络上,每个页面都必须包含一些首页。很多用户都是通过根域到达站点的,但是很多用户不是。

这就是为什么在线铭牌比印刷长辈更忙的原因之一。他们有能力做更多,这与要求更多的人一样。但是在新闻和网页设计中,铭牌的根本目的是相同的:使品牌处于领先地位并居于中心地位,并引导用户了解他们所关心的事情。

网格系统和内容块


报纸是纯内容。从头到尾,它们都充满了信息,信息需要被良好地组织和呈现。网格系统是报纸设计的基础。当水将自身塑造成碗形时,新闻内容将自身塑造成网格系统。

列是其中最重要的元素。根据报纸的格式(小报,大幅面等),它可能有四到十四列。很少有报纸的内容不以一种或另一种方式出现在这些专栏上。文本沿一列向下流动,然后在下一列中继续显示。图片可以跨越多列,特别是当它们醒目时。

报纸已经超越了意识形态的僵硬意识流,您可以在上述类似的早期尝试中找到它们。现在,人们普遍认为报纸的内容应该以块的形式组织起来,每个故事都形成自己的盒子。这就是所谓的模块化布局,这是它成为标准的多种原因。

首先,组织起来比较容易。如果每个故事都适合在一个干净整洁的空间中,则可以相对轻松地重新排列它们。当您试图通过时钟在有限的空间中容纳数十个(或数百个)故事时,这真是天赐之物。

其次,它更清晰。好的信息只有在表现不好的情况下才有价值。块在页面内创建页面,其中每条信息都是不同的且易于遵循。

这些标准在网站设计中一直发挥着作用,但是对于了解CSS Grid可供使用,它们特别有用。报纸网格系统不仅为整齐而清晰地安排内容提供了指导,而且还展示了内容块如何相互交互以及如何与广告互动。错误的排列确实看起来很愚蠢,而正确的排列却使人阅读愉快。

与以往一样,存在差异。例如,在线很少出现跳转(当您到达列的底部并继续在下一列的顶部继续阅读时),因为网页可能会无限期下降。这种布局在网上通常意义不大,因为它会导致读者上下滚动以浏览单个内容,这很违反直觉。正如雷切尔·安德鲁(Rachel Andrew)所展示的,跳动可能只是列表和少量内容的问题,但这种做法通常是印刷品物理限制的产物。网页设计中跳跃的主要价值很可能是用于堆积内容块,而不是组织复制。

更重要的是,无论是在印刷版还是在线上,放弃网格系统都可以发挥自己的威力。就像达达艺术从20世纪初的美学规范中退缩一样,野兽派网站也将网格系统颠倒过来,以提供更多……非常规的东西。

如前所述,要首先违反规则,您需要了解它们。为此,蒂姆·哈罗格(Tim Harrower)的《报纸设计师手册》(The Newspaper Designer’s Handbook)是一个绝佳的起点。对于更全面的介绍,Carrie Cousins在Design Shack的《在印刷设计中使用网格》非常出色。

当您转到网络时,这一切有多重要?好吧,越来越多。诸如Grid,Shapes和Flexbox之类的CSS属性使遵循和打破网格系统规则变得前所未有的容易。正如报纸通常会在其线框的无形线条之外冒险一样,网站也可以突破其自身媒体的界限。

安迪·克拉克(Andy Clarke)在他的《网络艺术指导》一书中首先研究了印刷媒体(和其他媒介)的课程,展示了CSS的进步如何为网格系统增加了全新的维度。正如克拉克本人所说:

多年以来,我们一直在告诉对方网络无法打印。我们已经告诉自己,我们在其他设计媒体中欣赏的东西不能(有时不应该)在网上使用。我们不必再这么认为了。

向前看…但先向后看


上面的约定是由数十年(在某些情况下是几个世纪)的经验构成的,并且它们来自更多的地方。他们基本上都归结为对内容的理解,以及人们如何与该内容互动。

最好的报纸遵循卡通上简单的原则:以清晰,吸引人和可访问的方式呈现信息。对于任何网站来说,这都是一个值得追求的目标。而且不要相信我。这些想法得到了前述现代报纸设计之父埃德蒙·C·阿诺德(Edmund C. Arnold)的拥护。阿诺德在职业生涯中设计或重新设计了数百种报纸,包括《芝加哥论坛报》,《波士顿环球报》,《国家观察报》和《新闻日》。

他敦促设计师发挥更大的影响力,使报纸既有才华又有实质性。他还是一名记者,还是一名学者,并且撰写了许多有关报纸设计和版式的书籍。他知道他的东西。他是1992年的创始成员之一的新闻设计协会(SND)现在每年都获得两项大奖,这是一个偶然的消息,一项是新闻设计奖项,另一项是数字奖项,这并非巧合。

当报纸适应网络时,您可以实时看到这种情况。目前,在线新闻设计的金标准可能是《纽约时报》,它是今年印刷和数字SND奖项的决赛入围者。在线《泰晤士报》有趣的是做到了古典主义与创新之间的融合。

或以像马里奥·加西亚(MarioGarcía)这样的报纸设计师为例,后者是埃德蒙(Edmund)之后的一代人,他的最新著作《故事》(The Story)旨在在手机上阅读。最好的新闻设计师津津乐道。证明在布丁里。(对于那些感兴趣的人,García每天都会在博客中发布新闻和网页设计的重叠部分。)

从很多方面来说,这是新闻设计的主要内容。它的顶级从业者不是教条主义者,而是学生。当被问及他对下一代设计师的建议是什么时,埃德蒙·C·阿诺德的回答不是一系列规则。比这简单得多:知道您来自哪里。

我向年轻设计师传达的信息是:孩子们,您可以做得更好,但是发挥潜力的唯一途径是回到并理解基础知识。听起来很无聊,但这是事实。


报纸并不具备出色的网页设计的所有关键,但了解指导它们的原理只会使网页设计师受益。在这两个世界中,有很多亲戚。我不是网页设计师,但是看到网页设计的部分原因是我对报纸的了解,因此我认识到良好的网页设计。目的和风格具有一种外观,美观,时尚的方式。

十多年前,网络设计大师Jeffrey Zeldman在推特上打了钉子:

内容先于设计。设计在没有内容的情况下不是设计,而是装饰。

— zeldman(@zeldman)2008年5月5日
维塔利·弗里德曼(Vitaly Friedman)弯腰说:“好的设计是关于有效的沟通,而不是以牺牲易读性为代价的装饰。” 他和Zeldman都将在新闻设计领域找到很多盟友。很少有媒体比报纸具有更丰富的历史婚礼内容和设计。他们所拥有的就是这场斗争。

致尚未想像的

在这里值得重申的是,新闻设计和网页设计之间存在明显且不可否认的差异。在报纸上,空间的尺寸总是相同的,而网站必须适应截然不同的屏幕尺寸和设备。在报纸上,您所看到的就是所得到的,而网站可以隐藏各种有用的功能,直到提示它们出现为止。本文的目的不是要使您相信新闻和网页设计是相同的。但是,它们通常非常相似。成为一个人的主人并不能使你成为另一个人的主人,但这会有所帮助。

也许这就是为什么弗里德曼(Friedman)早在2008年就整理了一系列屡获殊荣的报纸设计的原因。当时CSS还不够完善。好吧,现在,这真的很令人兴奋。

这个过程永远不会结束。它不能结束。没有报纸或网站值得一试。它一直在发展。看看有史以来的第一份报纸和有史以来的第一个网站,可以肯定地说,自那时以来,这两个世界都发生了很多变化:

自从这些不起眼的开始以来,这两种格式都得到了巨大的改进,并且还有很多要做的事情。由于CY Gopinath在2016年被完美地追踪,因此参数总是在变化。网络技术,屏幕尺寸,设备,互联网速度,您都可以命名。在移动时代,铭牌可能位于底部。谁知道?这一切都摆在眼前。

在许多方面,火炬已从新闻设计传递到网页设计。如果开发人员可以利用长辈的知识向前发展,他们将实现前几代人甚至无法想象的事情。多么难得的机会。我等不及要看他们提出了什么。

注:本文翻译引用自国外