Наводим порядок в прототипе перед переходом к дизайну

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

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

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

При этом прототип всё ещё не является финальным дизайном. Не нужно заранее продумывать каждую иллюстрацию, иконку и декоративную деталь. Задача — сформировать понятный каркас, в котором уже читается структура будущей страницы.

Работу удобно начинать с верхней части страницы. В хедере необходимо привести к единой системе:

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

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

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

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

Так проще понять:

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

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

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

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

Так хедер сохраняет функциональность, но не начинает конкурировать с основным содержанием страницы.

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

• H1 — главный заголовок;
• H2 — заголовки блоков;
• H3 — подзаголовки или заголовки следующего уровня;
• Body — наборный текст;
• Button — текст кнопок.

Название стиля можно менять в любой момент. Это не влияет на связанные элементы, если не изменяются сами параметры стиля.

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

Например, кнопка «Заказать звонок» в хедере не должна быть слишком активной. Её можно сделать небольшой контурной кнопкой с умеренным скруглением и спокойным текстом.

Если рядом расположены телефон и Telegram, эти элементы лучше объединить в одну смысловую группу. При этом расстояния внутри группы должны быть меньше, чем расстояния между этой группой, меню и логотипом.

Так правила группировки работают уже на уровне хедера.

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

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

Например, карточки с разными типами домов можно вынести во второй блок, а на первом экране оставить:

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

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

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

Чаще эффективнее выбрать одно основное действие и повторять его в разных блоках.

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

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

В рамках курса можно ориентироваться примерно на 120–160 px между крупными смысловыми группами. Конкретное значение выбирается визуально в зависимости от количества контента и композиции.

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

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

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

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

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

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

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

Если небольшая подпись вроде «5 лет гарантии» относится к основному действию, её можно расположить рядом с кнопкой. Тогда пользователь почти наверняка заметит дополнительное преимущество именно в момент взаимодействия с CTA.

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

Это помогает визуально замкнуть секцию и сохранить баланс.

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

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

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

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

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

• светлый фон;
• скругление;
• изображение;
• заголовок;
• текст;
• контурную кнопку.

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

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

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

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

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

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

В рамках курса удобная отправная точка — около 100 px от границы блока до основного контента сверху и снизу.

Это значение можно использовать как рабочее базовое правило:

• первый экран — примерно 120–160 px;
• обычные секции — около 100 px;
• внутри смысловых групп — меньшие значения.

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

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

Например:

• между заголовком блока и основным содержанием — около 60 px;
• между смысловыми группами — около 30 px;
• между заголовком и его описанием — около 10–20 px.

Это не строгая таблица, а рабочие ориентиры. Главное правило остаётся прежним: чем сильнее элементы связаны, тем меньше расстояние между ними.

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

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

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

В блоке с преимуществами или характеристиками важно создать контраст между коротким тезисом и его описанием.

Для этого можно:

• увеличить кегль подзаголовка;
• использовать более заметное начертание;
• применить отдельный стиль Subtitle;
• сохранить основной текст спокойным.

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

При переносах текста важно смотреть не только на количество строк, но и на общую форму блока.

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

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

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

Прототип должен показать:

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

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

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

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

Перейти к следующему уроку