Giovanni Pintori 启发设计决策：宣传成为一种艺术形式

除了一两个偶然的例外，我在过去的 22 年中一直在为无数客户设计。 其中一些项目持续了一年，有的持续了几个月，但大多数只持续了几个星期。

花几周或几个月的时间完全专注于设计产品界面或网站可能会令人兴奋。 它通常始于赢得工作的满足感。 获得新客户的信心和信任会让人上瘾。 在诱人的“了解您”阶段，您了解客户以及他们对您和您的工作的期望。 像我这样容易上瘾的人渴望这种强烈的感觉，但是——就像一些关系一样——最初的兴奋很快就会消失在一起工作的现实中。

这种创造性的滥交非常适合我经常短暂的注意力和不安的好奇心。 但是，有时我希望我能在一个组织呆得更久，更好地了解他们，并对他们的所作所为产生积极的影响。

我认识许多在内部工作的设计师。 虽然我从不羡慕他们的通勤时间或他们在工作地点附近的生活所花的钱，但我有一部分人羡慕他们能够留下来并以乔瓦尼·平托里 (Giovanni Pintori) 帮助 Olivetti 的方式塑造公司的长期创意方向。

“在我们这个时代，宣传已经成为一种艺术形式，越来越需要不辜负这个名字。 宣传是一种避免含糊不清的话语形式，有利于简洁、清晰和有说服力。 从事宣传的人（作家、画家、建筑师）需要同等程度的逻辑和想象力。”

— 乔瓦尼·平托里

意大利设计师 Giovanni Pintori 在商业产品制造商 Olivetti 工作了超过 31 年。 在此期间，他的风格发展成为公司独特的设计词汇。 随着年龄的增长，在一家公司工作超过几个月的吸引力变得越来越强。 在过去的 18 个月里，我大部分时间都在与一家瑞士网络安全公司合作，这家公司的总部离米兰不远，也是乔瓦尼平托里的家。

像 Olivetti 一样，这家公司重视各种形式的设计。 虽然我的首要任务是设计公司的产品，但我也有机会影响他们的品牌、营销和整体创意方向。

当工作吸引我时，我仍然会花时间在其他人的项目上，但我已经了解到长期的客户关系是多么有益。 我很高兴，并且比多年来更满意。 另外，随着年龄的增长，我没有精力像以前那样去追逐每一个有吸引力的项目。

灵感来自乔瓦尼平托里

Giovanni Pintori 于 1912 年出生于撒丁岛，成为 20 世纪最有影响力的欧洲平面设计师之一。 30 多年来，他以独特的风格为 Olivetti 设计语言而闻名。

Pintori 在意大利颇具影响力的 L'Istituto Superiore per le Industrie Artistiche（艺术工业高等学院）学习设计，在那里他被创意艺术所包围。 ISIA 是一所进步的学校，学生学习陶瓷、绘画、金属制品和木制品。

在 ISIA 学习期间，平托里遇到了 1930 年代领导 Olivetti 广告部门的广告总监兼公关人员 Renato Zveteremich。 从 HIAI 毕业后，Pintori 加入 Olivetti，在 Zveteremich 手下工作，并于 1950 年成为该公司的艺术总监。

Olivetti 制造商用机器，最著名的是其打字机系列。 当 Pintori 加入 Olivetti 时，该公司已经以其原创产品设计而闻名。 它的产品一眼就能认出来，在工业设计师 Marcello Nizzoli 的指导下，他们设计的每一个细节——从空格键的形状到外壳的颜色，都经过仔细考虑。

“如果艺术家被要求解释、表达和捍卫机器的功能纯洁性，这确实是机器进入人类精神的标志，形式和关系的问题仍然是直觉性的。”

— 雷纳托·兹维特雷米奇

但是 Olivetti 对设计的专注并没有在其产品上结束。 创造力是公司文化的重要组成部分，从工厂和办公室的建筑到用于推广其产品的广告和平面设计，这一点显而易见。

在 Olivetti 的 30 年职业生涯中，Pintori 设计了公司的广告、宣传册，甚至他们的年历。 平托里的审美风格大胆而自信。 他从最小的调色板中使用明亮的颜色，并将它们与形状相结合，使他的设计充满活力。

但平托里的作品不仅有趣，而且深思熟虑。 他对形状的选择并不抽象。 Shapes 建议使用产品的好处，而不是从字面上描述其功能。 Pintori 不仅展示了产品，他还通过他的设计将产品变为现实，建议如何使用它们以及它们可以做些什么来改善人们的生活和工作。

“我不试图代表机器说话。 相反，我试图通过对元素、操作和使用的图形展示，让它们为自己说话。”

平托里对 Olivetti 形象的定义远远超出了他在公司的时间，他在 1967 年离开后继续与他们合作项目。他在米兰建立了自己的工作室，在那里他担任自由设计师，然后退休并致力于绘画。

Giovanni Pintori 于 1999 年在米兰去世，有一本书是 Marta Sironi 的 Pintori，由 Moleskine 出版，其中记录了他惊人的职业生涯。

平托里的作品之所以能激发灵感，不仅是因为他色彩缤纷的造型大胆，还因为它们所代表的意义。 Pintori 明白，推广产品需要的不仅仅是列出其功能。 宣传应该讲述一个能引起客户共鸣的故事，这是我们都应该受到启发的一课。

创建调色板

我们选择的颜色应该像我们的布局或排版一样雄辩地讲述关于公司、产品或服务的故事。 我们的颜色选择可以吸引某人的注意力，影响他们对我们所做事情的看法，甚至激发情绪。 颜色在使产品或网站易于使用和直观方面起着至关重要的作用。 除了品牌颜色，网络调色板还可以帮助人们导航，让他们知道他们可以按什么以及他们去过哪里。

我喜欢让我的颜色保持简单，我的调色板很少包含超过三种色调； 主色、辅助色或辅助色，以及强调色。 为此，我添加了一小部分中性色作为背景、边框和文本。

为了增加我的设计深度——并给我更大的灵活性——我还介绍了我每种色调的色调和色调。 我对边框使用较深的阴影——例如——在按钮周围——和浅色调来添加高光。

由于操作系统暗模式变得更加普遍，我还巧妙地改变了调色板中颜色的亮度和饱和度，使它们在深色背景下显得更加鲜艳。

使用原色

实现我的第一个受 Pintori 启发的设计所需的 HTML 与设计本身一样有意义且简单。 我只需要四个结构元素； 一个包含标志性 Morris Traveller 个人资料的两个 SVG 的页眉、我的运行文本的主要元素、一个 Traveller 正面的 SVG，最后是一个包含 Morris Motors 公司徽标的页脚：

 <header> <svg>…</svg> <svg>…</svg> </header> <main> <h1>…</h1> <p>…</p> </main> <figure> <svg>…</svg> </figure> <footer> <svg>…</svg> </footer>

虽然外部 SVG 文件将被缓存并准备好呈现，但我现在尽可能将 SVG 嵌入到我的 HTML 中。 更少的外部文件意味着更少的 HTTP 请求，但嵌入的好处远远超出了性能。

浅色主题和深色模式之间的色彩饱和度和亮度的细微变化通常是必要的，以保持设计元素与对比背景颜色的对比。 当 SVG 嵌入 HTML 时，它的填充和描边可以使用 CSS 进行细微的更改。

我首先为我的设计的杰出深色版本应用颜色和排版基础样式。 其中包括 Moderna Sans，这是一种由 Luciano Vergara 和 Alfonso Garcia 设计的多功能无衬线字体，我选择它来唤起 Pintori 为 Olivetti 的作品风格：

 body { padding: 2rem; background-color: #262626; font-family: "moderna_sans-light"; color: #fff; } h1 { font-family: "moderna_sans-bold-cnd-it"; font-size: 2.8rem; font-weight: normal; line-height: 1; }

Flexbox 将我的标题转换为水平滚动面板，这是在小屏幕设计中保持视觉层次结构的最有效方法之一：

 header { display: flex; flex-wrap: nowrap; overflow-x: scroll; }

值为 1 的 flex-grow 属性确保所有图像扩展以填充任何可用空间，而 flex-basis 确保这些 flex 项目从最小 640px 开始；

 header svg { flex-grow: 1; flex-basis: 640px; } header svg:not(:last-of-type) { margin-right: 2rem; }

最后，我添加了大量的水平填充并将莫里斯标志与我的页脚中心对齐：

 footer { padding-right: 8rem; padding-left: 8rem; text-align: center; }

我的水平滚动面板为小屏幕增添了趣味，但中型屏幕上的额外空间让我可以展示更多典型的英国旅行者。

CSS Grid 提供了 Flexbox 所缺乏的元素的精确放置和堆叠，是中到大屏幕上此标题的完美选择。 我将显示属性的值从 flex 更改为 grid，然后添加三个对称的列和行。

两个外列的宽度固定为 270px，内列扩展以填充所有剩余空间。 我对三行使用了类似的技术，将外两行固定在 100px 的高度。 这会抵消两个图像的位置并增加此设计的深度：

 header { display: grid; grid-template-columns: 270px 1fr 270px; grid-template-rows: 100px 1fr 100px; }

使用伪类选择器和行号，我放置第一个 SVG，然后缩小它的大小以添加透视：

 header svg:first-of-type { grid-column: 2 / 4; grid-row: 1 / 2; transform: scale(.85); }

然后，我放置两个图形中的第二个。 我通过添加更高的 z-index 值在堆叠顺序中提升它，使其在视觉上更接近查看者：

 header svg:last-of-type { grid-column: 1 / 3; grid-row: 2 / 4; z-index: 2; }

当设计包含大量空白以帮助吸引眼球时，即使是看似平凡的均匀比例网格也可能导致原始布局。 对于这个中等大小的设计，我应用了一个对称的六列网格，其列和行间距值与屏幕的宽度和高度成正比：

 @media (min-width: 48em) { body { display: grid; grid-template-columns: repeat(6, 1fr); column-gap: 2vw; row-gap: 2vh; } }

我的标题元素填充了我的网格的整个宽度。 然后，我放置主要、图形和页脚元素，按比例添加更多空白以缩小图形和页脚的宽度：

 header { grid-column: 1 / -1; } main { grid-column: 2 / 6; } figure { grid-column: 3 / 5; } footer { grid-column: 3 / 5; padding-right: 4rem; padding-left: 4rem; }

这种设计随着大屏幕上的可用空间而变得更加突出。

对于他们，我将网格值应用于 body 元素以创建 6+4 复合网格的八列：

 @media (min-width: 64em) { body { grid-template-columns: 2fr 1fr 1fr 2fr 2fr 1fr 1fr 2fr; } }

将我的中型设计基于六列，然后在我的大屏幕复合中包含相同的网格，有助于在我的设计的所有尺寸中保持比例。 然后，我将四个结构元素重新定位到我的新网格上：

 header { grid-column: 1 / 8; } main { grid-column: 2 / 5; text-align: right; } figure { grid-column: 5 / 7; } footer { grid-column: 4; padding: 0; }

最后，为了在我的设计中心创建一个实心内容块，我将主要内容绑定到其现在相邻的图形，方法是将其文本重新对齐到右侧：

 main { text-align: right; } 

单色调色板

即使在从业 20 多年后，我仍然发现使用色彩是设计中最具挑战性的方面。 也许这就是为什么我经常倾向于单色配色方案，因为它们使实现视觉凝聚力看起来非常简单。

单色调色板通过在选定的基色中添加不同百分比的黑色、灰色或白色来包含阴影、色调和色调的变化。

• 阴影：使用黑色加深颜色
• Tints : 使用白色调亮颜色
• 色调：使用灰色去饱和颜色

当它们用于背景、边框和细节时，阴影和色调可以使设计感觉和谐。

使用阴影、色调和色调有助于淡化鲜艳的色彩，这可能会引起对设计方面的不必要关注。 在从一组现有的品牌颜色中开发更多样化的调色板时，它们特别有用。

我经常选择包含强调色的纯单色或部分单色调色板。 这种添加的颜色与基色形成对比，并赋予设计更大的深度。

限制调色板

多亏了 CSS 网格、背景图像渐变和伪元素，下一个受 Pintori 启发的设计从极少的 HTML 元素集合中获得了巨大的价值。 我只需要一个标题，一个段落，加上七个空白部分。 我给每个部门自己的身份。 这让我可以赋予他们自己独特的风格：

 <h1>…</h1> <p>…</p> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div>

此 HTML 将标题和段落放在七个面板之前，但仔细观察完成的小屏幕设计，您会看到此内容已重新排序以放置 Morris 徽标，然后是旅行者前端的图片在顶部.

虽然我经常将网格属性引入中大屏幕，但 CSS Grid 对于在小屏幕上重新排序内容也很有用。 对于这个设计，我将 body 元素的显示值更改为网格，然后在固有的、未指定的行之间引入基于视口高度的间隙：

 body { display: grid; row-gap: 2vh; }

然后，我使用行号对包含我的 Morris Motors 徽标和图像以及标题的面板重新排序：

 #panel-d { grid-row: 1; } #panel-e { grid-row: 2; } h1 { grid-row: 3; }

因为我的面板分区没有其他元素，它们的高度将折叠为零，只留下它们的边框。 为了确保有空间显示它们生成的背景和内容，我为所有面板指定了一个最小高度：

 [id*="panel"] { min-height: 380px; }

在我的小屏幕设计中首先出现的面板显示了 Morris Motors 徽标，我使用 CSS 生成的内容数据 URI 插入了该徽标。 如果您不熟悉这种方便的内容类型，数据 URI 是一个已编码为字符串的文件。 您可以在 CSS 或 HTML 中的任何位置使用数据 URI：

 <img src="data:image/png…"> <img src="data:image/svg+xml…">

 div { background-image: url("data:image/svg+xml…"); }

当浏览器找到数据 URI 时，它会解码内容并重建原始文件。 数据 URI 不仅限于编码图像，还经常用于对 PNG 格式的图像和 SVG 进行编码。 您会发现一些在线将图像转换为数据 URI 的工具。

首先，我更改此面板的最小高度以匹配徽标的高度，然后插入徽标：

 #panel-d { min-height: 90px; text-align: center; } #panel-d:before { content: url("data:image/svg+xml…"); display: block; width: 135px; height: 90px; margin: 0 auto; }

我使用类似的技术在我的段落后面放置背景图像。 我添加了重复、位置和大小属性，使背景变得灵活，并将其始终放置在段落的水平和垂直中心：

 p { background-image: url("data:image/svg+xml…"); } p { background-repeat: no-repeat; background-position: 50% 50%; background-size: 50% 50%; } 

我的每个面板都有自己独特的图形设计。 我可以将图像放入这七个面板中，但这至少需要七个额外的 HTTP 请求。 因此，我使用数据 URI 和 CSS 渐变的多个背景图像的各种组合来实现我需要的结果。

第一个面板包含在条纹蓝色、白色和黑色背景上的 Morris 轮毂盖图形。 轮毂盖背景图像来自数据 URI：

 #panel-a { background-image: url("data:image/svg+xml…"); }

然后，我使用线性渐变添加第二个条纹背景图像：

 #panel-a { background-image: url("data:image/svg+xml…"), linear-gradient( to bottom, #34749F, #34749F 65px, #fff 65px, #fff 80px, #262626 80px); }

我指定了两组逗号分隔的重复、位置和大小值，请记住将它们与我的背景图像保持相同的顺序：

 #panel-a { background-repeat: no-repeat, repeat-x; background-position: 50% 100%, 0 0; background-size: 75% 75%, auto auto; }

下一个面板包括两个 SVG 图像，然后是更复杂的黑色、黄色和白色条纹。 通过在渐变中的相同位置放置不同颜色的色标，我创建了一个条纹背景，颜色之间有硬线：

 #panel-b { background-image: url("data:image/svg+xml…"), url("data:image/svg+xml…"), linear-gradient( to bottom, #B5964D, #B5964D 125px, #262626 125px, #262626 140px, #fff 140px, #fff 155px, #262626 155px); } #panel-b { background-repeat: no-repeat, no-repeat, repeat-x; background-position: 50% 45px, 50% 190px, 0 0; background-size: 90%, 90%, auto; }

我使用这些相同技术的不同组合开发了我的每个面板，使其加载速度快且灵活。 在网上很难找到基于模块化网格的设计，但它是这种受 Pintori 启发的大屏幕设计的完美选择。 这个模块化网格由三列和三行组成。

我将网格属性添加到 body 元素，然后指定我的列宽以填充所有可用空间。 为了确保始终有足够的高度来显示每个面板的内容，我使用了 Grid 的 minmax 值，将最小高度设置为 300px，将最大值设置为 1fr：

 @media (min-width: 64em) { body { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: repeat(3, minmax(300px, 1fr)); gap: 1rem; min-height: 100vh; } }

此设计中的元素不重叠，因此我使用 grid-template-areas 来简化它们。 这个设计有九个网格区域，我给每个区域一个字母名称，a-h。 由于字母 d 用于两个相邻区域，因此使用该字母放置的项目将占据两个区域：

 body { grid-template-areas: "abc" "dde" "fgh"; }

在这个大屏幕实现中，CSS Grid minmax 值控制我的行的高度，使我之前应用的 min-height 变得多余：

 [id*="panel"] { min-height: none; }

我使用区域名称放置面板，这允许我更改它们在我的布局中出现的位置，而不会改变它们在我的 HTML 中的位置：

 #panel-a { grid-area: a; } #panel-b { grid-area: b; } #panel-c { grid-area: c; } #panel-d { grid-area: d; } #panel-e { grid-area: e; } #panel-f { grid-area: f; } #panel-g { grid-area: g; } p { grid-area: h; }

虽然我的面板设计在不同的屏幕尺寸上保持一致，但有一个面板的内容和背景会随着更大的屏幕而变化。 这个面板包含熟悉的莫里斯标志和似乎是主要标题的内容，“风格……以一种大的方式。”

为了开发这个面板，我首先在顶部添加了一个深实线边框，然后是一个数据 URI 背景图像：

 #panel-d { border-top: 15px solid #262626; background-image: url("data:image/svg+xml…"); }

然后，我添加了第二个渐变背景图像，它创建了黑色面板和两个垂直的黄色条纹：

 #panel-d { background-image: url("data:image/svg+xml…"), linear-gradient( to right, #fff, #fff 280px, #B5964D 280px, #B5964D 320px, #fff 320px, #fff 335px, #262626 335px, #262626 calc(100% - 40px), #F2C867 calc(100% - 40px), #F2C867 100%); }

在我之前的过程中，我使用了一个 :before 伪元素将莫里斯标志添加到这个设计中。 对于大屏幕，我将该徽标重新定位到面板的左下角：

 #panel-d position: relative; } #panel-d:before { position: absolute; bottom: 0; left: 0; margin: 0; }

我的大标题直接来自 HTML 正文，并且不属于此面板，因此很难在灵活的屏幕尺寸之间定位。 为了在不影响可访问性的情况下精确地重现我的设计，我首先使用一种可访问的方法为使用屏幕阅读器的人隐藏这个标题：

 h1 { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }

然后，我使用生成的内容和 :after 伪元素恢复标题的文本。 我将它放在面板的右下角，并复制它的粗体、简洁、斜体样式：

 #panel-d:after { content: "Style… in a BIG way"; position: absolute; bottom: 0; right: 0; font-family: "moderna_sans-bold-cnd-it"; font-size: 2.8rem; line-height: 1; text-align: right; } 

补充调色板

相互补充的颜色位于色轮的相对两侧。 但是，虽然很容易理解它们的数学关系，但使用互补色可能具有挑战性。

相邻的互补色组合看起来很刺眼，而不是相互补充，会让人感觉不和谐。 为防止它们发生冲突，请使用互补色的阴影、色调或色调，这也将有助于扩展可用颜色的调色板。

或者，使用分离的互补色，而不是相反的颜色，调色板在互补色的两侧包括两种颜色。

补色

在我的下一个受 Pintori 启发的设计中，几个色彩互补的 Morris Traveler 蓝图重叠在一起。 开发此设计所需的 HTML 与这辆车的描述一样少。 横幅分区包括莫里斯徽标的 SVG，主要元素包含标题和运行文本。

但是，这种设计在多种屏幕尺寸上的灵活性来自于使用两个图片元素，每个图片元素包含三个图像。 我在页眉中包含一个图片元素，然后在页脚中包含另一个：

 <div class="banner"> <svg>…</svg> </div> <header> <picture> <source media="(min-width: 72em)"> <source media="(min-width: 48em)"> <img> </picture> </header> <main> <h1><b>…</b></h1> <p>…</p> </main> <footer> <picture> <source media="(min-width: 72em)"> <source media="(min-width: 48em)"> <img> </picture> </footer>

我的每一个开发项目都从添加现在熟悉的基础样式开始，这次添加了灰白色背景色和几乎黑色的无衬线文本：

 body { background-color: #f3f2f2; font-family: "moderna_sans-light"; color: #262626; }

我将横幅分区的内容与中心对齐，然后将徽标的最大宽度设置为 150 像素：

 .banner { text-align: center; } .banner svg { max-width: 150px; }

此设计的主要标题采用 Moderna Sans 的粗体、简洁、斜体风格：

 h1 { font-family: "moderna_sans-bold-cnd-it"; font-size: 2.027rem; font-weight: normal; line-height: 1.2; }

此标题的一部分包含在 span 元素中，这使我能够更改其颜色以匹配此设计的其他方面，包括 Morris Motors 徽标中心的公牛标志：

 h1 span { color: #df4561; } #logo .emblem { fill: #df4561; }

在小屏幕上，页眉和页脚都包含一个 Traveler 图像。 当有空间并排放置两个旅行者时，浏览器会更改两个图片元素中的图像。

对于中型屏幕，我利用额外的可用空间并引入了一个四列对称网格：

 @media (min-width: 48em) { body { display: grid; grid-template-columns: repeat(4, 1fr); } }

我将横幅部分放在两个中心列中，将我的徽标居中，然后垂直移动以适合我的两个 Travellers 的保险杠：

 .banner { grid-column: 2 / 4; text-align: center; transform: translateY(2vh); }

我的页眉和页脚都从一个边缘到另一个边缘跨越网格，而将主要内容放在两个中心列中可以创建一个舒适的度量：

 header, footer { grid-column: 1 / -1; } main { grid-column: 2 / 4; }

这种设计布局的最显着变化可以在更大的屏幕尺寸上看到。 尽管有它们的名称，但您不需要在布局的顶部和底部放置页眉或页脚元素。 它们可以放置在设计中的任何位置，包括左侧或右侧。

为了更精确地控制布局，我将网格中的列数从四增加到八，然后引入两行。 第一行的高度固定为 160px，而第二行的高度将由内容决定：

 @media (min-width: 72em) { body { grid-template-columns: repeat(8, 1fr); grid-template-rows: 160px auto; column-gap: 2vw; } }

我将横幅划分重新定位在三列中，并将下面的主要元素设置为匹配：

 .banner, main { grid-column: 3 / 5; }

然后，我将页脚放入前三列，将页眉放入最后四列，以从对称网格创建不对称布局：

 header { grid-column: 5 / -1; } footer { grid-column: 1 / 4; }

页眉和页脚都从上到下填充了我的网格的高度：

 header, footer { grid-row: 1 / 3; }

而横幅划分占据第一行：

 .banner { grid-row: 1; }

主要元素整齐地放在它下面：

 main { grid-row: 2 / 3; z-index: 2; }

自从 Apple 将深色模式引入 iOS 和 macOS 以来，实施浅色主题和深色设计已成为日常产品和网站设计的一部分。 开发暗/亮模式很容易，现在有一个广泛支持的媒体查询来满足这个用户的偏好。 有三个值可供选择：

• no-preference : 有人没有表达偏好
• light : 有人选择了浅色主题
• dark : 有人选择了深色主题

引入这种设计的暗模式版本只涉及在该媒体查询中添加对某些颜色值的更改。 例如，通过反转背景和前景文本颜色，并更改我的 SVG 徽标中的路径填充颜色：

 @media (prefers-color-scheme: dark) { body { background-color: #262626; color: #fff; } #logo .metal, #logo .emblem { fill: #fff; } }

决定暗模式颜色有时不仅仅是简单地反转它们，使白色背景变黑，黑色文本变白。 全黑背景上的纯白色文本使阅读长段文本令人眼花缭乱，因此请考虑使用灰白色来柔化这种对比：

 body { color: #f3f2f2; }

有时，即使是鲜艳的互补色在深色背景下也会显得不同。 值得庆幸的是，CSS 过滤器可以增加颜色的亮度、饱和度或两者兼而有之，无需为较暗的背景导出不同版本的文件：

 header img, footer img { filter: saturate(1.5) brightness(1.1); } 

提亮色彩

在我最终的受 Pintori 启发的设计中，彩色矩形漂浮在深灰色背景之上。 这种设计只需要三个结构元素； 一个包含莫里斯汽车标志的标题，一个包含莫里斯旅行者的不是一个，不是两个，而是三个轮廓图像的图形元素，以及包含我正在运行的文本的主要元素：

 <header> <svg>…</svg> </header> <figure> <img> <img> <img> </figure> <main> <h1>…</h1> <p>…</p> <p>…</p> </main>

在这个最小的 HTML 中，我添加了四个纯粹的 SVG 图像。 因为我不希望这些被辅助技术宣布，所以我为它们中的每一个添加了一个 ARIA 隐藏属性：

 <svg aria-hidden="true">…</svg> <svg aria-hidden="true">…</svg> <svg aria-hidden="true">…</svg> <svg aria-hidden="true">…</svg>

首先，我为背景色和前景色指定基础样式，然后使用数据 URI 将这些相同的呈现 SVG 图像应用到背景：

 body { background-color: #262626; } background-image: url("data:image/svg+xml…"), url("data:image/svg+xml…"), url("data:image/svg+xml…"), url("data:image/svg+xml…"); color: #f3f2f2; }

然后，我指定背景重复和位置值，将每个 SVG 放在中心，并将它们垂直堆叠在页面上。 最后，我设置了它们的尺寸：

 body { background-repeat: no-repeat; background-position: 50% 20px, 50% 240px, 50% 460px, 50% 680px; background-size: 200px 200px, 300px 200px, 200px 200px, 100px 100px; }

因此，我的标题中的徽标与其后面的 SVG 背景的大小相匹配，我限制了它的最大宽度，然后使用水平边距将其居中：

 header { max-width: 200px; margin: 0 auto; }

同样，水平滚动面板是展示我的三个轮廓旅行者图像的有用方式，因此我将其图形的显示值设置为 flex 并通过将其值设置为滚动来防止任何水平溢出：

 figure { display: flex; flex-wrap: nowrap; margin: 0; padding: 0; max-width: 100vw; overflow-x: scroll; }

然后，我指定一个 flex-basis 值和一个要匹配的高度：

 figure img { flex-grow: 1; flex-basis: 320px; height: 320px; }

我将我的四个彩色 SVG 应用为背景图像，所以我不希望它们出现在小屏幕上。 使用属性选择器来精确匹配样式的属性和值是一种理想的方式来定位元素，而无需求助于额外的类属性：

 [aria-hidden="true"] { display: none; }

这种设计只需要一个媒体查询断点来应用中大屏幕的布局样式。 我应用了八个等宽的列和八行，然后删除了我为小屏幕应用的背景图像：

 @media (min-width: 48em) { body { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, auto); background-image: none; }

然后，我将标题和主要元素放在网格中的行号之间：

 header { grid-column: 1; grid-row: 1; } main { grid-column: 5 / 8; grid-row: 5 / 7; }

我需要将图形的图像和分割放置到我的网格上，而不是图形本身，因此我将其显示属性更改为内容，这有效地将其从 DOM 中删除以进行样式设置：

 figure { display: contents; }

然后，我将每个 Traveler 图像放入一组不同的网格列和行中，这会改变它们的大小以及它们的位置：

 figure img:nth-of-type(1) { grid-column: 3 / 6; grid-row: 2 / 4; } figure img:nth-of-type(2) { grid-column: 5 / 8; grid-row: 2 / 5; } figure img:nth-of-type(3) { grid-column: 3 / 4; grid-row: 5 / 6; }

CSS 转换是微调网格约束内元素的大小和位置的理想工具。 它们对于为设计添加不寻常的触感也很有用。 我使用旋转、缩放和平移来微调这些图像：

 figure img:nth-of-type(1) { transform: rotate(-20deg) translateX(-12rem); } figure img:nth-of-type(2) { transform: scale(1.1); } figure img:nth-of-type(3) { transform: scale(1.25); }

现在，我通过设置较低的 z-index 值来显示彩色的、具有代表性的矩形并将它们推到我的内容后面。 在这些图像重叠的地方，混合模式为这个设计增加了更多的色彩：

 [aria-hidden="true"] { display: block; z-index: 0; mix-blend-mode: multiply; }

在这最后一步中，我将这些形状放在我的网格上，使用旋转为这个已经色彩缤纷的设计添加更多个性：

 .bg-1 { grid-column: 2 / 4; grid-row: 2 / 4; transform: rotate(-30deg); transform-origin: 75% 50%; } .bg-2 { grid-column: 4 / 8; grid-row: 2 / 5; } .bg-3 { grid-column: 3 / 5; grid-row: 4 / 6; } .bg-4 { grid-column: 4 / 5; grid-row: 6 / 7; transform: rotate(5deg); transform-origin: 0 0; } 

阅读该系列的更多内容

• 启发设计决策：Avaunt 杂志
• 受启发的设计决策：紧迫事项
• 启发设计决策：欧内斯特杂志
• 启发设计决策：Alexey Brodovitch
• 启发设计决策：Bea Feitler
• 启发设计决策：Neville Brody
• 启发设计决策：Otto Storch
• 启发设计决策：Herb Lubalin
• 启发设计决策：Max Huber
• 启发设计决策：Emmett McBain
• 启发设计决策：Bradbury Thompson

注意： Smashing 会员Smashing 会员可以访问设计精美的 Andy 的 Inspired Design Decisions 杂志的 PDF 以及本文中的完整代码示例。 您可以直接从 Andy 的网站购买本期的 PDF 和示例以及所有其他问题。