Завершаем прототип и готовим основу для будущего дизайна

Это настройки привязки элементов внутри Frame в Figma, которые определяют, как объекты ведут себя при изменении размеров родительского фрейма.

Это знак © с указанием правообладателя и года, который обычно размещается в нижней части сайта.

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

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

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

Так на странице сохраняются повторяющиеся силовые линии и общая композиционная логика.

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

При этом содержимое может меняться:

• заголовок занимает одну или две строки;
• количество пунктов отличается;
• меняется изображение;
• фон блока становится светлым или тёмным;
• отдельные элементы получают другую компоновку.

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

Блок с последовательностью сотрудничества можно разделить на отдельные смысловые пункты:

• знакомство;
• встреча;
• заключение договора;
• заезд бригады;
• строительство;
• сдача объекта.

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

После переноса остаётся проверить:

• расстояние от заголовка до содержимого;
• промежутки между этапами;
• длину строк;
• неразрывные пробелы;
• общую форму блока.

Так работа с прототипом постепенно ускоряется.

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

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

Следующий блок с преимуществами или дополнительными возможностями удобно построить как группу карточек.

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

Для карточек продолжаем уже созданную систему:

• одинаковое скругление;
• одинаковые внешние размеры;
• повторяющиеся внутренние отступы;
• один стиль подзаголовков;
• одинаковое положение будущих иконок.

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

При дублировании карточек быстро становится видно, что одинаковая структура не означает одинаковое количество строк.

Один заголовок помещается в одну строку, другой — в две, а описание третьей карточки занимает больше места.

Именно поэтому прототип полезно наполнять хотя бы приблизительно реальным текстом. Он помогает проверить, выдерживает ли выбранная система разные по длине данные.

Если проблема небольшая, на этапе прототипа достаточно немного скорректировать ширину текста и расстояния. Финальная доработка произойдёт уже в дизайне.

Отдельный блок с предложением пройти тест или получить расчёт можно сделать более акцентным.

Внутри достаточно выделить:

• заголовок;
• короткое пояснение;
• кнопку;
• изображение или графический элемент.

Между заголовком и пояснением не стоит создавать слишком большую пустоту. Они должны восприниматься как одна смысловая группа.

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

Блок вопросов и ответов хорошо подходит для уже используемой на странице системы плашек.

Каждый вопрос можно поместить в отдельную карточку. В обычном состоянии пользователь видит только вопрос и элемент, который показывает возможность раскрытия.

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

Остальные можно оставить закрытыми. Это делает блок компактным и сразу показывает принцип его работы.

В прототипе не нужно подробно отрисовывать сложную иконку раскрытия. Достаточно условного элемента справа.

Важно показать:

• одинаковое положение вопросов;
• одинаковые отступы;
• равную высоту закрытых карточек;
• одинаковое расстояние между ними;
• один пример открытого состояния.

Этого достаточно, чтобы разработчик и дизайнер понимали будущую механику блока.

В блоке контактов основным визуальным элементом может стать интерактивная карта.

На карте можно разместить отдельную информационную плашку с:

• адресом;
• телефоном;
• электронной почтой;
• временем работы.

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

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

Можно использовать более компактные значения, например около 30–40 px.

В футере могут находиться:

• контакты;
• реквизиты;
• политика конфиденциальности;
• копирайт;
• ссылка или логотип разработчика.

Важно распределить информацию так, чтобы она не превращалась в тяжёлый массив текста.

Если основной наборный текст сайта используется, например, в размере 17 px, служебную информацию футера можно уменьшить до 14–15 px.

Так появляется дополнительная иерархия:

• важные контакты остаются заметными;
• реквизиты становятся спокойнее;
• юридическая информация не перетягивает внимание.

При этом текст всё равно должен хорошо читаться.

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

Он помогает отделить:

• основную контактную информацию;
• служебную часть;
• копирайт;
• политику конфиденциальности;
• информацию о разработчике.

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

Вместо текстового написания слова «копирайт» используется знак ©.

После него можно указать название компании или правообладателя и год:

© Атлант, 2026

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

Главное — не дублировать одновременно знак © и само слово «копирайт».

Когда все секции готовы, необходимо посмотреть на прототип не по отдельным блокам, а как на одну страницу.

Стоит проверить:

• повторяются ли стили кнопок;
• сохраняются ли H1, H2 и H3;
• одинаково ли оформлен Body-текст;
• выдержана ли система внешних и внутренних отступов;
• работают ли смысловые группы;
• есть ли общие силовые линии;
• не перегружена ли страница одинаковыми композициями;
• сохраняется ли визуальная динамика.

Прототип должен быть одновременно последовательным и не слишком монотонным.

На странице могут повторяться одни и те же кнопки, карточки, отступы и текстовые стили. Это создаёт систему.

Но расположение блоков при этом может меняться:

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

За счёт этого страница сохраняет динамику, но не превращается в набор несвязанных решений.

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

В нём уже есть:

• типографическая иерархия;
• повторяющиеся стили;
• понятные пользовательские действия;
• группировка информации;
• система отступов;
• модульная сетка;
• логика карточек;
• подготовленные места под изображения.

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

Даже после завершения практики прототип не превращается в неизменяемый документ.

Во время дизайна можно:

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

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

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

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

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

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