Презентация: figma.com/proto/YktKroZs0gvpZrRrNhHG1Q/7СЕТОК?page-id=110%3A65434&node-id=110-65769
Термин «композиционное проектирование» включает два слова: «композиция» и «проектирование». Композиция — это то, что состоит из нескольких элементов, а проектирование — процесс упрощения, когда дизайнер делит сложное на части. Композиционное проектирование — это подход и методы работы со сложным как с простым.
![](https://awdee.ru/wp-content/uploads/2023/04/1-1024x574.png)
Сетка — способ организации пространства формата. Формат (физический или интерактивный) определяет то, как дизайнер организует пространство.
![](https://awdee.ru/wp-content/uploads/2023/04/2-1024x577.png)
Интерактивный формат отличается от физического тем, что он обладает двойственной природой. С одной стороны, лонгрид — физический формат, потому что с экраном можно физически взаимодействовать. С другой стороны, лонгрид существует в виде длинной ленты, которую пользователи скроллят, то есть это интерактивное пространство.
![](https://awdee.ru/wp-content/uploads/2023/04/3-1024x577.png)
Об экране следует думать прежде всего, как о формате. Стоит помнить, что чем ближе объект находится к краям, тем он более неподвижный, он держится за края формата, и чем ближе к центру он расположен, тем он более динамичный.
![](https://awdee.ru/wp-content/uploads/2023/04/4-1024x614.png)
Лонгрид состоит из вертикали и горизонтали. Горизонталь мы видим сразу, то есть мы знаем её длину, понимаем, где её начало и конец. С горизонталью можно работать ритмически: разделить на две, три, десять или сколько удобно колонок. Горизонтальная линия — ритмическая организация лонгрида.
![](https://awdee.ru/wp-content/uploads/2023/04/5-1024x578.png)
Проектирование сетки начинается с зонирования. Зонирование — разделение на функциональные или смысловые зоны. Например, есть картинки и текст. Соответственно можно разделить экран на две части: слева расположить картинки, а справа — текст. Если половина экрана для текста — слишком много, можно разделить экран на три части и отдать одну колонку под текст, а две другие под картинки.
![](https://awdee.ru/wp-content/uploads/2023/04/6-1024x577.png)
Следующий этап — детализация. Детализация — разделение колонки на несколько частей, чтобы внутри сетки получилась ещё одна сетка.
![](https://awdee.ru/wp-content/uploads/2023/04/7-1024x577.png)
Вертикаль — таймлайн, который последовательно, по мере прокрутки отображает цепочку событий/блоков лонгрида. Вертикаль отвечает за скорость восприятия контента пользователем. Поскольку человек скроллит при просмотре лонгрида, то композиция в интерактивном формате стремится к простоте. Сложная композиция в движении просто развалится.
![](https://awdee.ru/wp-content/uploads/2023/04/8-1024x575.png)
Модульный лонгрид — множество логических или функциональных блоков с практически одинаковой степенью важности, которые дизайнер распределяет по всей ширине формата.
![](https://awdee.ru/wp-content/uploads/2023/04/9-1024x575.png)
Поскольку в модульном лонгриде нет визуальной иерархии, дизайнер расставляет небольшие акценты, чтобы пользователь не потерялся в пространстве и обратил внимание на отдельные модули.
![](https://awdee.ru/wp-content/uploads/2023/04/10-1024x576.png)
7+ вариантов сеток для интерактивного формата
Сетка «Панелька»
Озон, Яндекс используют такую сетку на своих сайтах.
![](https://awdee.ru/wp-content/uploads/2023/04/11-1024x575.png)
Есть три вариации сетки «Панелька».
Первый вариант «Панельки»: максимальное подобие модулей.
![](https://awdee.ru/wp-content/uploads/2023/04/12-1024x576.png)
Второй вариант «Панельки»: появление специального блока, который занимает в два раза больше места, чем все остальные. Из-за того, что он крупнее, пользователь обратит на него внимание в первую очередь.
![](https://awdee.ru/wp-content/uploads/2023/04/13-1024x577.png)
Третий вариант «Панельки»: ритмический рисунок, которые будет получаться за счёт использования изображений любых пропорций.
![](https://awdee.ru/wp-content/uploads/2023/04/14-1-1024x576.png)
Примеры использования сетки «Панелька»:
![](https://awdee.ru/wp-content/uploads/2023/04/15-1024x576.png)
![](https://awdee.ru/wp-content/uploads/2023/04/16-1024x584.png)
Сетка «Расчёска»
![](https://awdee.ru/wp-content/uploads/2023/04/17-1024x575.png)
Есть четыре вариации сетки «Расчёска».
Первый вариант: ввод специального блока, который больше по вертикали, чем остальные. Он будет привлекать к себе больше внимания на фоне остальных типовых блоков.
![](https://awdee.ru/wp-content/uploads/2023/04/18-1024x577.png)
Второй вариант «Расчёски»: высота модуля будет зависеть от длины текста и высоты самой картинки.
![](https://awdee.ru/wp-content/uploads/2023/04/19-1024x576.png)
Третий вариант «Расчёски»: такая сетка создаёт орнаментальность, то есть работает против однообразия и ровности.
![](https://awdee.ru/wp-content/uploads/2023/04/20-1024x577.png)
Четвёртый вариант «Расчёски»: расчёска сверху, когда линия выравнивания модулей находится снизу.
![](https://awdee.ru/wp-content/uploads/2023/04/21-1024x576.png)
Примеры использования сетки «Расчёска»:
![](https://awdee.ru/wp-content/uploads/2023/04/22-1024x573.png)
![](https://awdee.ru/wp-content/uploads/2023/04/23-1024x576.png)
![](https://awdee.ru/wp-content/uploads/2023/04/24-1024x575.png)
![](https://awdee.ru/wp-content/uploads/2023/04/25-1024x576.png)
![](https://awdee.ru/wp-content/uploads/2023/04/26-1024x575.png)
Сетка «Смещение» или «Лесенка»
![](https://awdee.ru/wp-content/uploads/2023/04/27-1024x577.png)
Есть две вариации сетки «Лесенка».
Первый вариант «Лесенки»: строка делится на две, то есть получается два этажа в строке и 6 модулей на 5 колонок. При этом происходит смещение массы слева направо.
![](https://awdee.ru/wp-content/uploads/2023/04/28-1024x577.png)
Пример использования первого варианта сетки «Лесенка»:
![](https://awdee.ru/wp-content/uploads/2023/04/29-1024x580.png)
Второй вариант «Лесенки»: Пользователь просматривает лонгрид по диагонали. Это соответствует естественному движению взгляда: слева направо, сверху вниз. В данном случае диагональ усиливает дизайн, делает его более комфортным и соответствующим паттерну поведения, которое использует читатель.
![](https://awdee.ru/wp-content/uploads/2023/04/30-1024x587.png)
Пример использования второго варианта сетки «Лесенка»:
![](https://awdee.ru/wp-content/uploads/2023/04/31-1024x576.png)
Сетка «Резинка»
В данном случае общая ширина модулей остаётся одинаковой, но по мере движения сверху вниз меняется количество модулей в строке. Если количество модулей уменьшается, то появляется дополнительное пространство, которое используется для межколонников. Такая сетка помогает бороться с эффектом ослепления и усталости пользователя, если он долго просматривает лонгрид.
![](https://awdee.ru/wp-content/uploads/2023/04/32-1024x576.png)
Примеры использования сетки «Резинка»:
![](https://awdee.ru/wp-content/uploads/2023/04/34-1024x577.png)
![](https://awdee.ru/wp-content/uploads/2023/04/35-1024x575.png)
![](https://awdee.ru/wp-content/uploads/2023/04/33-1024x575.png)
Сетка «Колонная»
Она включает два типа модулей: обычный/типовой и специальный блок во всю ширину колонки. Такой вариант позволяет придать сетке неравномерность. Преимущество такой сетки: можно размещать изображения с любыми пропорциями.
![](https://awdee.ru/wp-content/uploads/2023/04/36-1024x575.png)
Примеры использования сетки «Колонная»:
![](https://awdee.ru/wp-content/uploads/2023/04/39-1024x576.png)
![](https://awdee.ru/wp-content/uploads/2023/04/37-1024x575.png)
![](https://awdee.ru/wp-content/uploads/2023/04/38-1024x575.png)
Сетка «Расчёска (горизонтальная)»
В этом варианте ширина модуля произвольная и зависит от ширины картинки. В результате образуется свободный край и ритмичность.
![](https://awdee.ru/wp-content/uploads/2023/04/40-1024x576.png)
Примеры использования сетки «Расчёска (горизонтальная)»:
![](https://awdee.ru/wp-content/uploads/2023/04/41-1024x576.png)
![](https://awdee.ru/wp-content/uploads/2023/04/42-1024x575.png)
![](https://awdee.ru/wp-content/uploads/2023/04/43-1024x578.png)
Сетка «Алгоритмическая»
Пластичная, сложная сетка, которая подходит для Fashion и архитектурной тематики, сайтов для музеев, дизайн-агентств. Она не содержит колонок, вместо них есть вертикальные линии, на которые дизайнер подвешивает модули.
![](https://awdee.ru/wp-content/uploads/2023/04/44-1024x576.png)
Примеры использования сетки «Алгоритмическая»:
![](https://awdee.ru/wp-content/uploads/2023/04/46-1024x577.png)
![](https://awdee.ru/wp-content/uploads/2023/04/47-1024x576.png)
![](https://awdee.ru/wp-content/uploads/2023/04/48-1024x576.png)
Обсуждение
Похожее
9 трендов в профессиональной жизни творческих людей
5 советов начинающему UX/UI-дизайнеру
«Искусство Германа Цапфа» — фильм о задачах и техниках каллиграфии в русской озвучке