Профессия: Графический дизайнер

Иерархия без лишних эффектов

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

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

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

Конкуренция акцентов. Посмотрите на макет в уменьшении и назовите первое сообщение.

Выравнивание и оптическая поправка

Общая линия помогает объединить элементы. В простом макете выберите левый край для заголовка, текста и контакта. Если фотография начинается по другой линии, должно быть понятно, почему: например, она занимает полную ширину, а текст — ограниченный блок. Случайные небольшие смещения создают ощущение небрежности.

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

Не оправдывайте словом «оптически» любое отклонение. Сначала задайте измеримую основу: ось, край или базовую линию. Затем сравните варианты рядом. Поправка должна устранять конкретную зрительную проблему, а не создавать новое случайное смещение.

Общий край. Проверьте, какие элементы действительно требуют отдельной оси.

Сетка

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

У прайса А4 ширина страницы 210 мм. При полях по 18 мм рабочая ширина равна 174 мм. Если сделать две колонки с промежутком 6 мм, каждая будет шириной 84 мм: (174 − 6) / 2. Но арифметически удобная сетка может оказаться неудобной для длинных названий услуг. После расчёта вставьте реальный текст и проверьте переносы.

Для прайса «Лада» выберем одну широкую колонку описаний и узкую колонку ориентировочной цены или отметки «после осмотра». Это соответствует содержанию лучше, чем две равные колонки. Если цены не утверждены, не вставляйте придуманные числа в публичный макет. Учебные значения должны быть обозначены в кейсе.

Колонки и промежуток. Вставьте самое длинное название прежде, чем утверждать сетку.

Пространство и группировка

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

Выберите несколько размеров отступов и назначьте им роли. Например, небольшой — между строками одной группы, средний — между пунктами, большой — между разделами. Эти числа не обязаны быть кратны универсальному модулю. Важно, чтобы система была различима и её можно было повторить.

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

Расстояние показывает связь. Прочитайте страницу без линий и проверьте группировку.

Ритм, баланс и повторение

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

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

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

Практика. Три версии одного сообщения

Сделайте три макета с одинаковым текстом. В первом главный акцент — заголовок, во втором — предметная фотография, в третьем — короткая цитата мастера, явно обозначенная как учебная. Не меняйте текст одновременно с композицией: иначе будет трудно понять причину различия.

Покажите варианты в размере, близком к реальному просмотру. Попросите человека назвать первое замеченное сообщение и действие, которое предлагается выполнить. Не спрашивайте только «какой красивее». Запишите ошибки чтения. Если контакт не замечают, измените его положение или группировку, а не сразу увеличивайте все буквы.

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

Глава 6. Типографика для русского текста

Шрифт, гарнитура и начертание

Гарнитура — семейство шрифтов с общим рисунком. Начертание — его вариант: например, обычный, полужирный или курсивный. В повседневной речи всё это часто называют шрифтом. Перед выбором для проекта проверьте состав семейства: есть ли нужные начертания, кириллица, цифры и знаки.

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

Наберите пробную строку: «Мастерская “Лад”. Ремонт мебели: 1 250 ₽». Добавьте слова с буквами Д, Ж, Л, Ф, Щ и строчными д, л, т. Проверьте кавычки, тире, рубль и цифры. Если часть символов взята из другого шрифта, это может быть незаметно в коротком названии, но проявиться в документе.

Проверка кириллицы

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

Для «Лада» выберите семейство с несколькими рабочими начертаниями и лицензией, которая позволяет нужное использование. Простой учебный выбор — открытая гарнитура с полноценной кириллицей. Но не называйте любой бесплатный файл свободным: условия использования могут ограничивать коммерцию, встраивание или передачу.

Сохраняйте вместе с проектом источник скачивания, название версии и текст лицензии. Для гарнитур под SIL Open Font License допускается использование в графических работах; распространение самих файлов шрифта сопровождается отдельными условиями лицензии [4]. Передача логотипа в кривых и передача файла гарнитуры — разные действия.

Роли и ограниченный набор

Назначьте типографические роли: название, заголовок, подзаголовок, основной текст, подпись, цена. Роль определяет размер, начертание, интерлиньяж и иногда цвет. Не создавайте отдельную новую настройку для каждой строки.

В малом проекте часто достаточно одного семейства и двух–трёх начертаний. Две гарнитуры могут быть полезны, если у них различимые функции. Например, выразительная для заголовков и спокойная для длинного текста. Сочетание должно выдерживать русский набор и реальные размеры, а не только один эффектный заголовок.

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

Типографические роли. Замените содержание и проверьте, сохраняется ли порядок чтения.

Размер и расстояние между строками

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

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

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

Плотность абзаца. Печатайте в целевом размере, не оценивайте только увеличение.

Кернинг и трекинг

Кернинг регулирует расстояние между отдельными парами символов. Трекинг меняет плотность группы или всей строки. В логотипе и крупном заголовке пары становятся особенно заметными. Расстояние между буквами оценивают по визуальному пространству, а не по равенству чисел.

Наберите «ЛАД» крупно и сравните промежутки. После наклонной буквы пространство может выглядеть шире. Настройте пару, затем уменьшите надпись до размера визитки. То, что хорошо выглядит в большом масштабе, может стать тесным в маленьком.

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

Пространство между буквами. После крупного просмотра уменьшите надпись до визитки.

Знаки, числа и переносы

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

В прайсе удобно писать «1 250 ₽», сохраняя число и обозначение валюты вместе. Время можно оформить «10:00–19:00», а перечень условий — полноценными короткими предложениями. Не смешивайте несколько способов записи одной и той же информации внутри документа.

Переносы не должны искажать названия и важные короткие сообщения. Не вставляйте дефис вручную посреди слова ради текущего макета: после изменения ширины он может остаться в неверном месте. Используйте переносы программы либо измените текстовый блок. Проверяйте одиночные короткие строки в начале и конце абзаца.

Числа и условия. Добавьте самое длинное число и проверьте предел ширины.

Практика. Типографический лист

Возьмите одну страницу текста об услугах «Лада». Сделайте вариант с одной гарнитурой и вариант с двумя. Назначьте каждому элементу роль и подпишите её в рабочем файле. Сохраните значения размеров и интерлиньяжа.

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

После выбора создайте стили. Замените длинное название услуги ещё более длинным. Если система развалилась, предусмотрите правило переноса или ограничения текста. Хорошая типографика работает с реальным изменением содержания.

Глава 7. Цвет как система ролей

Что именно задаёт цвет

Цвет может выделять, объединять и помогать распознаванию. Но смысл зависит от контекста. Один и тот же зелёный встречается у финансовой организации, аптеки и садового магазина. Не обещайте заказчику, что определённый оттенок автоматически вызовет доверие или увеличит покупки.

Для «Лада» выберем тёмный зелёный как рабочий цвет названия и крупных текстовых акцентов, тёплый светлый — как фон, охристый — как дополнительный акцент. Это авторское решение учебного проекта, а не универсальная формула мебельного бизнеса. Материальность поддержат фотографии, а не только палитра.

Пример цифровых значений: тёмный #173B32, светлый #F4F0E6, акцент #C78632. Эти значения относятся к RGB-представлению. Их нельзя без проверки объявить готовой рецептурой для любой печати. Для печатного применения потребуется согласованный профиль и проба.

Тон, насыщенность и светлота

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

Сделайте акцент менее насыщенным и посмотрите, остаётся ли он заметным. Затем сохраните насыщенность, но осветлите его. Это разные изменения. Если два блока различаются только тоном, они могут стать почти одинаковыми в оттенках серого или для человека с особенностями цветового восприятия.

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

Палитра и роли

Укажите, где используется каждый цвет. Тёмный — текст и логотип на светлом фоне. Светлый — фон печатных и цифровых материалов. Акцент — небольшая плашка, декоративный фрагмент или выделение, где он не ухудшает чтение. Для мелкого текста акцентный охристый на светлом фоне не подходит без проверки; в выбранной учебной паре используйте тёмный текст.

Полезно ограничить сочетания. Например, белый текст на тёмном разрешён, тёмный на светлом разрешён, акцентный мелкий текст на светлом требует отдельной проверки. Если оставить все комбинации допустимыми, сотрудники начнут выбирать их по случаю, и система потеряет согласованность.