Иногда кажется, что пустой макет обязательно нужно чем-то заполнить: добавить фотографию, иконки, градиент, фигуры или декоративные элементы. Но сильный дизайн можно построить вообще без изображений. Для этого достаточно самого текста — если правильно работать с масштабом, ритмом, контрастом и свободным пространством.Текст в таком случае перестаёт быть просто информацией. Он становится полноценным графическим элементом.
Дизайн без картинок: только текст
Представим простой набор:
Летняя школа дизайна
Старт 15 июля
Если набрать эти две строки одним шрифтом, одинаковым размером и просто поставить друг под другом, информация будет понятной. Но визуально это будет больше похоже на объявление в документе, чем на дизайнерский макет.
Чтобы превратить текст в композицию, нужно не украшать его, а постепенно выстроить отношения между словами.
Шаг 1. Определите главное
Сначала решите, что человек должен заметить первым. В нашем примере это может быть фраза «Летняя школа». Именно она объясняет, что перед нами. Поэтому делаем её крупнее остальных строк. Уже здесь появляется иерархия: взгляд сначала цепляется за главное сообщение, а потом переходит к деталям.
Если одинаково выделить название, дату, описание и кнопку, все элементы начнут конкурировать между собой. Человеку придётся самому решать, что читать первым. Поэтому лучше сразу задать порядок: главное сообщение — самое заметное, дополнительная информация — спокойнее.
Шаг 2. Работайте с масштабом
Следующий инструмент — масштаб. Например, слово «дизайна» можно сделать ещё крупнее. Оно может занять половину макета, выйти за край, частично обрезаться или расположиться вертикально. Здесь важно понять одну вещь: крупное слово уже работает не только как текст. Оно становится формой.
Мы начинаем воспринимать буквы как большие графические массы. Они создают направление, баланс и визуальный вес. Можно даже построить весь макет вокруг одного слова. Например, огромное ДИЗАЙН занимает почти весь фон, а поверх него располагаются дата и небольшое описание.
Так текст начинает выполнять ту же функцию, которую обычно выполняет фотография или иллюстрация.
Шаг 3. Используйте контраст
Чтобы композиция не стала монотонной, нужны различия. Самый очевидный способ — изменить размер. Но контраст можно создавать и другими инструментами. Например, название сделать жирным, дату — обычным начертанием. Одно слово набрать прописными буквами, другое — строчными. Часть текста сделать плотной, а часть — более воздушной. Можно выделить одно ключевое слово цветом. Главное — не превращать контраст в набор случайных эффектов.
Если одна строка красная, вторая синяя, третья курсивная, четвёртая жирная, а пятая ещё и вертикальная, композиция снова развалится. Лучше выбрать один главный контраст. Например:
ЛЕТНЯЯ ШКОЛА — крупно и жирно.
дизайна — ещё крупнее, но другим цветом.
Старт 15 июля — мелко и спокойно.
Трёх уровней уже достаточно.
Шаг 4. Оставьте свободное пространство
Одна из самых частых ошибок — желание заполнить весь макет. Кажется, что если осталось пустое место, значит туда обязательно нужно что-нибудь поставить.
Но свободное пространство — это тоже элемент композиции. Если вокруг большого слова оставить воздух, оно становится заметнее. Если между заголовком и датой сделать достаточное расстояние, зритель сразу понимает, что это два разных информационных уровня. Попробуйте сравнить два варианта.
В первом заголовок, дата и дополнительный текст стоят почти вплотную. Во втором между крупным заголовком и остальной информацией появляется свободная зона. Второй вариант почти всегда выглядит увереннее и чище. Воздух помогает не только выделить главное, но и сделать макет визуально дороже. Он даёт элементам возможность «дышать».
Шаг 5. Создайте ритм
Теперь можно поработать с длиной строк и расположением слов. Например:
ЛЕТНЯЯ
школа
ДИЗАЙНА
Старт 15 июля
Здесь уже появляется ритм: крупная строка, маленькая, снова крупная, затем спокойная информационная строка.
Можно сделать иначе:
ЛЕТНЯЯ ШКОЛА
Д
И
З
А
Й
Н
А
Старт 15 июля
Вертикальное слово становится отдельным графическим элементом и задаёт направление всей композиции.
Или ещё один вариант:
ЛЕТНЯЯ
ШКОЛА
дизайна
15 / 07
Здесь ритм создаётся за счёт чередования крупных и мелких элементов.
Чем сильнее различаются размеры и длины строк, тем выразительнее может быть композиция. Главное — сохранить понятный порядок чтения.
Шаг 6. Работайте не только со словами, но и с буквами
Интересный приём — рассматривать не слово целиком, а отдельные буквы. Например, огромная буква «Д» может стать фоном для остальных элементов. Или часть слова можно обрезать краем макета так, чтобы зритель всё равно легко его узнавал.
Можно увеличивать межбуквенное расстояние, наоборот, делать буквы очень плотными, менять направление строки или использовать одну букву как графическую форму.
Но здесь важно сохранять читаемость. Если человек вынужден долго угадывать, что написано, дизайнерский приём начинает мешать содержанию. Хорошая типографическая композиция остаётся понятной даже тогда, когда буквы используются необычно.
Шаг 7. Используйте один шрифт по-разному
Для хорошего текстового макета необязательно брать три или четыре шрифта. Иногда достаточно одной гарнитуры с несколькими начертаниями. Например, можно использовать один шрифт в Bold для заголовка, Regular для даты и Light для дополнительной информации. Так композиция остаётся цельной, но внутри неё появляется контраст.
Это особенно полезный приём для начинающих дизайнеров. Вместо долгого подбора шрифтовой пары можно сначала научиться выстраивать композицию средствами одной гарнитуры.
Мы не добавили фотографию, иллюстрацию или декоративный объект. Изменили только размер, положение, интервалы и контраст текста — и получили совершенно другой результат. Почему такой подход полезен дизайнеру? Работа только с текстом отлично тренирует композиционное мышление.Когда нельзя спрятаться за красивой фотографией или эффектной иллюстрацией, приходится действительно работать с пропорциями, расстояниями, масштабом и иерархией.
Поэтому такое упражнение полезно выполнять регулярно. Возьмите простую фразу из трёх-четырёх строк и попробуйте сделать пять разных макетов, не используя ничего кроме текста и одного цвета.
В одном варианте сделайте главным масштаб. В другом — свободное пространство. В третьем — вертикальный текст. В четвёртом — контраст начертаний. В пятом — ритм строк. Вы удивитесь, насколько разным может выглядеть один и тот же набор слов.
Иногда одной хорошей типографики уже достаточно, чтобы появился полноценный дизайн.
