Что в видео-уроке:
В уроке оформляем блок с этапами сотрудничества. Пробуем несколько вариантов расположения шести шагов, настраиваем нумерацию и Auto Layout, добавляем фотографию со строителями и добиваемся понятного направления чтения и цельной композиции.
Начинаем с общей композиции блока
Для блока «Этапы нашего сотрудничества» продолжаем светло-серую часть лендинга и сохраняем системный отступ около 150 px. Первоначальная идея — повторить принцип главного экрана: расположить текст на однотонном фоне, а фотографию плавно растворить в нём с помощью градиента.
Вместо очередной фотографии дома здесь лучше добавить людей и показать непосредственно процесс строительства. Это разнообразит визуальный ряд сайта, где до этого основными объектами были архитектура и фотография генерального директора.
Сначала проверяем несколько вариантов расположения
В блоке шесть этапов, поэтому пробуем разные структуры: один вертикальный список, три элемента в два ряда и два элемента в три ряда.
Вертикальный вариант быстро делает секцию слишком высокой. Пользователю приходится долго скроллить, чтобы увидеть весь процесс. Поэтому предпочтение отдаём более компактной структуре, в которой все этапы помещаются в пределах одного экрана.
Важно не останавливаться на первом приемлемом варианте. Иногда быстрее собрать две-три черновые композиции и сравнить их, чем долго пытаться довести одну.
Нумерация помогает показать последовательность
Вместо иконок для каждого этапа используем цифры. Такой способ проще и точнее передаёт последовательность: знакомство, встреча, договор, заезд бригады, строительство и сдача объекта.
Номер помещаем в контурный круг. При этом цифра не должна конкурировать с названием этапа, поэтому её размер и визуальный вес уменьшаем. Главным остаётся H3, а номер лишь помогает ориентироваться в последовательности.
Собираем каждый шаг как отдельную систему
Номер, название и описание удобно объединить через Auto Layout. Внутренние расстояния между связанными элементами оставляем небольшими, например 10–20 px.
После настройки одного шага его проще продублировать и заменить текст, чем заново собирать Auto Layout для каждого элемента. Это ускоряет работу и помогает сохранить одинаковую структуру.
Wrap автоматизирует перенос этапов
Все этапы можно объединить в общий Auto Layout и использовать Wrap. Тогда карточки автоматически переходят на следующую строку при заполнении доступной ширины.
При этом отдельно настраиваются расстояния между столбцами и между строками. Например, внутри ряда можно оставить около 20 px, а между рядами сделать больше — порядка 50 px.
Так система остаётся гибкой, а элементы не приходится вручную переставлять после каждого изменения.
Следим за логикой чтения
Композиция должна подсказывать пользователю последовательность этапов. В итоговой структуре взгляд движется слева направо: сначала считываются шаги 1–2, затем 3–4 и после этого 5–6.
Дополнительно между парами этапов можно добавить тонкие разделители. Они не только повторяют графический приём предыдущих блоков, но и помогают объединить шаги в более крупные смысловые группы.
Не зеркалим весь Frame без необходимости
Во время работы весь блок был зеркально отражён, чтобы проверить другое положение фотографии. После этого Auto Layout начал перестраивать элементы в неожиданном порядке.
В подобных ситуациях проще не зеркалить родительский Frame вместе со всем содержимым. Если необходимо изменить направление фотографии, лучше отразить только само изображение. Тогда порядок слоёв и логика Auto Layout сохраняются.
Если структура уже сильно запуталась, иногда быстрее удалить проблемную группу и собрать её заново, чем искать причину среди множества вложенных настроек.
Текст можно немного редактировать ради композиции
При одинаковой структуре описания этапов имеют разную длину. Это нормально, но слишком большая разница в количестве строк начинает нарушать баланс.
В таком случае можно немного изменить ширину отдельных текстовых блоков или сократить второстепенные формулировки без потери смысла. Также важно следить за висячими предлогами и при необходимости использовать неразрывный пробел.
Фотография должна поддерживать направление страницы
Изображение со строителями подбираем так, чтобы люди и архитектурные линии были направлены внутрь композиции, а не уводили взгляд за пределы экрана.
При выборе учитываем и общий ритм страницы: если крупный визуал в предыдущем блоке находился с одной стороны, следующий можно расположить с противоположной. Такое чередование создаёт динамику и не позволяет лендингу превратиться в последовательность одинаковых секций.
Соединяем фотографию с фоном градиентом
Фотографию растягиваем на часть блока и добавляем линейную заливку, которая постепенно переводит изображение в светло-серый фон.
Цвет градиента лучше брать непосредственно из светлой области фотографии — например, из неба или общего фонового оттенка. Если остаётся заметная граница, можно добавить второй градиент и локально скорректировать переход.
Главное — сохранить читаемость текста. Фотография может немного заходить в область модульной сетки, но лица и ключевые части людей не должны перекрываться текстом.
Оставляем самый понятный вариант
После сравнения нескольких композиций выбираем более компактное расположение этапов с нумерацией, разделителями и крупной фотографией сбоку.
Блок продолжает уже созданную систему сайта за счёт знакомых цветов, типографики, расстояний, линий и работы с изображениями, но при этом получает собственную композицию. Это помогает сохранить единую стилистику без буквального повторения предыдущих секций.
