Поле ввода
Это элемент интерфейса, в который пользователь вводит данные, например имя, телефон или другую информацию для отправки формы.
Что в видео-уроке:
В уроке разрабатываем блок с двумя формами заявки и продолжаем визуальную систему сайта. Настраиваем композицию, поля ввода, кнопки и расстояния, подбираем изображение и повторяем уже знакомые формы и графические приёмы.
Разделяем два сценария внутри одного блока
В прототипе в одном блоке находятся сразу две формы. Первая предназначена для пользователей, которые ещё не выбрали подходящий дом и хотят получить консультацию. Вторая — для тех, у кого уже есть готовый проект и необходимо получить расчёт.
У обеих форм одна конечная задача — получить заявку, но сценарии отличаются. Поэтому их можно объединить в одной секции, сохранив визуальное разделение.
Продолжаем ритм предыдущих блоков
Для секции выбираем тёмный фон и повторяем крупные скругления по 100 px, которые уже использовались выше. Это помогает связать новый экран с предыдущими и не вводить дополнительные значения ради одного блока.
Расстояние от границы секции до содержимого также сохраняем около 150 px. Если точное значение нужно скорректировать, координаты удобно менять прямо математическими операциями в панели Figma.
Первую форму строим на знакомой композиции
Для верхней формы повторяем принцип карточки с тёмной фотографией и градиентом. Но вместо обычного изображения дома подбираем визуал, связанный именно с проектированием: планами, чертежами или процессом работы над проектом.
Так фотография не просто заполняет пространство, а продолжает смысл текста «Разработаем проект с нуля».
Смысловые группы разделяем расстояниями
Заголовок с описанием образует одну группу, поля и кнопка — другую. Внутри связанных элементов расстояние должно быть меньше, чем между отдельными смысловыми группами.
Например, внутри формы можно использовать 10–20 px, а между крупными группами оставлять заметно больше пространства. Благодаря этому структура считывается без дополнительных разделителей.
Поля ввода должны продолжать систему кнопок
Размер, скругления и внутренние отступы полей лучше согласовывать с кнопкой. Если у кнопки используется радиус 7 px, такое же значение можно применить и к полям.
Высоту также желательно сделать близкой. Тогда элементы воспринимаются частью одного интерфейса, а не случайным набором разных форм.
Изображение подбираем прямо в макете
Чтобы быстро проверить фотографию, необязательно сразу скачивать её в полном качестве. Изображение можно скопировать из источника и вставить в Figma, оценить композицию и только после выбора загрузить качественную версию.
В данном случае сравниваются планы, ноутбуки, руки и разные сцены проектирования. Изображения с лишними деталями или неуместными ассоциациями отсеиваются, пока не находится более спокойный и подходящий вариант.
Вторую форму можно визуально связать с первой
Для второй части блока пробуем эффект небольшого наложения одной секции на другую. Такой же принцип уже используется в крупных блоках сайта, поэтому его повторение помогает сохранить ритм.
Верхняя форма остаётся тёмной, а нижняя становится светлой. При этом одинаковые расстояния и похожая композиция связывают их между собой.
Цвета полей подбираем под конкретный фон
Один серый оттенок не обязательно одинаково хорошо работает на тёмной и светлой подложке. Для светлой части формы можно добавить отдельный более подходящий серый стиль.
При этом количество оттенков нужно ограничивать. Если в проекте уже используется несколько серых цветов для разных задач, их достаточно переиспользовать дальше без постоянного добавления новых.
Повторяем линии вместо дополнительного декора
В светлой форме тестируем альтернативное оформление полей: вместо залитых плашек оставляем только нижнюю линию.
Такой вариант выглядит легче и одновременно повторяет графический приём с линиями, который уже встречался в предыдущих блоках. Повторение не обязательно должно появляться в каждой секции — достаточно использовать его там, где он действительно подходит.
Акцентные линии не должны спорить с кнопкой
Если рядом уже есть терракотовая кнопка и цветной текст, дополнительные терракотовые линии начинают создавать слишком много акцентов.
Поэтому линии переводим в нейтральный серый цвет. Они сохраняют функцию разделителей, но не конкурируют с главным CTA.
Простая композиция тоже может выглядеть выразительно
В этом блоке нет сложной обтравки или большого количества декоративных элементов. Основной эффект создаётся за счёт правильных расстояний, контраста тёмной и светлой частей, фотографии, акцентной кнопки и повторения знакомых форм.
Это хороший пример того, что выразительный дизайн не обязательно требует сложных приёмов. Если иерархия, ритм и система элементов уже выстроены, достаточно грамотно продолжить их в следующем блоке.
