Figma: шапка, вводный блок и футер

Курс «Макет учебного портала в Figma»

Карточки помогают выбрать курс, но до них человек должен понять, куда он попал и как устроена библиотека. Добавим шапку, вводный блок и футер портала «Маршрут». Эти области повторятся на странице курса и урока, поэтому будем строить их как самостоятельные компоненты с общими правилами ширины.

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

Полная ширина и внутренняя область

Создайте основной компонент Header на странице 02 Components. Его внешний фрейм имеет начальную ширину 1440 и высоту 80. Внутри разместите Content шириной до 1120, затем текстовую марку «Маршрут» слева и фрейм Navigation справа. У внешнего контейнера — горизонтальный Auto Layout с центрированием; у внутреннего — разнесение двух групп по краям.

В рабочем экране внешний Header будет Fill container, а внутренний Content сохранит максимальную ширину 1120. Это позволяет поверхности шапки занимать весь экран, а навигации выравниваться с карточками. Если назначить 1120 всему внешнему фрейму, фон шапки останется узкой полосой. Если снять ограничение у содержимого, марка и ссылки разъедутся на широком экране.

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

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

Перед превращением шапки в компонент прочитайте её ссылки без остального экрана. Они должны показывать устройство портала, а не перечислять внутренние стадии проекта. Названия вроде Components или Handoff принадлежат файлу дизайнера и не должны попадать в меню посетителя. Для пользователя полезны курсы и способ обучения. Если позднее появится отдельный материал о формате занятий, у ссылки «Как учиться» появится реальная цель; до этого активный прототип должен явно ограничиваться готовыми переходами.

Вводный блок каталога

В Hero добавьте заголовок «Освойте веб-разработку шаг за шагом» и абзац из брифа. Его внешняя область занимает полную ширину, внутренняя выравнивается по общему Content. Для текста ограничим ширину 720, вертикальный промежуток зададим 24, верхний и нижний padding — 64. Заголовок должен оставаться главным сообщением блока.

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

Не добавляйте вымышленные показатели вроде «миллион успешных выпускников». Число, помещённое в hero, воспринимается как фактическое обещание. Наш проект учебный, поэтому используем содержательное объяснение формата: «Короткие уроки, единый пример, самостоятельная практика». Даже эта фраза должна соответствовать устройству показанной программы, а не служить случайной рекламной строкой.

Можно добавить нейтральный геометрический акцент из собственного SVG. Держите его в отдельном слое Decoration и убедитесь, что он не перекрывает текст. Если рисунок пропадает на мобильном размере, смысл блока должен сохраниться. Это проверка роли декора: он поддерживает композицию, но не содержит единственный экземпляр полезного сведения.

В шапке не добавляйте «Войти» только ради привычного вида образовательного сайта. Наш бриф описывает открытый каталог и чтение материала, без учётной записи и сохранённого прогресса. Новое действие потребовало бы отдельного сценария, состояния ошибки и объяснения, зачем человеку регистрироваться. Для текущего пути достаточно бренда и перехода к курсам. Если позднее появится кабинет, его место и поведение можно обсудить по новой задаче. Сейчас отсутствие неподготовленного пункта делает обещания навигации соответствующими содержанию наших экранов.

Футер и повторение

Создайте Footer с поверхностью surface/card, общей внутренней шириной 1120 и вертикальными отступами 32. В нём разместите название портала и пояснение «Учебный проект ProfessorWeb». Рядом — переход «Все курсы». Контактные адреса из исходного портфолио сюда переносить не требуется: в нашем сценарии человек читает открытые материалы, а не связывается с автором ради найма.

Футер можно начать с копии структуры шапки, но он станет самостоятельным компонентом. Это позволяет изменить содержание и вертикальные поля, сохраняя похожий приём компоновки. Если навсегда сделать футер экземпляром Header, различие задач придётся выражать множеством скрытых слоёв и overrides. Повторение геометрии не означает одинаковый договор компонента.

На странице 03 Screens замените временные Header и Footer экземплярами готовых компонентов. Hero поставьте перед CourseList. Всю страницу преобразуйте в вертикальный Auto Layout без случайных промежутков между полноширинными блоками. Внутренние расстояния задают сами блоки; внешний контейнер лишь сохраняет их порядок.

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

Смена содержания

Замените марку в основном Header на «Маршрут · ProfessorWeb» и оцените доступную ширину. Если справа столкнулись ссылки, сначала пересмотрите их состав и промежуток. Не уменьшайте все надписи без анализа. На более узком размере навигация превратится в кнопку меню; это отдельная композиция, которую создадим в уроке адаптивности.

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

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