Слайдер
Это интерфейсный элемент, который позволяет последовательно просматривать несколько изображений или других материалов внутри одной области.
Буллет (маркер списка)
Это типографский знак (точка, галочка или другой символ), с помощью которого оформляют перечисления в тексте.
Что в видео-уроке:
В уроке разрабатываем блок с выполненными проектами. Собираем вертикальные карточки, добавляем фотослайдер, навигацию и видеоотзыв, настраиваем информацию об объекте и проверяем, как разные фотографии работают внутри единой системы.
Меняем направление композиции
Предыдущие блоки преимущественно вытянуты по горизонтали, поэтому в блоке выполненных проектов сохраняем вертикальный формат карточек. Такое чередование помогает избежать монотонности и добавить странице динамику.
Сам блок делаем тёмным, продолжаем крупные скругления предыдущих секций и сохраняем системный отступ около 150 px от границы до содержимого.
Пересобираем карточку на реальных данных
В прототипе карточка была заполнена условным текстом, поэтому на этапе дизайна лучше подставить конкретные данные: название проекта, город, площадь и этажность. С реальным содержанием проще оценивать композицию и понимать, какие элементы действительно нужны.
От отдельной кнопки «Смотреть фото» можно отказаться. Вместо неё фотографии объекта размещаем непосредственно в слайдере, чтобы пользователь сразу понимал, что карточку можно листать.
Повторяем знакомую структуру карточек
Чтобы не создавать новый тип карточки с нуля, часть решений берём из блока типовых проектов: название, характеристики и кнопку оформляем в уже знакомой системе.
При этом карточки не становятся одинаковыми. Здесь добавляется крупный фотослайдер и видеоотзыв, поэтому структура отличается функционально, но визуально остаётся частью того же сайта.
Собираем навигацию слайдера
Для слайдера создаём две стрелки и ряд небольших буллетов. Активный элемент выделяем сильнее, а остальные делаем спокойнее.
Навигацию сначала пробуем разместить на отдельной плашке, но она добавляет лишний визуальный шум. Более минималистично элементы смотрятся непосредственно на фотографии. Если фон мешает читаемости, можно добавить локальный линейный градиент.
При этом не обязательно размещать всю навигацию строго по центру. Смещение в угол помогает создать дополнительную якорную точку и делает композицию менее предсказуемой.
Учитываем скругления вложенных элементов
Если внутри большой скруглённой формы находится ещё одна скруглённая плашка, одинаковый радиус у обеих фигур визуально создаёт неравномерный зазор в углах.
Поэтому радиус внутренней фигуры нужно уменьшать. Например, при внешнем скруглении около 20 px внутреннее может находиться примерно в диапазоне 10–15 px. Итоговое значение лучше дополнительно проверять визуально — задача не в математической идентичности, а в равномерном восприятии расстояния.
Видеоотзыв делаем отдельным действием
Кнопку «Видеоотзыв» оставляем залитой терракотовым цветом и добавляем небольшой треугольник Play. Иконку помещаем внутрь Auto Layout вместе с текстом и настраиваем расстояние так, чтобы они воспринимались одной группой.
Важно следить за внутренними и внешними отступами: расстояние между текстом и иконкой не должно быть больше пространства вокруг всей группы.
Выстраиваем характеристики объекта
Локацию, площадь и этажность можно оформить отдельными колонками с тонкими разделителями. Такой приём уже встречался в предыдущих блоках, поэтому он помогает сохранить ритм сайта.
Карточку проверяем на разных вариантах композиции и в итоге выбираем тот, который лучше повторяет систему типовых проектов. Это позволяет не придумывать новую стилистику для каждого блока.
Проверяем карточки на разных фотографиях
После настройки одной карточки дублируем её через Auto Layout и Wrap и создаём остальные проекты. Текстовые данные пока можно повторить, но изображения обязательно лучше использовать разные.
Так сразу становится видно, как система работает на светлых, тёмных, дневных и вечерних фотографиях. Кадры дополнительно масштабируем и кадрируем, чтобы дома воспринимались примерно равновесно.
Если навигация теряется на фотографии, можно использовать лёгкое затемнение. При этом градиент лучше подбирать под сам снимок: на тёмном кадре использовать тёмный оттенок, а на светлом небе — близкий к нему цвет, чтобы обработка не выглядела искусственно.
Сохраняем систему, но не копируем блоки буквально
В итоговом варианте карточки продолжают типографику, цвета, скругления, кнопки и разделители из предыдущих секций. При этом вертикальная композиция, фотослайдер и видеоотзыв создают новый ритм.
Так блок отличается от соседних по структуре, но не выпадает из общей стилистики лендинга.
