Bradbury Thompson 啟發設計決策：平面設計藝術
已發表: 2022-03-10這個系列的想法——以及隨後的書——是由一次隨意的談話引發的，但寫作它對我和我為網絡所做的工作產生了深遠的影響。
我對頁面佈局的方法以及頁面及其內容適應不同屏幕尺寸的方式更加深思熟慮。 我對寫作如何幫助溝通以及如何改進我講述的關於客戶的業務、產品或服務的故事有了更深入的了解。
我發現瞭如何更好地創建從一頁到另一頁的節奏。 我了解到這種節奏如何產生更具吸引力的視覺設計和引人入勝的體驗，以及即使是最簡單的網格在想像中也可以變得多麼靈活。
我對包括 Alexey Brodovitch 和 Bea Feitler 在內的雜誌藝術總監將圖像和文字結合在一起的方式著迷。 隨著我對富有表現力和娛樂性的字體的熱情，我的排版知識得到了發展。 我不可能像 Herb Lubalin 那樣漂亮，或者像 Neville Brody 那樣具有挑戰性，但我更有信心去嘗試。
這個項目讓我有信心——正如 Ruth Ansel 所建議的那樣——“超越預期”，做出自信的選擇，並在感覺正確時相信自己的直覺。 我學會瞭如何將我經常叛逆的態度引導到傳統的設計思維中，為經常出現的日常設計問題開發新穎的解決方案。
我們在一個現在更多地由設計的學術、機械和技術方面主導的行業工作。 開發這個系列對我來說強化了，雖然這些活動很重要，正如喬瓦尼平托里所寫的那樣，我們“需要同等程度的邏輯和想像力”。
正如 Neville Brody 解釋的那樣，“一旦你打破了規則，一切皆有可能。” 非傳統思維不必以犧牲可用性為代價。 了解人們如何與網站互動或使用產品不應決定設計，而應提供一個平台，在此平台上開發引人入勝、有趣且最終更難忘的體驗。
了解不同時代、不同領域的設計師作品，不僅啟發了我自己的想法，也激發了我學習更多的熱情。 尋找新的靈感來源幾乎成了每天的痴迷，雖然我的工作室牆壁可能還沒有 Ruth Ansel 和 Bea Feitler 的那麼滿，但我的書櫃、咖啡桌和書桌幾乎都堆滿了我收藏的設計書籍。
很長一段時間以來，我一直有一種嘮叨的感覺，網絡可以比我們做的要多得多。 我在這個系列中介紹的每一位設計師都挑戰了人們的觀念，影響了他們的媒介方向，並最終激勵了包括我自己在內的其他人創造更好的作品。 我希望在一些小的方面，這個系列也能做到這一點。
靈感來自布拉德伯里湯普森
研究上世紀最有成就的藝術總監和平面設計師之一似乎很適合這個系列。
布拉德伯里湯普森 1911 年出生於堪薩斯州，雖然他可能不是最有名的，但毫無疑問他是最有影響力的人之一。 湯普森在家鄉托皮卡的沃什伯恩學院學習。 從一開始，他就受到印刷設計，尤其是雜誌的啟發，並利用這種影響設計了學院的年鑑。
從沃什伯恩畢業後，湯普森在當地的印刷公司 Capper Publications 工作了五年。 作為一名印刷廠初級學生的第一份工作並不光彩，但它讓湯普森對設計和印刷技術有了廣泛的了解，他將在他漫長的職業生涯中使用這些知識。
堪薩斯州在 1930 年代以其嚴重的沙塵暴而聞名，但並不是一個創意中心，因此在 1938 年，湯普森向東行駛了 1,200 英里，來到了紐約市。 令人難以置信的是，對於一個剛從堪薩斯州回來的年輕人來說，他的第一個項目就是設計 1939 年的世界博覽會目錄。
Thompson 為負責那屆世界博覽會的印刷公司 Rogers-Kellogg-Stillson 工作，並被分配到 Westvaco Inspirations for Printers 工作。 該系列宣傳手冊由 Westvaco Corporation 出版，以展示其印刷紙系列。 每期只有 16 頁，但給了湯姆森一個“難得的實驗機會，提供了一個樂於接受的設計師”。
Westvaco 自 1920 年代以來就出版了 Inspirations，並已在 35,000 家機構、博物館、印刷商、學校和大學中廣為流傳。
湯姆森沒有預算為該出版物委託原創藝術品或照片，但他沒有讓這限制他的想法，而是利用它作為一個創造性的機會。 靈感讓湯姆森可以自由地嘗試各種想法和技術，並探索創造性的概念。 通過從代理機構、雜誌甚至博物館借用印刷版和分離版，將其融入他的作品中，他成為了“我職業中最好的拾荒者之一”。
這些借用的元素包括歷史照片和插圖，湯姆森結合了當代排版和現代印刷色彩。 在 1953 年的 Inspirations 宣傳片 Victory 中，Thomson 結合了箭頭插圖並將它們整合到由純色製成的目標中。 他借鑒民間和原始藝術的元素，將其轉化為現代與傳統相融合的原創作品。 創作靈感激發了湯普森的創造力，他繼續設計了 60 多個版本。
二戰期間，湯普森設計了兩本戰時雜誌——勝利和美國——的最後幾期，由戰爭信息辦公室出版。 然後在 1945 年，他成為 Mademoiselle 雜誌的藝術總監，並在接下來的十五年裡一直擔任這個角色。
湯普森在靈感方面的折衷主義傾向在 Mademoiselle 繼續工作，現在有了預算，他委託嶄露頭角的藝術家安迪·沃霍爾、瓊·米羅、威廉·德·庫寧和我個人最喜歡的流行藝術家賈斯珀·約翰斯為它的小說部分。
Thomson 的雜誌工作並非以 Mademoiselle 開始或結束，在他的整個職業生涯中，他還為其他 30 多個雜誌工作，包括《商業周刊》、《哈佛商業評論》和《史密森尼》雜誌。
Bradbury Thompson 可能不是最著名的平面設計師之一，但他在業內廣受認可，獲得了所有三個主要設計獎項等等。 他的獎項包括美國國家藝術協會年度最佳導演獎（1950 年）和 AIGA 獎章（1975 年）。1977 年，湯普森入選藝術導演俱樂部名人堂，並在 1980 年代首次獲得弗雷德里克·W·古迪獎然後是Type Director's Club Medal。
從他最早在托皮卡工作的經歷開始，Thompson 是一位注重細節的設計師，他注重排版中最精細的細節以及圖像的精確裁剪和放置。 他巧妙地使用了通常簡單的原色調色板以及黑白歷史插圖和幾何形式，使他的作品既經典又現代。
類型是我一直感興趣的東西。 簡而言之，字體可以是工具、玩具、老師。 它可以提供一種謀生手段、一種放鬆的愛好、一種智力興奮劑——以及一種精神上的滿足。 我相信對字體的狂熱興趣必然包括對日常生活的熱情。
— 布拉德伯里湯普森
像建築一樣，排版是美與實用的結合，湯普森的設計經常將不尋常的排版安排與色彩繽紛的形狀結合起來。 對於 Rain, Rain, Rain（1958 年 Mademoiselle 雜誌的宣傳片），他將同一件穿著雨衣、拿著雨傘的人物複製為五個彩色剪影。
在 Futural（1962 年 Westvaco Inspirations for Printers 的擴展版）中，Thompson 使用背面的線條和正面的純色在頁面上反映了飛機的簡化形狀。 他經常套印他五顏六色的形狀，以增加他的設計的深度和興趣。
利用他在印刷技術方面的經驗，Thompson 的標誌性設計通常只使用四種印刷色。 在膠印中，印刷色由青色、品紅色、黃色和關鍵（黑色）油墨 (CMYK) 的百分比組成。 這種四色印刷工藝能夠產生多種顏色。
Thompson 最著名的設計經常以最純粹的形式使用這些顏色。 他經常將顏色分開並將它們打印在他的作品中的不同區域。 我們在設計屏幕時使用 RGB 模型，但是以 Thompson 分離組件 CMYK 顏色的方式分離這三種顏色可以為 Web 創建鼓舞人心的設計。
湯普森從 1956 年開始在耶魯大學藝術學院教授平面設計，直到 1995 年在康涅狄格州去世。
《紐約時報書評》稱，他的藝術自傳《平面設計的藝術》是一本“藝術與設計大膽地融合在一起”的書，總體上很好地體現了他的設計策略。 “平面設計的藝術”出版於 1988 年。雖然我想要收藏的原始精裝本現在非常昂貴，但重印的平裝本可以以更實際的價格獲得。
處理調色板
我開始實施第一個設計，首先考慮我的內容，然後是最合適的 HTML 元素來描述它。 對於這個受 Thompson 啟發的設計，我只需要幾個元素，一個標題、文章和旁邊，加上兩個數字：
<header> <svg>…</svg> <h1>…</h1> <svg>…</svg> </div> </header> <article> <main>…</main> </article> <figure>…</figure> <aside>…</aside> <figure>…</figure>正如我在本系列中所討論的，我的過程總是從應用基礎樣式開始，包括顏色和排版。 我添加了深藍色背景顏色和對比鮮明的白色襯線文本：
body { padding: 2rem 0; background-color: #1f455f; font-family: 'serif'; color: #fff; }我為斜體標題設置樣式，然後為標題級別和段落添加大小：
h1, h2 { font-style: italic; } h1 { font-size: 2.8rem; } h2 { font-size: 2.027rem; } p { font-size: .8rem; }最後，我用鮮豔的綠色為我的人物圖像附帶的標題著色，並將文本斜體以匹配我的標題樣式：
figcaption { font-size: .8rem; font-style: italic; text-align: center; color: #d2de4a; } 
RGB 中的 CMYK
要為屏幕生成 RGB（紅色、綠色和藍色）中的 CMYK 印刷色（青色、品紅色、黃色和鍵（黑色）），請使用其中兩種顏色的最大值。 如果結果對眼睛來說太硬，請添加黑色以創建色調並柔化效果。
即使在最小的屏幕上，也需要留出一些空間。 這允許眼睛在內容周圍流動。 邊距和填充通常是添加空白空間所需的全部：
#logo { margin: 0 auto 1rem; } #banner { margin: 1rem 1rem 1rem 0; } main, aside { margin: 0 1rem; } figure { margin: 2rem auto; }減少圖形元素的最大寬度為小屏幕設計增加了留白和視覺趣味：
#logo { max-width: 25vw; } figure { max-width: 50vw; } 
中型屏幕上可用的額外空間允許我在此設計中引入第一組佈局樣式。 通過將我的運行文本分成兩列，我有助於保持其度量的一致性。 將我的兩個圖形並排放置以保持它們與我的文本的相對比例。
我首先將網格屬性和一個不尋常的五列對稱網格應用於 body 元素。 然後，我添加一個數據 URI 背景圖像並將其放置在我的佈局的右側：
@media (min-width: 48em) { body { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2rem; background-image: url("data:image/svg+xml…"); background-position: 120% 50%; background-repeat: no-repeat; } }我需要將標題和文章的內容直接放在我的網格上，因此我將這些元素的顯示屬性更改為內容，這有效地刪除了它們以進行樣式設置：
header, article { display: contents; }然後，我使用行號將每個內容元素放入一組不同的網格列和行中。 首先，我將福特標誌放在一個列中。 我可以刪除我之前設置的最大寬度，因為它的大小現在取決於其列的寬度：
#logo { grid-column: 2; margin: 0; max-width: none; }橫幅包含 Transit van 個人資料，主標題佔據了我的五列中的前四列：
#banner, h1 { grid-column: 1 / 4; }通過將第一列留空，主元素和副元素中的內容從左側縮進。 通過設置它們的寬度以匹配我的橫幅，我為佈局添加了令人愉悅的不對稱性：
main, aside { grid-column: 2 / -1; }儘管我的兩個圖形在我的 HTML 中不是相鄰的元素，但 CSS Grid 使它們並排放置變得簡單。 我將它們放在同一行的不同列中，而無需更改我的 HTML：
figure:nth-of-type(1) { grid-column: 2 / 4; grid-row: 5; } figure:nth-of-type(2) { grid-column: 4 / -1; grid-row: 5; }在我的許多設計中，我使用縮進而不是段落間距來從運行文本中創建實體塊。 在多列中設置文本時，這種效果更加顯著：
p { margin-bottom: 0; } p + p { text-indent: 2ch; } main { column-width: 16em; }圖元素可以包括一個或多個標題和圖像。 字幕通常出現在他們描述的圖片下方，但沒有理由需要將字幕留在下方。 我也可以將它們放在圖像的上方或左側或右側。
當我在圖像的左側或右側放置標題時，我會立即賦予設計雜誌的外觀。 我使用 Flexbox，然後使用 flex-direction 屬性來移動它們：
figure { display: flex; }我的第一個圖形標題出現在左側，所以我將這個圖形的 flex-direction 從它的默認行反轉：
figure:nth-of-type(1) { flex-direction: row-reverse; }Flexbox 允許我垂直和水平排列元素。 要將我的標題放置在圖像的底部邊緣，我將它們的交叉軸對齊方式從默認拉伸更改為 flex-end：
figure { align-items: flex-end; }為了對這個中等大小的設計畫龍點睛，我將兩個標題對齊在相反的方向：
figure:nth-of-type(1) figcaption { text-align: right; } figure:nth-of-type(2) figcaption { text-align: left; } 
空白空間有助於在此佈局的每個階段引人注意。 大屏幕上的額外空間使我能夠開發出獨特的不對稱設計。
在一個頁面上使用複合網格（兩個或多個重疊或堆疊的網格）可以創建引人注目的構圖。 此設計的複合網格與四列和六列網格重疊，形成 2|1|1|2 的節奏模式。 我將該模式轉移到 fr 單位並將它們作為列應用到 body 元素：
@media (min-width: 64em) { body { grid-template-columns: 2fr 1fr 1fr 2fr 2fr 1fr 1fr 2fr; } }然後，在設置頁面的最小高度以填充視口之前，我使用像素、rem 單位和固有大小的組合添加四行：
body { grid-template-rows: 100px 14rem 14rem auto; min-height: 100vh; }為了完成主體樣式，我添加了兩個新的數據 URI 背景圖像並指定它們的大小，以便它們始終包含在視口中：
body { background-image: url("data:image/svg+xml…"), url("data:image/svg+xml…"); background-position: 0 50%, 100% 50%; background-size: contain; } 
這種不對稱的設計是高度結構化的，每個元素都精確地放置在我的網格上。 我使用行號來放置結構元素，以堆疊順序將重疊的標題提升到橫幅圖像上方：
#logo { grid-column: 2 / 4; grid-row: 1; } h1 { grid-column: 1 / 5; grid-row: 2 / 4; align-self: center; z-index: 2; } #banner { grid-column: 1 / 5; grid-row: 2 / 4; z-index: 1; }我的主要內容佔據了本設計右側的最後兩欄和表格和島：
main { grid-column: 7 / -1; grid-row: 2 / 4; column-width: auto; } aside { grid-column: 6 / -1; grid-row: 4 / 5; }我將這兩個數字放在這個新網格上：
figure:nth-of-type(1) { grid-column: 5 / 6; grid-row: 2 / 3; } figure:nth-of-type(2) { grid-column: 2 / 5; grid-row: 4 / 5; }然後，我調整它們的 flex 方向，將第一個圖形垂直設置，因此我的標題出現在其同級圖像上方：
figure:nth-of-type(1) { flex-direction: column-reverse; }我的第二個圖的內容是水平排列的，圖像和標題都位於基線上：
figure:nth-of-type(2) { flex-direction: row; align-items: flex-end; } 
我微調了兩個標題的對齊方式，第一個受 Thompson 啟發的設計就完成了：
figure:nth-of-type(1) figcaption { text-align: center; } figure:nth-of-type(2) figcaption { flex: 1; text-align: left; }色彩互補
儘管這種佈局看起來很複雜，但我的 HTML 中只需要三個結構元素：一個包含各種補色的 Transit vans 的標題，然後是兩個內容元素，一個主元素和一個副元素：
<header>…</header> <main>…</main> <aside>…</aside>一個色彩豐富的互補標題是這個設計的核心。 使用單個大圖像來實現這一點可能很誘人。 但是，我想為不同的屏幕尺寸開發各種排列方式，因此使用九個單獨的圖像可以讓我為小屏幕製作一個滾動面板，並將它們排列在一個網格中以用於中、大屏幕：
<header> <img src="header-1.svg" alt="Ford Transit"> <img src="header-2.svg" alt=""> <img src="header-3.svg" alt=""> … <img src="header-9.svg" alt=""> </header> 
主要元素和輔助元素都包括標題、分解的 Transit 部件 SVG 圖像，以及用於將我的內容排列到列中的分區：
<main> <h1>…</h1> <div>…</div> <div>…</div> <svg>…</svg> </main> <aside> <h2>…</h2> <div>…</div> <div>…</div> <svg>…</svg> </aside>我首先將深灰色背景顏色應用於正文元素，然後在標題和段落中添加樣式：
body { background-color: #262626; font-family: 'sans-serif'; color: #fff; } h1, h2 { font-size: 2.027rem; font-style: italic; text-transform: uppercase; } p { font-size: .8rem; } 
通常，正常流程加上一些基礎樣式就可以實現我的設計的小屏幕版本，但這個從一開始就包括佈局樣式。 我首先通過添加 flex 和 overflow 屬性將我的標題及其九個圖像轉換為水平滾動面板：
header { display: flex; overflow-x: scroll; margin: 0 2rem 2rem; } header img:not(:last-of-type) { margin-right: 1rem; }標題不是在小屏幕上獲得佈局的唯一元素，主要和側面元素也獲得網格：
main, aside { display: grid; margin: 0 2rem; }首先，我將兩列佈局應用於主要元素。 分解後的 Transit 部件 SVG 圖像適合右列，因此我將其寬度固定為 100 像素。 左列擴展以填充任何剩餘空間。
main { grid-template-columns: [content] 1fr [svg] 100px; }然後，我使用網格線放置主要元素項，其名稱反映了它們的內容：
h1 { grid-column: content; grid-row: 1; } main > div:nth-of-type(1) { grid-column: content; grid-row: 2; } main > div:nth-of-type(2) { grid-column: content; grid-row: 3; } main > svg { grid-column: svg; grid-row: 1 / 4; }side 元素也有兩列佈局，但這次窄列及其分解的 Transit 部分位於左側。 為了強調我的主要內容區域和輔助內容區域之間的區別，我在輔助內容的頂部添加了一個實線邊框：
aside { grid-template-columns: [svg] 100px [content] 1fr; padding-top: 1rem; border-top: 3px solid #b22f65; }我使用命名行將其內容放入我的網格中：
h2 { grid-column: 1 / -1; grid-row: 1; } aside > div:nth-of-type(1) { grid-column: content; grid-row: 2; } aside > div:nth-of-type(2) { grid-column: content; grid-row: 3; } aside > div:nth-of-type(3) { grid-column: svg; grid-row: 2 / 4; }我的內容中的水平滾動標題和網格展示了在小屏幕上使用多個單列佈局有時是如何有益的。 在中型屏幕的額外空間中，這些相同的元素可以以非常不同的方式排列。
在我的這個版本的設計中，一個由九個色彩互補的圖像組成的網格填充了標題。 我應用網格屬性和三個對稱的列：
@media (min-width: 48em) { header { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; overflow-x: visible; } } 
與此設計中的其他元素不同，無需將圖像放置到此網格中，因為瀏覽器的自動放置算法會自動排列它們。
默認情況下，瀏覽器將元素水平放置在行中。 但是，通過將 grid-auto-flow 值更改為 column，瀏覽器會在移動到下一列之前垂直填充每一列：
由於我的內容有更多可用空間，我將列數從兩列增加到四列：
main, aside { grid-template-columns: 1fr [svg] 1fr 1fr 1fr; gap: 2rem; }然後，我將主要元素中的內容對齊到末尾，因此它在我的佈局中心形成了一個實心塊：
main { align-items: end; }我的主要標題涵蓋所有四列。 雖然它首先出現在我的 HTML 中，但我可以通過將其添加到第二行來將其可視化地放置在正在運行的文本和圖像下方：
h1 { grid-column: 1 / -1; grid-row: 2; border-bottom: 3px solid #b22f65; }我將我的第一個內容塊放入左欄中：
main > div:nth-of-type(1) { grid-column: 1; grid-row: 1; }第二個塊跨越右側的兩列：
main > div:nth-of-type(2) { grid-column: 3 / span 2; grid-row: 1; }接下來，我使用行名將包含我的 SVG 圖像的最後一個分區放入第二列：
main > div:nth-of-type(3) { grid-column: svg; grid-row: 1; }為 side 元素實現列遵循類似的方法。 同樣，我使用行號更改標題的視覺位置：
h2 { grid-column: 3 / -1; grid-row: 2; } aside > div:nth-of-type(1) { grid-column: 1; grid-row: 1 / 3; } aside > div:nth-of-type(2) { grid-column: 3 / -1; grid-row: 1; } aside > div:nth-of-type(3) { grid-column: svg; grid-row: 1 / 3; } 
在雜誌設計中，一張整版的圖片佔了一半。 像這樣的大圖像在寬屏顯示器上同樣有效。 我將網格屬性應用於具有兩個對稱列的 body 元素，然後將左列命名為 verso，將右列命名為 recto：
@media (min-width: 64em) { body { display: grid; grid-template-columns: [verso] 1fr [recto] 1fr; gap: 2rem; } }這些術語起源於拉丁語，其中兩個相反的頁面稱為 folium rectum 和 folium versum。 我將標題放在 verso 列中，主要和側面元素堆疊在 recto 列中：
header { grid-column: verso; grid-row: 1 / 4; } main, aside { grid-column: recto; } 
最後，為了提高我的運行文本在非常寬的顯示器上的可讀性，我引入了多列佈局。 瀏覽器會自動生成 10em 寬的列來填充可用空間：
@media (min-width: 72em) { main > div:nth-of-type(2), aside > div:nth-of-type(2) { column-width: 10em; column-gap: 2rem; } }屏蔽可伸縮類型
作為一個喜歡排版設計創意方面的人——但也重視可訪問性和性能——SVG 已經成為我日常開發工具包的一部分，就像 CSS 和 HTML 一樣。
下一個受 Thompson 啟發的設計將 SVG 文本與 CSS 蒙版和形狀相結合，但只需要很少的 HTML，只需要一個標題和一個主要元素：
<header> <div> <svg>…</svg> </div> <header> <main> <svg>…</svg> </main>在開始開發引人注目的 SVG 之前，我添加了基礎樣式，使頁面具有深藍色背景色和對比鮮明的白色文本：
body { background-color: #1f455e; font-family: 'sans-serif'; color: #fff; } 
此標題包括一個可縮放的圖形，其中重複文本由 Transit van 輪廓形成。 SVG 包含自己的方法來裁剪圖像的一部分。 為了定義一個剪切路徑，我將一個 clipPath 元素添加到我的 SVG 中。 反過來，這包含定義我的剪切區域的路徑。 所以我可以稍後在我的 SVG 中引用這個 clipPath，我給它一個唯一的標識符：
<svg> <clipPath> <path>…</path> </clipPath> </svg>然後，我添加構成我的圖形文本的路徑坐標。 我給這組顏色鮮豔的路徑一個類屬性值，我可以用它來將它綁定到我的clipPath：
<svg> <clipPath>…</clipPath> <g class="transit"> <path>…</path> </g> </svg>無論是使用圖像元素將此 SVG 包含在我的 HTML 中，還是將 SVG 直接嵌入到我的標記中，我都使用 CSS clip-path 屬性使用它的 clipPath 來剪輯我的圖形文本：
<style type="text/css"><![CDATA[ .transit { -webkit-clip-path: url(#transit); clip-path: url(#transit); } ]]></style>使用 clipPath，僅顯示剪切路徑中的區域。 剪裁區域之外的任何內容都將保持不可見。
但是，還有另一種屏蔽元素的方法，它適用於所有類型的內容，而不僅僅是 SVG。 與剪輯路徑類似，CSS 蒙版使用黑白蒙版圖像隱藏元素的一部分。
header div { -webkit-mask-image: url("mask.svg"); mask-image: url("mask.svg"); }應用蒙版時，僅顯示與蒙版黑色部分重合的元素區域。 這些區域之外的一切都將消失。
mask-image 的屬性與 CSS 中的背景有許多相似之處。 就像背景圖像一樣，蒙版可以定位、重複和調整大小，甚至可以從背景漸變中生成。 由於我不需要重複蒙版圖像，因此我將其值設置為 no-repeat，就像使用任何背景圖像一樣：
header div { -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } 
我的 SVG 在 main 元素中的內容完全不同。 該圖形包含色彩鮮豔的 SVG 文本行，解釋了 Transit van 的血統書。 我將每一行包裝在一個 tspan 元素中，每個元素都有自己的 x 和 y 坐標，它們將文本緊密地打包成一個實心塊：
<svg> <text> <tspan x="0" y="86">BUILT AS A PASSENGER VAN, MINIBUS, </tspan> <tspan x="0" y="156">CUTAWAY VAN CHASSIS, AND A PICKUP </tspan> <tspan x="0" y="226">TRUCK. OVER 8,000,000 TRANSIT VANS </tspan> <tspan x="0" y="296">HAVE BEEN SOLD, MAKING IT THE THIRD </tspan> <tspan x="0" y="366">BEST-SELLING VAN OF ALL TIME.</tspan> </text> </svg>SVG 文本元素可以像任何 HTML 文本一樣設置樣式，所以為了強調這個塊的堅固性，我選擇了一個重量級的、濃縮的無襯線字體，然後通過將字母間距減小 -2px 來調整其跟踪；
text { font-family: 'sans-serif-condensed'; font-size: 83px; font-weight: 700; letter-spacing: -2px; }CSS 偽類選擇器對 SVG 中的元素樣式和 HTML 一樣有用。 我使用 nth-of-type 選擇器為 tspan 文本的每一行賦予其自己的顏色：
tspan:nth-of-type(1) { fill: #c43d56; } tspan:nth-of-type(2) { fill: #f2c867; } tspan:nth-of-type(3) { fill: #377dab; } tspan:nth-of-type(4) { fill: #fff; } tspan:nth-of-type(5) { fill: #c43d56; } 
這種版式設計的純色風格使頁眉元素變得時尚，但有時我可能需要在此頁面中添加更多內容。 對於這種設計的另一種選擇，我在標題中添加了一段解釋 Transit van 生產歷史的段落：
<header> <div> <svg>…</svg> </div> <p>…</p> </header>在我的基礎樣式中，我添加了字體大小並將段落設置為大寫以匹配我之前的 SVG 文本：
header p { font-size: .91rem; text-transform: uppercase; }然後，我為使用同樣支持自動斷字的瀏覽器的人證明段落文本的合理性：
@supports (-webkit-hyphens: auto) or (hyphens: auto) { header p { -webkit-hyphens: auto; hyphens: auto; text-align: justify; } }在中小型屏幕上，這個新的文本段落跟隨標題的 SVG，就像它在 HTML 中一樣。 但是，對於較大的屏幕，我希望此文本與蒙版圖形一起浮動。
我給標題圖形一個明確的基於視口的寬度，然後浮動它以使我能夠使用 CSS Shapes 將我的文本環繞在它周圍。 由於我希望此形狀與蒙版圖形匹配，因此我對 shape-outside URL 使用相同的蒙版圖像：
@media (min-width: 64em) { header div { float: left; width: 65vw; margin-bottom: 0; shape-outside: url(mask.svg); shape-margin: 20px; } }分裂對稱
對於本期最後一個受啟發的示例（實際上是整個系列），拆分對稱佈局意味著我只需要兩個結構元素。 到目前為止，這些標題和主要元素應該很熟悉。 我的標題包括經典的福特標誌、SVG 圖像和標題：
<header> <svg>…</svg> <img src="header.svg" alt="Ford Transit"> <h1>…</h1> </header>主要元素還包括一個可縮放的圖像，以及一個運行文本的單個段落：
<main> <p>…</p> <img src="main.svg" alt=""> </main>與往常一樣，我首先通過添加顏色和排版基礎樣式來啟動小屏幕。 這一次，淺灰色背景、深灰色文本和無襯線字體：
body { background-color: #ededef; font-family: 'sans-serif'; color: #262626; } h1 { text-align: center; text-transform: uppercase; }標題首先出現在我的 HTML 中，所以我也將首先設置它的樣式，給它一個深灰色背景和較淺的文本，這與我的正文樣式相反：
header { margin-bottom: 2rem; padding: 2rem; background-color: #262626; color: #ededef; } 
最後，對於小屏幕，我將徽標水平居中並將其最大寬度限制為視口的一半：
#logo { margin: 0 auto 2rem; max-width: 50vw; }這種設計在中型屏幕上提供了額外的空間，呈現出更多的湯普森風格外觀。 我需要在標題和主要元素中放置元素，因此我向兩者添加了網格屬性和四個對稱列：
@media (min-width: 48em) { header, main { display: grid; grid-template-columns: repeat(4, 1fr); } }然後，我在標題中添加了三個顯式行。 第一個和最後一個是 100px 高，而中間行擴展以填充所有剩餘空間：
header { grid-template-rows: 100px auto 100px; }現在是時候使用行號將這些標題元素放入我的列和行中了。 福特標誌首先出現並適合兩個中心柱。 標題是最後一個，位於底部，同時跨越整個寬度。 我給這兩個元素一個更高的 z-index 值，所以它們在堆疊順序中看起來最靠近查看器：
#logo { grid-column: 2 / 4; grid-row: 1; z-index: 2; } h1 { grid-column: 1 / -1; grid-row: 3; z-index: 2; }然後，我放置標題圖像，使其覆蓋每一列和所有行。 通過給它一個較低的 z-index 值，我確保它退回到堆疊順序的底部：
header img { grid-column: 1 / -1; grid-row: 1 / 4; z-index: 1; align-self: center; }有了標題圖像的樣式，我添加了一個選擇器，它將這些完全相同的樣式應用於我的主要元素中的圖像：
header img, main img { grid-column: 1 / -1; grid-row: 1 / 4; z-index: 1; align-self: center; }雖然垂直文本並不適合所有設計，但它可以將一小段文字變成強烈的視覺陳述。 我將段落的寫作模式更改為 vertical-rl 並使用基於視口的單位增加其前導：
main p { line-height: 3vw; white-space: pre-wrap; writing-mode: vertical-rl; }對於裝飾性的點睛之筆，我改變了它的顏色並應用了一個具有差異值的混合模式，這也增加了這個文本在圖形背景上出現的易讀性：
main p { color: #f4eBd5; mix-blend-mode: difference; } 
我將段落放在兩個中心列中，居中對齊，然後添加更高的 z-index 值以確保它出現在該元素堆疊順序的頂部：
main p { grid-column: 2 / 4; grid-row: 1 / 4; align-self: center; z-index: 2; } 
直到現在，這個主要內容都在文檔流中我的標題之後。 對於較大的屏幕，我希望這些元素並排放置，因此我將網格屬性和兩個對稱的列應用於主體：
@media (min-width: 64em) { body { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; } }保持靈感
當我開始製作這個系列時，我想教人們在網絡之外尋找靈感的重要性。 我的目的是證明，看看其他媒體的設計師所面臨的挑戰——以及他們如何解決這些挑戰——可以幫助我們製作更獨特、更具吸引力並最終成功的產品和網站。
當然，這個系列幾乎沒有觸及表面，你可以在比我在這裡描述的更多地方找到鼓舞人心的例子。 前往離您最近的藝術畫廊、書店、博物館或唱片店，您會發現自己被投入和靈感所包圍。
我希望這個系列能啟發你思考如何以不同的方式為 Web 設計。 來自其他媒體和歷史時期的設計示例與現代網絡相關嗎？ 當然，他們是。 我們可以在創造未來的同時吸取過去的教訓嗎？ 絕對地。 我們是否擁有為 Web 提供更多靈感設計的技術和工具？ 毫無疑問。
我很高興對這個系列的反應非常積極，但我知道我可以做的還有很多。 這個系列可能即將結束，但新書《Inspired Design for the 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 和示例以及所有其他問題。