Задача и файл учебного портала

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

В этой серии создадим в Figma Design макет учебного портала «Маршрут». Читатель приходит за конкретным умением, выбирает подходящий курс и открывает первый урок. Нам предстоит показать этот путь так, чтобы он оставался понятным на большом экране и телефоне. Макет станет самостоятельным учебным проектом с цветовым акцентом ProfessorWeb; он не претендует на утверждённый редизайн действующего сайта.

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

Сценарий вместо перечня страниц

Представим начинающего разработчика, который знает HTML, но хочет научиться раскладывать карточки с помощью CSS Grid. Он открывает каталог, находит курс «Сетка каталога», сравнивает уровень и продолжительность, переходит к программе и начинает урок «Колонки и промежутки». Сценарий описывает последовательность решений. Главная, каталог и урок — средства для этих решений, а не конечная цель работы.

Запишите бриф в текстовом слое на странице 00 Brief. Поле «Пользователь» содержит одну конкретную роль. Поле «Задача» — выбор курса и начало обучения. Поле «Успех» — человек может назвать следующий шаг и понимает, какие знания потребуются. Не используйте абстрактное «повысить конверсию»: без измеряемого события такая формулировка не поможет выбрать содержание карточки.

Данные проекта одинаковы во всей серии. Первый курс — «Сетка каталога», уровень «Базовый», восемь уроков. Второй — «Запросы к API», уровень «Продолжающий», десять уроков. Третий — «Git в команде», уровень «Базовый», шесть уроков. Числа здесь придуманы для учебного макета. Они нужны, чтобы у карточек были разные заголовки и метаданные, а не для описания реальной библиотеки ProfessorWeb.

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

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

Страницы и доступ к файлу

В Figma Design создайте новый дизайн-файл и назовите его Маршрут — учебный портал. Команды создания и расположение навигации могут меняться, поэтому ориентируйтесь на название продукта и тип файла. Нам нужен редактор интерфейсов Figma Design, а не доска FigJam и не презентация Figma Slides. Для самостоятельной работы достаточно файла, в котором у вас есть право редактирования.

Создайте страницы 00 Brief, 01 Foundations, 02 Components, 03 Screens, 04 Prototype, 05 Handoff. Если ограничения вашего плана не позволяют держать столько страниц, разместите одноимённые секции на доступной странице. Учебный результат от этого не изменится: требуется отделить исходные решения, строительные блоки, экраны и передаваемые материалы.

Название страницы показывает назначение крупной области файла. На 01 Foundations позднее появятся образцы текста и цвета, на 02 Components — исходные компоненты, на 03 Screens — их экземпляры в экранах. Такая структура позволяет менять общую кнопку в одном месте и видеть, где она используется. Копировать одну и ту же исходную кнопку на каждую страницу как независимый объект не потребуется.

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

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

Материалы, с которыми будем работать

Скачайте исходные материалы серии. Архив содержит тексты трёх курсов, палитру, размеры и собственные SVG-референсы. Это спецификация учебного проекта, а не выгруженный рабочий файл Figma. SVG помогает сверять композицию и может служить исходным изображением, но не заменяет построение редактируемых слоёв и компонентов.

Сначала перенесите тексты на страницу брифа обычными текстовыми слоями. Не подгоняйте длину заголовка под будущую карточку: мы будем проектировать карточку под реальные различия текста. Сохраните длинный заголовок «Запросы к API» и более короткий «Git в команде». Разница быстро выявит слишком жёсткие размеры, когда мы начнём применять Auto Layout.

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

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

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