Графический дизайн: типографика, каталоги и веб-сайты

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

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

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

Что такое композиция в дизайне

Композиция — это способ расположения элементов (текста, изображений, форм, отступов) на плоскости так, чтобы:

смысл считывался быстро

внимание направлялось к ключевому

макет выглядел целостно

материал был удобен для чтения

Композиция не равна «красиво». Она про управление восприятием.

Базовые принципы композиции

Ниже — принципы, которые работают и в печати (каталоги), и в интерфейсах (сайты), и в типографике (набор текста).

Баланс

Баланс отвечает за ощущение устойчивости макета.

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

Асимметричный баланс — равновесие достигается за счет контраста размеров, плотности и «визуального веса»; чаще выглядит современно и динамично.

Практическая мысль: большой светлый блок может «уравновешивать» маленький, но темный и контрастный.

Контраст

Контраст помогает отличать важное от второстепенного.

размер (заголовок больше основного текста)

насыщенность/яркость (акцентный цвет)

толщина начертания (жирное против обычного)

форма (круг против прямоугольника)

фактура/изображение (фото против плоской плашки)

Если контраста недостаточно, элементы выглядят «одинаково важными», и макет становится шумным.

Выравнивание

Выравнивание создает порядок и ощущение «собранности».

выравнивание по одной вертикали упрощает сканирование

общие оси помогают объединять элементы без рамок и линий

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

Близость и группировка

Элементы, которые относятся друг к другу, должны быть расположены близко.

цена рядом с названием товара

подпись рядом с фотографией

кнопка рядом с поясняющим текстом

Если связанные вещи далеко друг от друга, пользователь начинает ошибаться.

Повтор и ритм

Повтор делает систему узнаваемой и экономит усилия читателя.

одинаковые стили карточек товара

повторяющиеся отступы

единые принципы заголовков

В каталогах повтор особенно важен: он превращает набор страниц в систему. На сайтах повтор — основа интерфейсной предсказуемости.

Белое пространство

Белое пространство — это пустоты: поля, межстрочные интервалы, отступы между блоками.

увеличивает читаемость

показывает структуру

повышает ощущение качества

Важно: белое пространство — не «пустота», а инструмент управления вниманием.

Гештальт-принципы: почему мы видим группы и структуру

Гештальт-принципы объясняют, как зрение объединяет элементы в целое. Дизайнер использует это, чтобы структура считывалась без усилий.

Близость: то, что рядом, воспринимается как группа.

Сходство: одинаковые по стилю элементы кажутся связанными.

Непрерывность: взгляд «течет» по линиям и выравниваниям.

Замыкание: мозг достраивает фигуру, даже если она неполная.

Фигура/фон: важное должно отделяться от фона.

Источник для углубления: Принципы гештальта

Зачем нужны сетки

Сетка — это система направляющих (колонки, строки, модули, базовые линии), которая помогает:

выстраивать выравнивания автоматически

удерживать единый стиль на десятках страниц/экранов

ускорять верстку

поддерживать типографику (особенно в многостраничных материалах)

Сетка — не клетка. Это инфраструктура, которую можно нарушать осознанно.

!Пример 12-колоночной сетки и размещения элементов

Виды сеток, которые реально используются

Манускриптная сетка

Один основной текстовый блок (часто в книгах, статьях, длинном чтении). Хороша там, где важна непрерывность чтения.

Колоночная сетка

Несколько колонок по ширине. Основа журналов, каталогов и многих веб-лейаутов.

2–4 колонки часто используются в печати для текстовых разворотов

8–12 колонок популярны в веб-дизайне из-за гибкости компоновки

Модульная сетка

Сетка из рядов и колонок, образующая модули. Идеальна для каталогов и товарных карточек, где много однотипных блоков.

Иерархическая сетка

Сетка под контент: направляющие строятся вокруг смысловых блоков, а не вокруг равномерных модулей. Часто встречается на лендингах.

Источник для ориентира терминов: Сетка (графический дизайн))

Как проектировать сетку под задачу

Ниже — практичный порядок действий, который одинаково применим к каталогу и к сайту.

Определите тип контента

Составьте список повторяющихся блоков

Выберите базовый тип сетки

Настройте поля и межколонники

Привяжите типографику к сетке

Проверьте сетку на крайних случаях

Определите тип контента

В каталоге: товары, цены, характеристики, промо-блоки, навигация по разделам.

На сайте: заголовки, карточки, формы, кнопки, состояния (ошибка/успех), адаптив.

Сетка должна помогать частым сценариям, а не редким.

Составьте список повторяющихся блоков

Повторы — главный аргумент в пользу сетки. Если у вас 100 карточек товара, дизайн должен обеспечивать единый шаблон.

Настройте поля, колонки, межколонники

Поля дают «воздух» и защищают контент от края.

Колонки задают логику компоновки.

Межколонник (gutter) предотвращает слипание блоков.

Практическое правило: чем меньше кегль текста и чем плотнее контент, тем важнее щедрые отступы.

Привяжите типографику к сетке

Для длинного текста особенно важна согласованность вертикальных интервалов:

одинаковые отступы между абзацами

предсказуемые интервалы вокруг заголовков

одинаковые подписи под изображениями

Позже в курсе мы разберем это глубже на типографике и базовой линии.

Проверьте на крайних случаях

очень длинные названия товаров

отсутствие изображения

две строки цены или скидки

дополнительные бейджи (новинка, хит, -30%)

Если сетка ломается на крайних случаях, на реальном проекте она будет ломаться постоянно.

Визуальная иерархия: как сделать «главное» заметным

Визуальная иерархия — это порядок, в котором человек замечает элементы. Дизайнер управляет этим порядком.

Иерархия отвечает на вопросы:

что увидеть первым

что прочитать вторым

где искать действие (кнопку/контакт/цену)

!Сравнение макета без иерархии и с иерархией

Инструменты иерархии

Размер

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

Толщина и начертание

Жирность, капитель, курсив (умеренно) помогают отделить уровни текста.

Цвет и контраст

акцентный цвет для действий и ключевых данных

пониженный контраст для второстепенных пояснений

Важно: цвет должен поддерживать иерархию, а не заменять ее. Если убрать цвет, структура все равно должна читаться.

Позиция на странице

Люди обычно замечают верхнюю часть и левую область раньше (особенно в интерфейсах с чтением слева направо).

Для веба полезно знать паттерны сканирования:

F-паттерн характерен для текстовых страниц и списков

Z-паттерн часто применим к простым промо-экранам

Источник: F-shaped pattern of reading on the web

Отступы и группировка

Отступы — это «скобки» в дизайне. Они показывают, что относится к чему, и где начинается новый смысловой блок.

Изображения

Фотографии и иллюстрации почти всегда забирают внимание. Это нужно учитывать:

если фото не несет смысл, оно может мешать

если фото ключевое (товар), иерархия должна подстраиваться вокруг него

Как связаны сетка и иерархия

Сетка отвечает за порядок и повторяемость, а иерархия — за приоритеты внутри этого порядка.

сетка помогает быстро собрать аккуратный макет

иерархия помогает сделать макет понятным

Типичная ошибка начинающих: построить сетку, но не сделать иерархию, из-за чего страница становится «ровной» и скучной.

Мини-кейс: каталог и сайт — одинаковые принципы, разные акценты

Разворот каталога

сетка обычно стабильная, модульная

повторяемость важнее уникальности

иерархия подчинена сравнению товаров

Типичный порядок внимания:

раздел/категория

ключевой товар/оффер

карточки

цена и характеристики

Главный экран лендинга

сетка может быть иерархической

иерархия агрессивнее: нужно быстро донести ценность

CTA (кнопка) обязана быть на верхних уровнях

Типичный порядок внимания:

заголовок (что это)

подзаголовок (почему важно)

визуальный якорь (продукт/результат)

действие (кнопка)

Частые ошибки и как их избегать

Слишком много уровней важности: оставьте 2–3 основных уровня на экран/полосу.

Слабый контраст: если сомневаетесь, увеличьте различия, а не уменьшайте.

Случайные отступы: выберите ограниченный набор отступов и повторяйте.

Неровные выравнивания: проверьте общие оси для заголовков, цен, кнопок.

«Сетка ради сетки»: если элемент нарушает сетку, спросите себя, зачем; если ответа нет — верните в систему.

Практический чеклист перед сдачей макета

Видно ли главное за 3 секунды

Есть ли логичный второй шаг взгляда

Повторяются ли стили одинаковых сущностей

Можно ли объяснить сетку простыми словами

Отступы выглядят системно, а не случайно

Если убрать цвет, структура все равно читается

Материалы для углубления

Принципы гештальта

Сетка (графический дизайн))

F-shaped pattern of reading on the web

Типографика: шрифты, набор, читабельность и стиль

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

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

Термины без путаницы

Типографика полна похожих слов. Зафиксируем значения.

Шрифт — конкретный файл и конкретное начертание, например Regular или Bold.

Гарнитура — семейство шрифтов одного рисунка: все начертания и кегли в одной системе.

Начертание — вариант внутри гарнитуры: Regular, Italic, Medium, Bold.

Кегль — размер букв.

Интерлиньяж — расстояние между строками.

Кернинг — индивидуальная подстройка расстояния между парой букв.

Трекинг — равномерное изменение расстояний между буквами во всем слове или фрагменте.

Анатомия букв: что вы на самом деле настраиваете

Понимание анатомии помогает объяснять, почему текст «сыпется» или «слипается».

!Схема основных параметров, которые влияют на читабельность и «плотность» набора

Ключевые параметры, влияющие на восприятие

| Параметр | Что это | Почему важно | |---|---|---| | x-height | высота строчных букв | чем выше, тем легче читать на малых кеглях, особенно в интерфейсах | | Контраст штрихов | разница толщин | высокий контраст красив в крупных кеглях, но хуже в мелком тексте | | Внутренние просветы | «окошки» в буквах | маленькие просветы быстрее «залипаются» в мелком кегле и на плохой печати | | Ширина знаков | узкий или широкий рисунок | влияет на длину строки и плотность каталога или страницы | | Качество кириллицы | рисунок и кернинг пар | плохая кириллица сразу делает макет непрофессиональным |

Классификация шрифтов: что выбирать под задачу

Ниже — практичная карта, без попытки «определить весь мир шрифтов».

| Группа | Признак | Где часто уместно | Риск | |---|---|---|---| | Антиква (serif) | засечки | длинные тексты в печати, премиальные каталоги, редакционные материалы | в веб-интерфейсах на малых кеглях может проигрывать без хорошего рендеринга | | Гротеск (sans-serif) | без засечек | интерфейсы, каталоги с характеристиками, табличные данные, навигация | некоторые гротески слишком «стерильные» и требуют сильной иерархии | | Моноширинный | одинаковая ширина знаков | код, технические вставки, стилизация «тех» | быстро утомляет в длинном чтении | | Дисплейный | для крупных кеглей | логотипы, обложки, промо-блоки | почти всегда непригоден для основного текста |

Источник для терминов и общего контекста: Типографика

Выбор гарнитуры: критерии, которые реально работают

Чтобы шрифт не «мешал дизайну», он должен выдерживать ваш контент.

Проверьте набор символов

кириллица и все нужные знаки

валюты, проценты, дроби, математические знаки при необходимости

длинное тире, кавычки «ёлочки», неразрывные пробелы

Проверьте начертания

Минимум, который закрывает большинство задач:

Regular для текста

Medium или Semibold для акцентов

Bold для сильных заголовков или цен

Italic, если в контенте бывают выделения

Проверьте цифры

Для каталогов и интерфейсов цифры критичны.

Табличные цифры удобны в прайсах и таблицах: цифры одинаковой ширины, столбцы ровные.

Пропорциональные цифры выглядят более «книжно» и живо.

Протестируйте крайние случаи

очень длинные названия товаров

мелкие подписи под фото

цены со скидкой и перечеркнутой старой ценой

текст капсом

Сочетание шрифтов: меньше, но системнее

Базовое правило для учебных и коммерческих проектов: чем больше контента, тем меньше шрифтов.

Практичная схема сочетаний

одна гарнитура, разные начертания и размеры

две гарнитуры: одна для заголовков, одна для текста

Как понять, что пара работает

контраст есть, но не конфликт

одинаковое «качество» детализации: оба шрифта выглядят профессионально рядом

сходятся метрики: интерлиньяж и высота строчных не заставляют постоянно «чинить» вертикальные интервалы

Источник для подбора и тестов шрифтов: Google Fonts

Набор текста: параметры, которые дают читабельность

Читабельность — это не один параметр, а баланс нескольких.

Длина строки

Слишком длинная строка сбивает ритм чтения, слишком короткая превращает абзац в «лесенку».

для обычного текста часто комфортен диапазон примерно 45–75 знаков в строке (включая пробелы)

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

!Сравнение длины строки и ее влияния на удобство чтения

Интерлиньяж

Интерлиньяж задает «воздух» между строками.

если строки близко, глаз перескакивает и теряет строку

если слишком далеко, абзац распадается

Практика: подбирайте интерлиньяж на реальном тексте, а не на двух строках-рыбах.

Межбуквенные расстояния

Кернинг исправляет отдельные проблемные пары, чаще заметен в заголовках.

Трекинг помогает управлять плотностью: иногда полезен для капса и мелких подписей.

Важно: трекингом нельзя лечить плохой шрифт. Если текст постоянно «разваливается», проблема часто в гарнитуре или в слишком маленьком кегле.

Выравнивание и переносы

выравнивание по левому краю обычно дает более стабильную читабельность, особенно в вебе

выравнивание по ширине может выглядеть «журнально», но требует аккуратной работы с переносами и межсловными пробелами

Для многостраничной печати переносы — инструмент качества: они уменьшают «дыры» и делают край ровнее.

Абзацы и отступы

Используйте один главный способ разделения абзацев.

или отступ первой строки

или межабзацный интервал

Если использовать оба одновременно, текст часто становится рыхлым.

Типографическая иерархия: как «озвучить» структуру

Мы уже говорили об иерархии как о порядке внимания. В типографике она строится из ограниченного набора различий.

Инструменты иерархии в тексте

кегль

начертание

интервал до и после

цвет и контраст

капитель или капс (осторожно)

Типовая система для сайта и каталога

Ниже — не единственный вариант, но рабочая база.

| Уровень | Роль | Что отличает | |---|---|---| | Заголовок раздела | ориентирует | крупный кегль, повышенный контраст, заметный интервал сверху | | Подзаголовок | уточняет | меньший кегль, другое начертание, умеренные интервалы | | Основной текст | читает | регулярное начертание, стабильная длина строки | | Подписи и метаданные | поясняют | меньший кегль, пониженный контраст, больше интерлиньяж относительно кегля | | Акцент (цена, CTA) | действует | высокая контрастность, четкая позиция в сетке, часто более жирное начертание |

Типографика в каталогах: плотность, повторяемость, сравнение

Каталог — это «машина сравнения». Типографика должна помогать быстро сопоставлять товары.

Что важно именно для каталога

табличные цифры для цен и характеристик, если они стоят столбцами

модульность: одинаковые стили названий, цен, описаний во всех карточках

экономия места без потери читабельности: лучше уменьшить кегль умеренно, чем сжать межстрочные до нечитабельности

аккуратная работа с переносами и длинными названиями

Связь с сеткой

В каталогах особенно полезно привязывать типографику к вертикальному ритму.

одинаковые интервалы между однотипными блоками

предсказуемые высоты карточек

Это напрямую продолжает принципы сетки и повторяемости из предыдущей статьи.

Типографика в вебе: адаптивность, доступность, скорость

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

Размеры и адаптив

избегайте «одного кегля на все»

проверяйте, как ведут себя заголовки при переносе на 2–3 строки

следите, чтобы строки не становились слишком длинными на широких экранах: ограничивайте ширину текстового контейнера

Доступность

держите достаточный контраст текста и фона

не полагайтесь только на цвет для передачи смысла

Нормативная база по контрасту: WCAG 2.2

Загрузка шрифтов и запасные варианты

Если веб-шрифт не загрузился, дизайн не должен ломаться.

задавайте запасные гарнитуры в стиле проекта

следите, чтобы метрики были близки, иначе «прыгает» верстка

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

Типографический стиль — это повторяемые правила, которые можно применить ко всем экранам сайта или ко всем полосам каталога.

Что обычно входит в типографический набор правил

список гарнитур и их назначение

шкала размеров для заголовков и текста

правила интервалов вокруг заголовков

стили списков, таблиц, подписей

правила для цифр, цен, скидок и бейджей

Как проверить, что стиль получился

Откройте любой экран или полосу и попробуйте назвать уровни: где заголовок, где подзаголовок, где текст, где метаданные.

Уберите цвет: если структура распалась, значит типографика держит иерархию слабо.

Поставьте «плохие» данные: длинные слова, большие числа, дополнительные строки. Система должна выдержать.

Частые ошибки начинающих

слишком много шрифтов: стиль превращается в «коллекцию»

слабая разница между уровнями: заголовки и текст выглядят одинаково важными

случайные интервалы: визуальный ритм ломается даже при хороших шрифтах

капс в длинных фразах: скорость чтения падает

попытка исправить читабельность только трекингом или только интерлиньяжем

Чеклист перед сдачей макета (каталог или сайт)

В проекте не больше двух гарнитур, а чаще достаточно одной.

Видно 2–3 уровня иерархии без цвета.

Длина строки комфортна для чтения.

Интервалы повторяются и поддерживают сетку.

Цифры, цены и единицы измерения набраны единообразно.

Проверены крайние случаи контента.

Материалы для углубления

Типографика

Google Fonts

WCAG 2.2

Дизайн каталога: структура, модульность, работа с изображениями и данными

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

В прошлых статьях мы разобрали:

как сетка и визуальная иерархия делают макет управляемым

как типографика превращает структуру в понятные уровни текста

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

Чем каталог отличается от плаката и сайта

Каталог почти всегда имеет три особенности:

Повторяемость: десятки и сотни однотипных блоков (карточки товаров, таблицы характеристик).

Сравнение: читатель держит в голове несколько вариантов и ищет различия.

Плотность информации: много цифр, названий, параметров, сносок, скидок.

Следствие: дизайн каталога — это дизайн системы, а не отдельных «красивых страниц».

Структура каталога: как читатель ориентируется

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

Типовые уровни структуры

Каталог целиком: обложка, оглавление, навигация по разделам, указатели, служебные страницы.

Раздел: категория товаров, вступительный разворот, фильтры (бренд, назначение), визуальные маркеры.

Полоса или разворот: набор карточек и промо-блоков в одной логике.

Карточка товара: одинаковые поля данных, одинаковый порядок чтения.

!Схема показывает уровни навигации и модульную сетку на развороте

Оглавление, разделители и указатели

Оглавление и разделители — это не «формальность», а инструмент экономии времени читателя.

Оглавление должно вести в разделы с понятными названиями.

Разделители должны отличаться визуально сильнее обычных страниц, иначе человек их не замечает.

Указатель (алфавитный, по артикулам, по брендам) полезен, если каталог большой.

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

Источник для контекста термина: Каталог

Модульность: как сделать каталог быстрым в верстке и стабильным по качеству

Модульность — это подход, где вы проектируете не страницы, а повторяемые блоки (модули) с фиксированными правилами.

Зачем нужна модульность

снижает количество ручных правок

делает страницы одинаково понятными

упрощает обновления ассортимента и цен

помогает выдержать типографику и вертикальный ритм

Как спроектировать модульную систему

Определите типовую карточку товара и список данных внутри нее.

Выберите модульную сетку, которая кратна карточке (например, 12 колонок, карточка занимает 4 колонки).

Задайте фиксированные отступы и вертикальные интервалы.

Опишите правила для переменных данных (длинные названия, отсутствие фото, две цены).

Карточка товара как компонент

Карточка — это основной «кирпич». Она должна быть одинаковой по структуре везде.

!Анатомия карточки товара и порядок чтения

#### Поля карточки и роль каждого

| Поле | Что это | Зачем в каталоге | Типовое правило | |---|---|---|---| | Название | имя товара | идентификация | 1–2 строки, остальное по правилам сокращения | | Фото | изображение товара | главный якорь внимания | одинаковый масштаб и стиль обработки | | Цена | стоимость | ключ к сравнению | фиксированное место, высокий контраст | | Старая цена/скидка | промо-данные | мотивация | не конкурирует с новой ценой | | Характеристики | 2–6 параметров | сравнение | одинаковый порядок параметров | | Артикул (SKU) | код | поиск и уточнение | меньший контраст, но читаемо | | Сноски/ограничения | условия | юридическая точность | отдельный стиль, предсказуемое место |

Правила для «крайних случаев»

Каталоги ломаются не на типовых товарах, а на исключениях. Важно заранее задать правила.

Длинное название

Две строки характеристик превращаются в пять

Фото отсутствует или «плохого качества»

Цена с копейками, диапазон цен, несколько валют

Несколько бейджей одновременно (новинка, хит, -30%)

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

Типографика каталога: читабельность, сравнение, единообразие

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

Практичные принципы

Одинаковые уровни: название всегда одного стиля, цена всегда одного стиля, характеристики всегда одного стиля.

Умеренное количество начертаний: чаще достаточно Regular и Semibold или Bold.

Цифры без сюрпризов: если есть столбцы цен и параметров, используйте табличные цифры, чтобы столбцы не «плясали».

Единые правила единиц: например, мм, кг, Вт — одинаковый стиль и одинаковые пробелы.

Источник для общего контекста: Типографика

Работа с изображениями: стиль, качество, технические ограничения

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

Художественная согласованность

одинаковый фон (часто белый или нейтральный)

одинаковое направление света и контраст

одинаковая логика кадрирования и масштаба

одинаковая обработка цвета (чтобы один товар не выглядел «грязнее» другого)

Кадрирование под сетку

Фото должно работать с модулем карточки.

сначала задайте рамку под изображение

затем подгоняйте кадры под рамку, а не рамку под каждый кадр

Это напрямую продолжает принцип сетки из первой статьи: сетка — инфраструктура, а не украшение.

Технические параметры для печати

Разрешение: для печати обычно ориентируются на 300 ppi при финальном размере изображения в макете.

Цветовая модель: печать чаще работает в CMYK.

Форматы: в зависимости от процесса верстки и препресса используют TIFF, JPEG или PDF.

Полезные справочные статьи:

Разрешение изображения

CMYK

JPEG

TIFF

Важно: это не «магические числа», а практические ориентиры. Реальные требования зависят от типографии.

Юридическая и этическая сторона

проверьте лицензии на изображения

храните источники

не используйте фото сомнительного происхождения в коммерческих макетах

Работа с данными: как не разрушить дизайн цифрами и текстом

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

Типовые проблемы данных

разные написания одной сущности (например, см и сантиметр)

разный формат цен (1990, 1 990, 1.990)

скачущие единицы (кВт и КВТ)

разные тире и дефисы в характеристиках

случайные сокращения и переносы

Правила, которые нужно зафиксировать заранее

| Зона | Пример | Правило | |---|---|---| | Цена | 1 990 ₽ | единый формат по всему каталогу | | Скидка | -30% | единый стиль, единое место в карточке | | Единицы | 10 кг, 250 мм | единая система пробелов и сокращений | | Диапазоны | 10–12 мм | используйте тире для диапазонов, а не дефис | | Артикулы | SKU 483920 | одинаковый формат и контраст |

Неразрывные пробелы и «склейка» смысловых блоков

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

число и валюта

число и единица измерения

инициалы и фамилия (если встречается)

Это относится к аккуратному набору и напрямую продолжает блок про читабельность и набор текста из статьи по типографике.

Таблицы характеристик

Если в каталоге есть сравнительные таблицы, они должны быть не декоративными, а читаемыми.

фиксируйте порядок параметров

выравнивайте числа одинаково (часто по правому краю)

избегайте лишних линий, лучше работайте отступами и контрастом

Допечатная подготовка: что дизайнер обязан учесть

Даже идеальный дизайн можно «сломать» на выходе в печать, если не учесть базовые требования производства.

Что такое вылеты и почему они нужны

Вылеты — это запас фона или изображения за линию реза, чтобы после обрезки не появились белые полосы.

Минимальный набор проверок перед сдачей

Есть ли вылеты там, где фон или фото подходят к краю

Все ли изображения достаточного качества

Нет ли мелкого текста на слишком низком контрасте

Не потеряются ли важные элементы в корешке и у сгиба

Справочные статьи:

Допечатная подготовка

Вылет (полиграфия)

Рабочий процесс: как делать каталог без хаоса

Ниже — практичный порядок, который помогает не утонуть в правках.

Определить формат, объем, способ скрепления, требования типографии

Составить структуру: разделы, оглавление, типовые страницы

Спроектировать сетку и модуль карточки

Настроить типографическую систему (стили заголовков, цен, характеристик)

Подготовить правила для изображений (фон, кадрирование, обработка)

Зафиксировать правила данных (цены, единицы, диапазоны)

Сверстать несколько тестовых разворотов и прогнать крайние случаи

Собрать весь каталог и сделать финальную проверку перед сдачей

Частые ошибки в дизайне каталогов

разные карточки «одного типа» выглядят по-разному из-за ручных правок

цена и ключевые параметры не имеют фиксированного места

фото разного масштаба и разной обработки, из-за чего страница выглядит случайной

слишком много типографических акцентов, и сравнение становится трудным

нет правил для длинных названий и дополнительных бейджей

забыты вылеты или важные элементы попали в зону сгиба

Что должно остаться в голове после статьи

Каталог — это система повторяемых решений для сравнения.

Модульность и сетка защищают от хаоса и ускоряют верстку.

Типографика в каталоге должна быть прежде всего стабильной и сравнимой.

Фото и данные требуют правил не меньше, чем композиция.

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

Подготовка печатных макетов: цвета, технические требования и пре-пресс

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

Пре-пресс (допечатная подготовка) — это этап, где дизайнер переводит макет из «красиво на экране» в «корректно в типографии». Здесь важны три блока:

цвет и управление цветом

технические параметры макета

контроль перед сдачей (preflight) и экспорт PDF

Источник для общего контекста: Допечатная подготовка

Почему печать часто «не как на экране»

Экран и печать физически разные:

экран светится (аддитивное смешение), печать отражает свет (субтрактивное)

экран обычно показывает RGB, печать почти всегда идет через CMYK

бумага, краски и оборудование ограничивают диапазон цветов и деталей

Практический вывод: дизайн для печати нужно проверять в печати-подобных условиях, а не только в окне редактора.

Цвет в печати: RGB, CMYK и профили

RGB и CMYK: что это простыми словами

RGB — цвет на экране, собирается из света красного, зеленого и синего.

CMYK — цвет в печати, собирается из красок: голубой, пурпурной, желтой и черной.

В печати многие яркие RGB-цвета недостижимы: при переводе в CMYK они становятся более спокойными или «грязнее».

Справка: CMYK

ICC-профиль: что он делает

ICC-профиль — это файл-описание того, как именно устройство воспроизводит цвет (монитор, конкретная печатная машина, тип бумаги). Он нужен, чтобы:

предсказуемо переводить RGB в CMYK

симулировать печать на экране (soft proof)

уменьшать риск неожиданного сдвига оттенков

Справка: ICC-профиль

Soft proof и hard proof

Soft proof — просмотр макета с имитацией печати на экране (через профиль).

Hard proof — цветопроба, физический отпечаток, по которому согласуют цвет.

Если проект критичен к цвету (брендовые оттенки, премиальная полиграфия), без цветопробы риск высокий.

Черный в печати: обычный, насыщенный и «регистрационный»

В печати есть несколько «черных», и это частая причина брака.

Обычный черный (только K)

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

Насыщенный черный (rich black)

- смесь CMYK для более глубоких плашек - обычно применяют для крупных фонов и больших заливок

Регистрационный цвет

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

Важно: точные значения rich black зависят от типографии и профиля печати. Не «выдумывайте формулу» — запросите требования.

Overprint (надпечатка): почему может «пропасть» белый текст

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

для черного мелкого текста надпечатка часто полезна

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

Практика: перед экспортом проверяйте режимы наложения и надпечатки в превью печати вашего редактора.

Изображения: разрешение, масштаб и форматы

PPI и DPI: что реально важно дизайнеру

PPI — плотность пикселей изображения в печатном размере.

DPI — характеристика печатного устройства (как оно «кладет точки»).

Дизайнер контролирует именно PPI в финальном размере на полосе.

Справка: Пиксель на дюйм

Типовые ориентиры по разрешению

фото: часто ориентируются на около 300 ppi в финальном размере

графика с резкими краями (логотипы, иконки): лучше в векторе

скриншоты и интерфейсные элементы: требуют проверки, часто 150–300 ppi в зависимости от линии и контраста

Главное правило: проверяйте не «разрешение файла», а эффективное разрешение после масштабирования в макете.

Растр и вектор

Растр (фото) теряет качество при увеличении.

Вектор (логотипы, схемы) масштабируется без потерь.

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

Форматы изображений для верстки

Универсального ответа нет — зависит от верстки и типографии. Но как логика принятия решений работает:

Фото

- обычно используют JPEG или TIFF (в зависимости от требований) - важно, чтобы качество было достаточным и цвет контролируемым

Графика с прозрачностью и острыми краями

- часто удобнее как вектор (PDF/EPS/SVG — в зависимости от цепочки)

Не смешивайте случайно разные цветовые модели

- например, когда часть фото CMYK, часть RGB, а часть вообще с встроенными профилями без контроля

Справки: JPEG, TIFF

Геометрия печати: вылеты, поля безопасности и метки

Вылеты

Вылет — запас фона/изображения за линию реза, чтобы после обрезки не появились белые полосы.

если фон или фото подходит к краю — вылет нужен обязательно

величина вылета задается типографией (часто несколько миллиметров)

Справка: Вылет (полиграфия)

Поле безопасности

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

мелкий текст

логотип

штрихкоды

тонкие рамки

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

Особые зоны: корешок, сгиб и разворот

Для многостраничных изделий добавляются риски:

в корешке и у сгиба часть контента визуально уходит

на развороте важно учитывать, что «центр» — это не бесшовный экран, а физический сгиб

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

Типографика в пре-прессе: шрифты, тонкие элементы, читабельность

То, что мы обсуждали в статье про типографику, в печати получает дополнительное измерение: воспроизводимость.

Минимальные размеры и толщины

Типовые проблемы печати:

слишком тонкие линии «проваливаются»

мелкий светлый текст на темном фоне теряет читабельность

мелкий текст, собранный из нескольких красок CMYK, может «двоиться» из-за несовмещения

Практика:

мелкий текст делайте в одной краске (часто в K)

избегайте сверхтонких декоративных шрифтов в малых кеглях

внимательно относитесь к инверсии (светлый текст на темном)

Встраивание шрифтов и перевод в кривые

При экспорте в PDF для типографии важны два подхода:

встроить шрифты в PDF (чтобы у типографии не было подмены)

перевести в кривые (outline) отдельные элементы, если этого требует типография или если шрифт проблемный

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

PDF для типографии: что такое PDF/X и зачем он нужен

Обычный PDF может содержать слишком много «вольностей» (прозрачности, непредсказуемые профили, недовстроенные шрифты). Поэтому типографии часто просят PDF/X — набор стандартов PDF для печати.

PDF/X ограничивает неоднозначности и делает файл предсказуемее

конкретный вариант PDF/X зависит от процесса в типографии

Справка: PDF/X, PDF

Preflight: контроль перед сдачей

Preflight — это проверка макета на типичные ошибки перед отправкой.

Ниже — практичный чеклист, который закрывает большинство учебных и реальных задач (каталог, брошюра, листовка).

Формат страницы

- совпадает ли с ТЗ (A4, A5, нестандарт) - правильная ориентация

Вылеты и поле безопасности

- вылеты есть везде, где фон/фото в край - важный контент не стоит близко к резу

Цвет

- согласованная цветовая модель (обычно CMYK) - нет случайных RGB-объектов (если типография этого не допускает) - нет регистрационного цвета в дизайне

Изображения

- достаточное эффективное разрешение - нет случайно растянутых маленьких картинок

Шрифты

- все шрифты встроены или корректно переведены в кривые по требованию - нет искусственного Faux Bold/Italic (когда редактор «дорисовывает» начертание)

Тонкие элементы

- линии и мелкие детали не слишком тонкие - мелкий текст не собран из CMYK без нужды

Экспорт PDF

- выбран стандарт, который просит типография (часто PDF/X) - корректно настроены метки реза и вылеты (если требуются)

!Диаграмма показывает последовательность шагов пре-пресса и где чаще всего возникают ошибки

Как общаться с типографией: минимальный набор вопросов

Чтобы не проектировать «вслепую», запросите у типографии:

какой формат изделия и способ скрепления

требования к вылетам и полям безопасности

целевой стандарт PDF (например, PDF/X) и нужны ли метки реза

предпочтительный профиль/условия печати (или готовый пресет)

допустимы ли RGB-изображения или нужен только CMYK

минимальные толщины линий и минимальный размер текста (если критично)

Типичные ошибки новичков и как их избежать

Сделать макет в RGB и в конце “просто перевести” в CMYK

- правильнее контролировать цвет заранее и делать пробные конверсии ключевых цветов

Забыть вылеты

- в печати это почти гарантированные белые полосы на части тиража

Собрать мелкий черный текст из CMYK

- получаются цветные “ореолы” из-за несовмещения

Положиться на “красиво на мониторе”

- монитор без калибровки и без профиля не является доказательством цвета

Не сделать preflight

- ошибки почти всегда дешевле поймать до отправки, чем после печати

Что должно остаться после статьи

Пре-пресс — это перевод дизайна в предсказуемый печатный файл.

Цвет в печати требует CMYK-логики и профилей, а критичный цвет — проб.

Вылеты, поля безопасности и контроль тонких элементов — обязательны.

PDF/X и preflight снижают риск технических ошибок.

Лучший способ избежать проблем — заранее уточнить требования типографии и проверять крайние случаи контента (как мы делали в статье про каталоги).

Дизайн сайтов: UX/UI, адаптивные сетки, компоненты и дизайн-системы

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

Эта статья собирает веб-направление в практическую систему: что такое UX и UI, как проектировать адаптивные сетки, как мыслить компонентами и как оформить решения в дизайн-систему.

UX и UI: чем отличаются и почему вам нужны оба

UX (User Experience) — пользовательский опыт: насколько легко человеку решить задачу на сайте.

UI (User Interface) — пользовательский интерфейс: визуальные и интерактивные решения, через которые человек выполняет действия.

Они не конкурируют, а поддерживают друг друга:

UX отвечает за структуру, логику, сценарии, тексты, ошибки, путь пользователя.

UI отвечает за визуальную иерархию, типографику, сетку, кликабельность, состояния компонентов.

Если UI отличный, но UX слабый, сайт будет выглядеть профессионально, но не будет приносить результат. Если UX хороший, но UI слабый, пользователю будет понятно, но доверие и удобство (особенно на мобильных) упадут.

Источник для контекста: User experience design

Что значит задача пользователя в веб-дизайне

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

Практический способ формулировки:

кто пользователь

какая у него цель

какие шаги он проходит

где он может ошибиться

что должно убедить его продолжить

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

Информационная архитектура: как разложить сайт по полкам

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

Карта сайта и уровни навигации

Типовая структура часто выглядит так:

главный уровень: разделы в меню

второй уровень: категории и подкатегории

локальная навигация: фильтры, табы, якоря, хлебные крошки

Источник для термина: Information architecture

Как проверить, что структура понятна

названия разделов однозначны и не требуют расшифровки

важные разделы доступны за 1–2 клика

человек понимает, где он находится (заголовки, хлебные крошки, активные пункты меню)

поиск и фильтры (если есть ассортимент) работают по ожиданиям

UX-макеты: от наброска к прототипу

Чтобы не спорить о цвете до того, как понятна логика, UX обычно проектируют слоями.

Скетч (быстрое расположение блоков): что на экране вообще должно быть.

Вайрфрейм (каркас): структура без визуального стиля, но с реальным текстом и состояниями.

Прототип (кликабельная логика): проверка сценариев до детальной отрисовки.

Важное правило: прототип нужен не всегда, но состояния нужны всегда.

Состояния, без которых сайт выглядит непрофессионально

пусто: нет товаров, нет результатов поиска

загрузка: скелетон, спиннер, заглушки

ошибка: неверный формат, сервер не ответил

успех: отправлено, добавлено, сохранено

Источник по UX-паттернам и ошибкам восприятия: Nielsen Norman Group

UI в вебе: композиция и типографика становятся интерфейсом

В UI вы применяете то, что уже изучили:

сетка дает предсказуемые выравнивания

типографика строит уровни смысла

белое пространство управляет вниманием

контраст выделяет действия и ключевые данные

Иерархия на экране: типовая логика

заголовок экрана: где я

ключевое действие: что мне делать

контент и детали: что выбрать и почему

вспомогательное: условия, ссылки, метаданные

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

Адаптивные сетки: как сделать макет живым, а не статичным

Адаптивность означает, что интерфейс сохраняет понятность и управляемость на разных ширинах экрана.

Источник: Responsive web design

Контейнер и принцип ограниченной ширины текста

Одна из самых частых ошибок — растянуть текст на всю ширину большого монитора. Чтобы типографика была читабельной:

ограничивайте ширину текстового контейнера

контролируйте длину строки (идея из статьи про типографику)

Колонки, отступы и брейкпоинты

В вебе часто используют 12-колоночную логику (как продолжение колоночных сеток из первой статьи), но с адаптацией:

на мобильных блоки чаще становятся в 1 колонку

на планшетах появляются 2–4 колонки для карточек

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

!Пример того, как один дизайн работает на разных экранах

CSS-сетка в реальности: что важно знать дизайнеру

Дизайнеру не нужно писать код, но полезно понимать ограничения:

сетка может быть реализована через CSS Grid или Flexbox

элементы не обязаны иметь фиксированную высоту

текст переносится непредсказуемо, поэтому нужно тестировать длинные заголовки

Справка по технологиям: MDN Web Docs: CSS Grid Layout, MDN Web Docs: Flexbox

Компоненты: как перестать рисовать страницы и начать строить систему

Компонент — повторяемый UI-блок с правилами: кнопка, поле ввода, карточка товара, шапка, табы, модалка.

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

Анатомия компонента

| Часть | Что это | Пример | |---|---|---| | Контент | то, что меняется | текст, цена, изображение | | Контейнер | геометрия и отступы | паддинги, радиус, граница | | Состояния | поведение | hover, active, disabled, error | | Варианты | типы внутри одного компонента | primary/secondary кнопки, размеры |

Главное правило компонентов

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

длинный текст

отсутствие данных

разные размеры изображения

переполнения и переносы

Пример: кнопка как система, а не прямоугольник

У кнопки обязательно есть:

иерархия (основная, вторичная, текстовая)

размеры (например, S/M/L)

состояния (обычная, наведена, нажата, недоступна)

правила для иконки (слева, справа, отступ)

Если это не зафиксировать, в макетах появятся десятки визуально похожих, но разных кнопок, и интерфейс потеряет целостность.

Дизайн-система: как описать правила, чтобы дизайн масштабировался

Дизайн-система — это набор стандартов и компонентов, который помогает делать новые страницы быстро и единообразно.

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

Источник для обзора подхода: Design system

Уровни дизайн-системы

Основы (foundations): цвета, типографика, сетка, отступы, иконки.

Компоненты: кнопки, поля, карточки, навигация.

Паттерны: фильтрация, оформление заказа, формы регистрации, таблицы.

Гайдлайны: как и где это использовать, что запрещено.

!Схема показывает, из каких слоев состоит дизайн-система

Токены: как связать дизайн и разработку

Дизайн-токены — это именованные значения, которые повторяются в интерфейсе.

Примеры токенов:

цвета: color/text/primary, color/bg/surface

отступы: space/8, space/16

радиусы: radius/12

типографика: font/body/regular, font/h1/semibold

Смысл токенов: вместо десятков «похожих серых» и «почти одинаковых отступов» у вас появляется ограниченный набор норм.

Документация: что обязательно зафиксировать

Чтобы система работала, нужны правила.

Для типографики: размеры, начертания, межстрочные, интервалы вокруг заголовков.

Для сетки: контейнер, колонки, межколонники, базовые отступы.

Для каждого компонента: назначение, варианты, состояния, ограничения и примеры неправильного использования.

В качестве ориентира по уровню детализации можно смотреть публичные системы:

Material Design

Carbon Design System

Доступность: чтобы сайт был удобен не только вам

Доступность (accessibility) — это правило профессионального веб-дизайна: интерфейс должен оставаться понятным для людей с разными особенностями зрения и моторики.

Ключевые практики, которые прямо завязаны на типографику и контраст:

достаточный контраст текста и фона

не полагаться только на цвет для передачи смысла

видимый фокус для клавиатурной навигации

достаточно крупные зоны нажатия для мобильных

Нормативная база: WCAG 2.2

Типичные ошибки в дизайне сайтов

макеты сделаны только под один экран, а на мобильном иерархия ломается

слишком много уникальных элементов вместо компонентов

нет состояний (ошибка, загрузка, пусто), из-за чего продукт выглядит недоделанным

типографика не учитывает длину строк и переносы

отступы случайные, нет шкалы spacing

кнопки и ссылки визуально неотличимы от текста

Рабочий процесс: как собрать веб-проект системно

Определить задачи пользователя и ключевые сценарии.

Собрать структуру: карта сайта, навигация, приоритеты.

Сделать вайрфреймы ключевых экранов и продумать состояния.

Настроить адаптивную сетку и типографическую систему.

Спроектировать компоненты и проверить крайние случаи.

Собрать страницы из компонентов.

Описать правила в мини-дизайн-системе и подготовить передачу в разработку.

Что должно остаться после статьи

UX отвечает за логику сценариев, UI — за визуальную реализацию.

Адаптивные сетки и ограничения по типографике защищают читабельность.

Компоненты и состояния превращают макеты в систему.

Дизайн-система фиксирует правила и ускоряет масштабирование.

Доступность и контраст — часть профессионального качества, а не опция.