启发设计决策：Avaunt 杂志
已发表: 2022-03-10在 Inspired Design Decisions 的第一版中，Andy 将“向细柱问好”，这是一种在原本传统的柱网中添加一个额外的窄柱的技术。 他解释了如何设计，然后使用有意义的标记和高效的 CSS 实现瘦列。 他还解释了如何使用模块化网格进行设计，以使您的设计充满活力。
我不愿承认，但五六年前，我对网页设计的兴趣开始减弱。 当然，拥有一家企业意味着我必须继续工作，但保持积极性并向客户提供我最好的想法成为每天的斗争。
上网并没有提高我的动力。 网页设计停滞不前，可预测性取代了创造力，想法似乎不如数据重要。
我喜欢在网络上工作的原因似乎不再相关。 设计失去了乐趣。 复杂的构建工具和处理器集甚至取代了编写 HTML 和 CSS 的简单乐趣。
当我开始与传奇的报纸和杂志设计师 Mark Porter 合作时，我对艺术指导和编辑设计着迷。 作为一个没有在艺术学校学习过的人，这个设计领域的一切都是令人兴奋和新鲜的。 我阅读了所有我能找到的有关有影响力的艺术指导的书籍，并开始从我访问过的世界各地收集杂志。
我从杂志设计中获得的灵感越多，我对网页设计的热情反弹得越快。 我想知道为什么许多网页设计师认为印刷设计是过时的，与他们的工作无关。 我在想为什么很少有让印刷设计特别的东西被转移到网络上。
我的目标是寻找鼓舞人心的编辑设计示例，研究是什么让它们与众不同，并找到方法来调整我所学的内容，从而为网络创建更具吸引力、吸引力和想象力的设计。
我的书柜现在充满了杂志设计灵感，但我的收藏仍在增长。 我的空间有限，所以我对我拿起的东西很挑剔。 我买了各种各样的选择，而且很少收集超过一期的同一个标题。
我寻找令人兴奋的页面布局、鼓舞人心的排版，以及将文本与图像结合起来的创新方法。 当一本杂志有很多有趣的设计元素时，我就会买它。 然而，如果一本杂志只包含几条灵感，我承认在将它们放回书架之前我不会超过拍摄它们。
我尽可能定期购买新杂志，圣诞节前一周，我和几个朋友在伦敦见面。 如果没有在 Magma 停留一下，“烟雾”之旅就不算完整，我还买了几本新杂志。 在我解释了我的灵感补充后，一位朋友建议我写下为什么我觉得杂志设计如此鼓舞人心，以及杂志如何影响我的工作。
那次谈话引发了一系列关于做出灵感设计决策的想法。 每个月，我都会选择一个出版物，讨论是什么让它的设计与众不同，以及我们如何吸取教训，这将有助于我们更好地为网络工作。
作为 HTML 和 CSS 的热心用户，我还将解释如何使用最新技术实现新想法； CSS 网格、Flexbox 和形状。
我很高兴地告诉你，我再次受到启发和动力去为网络设计，我希望这个系列也能激励你。
Avaunt 杂志：记录非凡
一看我就会告诉你我不是一个冒险家。 我不认为自己特别有文化，我的妻子经常开玩笑说她说我缺乏风格。
那么，当有如此多的竞争性和多样化的杂志时，是什么吸引我关注 Avaunt 杂志及其对“冒险”、“文化”和“风格”的报道？
我通常只需要翻几页就可以确定一本杂志是否能提供我所寻找的灵感。 在最初的几秒钟内，有些东西需要让我仔细观察，无论是令人兴奋的页面布局、鼓舞人心的排版处理，还是图像与文本的创新组合。
Avaunt 拥有所有这些，但最让我印象深刻的是它的艺术总监以多种方式使用颜色、布局和字体的方式，同时在整个杂志中保持一致的感觉。 Avaunt 的页面中贯穿着独特的设计线索。 模板衬线和几何无衬线字体的大胆使用特别引人注目，黑色、白色和红色的重复也是如此，Avaunt 的设计师以各种方式使用它。 Avaunt 的许多创意选择与其讲述的故事一样具有冒险精神。
很多杂志在最初的几篇文章中都使用了光鲜的广告，而 Avaunt 也是如此。 翻过这些广告会发现 Avaunt 的内容页面及其迷人的四列模块化网格。
这种布局在空间区域内保持内容有序，但通过使每个区域具有不同的大小来保持能量。 这种布局可以适应多种在线内容，并且应该很容易使用 CSS Grid 实现。 我很想尝试一下。
对于 sans-serif 标题、standfirsts 和其他类型元素，Avaunt 使用 MFred，最初由 Matt Willey 于 2011 年为 Elephant 杂志设计。Matt 继续艺术指导 Avaunt 的推出，并为杂志的粗体标题和独特的数字。
Avaunt Stencil 由位于伦敦的 A2-TYPE 工作室于 2014 年设计，此后已获得许可。 有许多可用的模板字体，但要找到一种兼具大胆和优雅的字体可能会很棘手——正在寻找托管在 Google Fonts 上的模板衬线？ Stardos 将是显示尺寸类型的不错选择。 需要更独特的东西，试试 URW 的 Caslon Stencil。
Avaunt 对模块化网格的使用并没有以内容页面结束，它是莫斯科冷战理工博物馆冷战好奇心传播的基础，它首先将我吸引到该杂志。 这种传播使用三列模块化网格和各种大小的空间区域。
这种冷战传播让我着迷的是，页面中的模块如何组合成一个文本内容的单列。 即使使用此列，模块网格的比例仍然可以告知内部元素的位置和大小。
虽然 Avaunt 的许多页面的设计都致力于提供美妙的阅读体验，但许多其他页面都在推动网格并将其基础版式风格拉向不同的方向。 深色背景上的白色文本，颜色鲜艳的散布在对象被切掉以与背景融为一体的地方。 填满一列宽度的巨大首字母大写，以及主导页面的大型模板首字下沉。
Avaunt 俏皮的设计增加了趣味性，页面的排列创造了一种我在网上很少看到的节奏。 这些设计上的变化是通过一贯使用安特卫普（同样由 A2-TYPE 设计）作为运行文本的字体以及贯穿整个杂志的黑色、白色和红色主题而结合在一起的。
学习 Avaunt 杂志的设计可以教学和启发。 模块化网格如何帮助以创造性的方式构建内容，而不会让它感觉静止。 （稍后我会教你更多关于模块化网格的知识。）
一套明确的风格如何成为独特和多样化设计的基础，最后如何在一系列页面中创造节奏可以帮助读者保持参与。
下次您路过最近的杂志店时，请随便找一份 Avaunt 杂志。 它是关于冒险的，但我敢打赌它可以帮助激发您的设计也更具冒险精神。
向瘦列问好
对于感觉像是永恒的东西，网络网格设计几乎没有创新。 我曾希望响应式设计的挑战会带来创造性的布局方法，但遗憾的是，事实恰恰相反。
取代原来的网格设计，一、二、三或四块内容排列成为常态。 框架网格，就像 Bootstrap 中包含的网格一样，仍然是许多设计师的起点，无论他们是否使用这些框架。
确实，为什么这么多网络看起来与使用相同网格的网页设计师一样，还有更多原因。 毕竟，几十年来杂志和报纸都有类似的惯例，但不知何故，杂志并没有像许多网站那样失去个性。
我一直在寻找布局灵感，杂志是一个丰富的来源。 阅读 Avaunt 让我想起了我多年前遇到但没有尝试过的一种技术。 这种技术将一个额外的窄列添加到其他传统的列网格。 在印刷设计中，这个狭窄的列通常被称为“混蛋列或度量”，它描述了一个不符合网格其余部分的内容块。 （这是一本适合家庭阅读的出版物，我将其称为“瘦专栏”。）
在这些第一个示例中，将图像压缩到一个列中会减少其视觉重量并破坏我的构图平衡。 让图像填充两个标准列也会破坏这种微妙的平衡。
拆分最后一列，然后将其宽度的一半添加到另一列，为我的图像创造了完美的空间，并获得了更令人愉悦的整体结果。
我可能会使用一个瘦列来告知设计元素的宽度。 这个 Mini Cooper 标志与我的细柱子的宽度相匹配，它的大小与我的其他构图感觉平衡。
有时，内容无法舒适地放入单个列中，但通过结合标准列和窄列的宽度，我为运行文本创建了更多空间和更好的度量。 我可以在布局中的任何位置放置一个瘦列，无论我需要我的内容。
一个空的瘦列添加了空白，允许眼睛在设计中漫游。 通过在两个标准柱之间放置一根细柱所产生的不对称性也使结构化布局感觉更加动态和充满活力。
另一个空的瘦列在这个设计中刻下了一个宽阔的排水沟，并将我的运行文本限制在一个列中，这样它的高度就反映了图像的垂直格式。 我还可以使用瘦列将印刷元素变成令人兴奋的设计元素。
使用细列进行开发
像这样的设计使用当今的 CSS 实现起来非常简单。 我只需要四个结构元素； 一个标志、标题、图形，以及一篇包含我正在运行的文本的文章：
<body> <img src="logo.svg" alt="Mini Cooper"> <header>…</header> <figure>…</figure> <article>…</article> </body>我通过在我的第一个媒体查询中将 CSS Grid 应用于 body 元素，开始设计中等尺寸的屏幕。 在这种尺寸下，我不需要细列，因此我正在开发一个对称的三列网格，该网格均匀扩展以填充视口宽度：
@media screen and (min-width : 48em) { body { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 2vw; } }我使用行号将项目放入我的网格列和行中。 我使用子字符串匹配属性选择器将我的徽标放入瘦的第一列和第一行。 这以源值中任意位置带有“logo”的图像为目标：
[src*="logo"] { grid-column: 1; grid-row: 1; }接下来，我将标题元素（包含我的标题和第一段）放入第二行。 使用从 1 到 -1 的行号将此标题分布在所有列中：
header { grid-column: 1 / -1; grid-row: 2; } 带display:grid; 应用后，网格容器的所有直接后代都将成为网格项，我可以使用区域、行号或名称来放置它们。
此设计包括一个带有大型迷你图像的图形元素，以及有关原始 Cooper 模型设计的说明文字。 这个数字很关键，因为它描述了 img 和 figcaption 之间的关系。 然而，虽然这个数字使我的标记更有意义，但我失去了使用 CSS Grid 放置 img 和 figcaption 的能力，因为这两者都不是我定义网格的 body 的直接后代。
幸运的是，有一个 CSS 属性——如果使用得当——可以克服这个问题。 我不需要为图形设置样式，我只需要设置其 img 和 figcaption 的样式。 通过应用display:contents; 就我而言，我有效地将其从 DOM 中删除以用于样式设置，因此它的后代取而代之：
figure { display: contents; }值得注意的是，尽管 display 有效地将我的图形从 DOM 中删除以用于样式设置，但任何继承的属性（包括字体大小和样式）仍然被继承：
figure img { grid-column: 2/-1; grid-row: 4; } figcaption { grid-column: 1; grid-row: 4; align-self: end; }我使用多列布局（我最喜欢的 CSS 属性之一）将我的文章和文本设置在三列中：
article { grid-column: 1 / -1; grid-row: 3; column-count: 3; column-gap: 2vw; }是时候实现一个设计，其中包括一个用于大屏幕的瘦列。 我使用媒体查询来隔离这些新样式，然后创建一个五列网格，该网格以 1fr 宽的瘦列开始：
@media screen and (min-width : 64em) { body { grid-template-columns: 1fr repeat(4, 2fr); } } 
然后我添加值以重新定位标题、img 和 figcaption 以及文章，记住重置列数以匹配其新宽度：
header { grid-column: 3/-1; grid-row: 1; } figure img { grid-column: 4 / -1; grid-row: 2; } figcaption { grid-column: 2; grid-row: 2; align-self: start; } article { grid-column: 3; grid-row: 2; column-count: 1; }仅使用 CSS 从根本上改变设计的外观，而不改变 HTML 的结构让我微笑，即使在将近 20 年之后。 当我改变构图以在不改变网格的情况下创建一个截然不同的布局时，我也会微笑。 对于这种替代设计，我的目标是更有条理的外观。
为了提高我运行文本的可读性，我分为三列。 然后，为了将此内容块与其他文本元素分开，我将瘦列放在前两个标准列之间。 无需更改我的 HTML 的结构。 我所需要的只是对样式表中的网格值进行细微更改。 这一次，我的 1fr 宽窄列值介于两个标准列宽之间：
@media screen and (min-width : 64em) { body { grid-template-columns: 2fr 1fr 2fr 2fr 2fr; } }我将标题放在第二行，将文章放在正下方的一行中：
header { grid-column: 3 / -1; grid-row: 2; } article { grid-column: 3 / -1; grid-row: 3; column-count: 3; column-gap: 2vw; } 因为 img 和 figcaption 都不是我定义网格的 body 元素的直接后代，所以要放置它们，我需要display:contents; 再次属性：
figure { display: contents; } figure img { grid-column: 3/5; grid-row: 1; } figcaption { grid-column: 5/-1; grid-row: 1; align-self: start; }根据您使用它们的方式，在您的设计中引入细列可以使内容更具可读性或将静态布局转换为动态和充满活力的布局。
细列只是从印刷中学习技术并使用它来改进网络设计的一个例子。 我很想尝试瘦柱子，但我没有失望。
在您的设计中添加一个瘦列通常是一个受启发的决定。 它为您提供了额外的灵活性，并且可以将原本静态的布局转变为充满活力的布局。
设计模块化网格
Avaunt 杂志包含大量鼓舞人心的布局，但我想特别关注两页。 此传播包含设计中的“冷战设计”对象，可应用于各种内容类型。
乍一看，模块化网格可能看起来很复杂，但它们很容易使用。 令我惊讶的是，很少有网页设计师使用它们。 我想改变它。
当您深思熟虑地使用模块化网格时，它们可以使您的设计充满活力。 它们非常适合为大量不同内容带来秩序，但也可以在内容很少时创建视觉上吸引人的布局。
对于这个设计——受 Avaunt 的启发——我的模块化网格基于六个对称的列和四个均匀间隔的行。 网格模块定义了我的内容的位置和大小。
我将几个模块绑定在一起，为左侧的单列中的大图像和运行文本创建空间区域。 边界线有助于强调页面的视觉结构。
这种布局一开始可能看起来很复杂，但实际上，实现起来非常简单。 我没有将我的标记基于视觉布局，而是从使用最合适的元素来描述我的内容开始。 过去，我会使用表格元素来实现模块化网格。 快进几年，部门取代了那些表格单元格。 令人难以置信的是，现在我只需要两个结构化的 HTML 元素来完成这个设计； 一篇文章后跟一个有序列表：
<body> <article>…</article> <ol>…</ol> </body>那篇文章包含标题、段落和表格信息的表格：
<article> <p class="standfirst">…</p> <h1>…</h1> <p>…</p> <table>…</table> </article>迷你蓝图的模块化网格是我设计中最复杂的视觉方面，但描述它的标记很简单。 蓝图按日期顺序排列，因此有序列表似乎是最合适的 HTML 元素：
<ol class="items"> <li> <h2>1969</h2> <img src="front.svg" alt=""> </li> <li> <h2>1969</h2> <img src="back.svg" alt=""> </li> </ol>我的 HTML 只有 2Kb，不到 60 行。 验证标记是一个好主意，因为早期花一点时间验证将在以后调试 CSS 时节省更多时间。 我还在浏览器中打开未设置样式的页面，因为我总是需要确保我的内容在没有样式表的情况下可以访问。
通过使用媒体查询隔离网格样式，我开始为中等大小的屏幕开发对称的三列布局：
@media screen and (min-width : 48em) { body { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 2vw; } } 文章和有序列表是 body 的唯一直接后代，但这是它们包含的内容，我想将其放置为网格项。 我使用display:contents; 使我能够将它们的内容放置在我的网格上的任何位置：
article, ol { display: contents; }我文章中的每个元素都应该跨越所有三列，因此我使用行号放置它们，从第一行 (1) 开始，到最后一行 (-1) 结束：
.standfirst, section, table { grid-column: 1 / -1; }我的有序列表中的项目均匀地放置在三列网格中。 但是，我的设计要求一些项目跨越两列，一个跨越两行。 nth-of-type 选择器是定位元素的完美工具，无需在我的标记中添加类。 我使用它们、span 关键字以及我希望项目跨越的列或行的数量：
li:nth-of-type(4), li:nth-of-type(5), li:nth-of-type(6), li:nth-of-type(14) { grid-column: span 2; } li:nth-of-type(6) { grid-row: span 2; } 
在浏览器中预览我的设计，我可以看到它没有按计划精确显示，因为一些网格模块是空的。 默认情况下，任何文档的正常流程都是从左到右、从上到下排列元素，就像西方语言一样。 当元素不适合网格中的可用空间时，CSS 网格放置算法会将空间留空并将元素放置在下一行。
我可以通过将 grid-auto-flow 属性和 dense 值应用到我的网格容器（在本例中为主体）来覆盖算法的默认值：
body { grid-auto-flow: dense; }行是默认的网格自动流值，但您也可以选择列、列密集和行密集。 明智地使用 grid-auto-flow，因为浏览器会使用文档流中可以适合该空间的下一个元素填充任何空模块。 此行为会更改视觉顺序，而不会更改可能对可访问性产生影响的源。
我的中等尺寸设计现在看起来就像我计划的那样，所以现在是时候让它适应更大的屏幕了。 我只需要对网格样式进行微小的更改，首先将我的文章变成一个侧边栏——它跨越了我的布局的整个高度——然后将特定的列表项放入更大的六列网格上的模块中：
@media screen and (min-width : 64em) { body { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; } article { grid-column: 1; grid-row: 1 / -1; } li:nth-of-type(4) { grid-column: 5 / span 2; } li:nth-of-type(5) { grid-column: 2 / span 2; } li:nth-of-type(6) { grid-column: 4 / span 2; grid-row: 2 / span 2; } li:nth-of-type(14) { grid-column: 5 / 7; } }跟踪网格放置线有时可能很困难，但幸运的是，CSS Grid 提供了不止一种方法来完成模块化网格设计。 使用 grid-template-areas 是一种替代方法，我觉得没有得到足够的关注。
使用 grid-template-areas，我首先通过给它一个名称来定义每个模块，然后将元素放入一个模块或几个称为空间区域的相邻模块中。 这个过程可能听起来很复杂，但它实际上是使用 CSS Grid 的最简单和最明显的方法之一。
我给每个元素一个网格区域值以将其放置在我的网格中，从徽标和文章开始：
[src*="logo"] { grid-area: logo; } article { grid-area: article; }接下来，我为每个列表项分配一个网格区域。 我选择了一个简单的 i+n 值，但可以选择任何值，包括单词甚至字母，如 a、b、c 或 d。
li:nth-of-type(1) { grid-area: i1; } … li:nth-of-type(14) { grid-area: i14; }我的网格有六个显式列和四个隐式行，其高度由其中内容的高度定义。 我使用 grid-template-areas 属性在 CSS 中绘制网格，其中每个句点 (.) 代表一个网格模块：
body { grid-template-columns: repeat(6, 1fr); grid-template-areas: ". . . . ". . . . ".. .. ".. .. . ." . ." . ." . ."; }然后，我使用之前定义的网格区域值将元素放置到该网格中。 如果我在多个相邻模块（跨列或跨行）中重复值，则该元素会扩展以创建一个空间区域。 留下句点 (.) 会创建一个空模块：
body { grid-template-columns: repeat(6, 1fr); grid-template-areas: "article logo i1 i2 i3 i3" "article i4 i4 i5 i5 "article i7 i8 i5 i5 "article i10 i11 i12 i14 i14"; }到目前为止，在每个示例中，我都使用媒体查询断点为不同的屏幕尺寸隔离了布局样式。 这种技术已经成为处理响应式网页设计复杂性的标准方法。 但是，有一种技术可以在不使用媒体查询的情况下开发响应式模块化网格。 这种技术利用了浏览器重排内容的能力。
在继续之前，值得记住的是我的设计只需要两个结构化的 HTML 元素； 一个内容的有序列表和一篇文章，当有足够的宽度可供两个元素并排站立时，我将其转换为侧边栏。 当宽度不足时，这些元素会按照内容的顺序垂直堆叠：
<body> <article>…</article> <ol>…</ol> </body>有序列表构成了我设计中最重要的部分，并且应该始终占据视口宽度的至少 60%。 为了确保发生这种情况，我使用了 min-width 声明：
ol { min-width: 60%; }虽然我通常建议将 CSS Grid 用于整体页面布局，将 Flexbox 用于灵活组件，但为了实现这种设计，我将这个建议放在了头上。
我将 body 元素制作成一个 flex-container，然后使用值为 1 的 flex-grow 属性确保我的文章增长到填充所有水平空间：
body { display: flex; } article { flex-grow: 1; }为了确保我的有序列表在两个元素并排放置时也占据所有可用空间，我给它一个高得离谱的 flex-grow 值 999：
article { flex-grow: 999; }使用 flex-basis 为文章提供了一个理想的起始宽度。 通过将 flex 容器的 wrapping 设置为 wrap，我确保在达到列表的最小宽度时两个元素堆叠在一起，并且没有足够的空间让它们并排站立：
body { flex-wrap: wrap; } article { flex-basis: 20rem; }我想创建一个灵活的模块化网格，它允许任意数量的模块。 与指定列数或行数不同，使用 repeat 允许浏览器根据需要创建尽可能多的模块。 自动填充填充所有可用空间，在必要时包装内容。 minmax 为每个模块提供最小和最大宽度，在本例中为 10rem 和 1fr：
ol { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); grid-column-gap: 2vw; }为了避免模块留空，我再次使用 grid-auto-flow 并设置为 dense。 浏览器的算法将重排我的内容以填充任何空模块：
ol { grid-auto-flow: dense; }就像以前一样，一些列表项跨越两列，一个跨越两行。 同样，我使用 nth-of-type 选择器来定位特定的列表项，然后使用带有 span 关键字的 grid-column 或 grid-row，后跟我想要跨越的列数或行数：
li:nth-of-type(4), li:nth-of-type(5), li:nth-of-type(14) { grid-column: span 2; } li:nth-of-type(6) { grid-column: span 2; grid-row: span 2; }这个简单的 CSS 创建了一个响应式设计，可以适应它的环境，而不需要多个媒体查询或单独的样式集。
通过使用包括 Grid 和 Flexbox 在内的现代 CSS，依靠浏览器重排内容的能力，以及对最小和最大尺寸的一些明智选择，这种方法最接近于实现真正响应式 Web 的目标。
阅读该系列的更多内容
- 启发设计决策：Avaunt 杂志
- 受启发的设计决策：紧迫事项
- 启发设计决策：欧内斯特杂志
- 启发设计决策：Alexey Brodovitch
- 启发设计决策：Bea Feitler
- 启发设计决策：Neville Brody
- 启发设计决策：Otto Storch
- 启发设计决策：Herb Lubalin
- 启发设计决策：Max Huber
- 启发设计决策：Giovanni Pintori
- 启发设计决策：Emmett McBain
- 启发设计决策：Bradbury Thompson
注意： Smashing 会员Smashing 会员可以访问设计精美的 Andy 的 Inspired Design Decisions 杂志的 PDF 以及本文中的完整代码示例。 您可以直接从 Andy 的网站购买本期的 PDF 和示例以及所有其他问题。