Дизайн — это не просто «чтобы красиво». Это чтобы смотрелось, читалось и вело к цели. А начинается всё с композиции. Причём не абстрактной, а конкретной — внутренней и внешней. Разберём, как они работают и как не запороть макет.

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

· Заголовок

· Подзаголовок

· Фото/иконка

· Кнопка

· Цена/CTA

Внутренняя композиция = иерархия + отступы + порядок.

· Карточки товара

· Баннеры

· Обложки постов

· Превью курсов/видео

· Любой контентный блок, где есть текст и визуал

· Один главный акцент. Остальное — вторично. Например, цена или заголовок — главное. Иконка или фото — дополняет.

· Равномерные отступы. Не должно быть ощущения, что один элемент «прилип», а другой «плавает».

· Визуальное выравнивание. Даже если текст по центру, он должен визуально «стоять» уверенно.

· Баланс. Не лепи всё в один угол. Дай воздуху быть.

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

Примеры блоков:

· Хедер

· Обложка лендинга

· Секция с УТП

· Слайдер

· Футер

Внешняя композиция = сетка + структура + белое пространство.

· Лендинги

· Сайты

· Презентации

· Построение логики ленты в соцсетях (например, в Telegram или Instagram)

· Сетка — святое. 12-колоночная, модульная — не важно. Главное, чтобы всё ложилось по направляющим.

· Оптический баланс. Если фото влево — текст вправо. Если жирный блок сверху — снизу нужен визуальный противовес.

· Зоны внимания. Пользователь сканирует по шаблонам (F-pattern, Z-pattern). Учитывай это.

·  Повтор — твой якорь. Заголовки одного размера, одинаковые карточки, ритм — создают порядок.

❌ Внутри блока: текст прилип к краям, кнопка висит отдельно, нет логики, где главный акцент

❌ Внешне: блоки пляшут вне сетки, слишком плотная посадка, элементы разного масштаба

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

Работают они вместе, как скелет и мышцы. Хочешь уверенный дизайн — качай оба.