Вдохновленные дизайнерские решения с Брэдбери Томпсоном: искусство графического дизайна

Идея этой серии — и книги, которая за ней последует, — возникла в результате случайного разговора, но ее написание оказало глубокое влияние на меня и на работу, которую я делаю для Интернета.

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

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

Я был очарован тем, как арт-директора журналов, включая Алексея Бродовича и Беа Фейтлер, объединяли изображения и текст. Мои знания типографики развивались вместе с моим энтузиазмом в отношении выразительного и развлекательного шрифта. Я вряд ли когда-нибудь напишу такой красивый шрифт, как Herb Lubalin, или такой сложный, как Neville Brody, но я увереннее экспериментировать.

Этот проект дал мне уверенность в том, что, как предложила Рут Ансел, «выйти за рамки ожидаемого», делать уверенный выбор и доверять своим инстинктам, когда что-то кажется правильным. Я научился направлять свое часто бунтарское отношение к традиционному дизайнерскому мышлению, чтобы разрабатывать новые решения часто повседневных дизайнерских проблем.

Мы работаем в отрасли, в которой сейчас преобладают академические, механические и технические аспекты дизайна. Работа над этой серией убедила меня в том, что, хотя эти действия имеют значение, как писал Джованни Пинтори, нам «в равной степени нужны логика и воображение».

Как объяснил Невилл Броуди: «Как только вы нарушили правила, возможно буквально все». Нестандартное мышление не обязательно должно идти в ущерб удобству использования. Изучение того, как люди взаимодействуют с веб-сайтом или используют продукт, не должно диктовать дизайн, а вместо этого должно предоставлять платформу для разработки привлекательных, развлекательных и, в конечном итоге, более запоминающихся впечатлений.

Знакомство с работами дизайнеров разных эпох и областей не только вдохновило меня на собственные идеи, но и дало мне желание узнать больше. Поиск новых источников вдохновения стал почти ежедневной навязчивой идеей, и хотя стены моей студии, возможно, еще не так заполнены, как у Рут Ансель и Беа Фейтлер, мои книжные шкафы, журнальные столики и письменный стол почти переполнены моей коллекцией книг по дизайну.

Долгое время меня мучило ощущение, что Интернет может гораздо больше, чем мы его делаем. Каждый из дизайнеров, которых я представил в этой серии, бросал вызов представлениям, влиял на направление своей среды и в конечном итоге вдохновлял других, включая меня, на создание более качественной работы. Я надеюсь, что в какой-то степени эта серия сможет сделать то же самое.

Вдохновленный Брэдбери Томпсон

Изучение одного из самых опытных арт-директоров и графических дизайнеров прошлого века кажется подходящим дополнением к этой серии.

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

После окончания Уошберна Томпсон пять лет проработал в Capper Publications, местной типографии. Эта первая работа младшим типографом не была бы гламурной, но она дала Томпсону обширные знания в области дизайна и методов печати, которые он будет использовать на протяжении всей своей долгой карьеры.

Канзас в 1930-х годах был известен своими сильными пыльными бурями, но не как творческий центр, поэтому в 1938 году Томпсон проехал 1200 миль на восток до Нью-Йорка. Невероятно, но для молодого человека, только что приехавшего из Канзаса, одним из первых проектов стал каталог Всемирной выставки 1939 года.

Томпсон работал в типографии Rogers-Kellogg-Stillson, ответственной за эту Всемирную выставку, и ему было поручено работать над Westvaco Inspirations for Printers. Эта серия рекламных буклетов была опубликована корпорацией Westvaco для демонстрации своей линии бумаги для печати. Каждый выпуск состоял всего из шестнадцати страниц, но давал Томсону «редкую возможность для экспериментов, предоставляемую восприимчивому дизайнеру».

Westvaco издавала «Вдохновение» с 1920-х годов и уже была широко распространена среди аудитории 35 000 агентств, музеев, типографий, школ и университетов.

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

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

Во время Второй мировой войны Томпсон разработал несколько последних выпусков двух журналов военного времени — Victory и USA, — которые публиковались Управлением военной информации. Затем в 1945 году он стал художественным руководителем журнала Mademoiselle и оставался на этой должности следующие пятнадцать лет.

Эклектичные тенденции, которые Томпсон развил в работе над Inspirations, продолжились в Mademoiselle, и теперь, имея бюджет для работы, он поручил начинающим художникам Энди Уорхолу, Жоану Миро, Виллему де Кунингу и моему личному любимцу поп-исполнителю Джасперу Джонсу проиллюстрировать для его художественная часть.

Работа Томсона в журналах не начиналась и не заканчивалась «Мадемуазель», и на протяжении всей своей карьеры он работал над более чем тридцатью журналами, включая Business Week, Harvard Business Review и журнал Smithsonian.

Брэдбери Томпсон, возможно, не входит в число самых известных графических дизайнеров, но он получил широкое признание в своей отрасли, получив все три основные награды в области дизайна и многое другое. Его награды включали премию Национального общества арт-директоров года (1950) и медаль AIGA (1975). В 1977 году Томпсон был введен в Зал славы Клуба арт-директоров, а в 1980-х годах он впервые получил премию Фредерика В. Гуди. а затем медаль Клуба типовых директоров.

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

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

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

В Futural — развороте для Westvaco Inspirations for Printers в 1962 году — Томпсон отразил упрощенные формы самолетов на страницах, используя линии на оборотной стороне и сплошные цвета на лицевой стороне. Он регулярно делал надпечатки на своих красочных формах, чтобы добавить глубины и интереса своим проектам.

Благодаря своему опыту в области технологий печати Томпсон часто использует в фирменных рисунках всего четыре триадных цвета. В офсетной печати рабочие цвета состоят из процентного содержания голубых, пурпурных, желтых и ключевых (черных) красок (CMYK). Этот процесс четырехцветной печати способен производить широкий спектр цветов.

В самых известных проектах Томпсона эти цвета часто используются в чистом виде. Он часто разделял цвета и печатал их в разных местах своих композиций. Мы используем модель RGB, когда разрабатываем дизайн для экранов, но разделение этих трех цветов таким же образом, как Thompson разделяет составные цвета CMYK, может создавать вдохновляющие дизайны для Интернета.

Томпсон преподавал графический дизайн в Школе искусств Йельского университета с 1956 года до своей смерти в Коннектикуте в 1995 году.

В New York Times Book Review говорится, что его художественная автобиография «Искусство графического дизайна» была книгой, в которой «искусство и дизайн великолепно и смело смешаны», что является хорошим представлением его стратегии дизайна в целом. «Искусство графического дизайна» было опубликовано в 1988 году. Хотя оригинальная копия в твердом переплете, которую я хотел бы для своей коллекции, сейчас непомерно дорогая, переизданные версии в мягкой обложке доступны по более реалистичным ценам.

Обработка цветовой палитры

Я начинаю реализовывать этот первый дизайн, сначала рассматривая свой контент, а затем наиболее подходящие HTML-элементы для его описания. Для этого дизайна, вдохновленного Томпсоном, мне нужно всего несколько элементов: заголовок, статья и отступ, а также два рисунка:

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

CMYK в RGB

Чтобы получить рабочие цвета CMYK — голубой, пурпурный, желтый и ключевой (черный) в RGB (красный, зеленый и синий) для экранов, используйте максимальные значения для двух из этих цветов. Если результат слишком резкий для глаз, добавьте черный, чтобы создать оттенки и смягчить эффект.

Даже на самых маленьких экранах некоторое пространство должно оставаться пустым. Это позволяет глазу обтекать контент. Поля и отступы — это часто все, что нужно для добавления пустого пространства:

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

Затем я помещаю каждый элемент контента в другой набор столбцов и строк сетки, используя номера строк. Во-первых, я помещаю логотип Ford в один столбец. Я могу удалить максимальную ширину, которую я установил ранее, поскольку ее размер теперь будет зависеть от ширины ее столбца:

 #logo { grid-column: 2; margin: 0; max-width: none; }

Баннер содержит профиль фургона Transit, а основной заголовок занимает первые четыре из пяти моих столбцов:

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

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

 figure:nth-of-type(1) { flex-direction: row-reverse; }

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

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

Затем я корректирую направление их изгиба, устанавливая первую фигуру вертикально, чтобы моя подпись появлялась над ее родственной картинкой:

 figure:nth-of-type(1) { flex-direction: column-reverse; }

Содержимое моего второго рисунка расположено горизонтально, и изображение, и подпись лежат на базовой линии:

 figure:nth-of-type(2) { flex-direction: row; align-items: flex-end; } 

Я точно настраиваю выравнивание обеих подписей, и этот первый дизайн, вдохновленный Томпсоном, готов:

 figure:nth-of-type(1) figcaption { text-align: center; } figure:nth-of-type(2) figcaption { flex: 1; text-align: left; }

Красочно дополняют друг друга

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

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

И основной, и дополнительный элементы включают в себя заголовок, SVG-изображение в разобранном виде, а также разделы для размещения моего контента в столбцах:

 <main> <h1>…</h1> <div>…</div> <div>…</div> <svg>…</svg> </main> <aside> <h2>…</h2> <div>…</div> <div>…</div> <svg>…</svg> </aside>

Я начинаю с применения темно-серого цвета фона к элементу body и добавляю стиль к заголовкам и абзацам:

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

Сначала я применяю двухколоночный макет к основному элементу. SVG-изображение в разобранном виде Transit Parts помещается в правую колонку, поэтому я фиксирую его ширину на уровне 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; }

Элемент aside также имеет двухколонную компоновку, но на этот раз узкая колонка и ее разнесенные части 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 на столбец, браузер заполняет каждый столбец по вертикали, прежде чем перейти к следующему:

Поскольку для моего контента доступно больше места, я увеличиваю количество столбцов с двух до четырех:

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

Реализация столбцов для элемента aside следует аналогичному методу. Опять же, я изменяю визуальное размещение моего заголовка, используя номера строк строк:

 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 с двумя симметричными столбцами, затем называю левый столбец оборотной стороной и правый столбец лицевой стороной:

 @media (min-width: 64em) { body { display: grid; grid-template-columns: [verso] 1fr [recto] 1fr; gap: 2rem; } }

Эти термины происходят из латыни, где две противоположные страницы называются folium rectum и folium versum. Я помещаю свой заголовок в оборотную колонку, а основные и боковые элементы складываются в лицевую колонку:

 header { grid-column: verso; grid-row: 1 / 4; } main, aside { grid-column: recto; } 

Наконец, чтобы улучшить читаемость бегущего текста на очень широких экранах, я ввожу макет с несколькими столбцами. Браузер автоматически создаст столбцы шириной 10 em, чтобы заполнить доступное пространство:

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

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

 <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. Подобно clip-path, маски CSS скрывают части элемента, используя черно-белое изображение маски.

 header div { -webkit-mask-image: url("mask.svg"); mask-image: url("mask.svg"); }

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

Свойства mask-image во многом схожи с фоном в CSS. Так же, как и фоновые изображения, маски можно позиционировать, повторять и изменять их размер, а также создавать их из фоновых градиентов. Поскольку мне не нужно, чтобы изображение маски повторялось, я установил для него значение «Без повтора», как и для любого фонового изображения:

 header div { -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } 

Содержимое моего SVG в основном элементе совершенно другое. Этот рисунок содержит яркие строки текста SVG, поясняющие происхождение фургона Transit. Я оборачиваю каждую строку внутри элемента 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-текст, поэтому, чтобы подчеркнуть целостность этого блока, я выбираю тяжелый сжатый шрифт без засечек, а затем настраиваю его отслеживание, уменьшая межбуквенный интервал на -2 пикселя;

 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:

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

 @media (min-width: 64em) { header div { float: left; width: 65vw; margin-bottom: 0; shape-outside: url(mask.svg); shape-margin: 20px; } }

Разделение симметрии

Для последнего вдохновляющего примера в этом выпуске — и, по сути, для всей серии — симметричная раскладка означает, что мне нужно всего два структурных элемента. К настоящему времени эти заголовок и основные элементы должны показаться вам очень знакомыми. Мой заголовок включает в себя классический логотип Ford, изображение 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); } }

Затем я добавляю в заголовок три явные строки. Первый и последний имеют высоту 100 пикселей, а средний ряд расширяется, чтобы заполнить все оставшееся пространство:

 header { grid-template-rows: 100px auto 100px; }

Теперь пришло время поместить эти элементы заголовка в мои столбцы и строки, используя номера строк. Логотип Ford идет первым и вписывается в две центральные колонки. Заголовок находится последним и располагается внизу, занимая всю ширину. Я даю обоим элементам более высокое значение 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; }

Хотя вертикальный текст подойдет не каждому дизайну, он может превратить короткий отрывок в сильное визуальное заявление. Я меняю режим написания абзаца на вертикальный-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; } }

Оставаться вдохновленным

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

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

Я надеюсь, что эта серия статей вдохновила вас на размышления о том, как по-другому создавать дизайн для Интернета. Имеют ли отношение к современному Интернету примеры дизайна из других медиа и исторических периодов? Конечно, они есть. Можем ли мы извлечь уроки из прошлого, изобретая будущее? Абсолютно. Есть ли у нас технологии и инструменты для создания более вдохновляющих дизайнов для Интернета? В этом нет никаких сомнений.

Я был рад, что отклики на эту серию были исключительно положительными, но я знаю, что могу сделать еще много чего. Возможно, эта серия подходит к концу, но работа над новой книгой Inspired Design for the Web уже началась. Эта книга начнется с того, на чем закончилось Art Direction for the Web, продемонстрирует больше примеров вдохновляющего дизайна и углубится в то, как мы можем извлечь уроки и применить их, чтобы сделать наши веб-сайты и продукты еще лучше.

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

1. Вдохновленные дизайнерские решения: журнал Avaunt
2. Вдохновленные дизайнерские решения: актуальные вопросы
3. Вдохновленные дизайнерские решения: Ernest Journal
4. Вдохновенные дизайнерские решения: Алексей Бродович
5. Вдохновленные дизайнерские решения: Беа Фейтлер
6. Вдохновленные дизайнерские решения: Невилл Броуди
7. Вдохновленные дизайнерские решения: Отто Шторх
8. Вдохновленные дизайнерские решения: Херб Любалин
9. Вдохновляющие дизайнерские решения: Макс Хубер
10. Вдохновленные дизайнерские решения: Джованни Пинтори
11. Вдохновленные дизайнерские решения: Эммет МакБейн
12. Вдохновляющие дизайнерские решения: Брэдбери Томпсон

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