Макет дизайна¶
Макет дизайна — это визуальная компоновка элементов будущего продукта (интерфейса, страницы, печатного издания, рекламного макета), определяющая их расположение, размеры, иерархию и взаимосвязи. Макет является промежуточным артефактом дизайн-процесса: он фиксирует структуру и композицию до детальной проработки графики, типографики и интерактивности. В русскоязычной практике термин «макет» употребляется шире английского layout и покрывает как цифровые, так и печатные носители.
¶Назначение и роль в дизайн-процессе
Макет решает несколько задач одновременно:
- Структурирование информации — определяет, какие блоки существуют и в каком порядке они воспринимаются.
- Композиционный баланс — задаёт ритм, выравнивание, поля и отступы.
- Прототипирование — позволяет оценить сценарии использования до начала визуальной разработки.
- Коммуникация — служит общим языком между дизайнером, заказчиком, разработчиками и копирайтером.
В продуктовой разработке макет обычно проходит путь от грубого наброска (скетча) к кликабельному прототипу и затем к финальному макету с реальным контентом.
¶Виды макетов
¶По стадии проработки
| Вид | Описание |
|---|---|
| Скетч (wireframe) | Быстрый набросок структуры, часто от руки; без цвета и графики |
| Прототип | Кликабельная модель с базовой интерактивностью |
| Визуальный макет | Полноценная графика: цвет, шрифты, иконки, изображения |
| Адаптивный макет | Набор макетов для разных размеров экрана или форматов |
¶По назначению
- Веб-макет — страница или её фрагмент для сайта или веб-приложения.
- Мобильный макет — экран приложения для смартфона или планшета.
- Печатный макет — вёрстка журнала, книги, буклета, упаковки, плаката.
- Рекламный макет — макет баннера, афиши, наружной рекламы.
- Презентационный макет — слайды, инфографика, отчёт.
¶Основные принципы построения
¶Сетка
Сетка (grid) — базовый инструмент макетирования. Она задаёт колонки, строки и модульные поля, к которым выравниваются все элементы. В веб-дизайне распространены 12-колоночные сетки, в вёрстке печатных изданий — модульные сетки, разработанные ещё в швейцарской школе графического дизайна (Йозеф Мюллер-Брокманн, «Сетка в графике», 1981).
¶Иерархия
Макет должен визуально выделять главное: заголовки крупнее подзаголовков, ключевые элементы контрастнее фоновых. Иерархия строится через размер, вес шрифта, цвет и размещение.
¶Выравнивание и ритм
Элементы выравниваются по общим осям, а отступы между ними соблюдают единую шкалу (например, 4, 8, 12, 16, 24 пикселя). Это создаёт ощущение порядка и упрощает восприятие.
¶Белое пространство
Пустые поля не являются «недоработкой»: они разделяют смысловые блоки и снижают когнитивную нагрузку.
¶Инструменты
Для создания цифровых макетов используются:
- Figma — облачный редактор, стандарт индустрии с конца 2010-х; поддерживает совместную работу и компоненты.
- Sketch — векторный редактор для macOS, один из первых инструментов веб-дизайна.
- Adobe XD — инструмент Adobe для интерфейсов и прототипов.
- Adobe InDesign — промышленный стандарт вёрстки печатных изданий.
- Photoshop и Illustrator — для растровой и векторной графики, часто используются для отдельных элементов макета.
Для прототипирования также применяются Figma, InVision, Axure RP. Для набросков — бумага, iPad с Procreate или Miro.
¶Типографика и вёрстка
В печатном макете важную роль играют кегль, интерлиньяж, выключка (выравнивание по ширине, по левому краю, по центру), сноски и колонцифры. В цифровом макете — размер шрифта в пикселях, длина строки (рекомендуется 45–75 знаков), контраст текста с фоном (нормы WCAG).
¶Адаптивность
Современные макеты проектируются сразу для нескольких брейкпоинтов: мобильный, планшетный, десктопный. Принцип mobile-first предполагает, что базовый макет строится для узкого экрана, а затем расширяется.
¶Типичные ошибки
- Перегруженность элементами и отсутствие иерархии.
- Несогласованные отступы и размеры.
- Использование слишком большого числа шрифтов.
- Игнорирование адаптивности.
- Размещение контента без учёта реальных данных (макет с «рыбным» текстом не показывает поведение длинных заголовков).
¶Историческая справка
Понятие «макет» пришло в русский язык из полиграфии: в типографиях макетом называли раскладку набора и иллюстраций на вёрсточной кассе до печати. С развитием компьютерной вёрстки (DTP) в 1980-х — 1990-х годах термин распространился на цифровую сферу, а с появлением веб-дизайна и мобильных приложений приобрёл нынешнее значение.
¶Источники
- Мюллер-Брокманн Й. Сетка в графике. — 1981.
- Круг Д. Веб-типографика в деталях. — 2014.
- Гарретт Дж. Дж. Элементы пользовательского опыта. — 2003.
- Норман Д. Дизайн повседневных вещей. — 1988.
- Статьи и документация Figma, Adobe InDesign.