Лабораторная работа: Построение прототипа веб-приложения на бумаге

Цель:
Научиться создавать базовый прототип веб-приложения вручную для визуализации структуры и основных функций интерфейса.

Критерии оценивания:

• Применение принципов проектирования интерфейсов.
• Учет пользовательских сценариев и логики взаимодействия.
• Создание структурированного и читаемого бумажного прототипа.

Ход работы:

1. Подготовительный этап:
   • Изучите основные принципы прототипирования (простота, удобство, четкая структура).
   • Определите назначение прототипа: какие функции веб-приложения он должен отображать.
   • Ознакомьтесь с примерами бумажных прототипов (если предоставлены преподавателем).
2. Анализ требований:
   • Получите описание требований для веб-приложения (цели, функции, целевая аудитория).
   • Разбейте функционал приложения на отдельные страницы (например, главная страница, регистрация, личный кабинет).
3. Создание эскизов:
   • Подготовьте чистые листы бумаги и карандаш.
   • Начните с главной страницы, выделяя:
     • Заголовок.
     • Основные элементы интерфейса (меню, кнопки, текстовые поля, изображения).
   • Разработайте страницы для ключевых функций, таких как:
     • Регистрация пользователя.
     • Авторизация.
     • Управление профилем.
     • Просмотр и фильтрация контента.
   • Используйте стрелки для указания переходов между страницами.
4. Учет пользовательских сценариев:
   • Опишите, как пользователь будет взаимодействовать с приложением. Например:
     • Переход с главной страницы на страницу регистрации.
     • Авторизация и переход в личный кабинет.
   • Проверьте, чтобы сценарии были логичны и понятны.
5. Детализация элементов интерфейса:
   • Добавьте больше деталей на каждом этапе:
     • Какие кнопки будут активны.
     • Что будет отображаться на всплывающих окнах.
     • Где будут размещаться основные элементы.
   • Обозначьте примерный текст или иконки.
6. Проверка прототипа:
   • Сравните созданный прототип с требованиями. Убедитесь, что все функциональные элементы включены.
   • Обсудите прототип с коллегами или преподавателем для выявления возможных улучшений.
7. Оформление работы:
   • Составьте отчет, содержащий:
     • Краткое описание целей прототипа.
     • Фото или сканированные изображения бумажного прототипа.
     • Описание пользовательских сценариев.
   • Прикрепите прототипы к отчету.

Советы по созданию прототипа:

• Используйте линейку для аккуратного оформления.
• Обозначьте интерактивные элементы (например, кнопки) стрелками и подписями.
• Не старайтесь прорабатывать детали дизайна (цвета, шрифты) сосредоточьтесь на функциональности.

Пример задания:
Создайте прототип веб-приложения для интернет-магазина, содержащего следующие страницы:

• Главная страница с каталогом товаров.
• Страница карточки товара с описанием и кнопкой «Добавить в корзину».
• Корзина с перечнем добавленных товаров и кнопкой «Оформить заказ».

Ожидаемый результат:

• Четкий бумажный прототип с указанием всех страниц и элементов.
• Логика переходов между страницами.
• Отчет с описанием работы.