На этом занятии учимся превращать сценарий в первые рабочие экраны и собирать минимальный кликабельный прототип в Figma. Разбираем, зачем нужен прототип как инструмент проверки гипотез и почему на этом этапе важнее логика и проверка решения, а не «идеальный дизайн».
1. Какой прототип нам нужен?
На занятии говорим о простом и понятном формате:
- Кликабельный сценарий из нескольких экранов.
- Только те элементы, которые важны для выполнения задачи.
- Без лишних деталей и украшательств.
- Понятная структура: «что вижу → что делаю → что происходит дальше».
2. Как построить прототип из сценария?
- Берём выбранный пользовательский сценарий.
- Определяем ключевые шаги пользователя.
- Для каждого шага создаём экран.
- Связываем экраны в Figma так, чтобы получился связный путь. (если работаете в Figma)
- Проверяем: можно ли по прототипу пройти задачу без объяснений.
Примеры разных видов прототипа
Исходный размер 2074x1340
Пример кликабильного прототипа в Figma
Во время создания прототипа обсуждаем: где пользователю должно быть максимально очевидно, что делать; как сократить количество действий; как выделить ключевые элементы; как убрать «визуальный шум», который мешает.
Прототип — это проверка логики, не декор.
3. Воркшоп
- Студенты создают первые версии экранов в Figma.
- Связывают их в кликабельный сценарий.
- Показывают прототип одногруппникам.
- Получают быстрый фидбек: Понятно ли назначение экранов? Не теряется ли логика? Действительно ли решается проблема?
Пошаговый процесс создания
- Определяем минимальный набор экранов. Принцип: минимум, которого достаточно для проверки гипотезы. Главный экран или точка входа; Экраны с выбором действий; Ключевой экран, где решается задача; Экран результата.
- Грубые наброски (low-fi). Перед тем как «рисовать красиво», делаем простые схематичные версии экранов.
- Переносим в Figma (или на другую платформу) и собираем прототип. Теперь превращаем наброски в кликабельный сценарий. Создаём экраны в Figma; Используем базовые компоненты и простую сетку; Связываем экраны интерактивными переходами; Проверяем, можно ли пройти путь без подсказок.
- Финальная подготовка к тестированию. Перед следующим этапом студент должен понимать: Что именно он будет проверять в прототипе; Какая гипотеза заложена; Какой сценарий должен пройти человек.
Этапы работы в Figma