Вдохновляющие дизайнерские решения с Отто Сторхом: когда идея, копия, искусство и типографика стали неразделимы

За последние несколько лет книги по HTML и CSS почти исчезли с книжных полок в моей студии. Я заменил их книгами по художественному руководству, редакционному и графическому дизайну.

Недавно я просматривал новое дополнение к своей библиотеке и был очарован одним журнальным разворотом. Мне понравилось, как его дизайнер игриво объединил изображения и типографику, чтобы создать дизайн, полный энергии и движения. Чтобы напомнить себе еще раз взглянуть на этот дизайн, я сфотографировал его на свой iPhone.

Когда я впервые увидел этот поразительный дизайн, я не слышал о дизайнере, который его создал, об Отто Сторхе, уроженце Бруклина. Хотя он был отмеченным наградами графическим дизайнером, в отличие от многих его современников, Сторх и его работа в значительной степени игнорировались.

Сторч накопил огромное количество работ, и очень жаль, что его работа не так широко известна, особенно в Интернете. В Википедии нет страницы, посвященной Сторчу, и никто не опубликовал книгу о нем или его работах.

На меня повлияла не только работа Отто Сторха, но и тот факт, что он был плодовитым дизайнером с сильной трудовой этикой. Меня вдохновляет то, как он взял то, чему научился у Алексея Бродовича, совместил это со своим подходом к дизайну и сделал характерную и интересную работу. Надеюсь, я тоже смогу это сделать.

Я никогда не слышал, чтобы имя Отто Сторча упоминалось на конференциях по дизайну, и не видел, чтобы он упоминался в книге о веб-дизайне. Но открытие его заставило меня захотеть, чтобы больше людей узнали об этом человеке и его работе.

Он также заставил меня задуматься о роли творчества в индустрии, ориентированной на бизнес, быстро развивающейся и имеющей как практические, так и технические ограничения. Издательское дело может быть беспощадным бизнесом, и журналы, над которыми работал Сторч, не были посвящены высокой моде. То, что он делал, не было искусством, но это не означало, что оно не было творчеством. Сторч понимал, что идеи так же важны для эффективного общения, как изображения и письменное слово. На протяжении всей своей карьеры Сторх усердно работал над включением идей, несмотря на ограничения его среды. Это подход, столь же важный в Интернете сегодня, как и в журналах в 1960-х годах.

Вдохновленный Отто Сторхом

Отто Шторх родился в 1913 году, а в 1930-х годах он начал свою карьеру в забытом искусстве доцифровой ретуши фотографий. В 1950-х годах Сторх посещал вечерние курсы и изучал дизайн у Алексея Бродовича, который побудил его устроиться на работу в журнал.

Успех не пришел в одночасье, и потребовалось семь лет работы фрилансером, прежде чем журнал Storch Better Living в Нью-Йорке нанял его помощником арт-директора. МакКолл опубликовал несколько изданий, включая «Популярную механику», «Синюю книгу» и «Красную книгу», а также сам журнал «МакКолл». Сторч перешел в McCall's Magazine, где он опирался на то, чему научился у Бродовича, и на своем опыте разработки рекламных материалов, обложек альбомов, обложек книг и журналов.

Сторч не боялся делать самоуверенный выбор, и именно эта напористость отличает большую часть его работ.

«Хорошее художественное направление не исходит от неуверенного человека. Я способен на сильное чувство и был готов проиграть соревнование в популярности с редакторами отдела, когда это было необходимо. Визуальная ответственность за журнал лежала на мне».

— Отто Сторх

Как и Беа Фейтлер, Сторч продолжила наследие Алексея Бродовича в области творческих макетов журналов. Он понимал, что двухстраничный разворот — это творческое полотно, и сделал его особенностью своей работы, иногда позволяя элементам перемещаться между страницами. В других случаях Сторх делал желоб неотъемлемой частью своего дизайна.

Сторч часто использовал большие заголовки и изображения, чтобы объединить свои развороты. Для «В початках или без» это кукурузный початок, с которого капает масло на обе страницы. Для другой функции, «Плана сокращения сорока подмигиваний», он позволил своей модели растянуться, отдыхая на кровати бегущего текста. Этот экземпляр тонет под тяжестью спящей модели.

Большой черно-белый рисунок в книге «Почему подростковые браки распадаются» не ограничивается одной страницей. Вместо этого он занимает три из четырех колонок на развороте и поэтому доминирует в дизайне. Гравитация заголовка в центре этих концентрических кругов притягивает к нему взгляд.

В «Девочки глупы, а мальчики не ужасны» Сторч поместил двух детей лоб в лоб так, чтобы между ними была канава. Он подчеркнул это напряжение, выровняв свой текст в противоположных направлениях.

Сторч сделал так, чтобы объединение изображений и текста выглядело очевидным и легким, но результаты, которых он добился, появились благодаря многолетнему опыту и практике.

Для «Сделайте моду свежей, как краска» плотно упакованный текст Сторча идеально помещается в отделение в коробке с красками художника. Модели из этого разворота для McCall's Patterns также помещаются в коробку. Игривое и неожиданное использование масштаба Сторчем добавляет еще одно измерение этому дизайну.

Сторч считал, что в редакционном дизайне сильная идея, текст, изображения и типографика являются неотъемлемыми элементами. Я думаю, что то же самое верно и для веб-дизайна, несмотря на его очевидные отличия от печати.

Сторч понимал, что типографика может сделать гораздо больше, чем просто представлять читаемый контент, и у него была способность превращать шрифт в графические объекты. В полиграфическом дизайне для языков с письмом слева направо левая страница называется «оборотной», а правая — «лицевой». Для отрывка Макколла из книги под названием «Первые, кто узнал» Сторч отразил лицевую и оборотную стороны страниц, а затем поместил свой текст в круг, который отражает круглый телефонный диск.

Отто Сторча много, и его проекты могут научить нас работе, которую мы делаем в Интернете сегодня. Подобно Алексею Бродовичу, Шторх освоил свое полотно и не ограничивался им; он использовал свои страницы для представления контента таким образом, чтобы он был не только понятным, но и более привлекательным. Эта привлекательность важна, потому что она связывает людей с брендом, продуктом или историей, и это важно для любого бизнеса, независимо от среды.

Отто Шторх может быть новым дополнением к моему списку вдохновляющих дизайнеров, но его проекты уже влияют на меня.

Подтянуться

Модуль CSS Shapes уровня 1 W3C является рекомендацией кандидата в рекомендации с 2014 года, и все современные настольные и мобильные браузеры реализовали его свойства shape-outside, shape-margin и shape-image-threshold.

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

Веб-дизайнеры не знают о творческом потенциале, предлагаемом фигурами CSS, и о том, что больше нет причин не использовать их. Также возможно, что веб-разработчики все еще думают, что Shapes плохо поддерживаются браузерами. Тем не менее, поскольку все современные браузеры теперь поддерживают Shapes, а их свойства изящно ухудшаются в устаревших браузерах, в настоящее время нет причин избегать их использования.

Делайте больше с фигурами

Этот дизайн Отто Шторха был одним из первых, который привлек мое внимание. Я восхищался структурной простотой двух колонок текста по ширине и тем, как размещение его изображений — с текстом, обернутым вокруг них для создания органических форм — игриво наполняло страницу энергией и движением.

Я редко вижу макеты с такой энергией в Интернете, поэтому мой дизайн включает в себя четыре ярких «Жука», каждый из которых расположен под углом, чтобы контрастировать с двумя высокими столбцами текста. Мне нужно всего два структурных элемента, чтобы реализовать этот дизайн, вдохновленный Сторчем; основной элемент и побочный. Каждый из этих элементов содержит абзацы бегущего текста, а также два элемента изображения, которые позволяют мне заменять маленькие изображения большими:

 <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>

Изображения на этих картинках содержат обрезанные версии моих Жуков, которые лучше всего подходят для маленьких экранов. Я применяю одинаковую ширину ко всем своим изображениям, а затем добавляю shape-margin для подготовки к следующим CSS-формам:

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

Я считаю, что фигуры из изображений проще и быстрее реализовать, чем использовать координаты многоугольника. Чтобы разработать форму из изображения, ему нужен полностью или частично прозрачный альфа-канал. Когда изображения частично прозрачны, свойство 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% этого макета.

Подобно тому, как Отто Сторх использовал свои страницы для представления контента таким образом, чтобы сделать его привлекательным и понятным, этот дизайн не просто рассказывает историю Volkswagen Beetle, его макет намекает на то, как весело было водить этот культовый маленький автомобиль.

Сделайте так, чтобы текст выглядел аппетитно

Как и Бродович, Отто Шторх преуспевал в объединении изображений с текстом, и он часто вырезал копии в формах, которые отражали их. В этом дизайне Сторч создал восхитительный текстовый блок в форме стакана. Мы редко находим такие методы, используемые в Интернете, но они могут помочь вовлечь читателей в историю независимо от носителя. Вдохновленный Сторхом, для моего следующего дизайна я вылепил свою копию, чтобы отразить форму Volkswagen Beetle.

Мой дизайн включает в себя три альтернативных макета. Один столбец с прокручиваемым контентом для маленьких экранов, сетка 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-inside, которое позволяло нам оборачивать текст внутри фигур, как это делал Storch. Я разочарован тем, что W3C отложил эту функцию до уровня 2 модуля CSS Shapes, который все еще находится в стадии редактирования. Вы можете добиться подобных эффектов, используя shape-outside, но я, например, не могу дождаться, когда мы сможем использовать шрифт так же творчески, как Отто Шторх в Интернете.

Я добавляю два изображения формы в свой абзац. Текст будет течь между этими изображениями, чтобы отразить лицо жука:

 <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">

Чтобы вырезать мой текст в форме культового Volkswagen, я применяю 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); }

Я также не хочу, чтобы мой отдел презентаций был виден вспомогательным технологиям, поэтому я добавляю сюда те же атрибуты role и aria-hidden:

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

Поскольку мне не нужно, чтобы разделение было видно людям, использующим маленькие экраны, я установил для его свойства отображения значение none:

 div { display: none; }

Дизайн моего маленького экрана стильный, как у Beetle, но дополнительное пространство, доступное на экранах среднего размера, позволяет мне размещать мой скульптурный текст рядом с изображениями, которые он имитирует.

Перед реализацией любого дизайна я делаю раскадровку, чтобы решить, как переставлять элементы при изменении размера экрана. Для экранов среднего размера я располагаю четыре элемента в виде симметричной сетки столбцов 2x2. Используя минимальные значения для размеров этих столбцов, я гарантирую, что они заполняют все доступное пространство, но их ширина никогда не уменьшается ниже 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; }

Под моим контентом находится презентационное подразделение, которое представляет собой дорогу под колесами моих форм Beetle. Этот элемент невидим на экранах меньшего размера, поэтому, чтобы сделать его видимым, я изменяю свойство display с none на block, а затем добавляю светло-серый цвет фона. Свойства сетки, которые я ранее установил для элемента body, определяют высоту этого деления:

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

Дэйв Хайатт из Webkit первоначально предложил CSS Reflections еще в 2008 году, но до сих пор они не были реализованы в других механизмах рендеринга браузеров. В настоящее время отражения CSS поддерживаются только Google Chrome.

Как вы можете себе представить, отражения создают копию элемента. Отражение может появиться сверху, снизу, слева или справа. Как и в физическом мире, когда элемент каким-либо образом изменяется, следует его отражение.

Для отражений 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. В его макете есть обнадеживающая симметрия и то, как Сторч использовал одни и те же цвета на своих двух страницах. Меня сразу привлек его дизайн и хочется добиться подобного эффекта.

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; }

Я хочу, чтобы цвет моего основного Beetle совпадал с цветом последующей панели, поэтому я установил для его фона такой же красный цвет:

 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; }

Изменение свойства display этих элементов span на block разбивает мой абзац на несколько строк. Затем 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; } }

Развернуть столбцы

Для многих из своих самых запоминающихся дизайнов Отто Сторх позволил крупным изображениям и типографским элементам размещаться на двух страницах. Эта техника создавала потрясающие развороты, в том числе и этот, где он поместил маслянистый початок кукурузы поверх двух столбцов текста с выравниванием по ширине.

Я хочу получить такой же поразительный эффект для моего окончательного дизайна на основе Beetle, и для его реализации мне нужно всего три структурных элемента; заголовок, содержащий логотип 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; }

Мой заголовок охватывает оба столбца, а затем вложенные значения сетки упорядочивают логотип VW, заголовок и изображение моего Beetle. В этой вложенной сетке два внешних столбца занимают все оставшееся доступное пространство, а размер центрального столбца автоматически изменяется в соответствии с его содержимым:

 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 как внутри основных, так и боковых элементов. Затем я добавляю поле формы, чтобы добавить пространство между ними и текущим текстом рядом:

 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); }

Я применяю аналогичные значения перед элементом aside, на этот раз перемещая колесо влево:

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

Бегущий текст теперь обтекает колеса Beetle, что делает мой дизайн более привлекательным, не жертвуя читабельностью или отзывчивостью.

Заключение

Отто Шторх создал много запоминающихся дизайнов, но мне грустно, что он и его работы почти забыты. В Википедии нет страницы, посвященной Сторчу, и никто не опубликовал книгу о нем или его работах. Дизайны Сторча могут многое предложить дизайнерам, работающим в Интернете, и я надеюсь, что больше людей откроют для себя его заново.

Его работа также демонстрирует, насколько большего мы можем добиться в Интернете с помощью Shapes. Несмотря на то, что сейчас это свойство CSS хорошо поддерживается, его игнорируют почти так же, как и самого Сторча. Фигуры предлагают гораздо больше, чем просто обтекание текстом, и их полный потенциал еще предстоит реализовать. Я надеюсь, что это изменится, и скоро.

Читать дальше из серии

• Вдохновленные дизайнерские решения: журнал Avaunt
• Вдохновленные дизайнерские решения: актуальные вопросы
• Вдохновленные дизайнерские решения: Ernest Journal
• Вдохновенные дизайнерские решения: Алексей Бродович
• Вдохновленные дизайнерские решения: Беа Фейтлер
• Вдохновленные дизайнерские решения: Невилл Броуди
• Вдохновленные дизайнерские решения: Херб Любалин
• Вдохновляющие дизайнерские решения: Макс Хубер
• Вдохновленные дизайнерские решения: Джованни Пинтори
• Вдохновленные дизайнерские решения: Эммет МакБейн
• Вдохновляющие дизайнерские решения: Брэдбери Томпсон

NB: участники Smashing Участники Smashing имеют доступ к прекрасно оформленному PDF-файлу журнала Andy's Inspired Design Decisions и полным примерам кода из этой статьи. Вы можете купить PDF-файл этого выпуска и примеры, а также любой другой выпуск непосредственно на веб-сайте Энди.