Радиальная заливка
Это тип градиентной заливки, при котором цвет изменяется от центральной точки к краям. Она позволяет локально проявлять или затемнять определённую область изображения.
Что в видео-уроке:
В уроке разрабатываем блок о компании с фактами, фотографией генерального директора, цитатой и кнопкой запуска видео. Настраиваем композицию, радиальную заливку, цветовые акценты и расстояния и адаптируем найденный референс под стилистику проекта.
Референс можно адаптировать под свой контент
В прототипе блок состоял из фактов о компании, отдельного проморолика и цитаты генерального директора. Во время работы с мудборда нашёлся референс, который позволил объединить эту информацию в более цельную композицию.
Референс не нужно копировать буквально. Мы сохраняем сам принцип: крупная фотография человека становится центральным визуалом, а вокруг неё располагаются факты, цитата и элемент запуска видео.
Факты о компании распределяем по ширине блока
Текстовую часть приводим к уже существующей типографической системе и собираем через Auto Layout. Крупные значения можно выделить терракотовым цветом, а поясняющий текст оставить нейтральным.
Важно не создавать лишние разделители только ради заполнения пространства. Если информация хорошо считывается благодаря расстояниям и выравниванию, дополнительные элементы не нужны.
Фотография становится главным визуальным акцентом
Для блока выбираем представительную фотографию генерального директора. В данном случае важна не только внешность человека, но и сама поза: открытые руки и естественное положение выглядят интереснее стандартного портрета со скрещёнными руками.
Фотографию размещаем крупно и кадрируем так, чтобы сохранить важные части фигуры. Положение человека можно немного смещать относительно центра, освобождая пространство под текст.
Радиальная заливка помогает соединить фотографию с фоном
Чтобы фотография плавно переходила в тёмный фон карточки, поверх неё добавляем радиальную заливку. В центре изображение остаётся видимым, а к краям постепенно растворяется в цвете блока.
Оттенок градиента лучше брать из уже используемого фонового стиля. Дополнительными точками можно контролировать площадь проявленной фотографии и убрать заметные границы.
Цветокоррекцию делаем минимальными средствами
При изменении параметра «Temperature» фотография начала уходить в желтоватый оттенок, особенно это стало заметно на рубашке. Поэтому от такой коррекции лучше отказаться и аккуратно работать с параметром «Saturation».
Если встроенных инструментов Figma недостаточно, можно перейти к более сложной обработке в Photoshop или через плагины. Но в рамках этого урока задача — получить приемлемый результат минимальными средствами.
Распределяем текст вокруг фотографии
Имя и должность руководителя, цитату и кнопку Play нужно расположить так, чтобы они не перекрывали человека и не создавали слишком плотную текстовую массу.
Основные отступы берём из уже сформированной системы проекта — около 60–80 px внутри крупных карточек. Но окончательное положение проверяем визуально: одинаковые математические расстояния не всегда дают одинаковый баланс из-за разного визуального веса элементов.
Кнопку Play можно дополнительно смещать оптически, если одна сторона композиции кажется тяжелее другой.
Цветовые акценты помогают разделить информацию
Белый текст на тёмном фоне хорошо читается, но если его становится много, композиция выглядит слишком однообразно. Поэтому отдельные элементы можно выделить терракотовым цветом.
Например, акцент можно использовать в названии компании, должности руководителя или кнопке Play. Главное — не окрашивать всё сразу, а оставить цвет именно как средство иерархии.
Повторяем разделители из предыдущих блоков
В блоке снова проверяем тонкие вертикальные линии, которые уже использовались выше. Здесь они помогают разделить факты о компании и поддерживают ритм всего лендинга.
Разделители оставляем нейтральными серыми, чтобы они не конкурировали с терракотовыми акцентами. Лучше использовать их на всю высоту смысловой группы, если такой вариант выглядит более собранно.
Меняем фон только после сборки композиции
После завершения карточки можно проверить, как весь блок выглядит на белом и светло-сером фоне. Серый вариант помогает отделить секцию от соседних блоков и одновременно продолжает уже используемую палитру сайта.
При этом важно сохранить системный отступ около 150 px между границей блока и содержимым.
Блок становится проще, но содержательнее
Вместо отдельной большой плашки с видео получилась единая композиция, где одновременно присутствуют фотография руководителя, цитата, факты о компании и кнопка запуска проморолика.
Так блок выглядит легче и интереснее, но при этом не выпадает из общего дизайна. Его связывают с предыдущими экранами повторяющиеся цвета, типографика, расстояния и графические элементы.
