Компоновка (layout)

Компоновка описывает две взаимосвязанные стороны деятельности:

• Процесс — пошаговая работа дизайнера или верстальщика по размещению элементов на странице или экране.
• Результат — готовый макет, который поступает в производство (печать, публикацию в сети, загрузку в приложение).

Ключевые задачи компоновки:

1. передать сообщение максимально понятно и быстро^[3]
2. направить взгляд пользователя по иерархии информации^[4]
3. создать цельный визуальный образ, соответствующий стилю бренда^[5]
4. обеспечить техническую корректность вывода на печать или отображения на экране^[6]

• Текст (типографика) — заголовки, подзаголовки, основной текст, подписи; важны шрифт, кегль, межстрочные и межбуквенные интервалы^[4].
• Изображения и иллюстрации — фотографии, иконки, графики, усиливающие смысл и вызывающие эмоции^[7].
• Формы и линии — геометрические или органические элементы, задающие ритм и направляющие взгляд^[8].
• Цвет — формирует эмоциональный фон и выделяет акценты^[9].
• Текстура — добавляет объём и тактильные ассоциации.
• Белое пространство — незаполнённые области, обеспечивающие дыхание макета и повыша­ющую читаемость^[3].
• Логотип и фирменный стиль — поддерживают узнаваемость бренда^[5].

• Баланс (симметричный или асимметричный)
• Контраст
• Иерархия
• Пропорции и масштаб
• Единство и согласованность
• Ритм и повторение
• Правило третей и золотое сечение
• Направление взгляда^[10]

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

Определяются цели, аудитория, формат, технические требования и комплект исходных данных (тексты, изображения, бренд-гид)^[11].

Дизайнер формирует визуальную идею: цветовую схему, шрифтовую пару, сетку и предварительное расположение ключевых блоков^[12].

Тексты форматируются, изображения подгоняются под сетку, проверяется единый стиль и акцидентные элементы^[13].

Проверяются орфография, типографика, согласованность стилей и расположение элементов^[13].

Создаются вылеты, кривятся шрифты, формируется цветоделение и спуск полос^[6].

Макет утверждается заказчиком и отправляется в печать или публикуется в цифровом виде^[11].

• Улучшается читаемость и восприятие информации^[1].
• Формируется профессиональный и эстетичный облик продукта^[3].
• Позволяет задавать визуальную иерархию и акценты^[4].
• Усиливает бренд-идентичность при последовательном применении^[5].
• Экономит пространство за счёт грамотного распределения элементов^[8].

• Требует времени и высокой квалификации специалиста^[12].
• Строгие сетки могут ограничивать креативность^[10].
• Неудачный макет ухудшает восприятие и может оттолкнуть аудиторию^[14].
• Адаптация под разные носители увеличивает трудозатраты^[15].

• Графический дизайн — плакаты, фирменные бланки, упаковка^[16].
• Полиграфия — журналы, книги, каталоги, флаеры^[14].
• Веб-дизайн — лендинги, корпоративные сайты, блоги^[15].
• UI/UX — интерфейсы мобильных и веб-приложений, панелей управления^[17].
• Дизайн интерьеров — планировки и презентационные материалы проектов^[18].

• Adobe InDesign — основная программа для многостраничных изданий^[19].
• Adobe Illustrator — создание векторных графических элементов^[20].
• Adobe Photoshop — работа с растровой графикой и mock-up’ами^[21].
• CorelDRAW, QuarkXPress, Scribus, Affinity Publisher, Microsoft Publisher — альтернативные решения^[22].

• Figma, Sketch, Adobe XD — создание макетов и интерактивных прототипов^[23].
• InVision, Balsamiq, Axure RP, Framer, Principle — прототипирование и анимация^[24].
• Webflow и Tilda — low-code конструкторы сайтов^[25].
• Mockplus, UXPin, ProtoPie, Zeplin — поддержка командной работы и handoff-процессов^[26].