Завершаем лендинг и создаём форму заказа звонка. Блок 10

Это всплывающее окно поверх основной страницы, которое используется, например, для формы заявки, заказа звонка или дополнительной информации.

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

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

Заключительный контентный блок делим на две равные части. С одной стороны размещаем контактную информацию, с другой — карту.

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

В контактной части размещаем адрес, режим работы, телефон и электронную почту. Верхний отступ сохраняем таким же, как в предыдущих блоках, — в рамках этого проекта 100 px.

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

Главное — сохранять единый стиль внутри самого блока. Если для адреса используется залитая иконка, остальные иконки контактов также должны быть залитыми.

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

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

Иконки превращаем в компоненты, а в самом блоке используем их экземпляры. Каждую пиктограмму объединяем с соответствующим текстом через Auto Layout.

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

Мастер-компоненты лучше хранить отдельно от рабочего макета, чтобы в самом лендинге оставались только используемые экземпляры.

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

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

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

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

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

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

После завершения лендинга оформляем форму «Заказать звонок». Для неё создаём отдельный Frame размером 1920×1080, соответствующий Full HD.

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

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

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

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

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

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

У поп-апа обязательно должен быть заметный способ закрытия. Даже если при разработке будет предусмотрено закрытие по клику за пределами формы, пользователь должен сразу видеть привычный крестик.

Крестик размещаем рядом с верхней границей формы, но не слишком далеко от неё. Он должен считываться как часть поп-апа и при этом не конкурировать с содержимым.

Цвет выбираем нейтральный и контрастный относительно затемнённого фона. В данном случае простой светлый крестик работает лучше дополнительного зелёного акцента.

Саму форму центрируем относительно экрана по её основной плашке, не включая крестик в расчёт центрального положения.

После создания контактов, футера и формы заказа звонка основной этап дизайна закончен.

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

Домашнее задание