Практическая работа №6

Разработка макетов страниц и интерактивного прототипа

Цель работы:

разработать макеты основных страниц индивидуального веб-проекта;
использовать ранее созданный UI-kit;
настроить интерактивный прототип в Figma;
показать основные пользовательские маршруты;
подготовить макеты, по которым будет выполняться верстка.

Основные теоретические положения

Макет страницы

Макет страницы — это визуальное представление будущей страницы сайта. Он показывает расположение блоков, текстов, изображений, кнопок, форм и карточек.

Интерактивный прототип

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

Минимальный маршрут:

Главная → Каталог → Детальная страница → Форма действия → Личный кабинет

Производственная ситуация

У вас уже есть UI-kit. Теперь необходимо собрать из компонентов полноценные страницы проекта и показать, как пользователь будет выполнять ключевые действия.

Основные требования к практической работе

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

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

Задания для выполнения

Создайте страницу Pages в Figma.
Разработайте макет главной страницы.
Разработайте макет страницы каталога.
Разработайте макет детальной страницы объекта.
Разработайте макеты регистрации и авторизации.
Разработайте макет личного кабинета.
Разработайте макеты административной части.
Настройте переходы между экранами.
Подготовьте несколько мобильных экранов.
Выполните коммит add page layouts and interactive prototype.

Требования к результату

К завершению практической работы должны быть подготовлены:

макеты основных страниц
макеты регистрации и авторизации
макет личного кабинета
макеты административной части
интерактивный прототип
несколько адаптивных макетов
коммит в Git

Контрольные вопросы

Какова основная цель данной практической работы?
Какие результаты должны быть получены после выполнения этапа?
Как данный этап связан с предыдущими этапами проекта?
Какие решения были приняты в рамках работы и почему?
Какие файлы были добавлены или изменены в Git-репозитории?
Как результаты работы будут использоваться в следующих практических работах?