Урок 3: Финальный проект — полный дизайн-кейс

Чему вы научитесь

• Проводить полный дизайн-кейс от исследования до презентации
• Выбирать правильный AI-инструмент на каждом этапе
• Связывать результаты этапов в единую историю
• Оценивать реальное время на каждый этап

Для практики используем arckep.ru — все основные модели, без VPN, оплата рублями. Вы можете использовать любые другие сервисы.

Что такое полный дизайн-кейс

Полный кейс — демонстрация дизайн-процесса на одном проекте. Не отдельный макет, не просто красивая картинка — цепочка от проблемы пользователя до работающего продукта с промо-материалами.

В портфолио такие кейсы ценятся выше всего. Они показывают не владение инструментом, а способность решать задачи системно. С AI весь процесс занимает 4-6 часов вместо 4-6 недель.

6 этапов

1. UX Research    →  Персоны, journey map, инсайты
2. Прототип       →  Интерактивный макет в Figma
3. Готовый сайт   →  Работающий продукт на реальном домене
4. Промо-видео    →  30-60 сек ролик для лендинга
5. 3D-элементы    →  Визуальные акценты и продуктовый рендер
6. Презентация    →  Оформленный кейс для портфолио

Выбор проекта

Перед стартом выберите один вариант:

• Лендинг для стартапа — вымышленный продукт, решающий реальную проблему. Самый свободный формат
• Редизайн существующего сайта — покажете before/after, что сильно усиливает кейс
• Ваша идея продукта — если есть свой проект, это идеальный материал

Дальше — пошагово по каждому этапу. Используем один пример: лендинг сервиса быстрой доставки продуктов.

Этап 1: UX Research (30 мин)

Инструменты из модуля D.9. Здесь — минимальный набор для кейса.

Шаг 1. Сгенерируйте 2 персоны через Claude:

Продукт: сервис доставки продуктов за 15 минут
Аудитория: городские жители 25-45 лет
Рынок: Россия, города-миллионники

Создай 2 персоны: первичную (70% аудитории)
и вторичную (20%). Для каждой: имя, возраст, профессия,
главная цель, главная боль, tech-savvy (1-5).

Шаг 2. Journey map для первичной персоны — 6 этапов от осознания потребности до рекомендации продукта друзьям.

Шаг 3. Зафиксируйте 3 инсайта, которые повлияют на дизайн:

• Главная боль (что решаем)
• Критический момент (где теряем пользователя)
• Отличие аудитории (почему стандартные решения не работают)

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

Этап 2: Прототип (45 мин)

Figma Make (AI)

Шаг 1. Откройте Figma, активируйте Make (доступна в бесплатном плане).

Шаг 2. Опишите экран на основе инсайтов:

Лендинг сервиса доставки продуктов.
Hero: заголовок "Продукты за 15 минут",
подзаголовок о ценностном предложении,
кнопка "Попробовать бесплатно",
фото довольного клиента.
Стиль: минимализм, зелёный + белый, Inter.

Шаг 3. Figma Make сгенерирует фрейм. Доработайте: реальные тексты вместо placeholder, правильные отступы, подходящие шрифты.

Шаг 4. Создайте 4-5 экранов: Hero, Features (3 карточки), How It Works (3 шага), Testimonials, CTA.

Шаг 5. Свяжите через Figma Prototyping: переходы между секциями, hover-состояния кнопок.

Альтернативы

• Google Stitch — AI-прототипирование, хорош для форм и веб-интерфейсов
• V0 (Vercel) — генерирует React-компоненты по промпту, для технических проектов

Этап 3: Готовый сайт (60 мин)

Framer

Шаг 1. На framer.com нажмите Start with AI. Бесплатно: 1 сайт на домене framer.app.

Шаг 2. Опишите сайт, опираясь на инсайты из этапа 1:

Лендинг доставки продуктов за 15 минут.
Секции: hero с CTA, 3 преимущества, как это работает
(3 шага), отзывы, цены, финальный CTA.
Стиль: минимализм, зелёный (#059669), белый фон,
Inter, скругленные углы.
Ключевое сообщение: "Не тратьте время на магазины."

Шаг 3. Framer создаст готовый сайт. Замените тексты, добавьте изображения (Nano Banana для продуктовых кадров), настройте адаптивность.

Шаг 4. Publish — сайт доступен по адресу project-name.framer.app.

Bolt.new

Если нужен полный контроль над кодом: bolt.new генерирует React-приложение по описанию. Доработка через диалог. Деплой на Netlify одной кнопкой.

Этап 4: Промо-видео (45 мин)

Создайте ролик по инструкции из урока D.10/01.

Шаг 1. Сценарий на 60 секунд (150 слов).

Шаг 2. 3-4 сцены в Kling 3.0 (kling-3.0-v3 на arckep.ru): проблема, решение, результат.

Шаг 3. Заставка и CTA-кадр в Nano Banana (gemini-3-pro-image-preview).

Шаг 4. AI-озвучка в ElevenLabs (бесплатные 10 000 символов).

Шаг 5. Монтаж в CapCut: склейка + субтитры + музыка. Экспорт 1080p mp4.

Этап 5: 3D-элементы (30 мин)

3D добавляет глубину и делает кейс визуально заметнее в ленте Behance.

Hunyuan 3D 3.1

Hunyuan3D от Tencent — генерация 3D-модели из текста или изображения. Open-source, бесплатно.

Шаг 1. Откройте huggingface.co/spaces/tencent/Hunyuan3D-2.

Шаг 2. Опишите: «Зелёная коробка с продуктами, минималистичный стиль, белый фон» или загрузите референс.

Шаг 3. Скачайте GLB/OBJ. Варианты использования:

• Рендер для презентации (скриншот из 3D-вьювера)
• Встраивание на сайт через <model-viewer>
• Анимированный поворот для видео

Spline

Spline (spline.design) — онлайн 3D-редактор с AI. Бесплатный тариф. Создает интерактивные 3D-сцены, которые встраиваются как виджет.

Этап 6: Презентация (30 мин)

Gamma (gamma.app) собирает все этапы в презентацию за 10 минут.

Шаг 1. Нажмите Generate и опишите структуру:

Кейс: сервис доставки продуктов.
1. Проблема и аудитория (персоны)
2. UX-исследование (journey map, инсайты)
3. Прототип (скриншоты Figma)
4. Готовый сайт (скриншоты + ссылка)
5. Промо-видео (встроенное)
6. Результаты и выводы
Стиль: минимализм, профессиональный.

Шаг 2. Gamma создаст структуру. Вставьте скриншоты, видео и ссылки.

Шаг 3. Поделитесь ссылкой или скачайте PDF.

Сколько занимает каждый этап

Этап                  │ С AI      │ Без AI
──────────────────────┼───────────┼──────────
UX Research           │ 30 мин    │ 2-4 недели
Прототип              │ 45 мин    │ 2-3 дня
Готовый сайт          │ 60 мин    │ 1-2 недели
Промо-видео           │ 45 мин    │ 3-5 дней
3D-элементы           │ 30 мин    │ 2-3 дня
Презентация           │ 30 мин    │ 1-2 дня
──────────────────────┼───────────┼──────────
ИТОГО                 │ 4-6 часов │ 4-6 недель

Связность между этапами

Главная ошибка — делать этапы изолированно. Каждый следующий этап должен опираться на предыдущий:

• Прототип решает боли из UX research (не абстрактные, а конкретные)
• Сайт реализует прототип (не «похожий», а тот же)
• Видео показывает сценарий из journey map (не выдуманный, а исследованный)
• Презентация рассказывает историю: проблема, исследование, решение, результат

Практическое задание

Создайте полный дизайн-кейс. Минимальный вариант:

1. UX Research — 2 персоны + journey map (Claude)
2. Прототип или сайт — Figma Make, Framer или Bolt
3. Презентация — Gamma

Расширенный вариант — все 6 этапов. Промо-видео через Kling 3.0 на arckep.ru, 3D через Hunyuan 3D.

Итоги урока

• Полный дизайн-кейс: 6 этапов, 4-6 часов, все инструменты курса
• Каждый этап опирается на предыдущий — связность важнее количества
• Минимальный кейс: UX research + прототип + презентация
• Видео (Kling 3.0) и изображения (Nano Banana) — через arckep.ru, рублями
• Связная история «проблема, исследование, решение, результат» — то, что отличает сильный кейс от набора картинок