Otto Storch 啟發設計決策：當創意、文案、藝術和排版變得密不可分時

在過去的幾年裡，關於 HTML 和 CSS 的書籍幾乎從我工作室的書架上消失了。 我用藝術指導、社論和平面設計方面的書籍代替了它們。

最近，我正在瀏覽我的圖書館的一個新成員，並被一本雜誌的傳播所吸引。 我喜歡它的設計師將圖像和排版巧妙地結合起來，創造出充滿活力和動感的設計。 為了提醒自己再看看這個設計，我用我的 iPhone 拍了一張照片。

當我第一次看到這個引人注目的設計時，我還沒有聽說過創造它的設計師，出生於布魯克林的 Otto Storch。 儘管他是一位屢獲殊榮的平面設計師，但與他的許多同時代人不同，Storch 和他的作品在很大程度上被忽視了。

Storch 積累了大量的作品，令人難以置信的是，他的作品並未廣為人知，尤其是在網上。 沒有專門介紹 Storch 的 Wikipedia 頁面，也沒有人出版過一本關於他或他的作品的書。

我不僅受到 Otto Storch 的作品的影響，而且還受到他是一位多產的設計師和強烈的職業道德這一事實的影響。 他如何將他從 Alexey Brodovitch 那裡學到的東西與他的設計方法相結合，並製作出獨特而引人入勝的作品，這讓我深受啟發。 我希望我也能做到。

我從來沒有在設計會議上聽到過 Otto Storch 的名字，也沒有在一本關於網頁設計的書中看到過他的名字。 但是發現他讓我想讓更多的人了解這個人和他的工作。

他還讓我考慮了創造力在一個以業務為中心、快速發展、有實際和技術限制的行業中的作用。 出版業可能是一項殘酷的業務，而 Storch 從事的雜誌並不時尚。 他所做的不是藝術，但這並不意味著它沒有創意。 Storch 明白，對於有效的溝通，想法與圖片和文字一樣重要。 在他的整個職業生涯中，儘管受到媒介的限制，Storch 仍努力將想法納入其中。 這種方法在今天的網絡上與 1960 年代的雜誌中一樣重要。

靈感來自奧托斯托奇

Otto Storch 出生於 1913 年，在 1930 年代，他的職業生涯開始於被遺忘的前數碼攝影修飾藝術。 在 1950 年代，Storch 參加夜校並在 Alexey Brodovitch 的指導下學習設計，後者鼓勵他找到一份為雜誌工作的工作。

成功並非一蹴而就，在紐約的 Storch Better Living 雜誌聘請他擔任助理藝術總監之前，他做了七年的自由職業。 麥考爾出版了幾本書，包括《大眾力學》、《藍皮書》和《紅皮書》，以及《麥考爾雜誌》本身。 Storch 搬到了 McCall 的雜誌，在那裡他建立了從 Brodovitch 那裡學到的東西以及他設計廣告材料、專輯封面、書籍封面和雜誌的經驗。

Storch 不怕做出固執己見的選擇，這種自信使他的大部分作品都與眾不同。

“好的藝術指導不是來自一個不確定的人。 我有強烈的感情，願意在必要時輸掉與部門編輯的人氣競賽。 雜誌的視覺責任是我的。”

— 奧托·斯托奇

與 Bea Feitler 一樣，Storch 繼承了 Alexey Brodovitch 富有想像力的雜誌版面的傳統。 他明白雙頁跨頁是一種創造性的畫布，並將其作為他作品的一個特點，有時允許元素在頁面之間流動。 其他時候，Storch 將排水溝作為他設計中不可或缺的一部分。

Storch 經常使用大標題和圖片來統一他的傳播。 對於'On the cob or off'，它的玉米棒子在兩頁上都滴了黃油。 對於另一個特寫，“四十眨眼減少計劃”，他讓他的主題伸展開來，擱在一張正在運行的文本床上。 該副本在睡眠模型的重量下下沉。

“為什麼青少年婚姻破裂”中的黑白大圖不僅限於一頁。 相反，它佔據了四分之三的列，因此在設計中占主導地位。 這些同心圓中間的標題的重力將視線拉向它。

在“女孩很傻，男孩不可怕”中，斯托奇將兩個孩子的額頭放在額頭上，他們之間的排水溝。 他通過在相反的方向對齊他的文本來強調這種張力。

Storch 使圖像和文本的結合看起來很明顯且毫不費力，但他所取得的成果來自多年的經驗和實踐。

對於“讓時尚像油漆一樣新鮮”，Storch 緊湊的文字非常適合藝術家油漆箱的隔間。 麥考爾模式的這個傳播中的模型也適合放在盒子裡。 Storch 對比例的有趣和意想不到的使用為這個設計增加了另一個維度。

Storch 認為，在編輯設計中，強大的創意、文案、圖像和排版是不可或缺的。 我認為網頁設計也是如此，儘管它與打印有明顯差異。

Storch 明白排版可以做的不僅僅是呈現可讀的內容，而且他有將字體變成圖形對象的訣竅。 在從左到右語言的印刷設計中，左頁稱為“verso”，右頁稱為“recto”。 對於麥考爾的一本名為“The First to Know”的書的摘錄，Storch 鏡像了正反兩頁，然後將他的文字設置成一個圓圈，以反映圓形電話撥號盤。

有很多 Otto Storch，他的設計可以讓我們了解我們今天在網絡上所做的工作。 像 Alexey Brodovitch 一樣，Storch 掌握了他的畫布，而不是被它所限制。 他使用他的頁面以不僅易於理解而且更具吸引力的方式呈現內容。 這種吸引力很重要，因為它將人們與品牌、產品或故事聯繫起來，這對任何企業都很重要，無論採用何種媒介。

Otto Storch 可能是我鼓舞人心的設計師名單中的新成員，但他的設計已經影響了我。

塑造

W3C 的 CSS Shapes Module Level 1 自 2014 年以來一直是候選推薦推薦，所有當代桌面和移動瀏覽器都實現了其 shape-outside、shape-margin 和 shape-image-threshold 屬性。

 [src="shape.png"] { float: left; shape-outside: url(shape.png); shape-margin: 20px; }

網頁設計師沒有意識到 CSS Shapes 提供的創造潛力，並且不再有理由不使用它們。 也有可能 Web 開發人員仍然認為 Shapes 在瀏覽器中的支持很差。 儘管如此，所有當代瀏覽器現在都支持 Shapes——並且它們的屬性在舊版瀏覽器中優雅地退化——目前沒有理由避免使用它們。

使用形狀做更多事情

Otto Storch 的這個設計是最先引起我注意的設計之一。 我很欣賞它的兩列合理的複制的結構簡單，以及他的圖像的位置 - 用文字包裹在它們周圍以創造有機的形狀 - 使頁面充滿活力和運動。

我很少在網上看到具有這種能量的佈局，所以我的設計包括四輛色彩鮮豔的甲殼蟲，每輛大眾汽車都以一定角度放置，與兩排高大的文字形成對比。 我只需要兩個結構元素來實現這個受 Storch 啟發的設計； 主要元素和旁白。 這些元素中的每一個都包含運行文本的段落，加上兩個圖片元素，使我能夠將小圖像換成大圖像：

 <main> <picture>…</picture> <p>…</p> <p>…</p> <picture>…</picture> <p>…</p> <p>…</p> </main> <aside> <picture>…</picture> <p>…</p> <p>…</p> <picture>…</picture> <p>…</p> <p>…</p> </aside>

這些圖片元素適合小屏幕的邊緣，但我的運行副本段落的兩側仍然需要空白。 通過使用視口寬度單位，該空間始終與這些屏幕成比例：

 p { margin-right: 10vw; margin-left: 10vw; }

圖片元素是對 HTML 最有用的添加之一。 通過將媒體查詢與多個圖像相結合，瀏覽器可以選擇最適合佈局的圖像。

我最常使用 media 屬性和 min-width 值，雖然這種設計每個圖片元素只需要兩個圖像，但可以添加更多圖像，甚至組合媒體值來創建複雜的查詢：

 <picture> <source media="(min-width: 48em)"> <img src="small.png" alt="Volkswagen Beetle"> <</picture>

這些圖片中的圖像包含最適合小屏幕的我的甲殼蟲的裁剪版本。 我對所有圖像應用相同的寬度，然後添加一個形狀邊距，為接下來的 CSS 形狀做準備：

 picture { width: 160px; shape-margin: 20px; }

我發現圖像中的形狀比使用多邊形坐標更容易和更快地實現。 要從圖像中生成形狀，它需要一個完全或部分透明的 Alpha 通道。 當圖像部分透明時，shape-image-threshold 屬性可以控制形成形狀的區域。

我可以將同一圖像用於多個形狀。 儘管我的設計包括四輛不同顏色的汽車，但我只需要兩個形狀圖像：

 main picture:first-of-type, aside picture:first-of-type { float: left; shape-outside: url(shape-1-sm.png); } main picture:last-of-type, aside picture:last-of-type { float: right; shape-outside: url(shape-2-sm.png); }

隨著我的小屏幕設計完成，我介紹了用於中等尺寸屏幕的更大圖像以及匹配的形狀圖像。 我為圖像應用了新的寬度以適應更大的屏幕：

 @media (min-width: 48em) { main picture:first-of-type { width: 290px; shape-outside: url(shape-1-lg.png); } main picture:last-of-type { width: 230px; shape-outside: url(shape-2-lg.png); } aside picture:first-of-type { width: 230px; shape-outside: url(shape-3-lg.png); } aside picture:last-of-type { width: 290px; shape-outside: url(shape-4-lg.png); } }

雖然我的大屏幕設計乍一看可能看起來很複雜，但佈局再簡單不過了，這些主要和輔助元素形成了兩個對稱的列：

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

空白在這個大屏幕設計中扮演著重要的角色。 引入這些列後，我之前應用於段落的 10vw 水平邊距意味著空白佔此佈局的 40%。

正如 Otto Storch 使用他的頁面以吸引人且易於理解的方式呈現內容一樣，這種設計不僅講述了大眾甲殼蟲的故事，它的佈局也暗示了這款標誌性的小型汽車的駕駛樂趣。

讓文字看起來很美味

與 Brodovitch 一樣，Otto Storch 擅長將圖像與文本結合起來，他經常將副本雕刻成反映它們的形狀。 在這個設計中，Storch 創造了一個形狀像玻璃的美味文本塊。 我們很少在網上找到這樣的技巧，但它們可以幫助將讀者吸引到任何媒體的故事中。 受 Storch 的啟發，在我的下一個設計中，我雕刻了我的副本以反映大眾甲殼蟲的形狀。

我的設計包括三種替代佈局。 小屏幕的單列滾動內容，中屏幕的 2x2 網格，以及帶有水平滾動內容區域的大屏幕設計。

實現這三個設計需要四個結構元素，一個是我的內容的主要元素，加上三個顏色鮮豔的甲蟲的大圖像。 我用一個部分將這些元素括起來，然後添加一個代表柏油路的裝飾性展示分區：

 <section> <img src="shape-1.png" alt=""> <main> <h1>Get bitten by the bug</h1> </main> <img src="img-1.png" alt="Volkswagen Beetle"> <img src="img-2.png" alt="Volkswagen Beetle"> </section> <div> </div>

我不需要我的水平滾動面板出現在小屏幕上，所以只添加基礎樣式和形狀，將我的文本雕刻成甲殼蟲的形狀。 我首先將段落文本對齊到中心，並將其設置為大寫。 雖然我通常不會以這種方式將文本設置為整個文本塊，但實心大寫字母有助於強調甲殼蟲的形狀：

 p { text-align: center; text-transform: uppercase; }

CSS Shapes 規範的早期草案包括一個 shape-in​​side 屬性，它使我們能夠像 Storch 那樣在形狀內部包裹文本。 我很失望 W3C 將這個功能推遲到 CSS Shapes Module Level 2，它仍然是編輯草案。 您可以使用 shape-outside 來實現類似的效果，但我不能等到我們可以像在線 Otto Storch 一樣創造性地使用類型。

我在我的段落中添加了兩個形狀圖像。 文本將在這些圖像之間流動，以反映甲殼蟲的臉：

 <p> <img src="shape-2.png" alt=""> <img src="shape-3.png" alt=""> … </p>

我為這兩個圖像指定尺寸並將它們的不透明度設置為零，因為我不希望它們被查看器看到：

 p img { width: 100px; height: 125px; opacity: 0; }

這些圖像純粹是展示性的，不傳達任何內容或意義，因此為了從它們中刪除任何語義，我添加了角色屬性。 為了將它們從可訪問性樹中刪除，我還為這兩個圖像添加了 aria-hidden 屬性：

 <img src="shape-2.png" alt="" role="presentation" aria-hidden="true">

為了將我的文本雕刻成標誌性的大眾汽車的形狀，我使用相同的兩個圖像應用 shape-outside，將第一個圖像向左浮動，第二個向右浮動：

 p img:nth-of-type(1) { float: left; shape-outside: url(shape-l.png); } p img:nth-of-type(2) { float: right; shape-outside: url(shape-r.png); }

我也不希望我的演示部分對輔助技術可見，所以我也添加了相同的角色和 aria-hidden 屬性：

 <div role="presentation" aria-hidden="true"> </div>

由於我不需要使用小屏幕的人看到該分區，因此我將其 display 屬性設置為 none：

 div { display: none; }

我的小屏幕設計很時尚，就像甲殼蟲一樣，但中型屏幕上的額外空間讓我可以將雕刻的文字放在它所模仿的圖片旁邊。

在實施任何設計之前，我製作了一個故事板來決定如何隨著屏幕尺寸的變化重新排列元素。 對於中型屏幕，我將四個元素排列在一個 2x2 對稱的柱狀網格中。 通過使用 minmax 值來調整這些列的大小，我確保它們填滿了所有可用空間，但它們的寬度永遠不會縮小到 400 像素以下：

 @media (min-width: 48em) { section { display: grid; grid-template-columns: minmax(400px, 1fr) minmax(400px, 1fr); grid-gap: 2vw; align-items: end; } }

對於更大的屏幕，我還需要兩行。 它們的高度應該相等並佔據所有可用的垂直空間：

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

一個大的水平滾動內容區域在此設計中占主導地位，並且比視口更寬。 該面板包括四列——三列用於圖像，一列用於我的雕刻副本——每列的寬度至少為 400 像素。 通過將最大寬度設置為視口並僅允許在水平軸上滾動，可以隱藏視口之外的任何內容但仍可訪問：

 section { grid-template-columns: repeat(4, minmax(400px, 1fr)); max-width: 100vw; overflow-x: scroll; }

在我的內容下方是一個表示分區，它代表我的甲殼蟲形狀車輪下的道路。 該元素在較小的屏幕尺寸上是不可見的，因此為了使其可見，我將顯示屬性從無更改為阻止，然後添加淺灰色背景色。 我之前在 body 元素上設置的網格屬性定義了這個分割的高度：

 div { display: block; background-color: #a73448; } }

Webkit 的 Dave Hyatt 早在 2008 年就最初提出了 CSS 反射，但到目前為止，它們還沒有在其他瀏覽器渲染引擎中實現。 目前只有 Google Chrome 支持 CSS 反射。

正如您可能想像的那樣，反射會創建元素的副本。 反射可以出現在上方、下方或左側或右側。 就像在物理世界中一樣，當一個元素以某種方式發生變化時，它的反射就會隨之而來。

CSS 反射提供了三個實驗性屬性。 它的方向和一個可選的偏移量，用於控制元素與其反射之間的距離。 您還可以對任何反射應用蒙版以更改其外觀，例如，通過使用漸變蒙版逐漸淡化反射的強度。

CSS 反射在瀏覽器中的支持有限，但它們仍然可以為已實現它們的瀏覽器的設計添加額外的維度。 我只想在瀏覽器支持它們並且屏幕足夠大以完全使用它們時添加反射。

為了達到我正在尋找的結果，我使用嵌套媒體和功能查詢，它們首先測試視口的最小寬度，然後是瀏覽器是否支持-webkit-box-reflect:below 。 我添加反射並將我的表示分區的顏色從紅色更改為灰色：

 @media (min-width: 64em) { @supports (-webkit-box-reflect:below) { section { -webkit-box-reflect: below 0 linear-gradient(transparent, white); } div { background-color: #f0f0f1; } } }

鏡像對稱

McCall's Patterns 這種醒目的黑色和紅色展開是 Storch 最獨特的設計之一。 它的佈局以及 Storch 如何在其兩個頁面上使用相同的顏色具有令人放心的對稱性。 我立即被他的設計所吸引，並希望達到類似的效果。

我需要實現這個設計的 HTML 再簡單不過了。 只有兩個結構元素，一個主元素和一個副元素，它們都包含圖片元素：

 <main> <picture>…</picture> <p>…</p> </main> <aside> <picture>…</picture> <p>…</p> </aside>

這些主要元素和輔助元素也各自包含一段文本。 為了實現此設計所需的旋轉，我將每一行文本包裝在一個 span 元素中。 我希望這些表現元素有更好、更語義化的替代方案，但如果沒有額外的樣式，它們不會破壞我段落的可讀性：

 <p> <span>Although </span> <span>designed in the </span> <span>1930s, due to </span> <span>World War II, </span> <span>civilian Beetles </span> <span>only began to </span> <span>be produced in </span> <span>significant </span> <span>numbers by the </span> <span>end of the 1940s.</span> </p>

我首先將深灰色背景色應用於 body 元素：

 body { background-color: #262626; }

然後，最小高度可確保我的主要元素和側面元素始終填充視口高度。 為了使它們的內容水平和垂直居中，我應用了 flexbox 屬性並將它們的方向設置為列：

 main, aside { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; padding: 2rem 0; box-sizing: border-box; color: #fff; }

我希望我的主要甲殼蟲的顏色與後續面板匹配，因此我將其背景顏色設置為相同的紅色：

 aside { background-color: #a73448; }

雖然大寫文本的長段落通常比混合大小寫的段落更難閱讀，但大寫適用於較短的段落，並且可以營造出時尚的外觀：

 p { margin: 0 2rem; text-align: center; text-transform: uppercase; }

在我的小屏幕設計中，主元素和副元素垂直堆疊，它們的高度與視口的高度相匹配。 對於中型屏幕，我重置了這些元素的最小高度以填充一半的視口：

 @media (min-width: 48em) { main, aside { min-height: 50vh; padding: 2rem; }

中型屏幕上的額外空間允許我通過更改書寫模式來設置段落樣式，因此它們的文本垂直顯示並從右到左閱讀：

 p { max-height: 12em; margin: 0; text-align: left; writing-mode: vertical-rl; }

更改這些 span 元素的顯示屬性以阻止將我的段落拆分為多行。 然後， line-height 增加了線條之間的空間，這為我的旋轉留出了空間：

 p span { display: block; line-height: 2; }

近二十年來，包括旋轉、縮放和平移在內的變換一直是 CSS 的一部分。 使用變換涉及添加一個像旋轉這樣的變換函數，然後在括號中添加一個值。

達到我想要的效果； 我將文本的前六行逆時針旋轉十五度。 最後六行旋轉了相同的量，但順時針方向。 所有剩餘的行保持不變：

 p span:nth-child(-n+6) { transform: rotate(-15deg); } p span:nth-child(n+12) { transform: rotate(15deg); }

將來，您將能夠獨立於變換屬性使用諸如旋轉之類的函數，但在我寫這篇文章時，只有 Firefox 實現了單獨的變換。

為了給旋轉的文本騰出空間，我在兩行中添加了邊距：

 p span:nth-child(6) { margin-left: 1em; } p span:nth-child(12) { margin-right: 1em; } }

隨著大屏幕上的可用空間，這種設計變得更加引人注目。 對於他們，我將網格值應用於 body 元素以創建兩個對稱的等高列：

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

我對延伸到整個視口高度的主要元素和側面元素應用了一個對稱的三列網格：

 main, aside { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 0; padding: 2rem; min-height: 100vh; }

我將主圖分佈在第二列和第三列，將副圖分佈在第一列和第二列：

 main picture { grid-column: 2 / -1; grid-row: 1; padding: 0 5vw; } aside picture { grid-column: 1 / 3; padding: 0 5vw; }

我將段落放入剩餘的列中，並通過為所有元素提供相同的行號，無論源順序如何，它們都將保持在同一行：

 main p { grid-column: 1; grid-row: 1; } aside p { grid-column: 3; }

在我的這個版本的設計中，文本應該從上到下而不是從右到左，所以我將書寫模式重置為水平、上下，然後將文本向右對齊：

 main p, aside p { max-height: none; writing-mode: horizontal-tb; } main span { text-align: right; }

最後，我替換了文本行上的旋轉值和邊距，以更好地適應這種大屏幕設計：

 main p span:nth-child(-n+6) { transform: rotate(10deg); } main p span:nth-child(n+12) { transform: rotate(-10deg); } main p span:nth-child(6) { margin: 0 0 15px; } main p span:nth-child(12) { margin: 15px 0 0; } aside p span:nth-child(-n+6) { transform: rotate(-10deg); } aside p span:nth-child(n+12) { transform: rotate(10deg); } aside p span:nth-child(6) { margin: 0 0 15px; } aside p span:nth-child(12) { margin: 15px 0 0; } }

跨度列

對於他最令人難忘的許多設計，Otto Storch 允許大圖像和印刷元素分佈在兩頁上。 這種技術創造了驚人的傳播，包括他將黃油玉米棒放在兩列對齊文本的頂部。

我希望我的最終基於甲殼蟲的設計具有類似的驚人效果，並且要實現它，我只需要三個結構元素； 一個標題——包含一個 SVG 標誌、標題和我的黃色大眾汽車的圖片——然後是主要和輔助元素：

 <header> <svg>…</svg> <h1>Get bitten by the bug</h1> <figure> <picture>…</picture> </figure> </header> <main>…</main> <aside>…</aside>

正常流程加上一些基礎樣式是我實現這個設計的小屏幕版本所需要的。 首先，我添加一個深色背景並指定白色文本：

 body { padding: 2rem; background-color: #262626; color: #fff; }

要將標題放在頁面的中心，我應用邊距，使用基於文本的單位設置其最大寬度，然後將其大寫單詞與中心對齊：

 h1 { margin: 0 auto 1.5rem; max-width: 8rem; text-align: center; text-transform: uppercase; }

我沒有調整圖像大小以使其適合狹窄的視口，而是經常讓它們超出它並添加一個水平滾動面板。 這種技術是我最喜歡的小屏幕設計設備之一。

此圖包含比視口更寬的圖像，並包含汽車的完整輪廓，包括車輪。 通過添加overflow-x: scroll; 對於該圖，我使視口之外的部分圖片可訪問：

 figure { overflow-x: scroll; }

儘管中型屏幕繼承了許多基礎樣式，但當有更多可用空間時，我想通過使用基於視口的寬邊距創建一個窄文本列來強調設計中的垂直軸。 我還重置了圖形元素溢出以使其所有內容可見：

 @media (min-width: 48em) { figure { overflow-x: visible; } p { margin-right: 25vw; margin-left: 25vw; } }

我設計的最大版本是最複雜的。 它不僅將我的甲殼蟲的大圖片放在兩列運行文本的頂部，而且該文本環繞在它的輪子上。 我首先將較大屏幕的網格屬性應用於 body 元素以創建對稱的兩列網格：

 @media (min-width: 64em) { body { display: grid; grid-template-columns: 1fr 1fr; padding: 4rem; }

我的標題跨越了兩列，然後嵌套的網格值排列了我的甲殼蟲的大眾標誌、標題和圖像。 在這個嵌套網格中，兩個外部列佔據了所有剩餘的可用空間，而中心列會自動調整大小以適應其內容：

 header { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto 1fr; grid-row-gap: 4vh; }

我將徽標和標題放入此中心列：

 svg, h1 { grid-column: 2; }

然後，在段落之間添加邊距：

 p { margin-right: 1rem; margin-left: 1rem; }

此設計的圖片元素包括兩個圖像。 第一個是為中小屏幕配備了輪子，第二個是一輛缺少大屏幕輪子的汽車。 為了將輪子用螺栓固定到這個甲殼蟲上，我在主元素和輔助元素中都使用了:before pseudo-elements元素。 然後，我添加一個 shape-margin 以在它們和附近的運行文本之間添加空間：

 main:before, aside:before { display: block; shape-margin: 10px; }

使用生成的內容，我在主要元素之前添加後輪並將該輪浮動到右側。 然後 shape-outside 屬性將文本環繞在這個輪子上：

 main:before { content: url(shape-l.png); float: right; shape-outside: url(shape-l.png); }

我在 side 元素之前應用了類似的值，這次將輪子向左浮動：

 aside:before { content: url(shape-r.png); float: left; shape-outside: url(shape-r.png); } }

運行文本現在環繞在甲殼蟲的輪子上，這使我的設計在不犧牲可讀性或響應性的情況下更加引人注目。

結論

Otto Storch 創造了許多令人難忘的設計，但我很遺憾他和他的作品在很大程度上被遺忘了。 沒有專門介紹 Storch 的 Wikipedia 頁面，也沒有人出版過一本關於他或他的作品的書。 Storch 的設計可以為在網絡上工作的設計師提供很多東西，我希望更多的人會重新發現他。

他的工作還展示了我們可以在網上使用 Shapes 實現更多目標。 儘管現在得到了很好的支持，但這個 CSS 屬性幾乎和 Storch 自己一樣被忽視了。 形狀提供的不僅僅是簡單的文本換行，它們的全部潛力還有待發揮。 我希望這會改變，而且很快。

閱讀該系列的更多內容

• 啟發設計決策：Avaunt 雜誌
• 受啟發的設計決策：緊迫事項
• 啟發設計決策：歐內斯特雜誌
• 啟發設計決策：Alexey Brodovitch
• 啟發設計決策：Bea Feitler
• 啟發設計決策：Neville Brody
• 啟發設計決策：Herb Lubalin
• 啟發設計決策：Max Huber
• 啟發設計決策：Giovanni Pintori
• 啟發設計決策：Emmett McBain
• 啟發設計決策：Bradbury Thompson

注意： Smashing 會員Smashing 會員可以訪問設計精美的 Andy 的 Inspired Design Decisions 雜誌的 PDF 以及本文中的完整代碼示例。 您可以直接從 Andy 的網站購買本期的 PDF 和示例以及所有其他問題。