Информативный блок об услугах компании. Блок 3

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

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

Это способ объединять, вычитать или пересекать векторные фигуры для получения новой формы.

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

Третий блок «Дома с гарантией» переводим во Frame, убираем элементы прототипа, которые больше не нужны, и сначала продолжаем тёмный фон предыдущей секции. Текст переводим в белый цвет и смотрим, насколько хорошо новый блок работает вместе с уже готовой частью лендинга.

На этом этапе решение ещё не считается окончательным. Сначала важно собрать несколько вариантов и только после сравнения определить лучший.

В исходной типографике H2 имеет размер 40 px, а подзаголовки — около 30 px, поэтому разница между ними воспринимается недостаточно явно. Чтобы усилить контраст, заголовок блока увеличиваем примерно до 50 px и проверяем вариант с капслоком.

Размер H2 при этом не должен становиться заметно крупнее H1 главного экрана. Важно сохранить общую иерархию страницы, а не усиливать каждый следующий блок независимо от остальных.

Четыре преимущества можно расположить горизонтально, вертикально или двумя элементами в ряд. Горизонтальная структура выглядит интересно, но из-за разной длины текста блоки получаются неодинаковыми и требуют дополнительной редакторской работы.

Поэтому варианты не нужно сразу доводить до идеала. Достаточно быстро собрать композицию, оценить её и перейти к следующей идее, если она кажется перспективнее.

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

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

Чтобы изображение органично соединялось с тёмным фоном, дом решаем вырезать из фотографии. Для простой архитектурной формы такую обтравку можно выполнить непосредственно в Figma.

Инструментом Pen создаём векторный контур по границам объекта. Небольшие погрешности допустимы, главное — не оставлять заметных участков исходного фона.

После построения контура переводим его из Stroke в Fill, располагаем под фотографией и выделяем оба слоя. Затем применяем функцию Use as Mask.

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

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

Для этого участка создаём дополнительную фигуру и вычитаем её из основной маски через булевую операцию Subtract Selection. Затем отдельно маскируем участок стекла и настраиваем его прозрачность, экспозицию и свет, чтобы через него естественно просматривался тёмный фон.

Стекло не должно превращаться в полностью чёрную область. На нём важно сохранить небольшое отражение и свет от солнца, иначе изображение потеряет реалистичность.

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

Во втором блоке уже задано расстояние около 150 px от границы до содержимого. Эту систему продолжаем дальше, но учитываем, что между двумя тёмными секциями визуальная граница практически исчезает.

Если механически добавить ещё по 150 px с каждой стороны, появляется слишком большое пустое пространство. Это пример ситуации, когда систему можно немного скорректировать ради визуального баланса.

Жирные подзаголовки начинают выбиваться из лёгкой типографики проекта. Если убрать Bold и оставить Regular, они, наоборот, становятся слишком похожими на обычный наборный текст.

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

Для преимуществ пробуем добавить иконки из Flaticon. Сначала используются более строгие линейные варианты, но их острые формы плохо сочетаются со скруглёнными кнопками и мягкими элементами сайта.

Лучше работают иконки с плавными линиями и скруглениями. Для смыслов используются понятные ассоциации: щит для надёжности, солнце для тепла, календарь с часами для скорости строительства и более сложная форма дома для архитектурного разнообразия.

Даже при одинаковом размере Frame разные символы имеют разный визуальный вес. Поэтому часть иконок приходится уменьшать или увеличивать относительно остальных.

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

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

Вместо иконок можно использовать тонкие линии-разделители. Они помогают структурировать преимущества, но не создают дополнительного визуального шума.

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

Так разделители становятся ещё одним повторением акцентного цвета и поддерживают ритм лендинга. При этом линии не нужно растягивать на весь блок — достаточно использовать их локально между смысловыми группами.

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

Так создаётся мягкая тень без резкой границы. Изображение остаётся заметным, а текст получает спокойную область для чтения.

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

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

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

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

Перейти к следующему уроку