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

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

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

• внешние отступы;
• скругления;
• стили заголовков;
• стили кнопок;
• цвета фонов;
• логика карточек,

их нужно повторно использовать в следующих секциях.

Именно повторяемость превращает отдельные элементы в систему и делает прототип последовательным.

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

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

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

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

В такой композиции допустима выключка заголовка по центру. Это помогает визуально собрать:

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

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

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

Лучше превратить их в табы.

Например:

• «Все»;
• «Каркасные дома»;
• «Дома из бруса».

Активный таб можно визуально выделить заливкой, а остальные оставить контурными.

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

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

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

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

Между заголовком блока и поясняющим текстом можно оставить около 30 px. Затем между этой группой и фильтрами увеличить расстояние примерно до 60 px.

Так пользователь воспринимает:

1. заголовок и описание как одну смысловую группу;
2. фильтр как следующую отдельную группу;
3. карточки как основное содержимое каталога.

Чем сильнее отличается функция элементов, тем заметнее может быть расстояние между ними.

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

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

• внешняя карточка — 20 px;
• внутреннее изображение — около 10 px.

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

Меньший внутренний радиус помогает сохранить более аккуратную форму.

При создании карточки проекта важно проверить иерархию.

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

Так появляется понятный порядок:

• название проекта;
• стоимость;
• характеристики;
• кнопка.

Название получает достаточный акцент и связывает всю информацию внутри карточки.

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

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

Дальше уже можно отделять характеристики меньшими внутренними расстояниями.

Если в карточке есть характеристики вроде:

• «Площадь»;
• «Количество комнат»;
• «Количество этажей»;
• «Тип дома»,

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

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

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

Например:

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

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

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

Можно показать ограниченное количество карточек, например 15–20, а дальше предложить:

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

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

Так лендинг остаётся компактным и при этом даёт доступ к полному ассортименту.

При создании формы важно показать пользователю последовательность действий.

Например:

• заголовок;
• пояснение;
• поле;
• кнопка;
• дополнительная подпись.

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

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

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

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

Плейсхолдер внутри поля должен объяснять, что именно пользователь должен ввести:

• «Ваше имя»;
• «Ваш номер телефона»;
• «Куда удобно выслать смету».

Пользователь не должен угадывать назначение поля.

Если пользователь должен прикрепить готовый проект, можно использовать отдельное поле с текстом «Прикрепить файл» и добавить знакомую иконку скрепки.

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

В дальнейшем кнопка может отправлять форму вместе с прикреплённым файлом.

Если в блоке предполагается большое видео, удобно сразу ориентироваться на пропорцию Full HD 1920×1080.

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

Так проще подготовить место под YouTube-видео или другую стандартную видеозапись.

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

Например:

• 15 лет на рынке;
• 200 авторских проектов;
• 2 выставочных дома;
• 1500 построенных домов.

При этом сами числа можно сделать крупнее, а описания — спокойнее.

Так пользователь сначала считывает ключевые показатели, а затем уточняет их смысл.

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

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

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

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

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

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

То же относится к адресам, названиям проектов и другим динамическим данным.

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

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

Можно ограничиться четырьмя примерами и дать пользователю возможность:

• посмотреть фотографии;
• открыть видеоотзыв;
• перейти к другим проектам.

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

После нескольких блоков система начинает работать сама на себя.

Уже определены:

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

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

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

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

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

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