Футер (подвал)
Это нижняя завершающая часть сайта, в которой обычно располагаются контакты, ссылки, логотип, копирайт и другая дополнительная информация.
Режим наложения
Это способ взаимодействия одного графического слоя с расположенными под ним слоями, который изменяет принцип смешивания их цветов и яркости.
Что в видео-уроке:
В практическом уроке разрабатываем финальный блок с адресами выставочных домов и картой, а затем оформляем футер. Работаем с карточками, фотографиями, контактной информацией, скруглениями и вырезанной формой для карты. В завершение проверяем весь лендинг, корректируем отдельные элементы и приводим фотографии к более единой цветовой стилистике.
Собираем финальный блок с выставочными домами
Последнюю крупную секцию оформляем на тёмном фоне, чтобы завершить лендинг выразительным блоком. Внутри располагаем три карточки выставочных домов и карту. Сохраняем системный отступ около 150 px и продолжаем уже сформированную композицию сайта.
Карточки строим по знакомому принципу: фотография сверху, текстовая часть снизу. Используем те же скругления и расстояния, что и в предыдущих карточках, чтобы не создавать новый визуальный язык в самом конце страницы.
Для фотографий подбираем небольшие дома, которые правдоподобно воспринимаются как выставочные объекты. На этапе дизайна допустимо временно использовать подходящие изображения, а позже заменить их на финальные.
Контактную информацию оформляем без лишнего декора
В карточке указываем название дома, адрес, телефон и режим работы. Формат телефона сохраняем таким же, как на главном экране, чтобы одна и та же информация на сайте оформлялась единообразно.
Сначала можно рассмотреть небольшие иконки для адреса, телефона и времени работы, но в данном случае они начинают перегружать карточки. Поэтому лучше повторить небольшие круглые маркеры, уже использованные выше. Они выполняют декоративную функцию и не создают новую систему иконок только ради одного блока.
Карту достаточно показать скриншотом
На готовом сайте карта будет интерактивной, но в дизайн-макете достаточно показать её предполагаемый внешний вид. Для этого можно открыть нужный адрес в Яндекс Картах, настроить масштаб и вставить скриншот в макет.
Если цветная карта создаёт слишком много визуального шума рядом с фотографиями, её можно немного приглушить. При этом важно сохранить узнаваемость интерфейса и расположение основного маркера.
Светлую карточку с картой отделяем от изображения тонкой светло-серой обводкой. Она помогает обозначить границу, не создавая слишком заметного контура.
Добавляем характерную форму через вычитание
Чтобы карта не выглядела обычным прямоугольником, в одном из углов создаём вырез под текстовый блок. Для этого поверх основной фигуры размещаем дополнительный прямоугольник и используем параметр «Subtract Selection».
После вычитания настраиваем скругления полученной формы. Здесь важно учитывать оптическую компенсацию: одинаковые значения радиуса на разных участках не всегда воспринимаются одинаково. В отдельных углах радиус можно увеличить или уменьшить, чтобы расстояния визуально выглядели равномерными.
Так в блоке появляется новый композиционный приём, но он не нарушает стилистику, поскольку строится на уже знакомых скруглениях и простых геометрических формах.
Завершаем страницу тёмным футером
После блока с картой добавляем футер и также делаем его тёмным. Такое завершение поддерживает последний экран и визуально замыкает страницу.
При этом оттенок футера необязательно должен полностью совпадать с предыдущим блоком. Небольшое отличие помогает показать границу между секциями. Дополнительно можно использовать тонкий сепаратор.
Длинная горизонтальная линия даже при толщине 1 px имеет заметный визуальный вес, поэтому её лучше приглушить тёмно-серым цветом. Копирайт, политику конфиденциальности и логотип также можно сделать менее контрастными, оставив главный акцент на основной контактной информации.
После завершения проверяем весь лендинг
Когда все блоки собраны, важно пройти страницу от начала до конца и посмотреть на неё уже как на единый проект. Проверяем, все ли разделы из прототипа присутствуют, сохраняются ли расстояния, цвета, типографика и логика повторяющихся элементов.
На этом этапе можно заметить детали, которые раньше не бросались в глаза. Например, в поле прикрепления проекта появляется иконка скрепки, поскольку его функция отличается от обычного текстового поля.
В блоке типовых проектов текстовую ссылку «Все проекты» также можно превратить в более заметную светло-серую плашку и переименовать в «Ещё проекты». Так действие логичнее воспринимается после просмотра уже показанных карточек и одновременно заполняет слишком пустую область.
Приводим фотографии к одной стилистике
После сборки страницы становится особенно заметно, если отдельные изображения слишком яркие или насыщенные по сравнению с главным экраном.
Для выравнивания можно уменьшить значение параметров «Saturation» и «Contrast», немного скорректировать «Exposure» или добавить поверх изображения полупрозрачный серый слой. Через режимы наложения можно проверить разные способы обработки, но эффект лучше использовать умеренно.
Основной ориентир — визуальный характер первых экранов. Если там фотографии приглушённые, слишком яркие и сочные изображения в середине страницы будут выпадать из общей системы.
Финальная проверка важнее добавления новых элементов
На последнем этапе задача уже не в том, чтобы придумать больше декора, а в том, чтобы убрать случайные несоответствия. Проверяем фотографии, кнопки, расстояния, формы, открытые состояния FAQ, карту, футер и соответствие текстов прототипу.
Если все элементы поддерживают одну типографику, палитру, систему скруглений и повторяющиеся композиционные приёмы, лендинг можно считать завершённым. Даже единичное нестандартное решение, например вырезанная форма карты, не разрушает систему, если остальные характеристики продолжают общий визуальный язык проекта.
