Модуль d.10: финальный проект

Ведущая: Привет-привет! С вами AIStudy — бесплатный курс про искусственный интеллект. Сегодня финал трека для дизайнеров: как собрать всё, чему вы научились, в один проект и показать его так, чтобы вам писали заказчики.

Ведущий: Привет! Четыре темы. Демо-ролик продукта, которому зритель верит. Анимации интерфейса, которые не дёргаются. Сквозной проект от исследования до презентации. И портфолио, в котором видно мышление, а не нажатую кнопку.

Ведущая: Часть первая. Ролик. Я бы просто сгенерировала всё видео целиком: героев, офис, телефон, голограммы. Почему так нельзя?

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

Ведущая: То есть экран нужно показывать живым?

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

Ведущая: А почему не попросить видеомодель нарисовать интерфейс? Ей можно описать любой экран.

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

Ведущая: Хорошо. А как писать сцены, чтобы они не выглядели случайными?

Ведущий: Каждая сцена на пять–десять секунд строится по формуле из пяти слоёв: субъект, видимое действие, движение камеры, свет и атмосфера, звук. Героя называем в первых же словах и, если он живёт в нескольких сценах, копируем его описание слово в слово: тот же архитектор в графитовой рубашке и круглых очках. Тогда лицо и одежда не расползаются от кадра к кадру.

Ведущая: А действие? «Человек расстроен» ведь понятно.

Ведущий: Человеку понятно, а нейросети нет: она не знает, как выглядит абстрактное расстройство. Пишем физическими глаголами: он устало потирает переносицу, откидывается в кресле, закрывает крышку ноутбука. Камера делает медленный наезд, как будто оператор подошёл ближе, а не дешёвый зум, который просто растягивает картинку. Свет задаём источником: холодный синий свет монитора в тёмной комнате и тёплая лампа слева.

Ведущая: Звук тоже описываем, или он приходит сам?

Ведущий: Описываем. Современная видеомодель делает звуковую среду и речь вместе с картинкой, и точечные звуки вроде шелеста бумаги, щелчка крышки или гула кулера сильно добавляют живости.

Ведущая: А как удержать фирменный стиль? Модель сама придумает и интерьер, и цвета.

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

Ведущая: Давай соберём настоящий ролик на минуту. Допустим, это сервис доставки фермерских продуктов.

Ведущий: Пять сцен. Первая: вечер, усталый человек открывает пустой холодильник, холодный свет изнутри. Это хук и боль. Вторая: на кухонном столе загорается экран смартфона, рука касается кнопки заказа. Переход к решению. Третья, самая длинная, больше четверти минуты: реальный прототип или рабочий сайт, корзина за три касания, таймер доставки, оплата в одно нажатие. Четвёртая: курьер передаёт крафтовый пакет у двери, на столе дымится ужин. Это эмоция. И пятая: чистый кадр с логотипом, промокодом на первую доставку и адресом сайта.

Ведущая: А с экраном как? Просто записать себя в браузере?

Ведущий: Почти. Открываем интерактивный прототип или готовый сайт в полноэкранном режиме, без рамок браузера, и записываем прохождение одного ключевого сценария в плавные шестьдесят кадров в секунду. Хорошо, если запись сама мягко наезжает на курсор в момент клика. Зритель должен ясно прочитать заголовки и увидеть, как работают настоящие компоненты. А нейросетевые сцены генерируем короткими, по пять секунд: горизонтальными для лендинга и вертикальными для коротких лент. Если ролик нужен для вертикальной ленты, экран сразу снимаем вертикально, а не обрезаем потом.

Ведущая: А как склеить всё это, чтобы не вышло рваное видео?

Ведущий: Сначала пишем закадровый голос: короткие простые фразы без канцелярита, примерно сто двадцать слов в минуту, подача спокойная и уверенная, без театрального пафоса. Потом на дорожку кладём голос, поверх нарезаем кадры нейросети и скринкаст, план меняется каждые три–пять секунд. Субтитры обязательны: многие смотрят ролики в лентах и на лендингах без звука. И последний штрих: сжимаем файл до нескольких мегабайт, чтобы он не тормозил загрузку первого экрана.

Ведущая: Получается, нейросеть снимает людей и атмосферу, а доверие даёт настоящий экран.

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

Ведущий: Часть вторая. Анимации интерфейса. Честно, я думал, это такая красивость: кнопка подпрыгивает, карточка выезжает. Зачем они на самом деле?

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

Ведущий: Понятно, подтверждение и ориентация. А для внимания и для ожидания есть свои приёмы?

Ведущая: Есть. Деликатный импульс на главной кнопке делает её заметнее без агрессивных баннеров. А серые контуры-заглушки, по которым пробегает блик, пока грузятся данные, ощущаются быстрее пустого белого экрана. Раньше подбор такого движения отнимал у разработчика часы. Теперь дизайнер получает готовый код за минуту, но только если умеет поставить правильные ограничения.

Ведущий: Допустим, я пишу нейросети: «Сделай красивую плавную анимацию карточек». Что получу?

Ведущая: Устаревший учебный код. Модель анимирует положение, ширину, высоту или отступы с равномерной скоростью, да ещё полторы секунды. На телефоне это тормозит и дёргается: на каждом кадре браузер заново пересчитывает геометрию всей страницы. Поэтому в задание закладываем три закона современной веб-анимации.

Ведущий: Давай по порядку. Какой первый закон?

Ведущая: Двигаем только то, что видеокарта делает сама: сдвиг, масштаб, поворот и прозрачность. Положение, ширину, высоту и отступы не трогаем, иначе пересчитывается вёрстка. Второй закон: вместо равномерной скорости берём физические кривые. В жизни предметы не едут с постоянной скоростью. Для появления нужен быстрый старт и мягкое торможение, для живого отклика кнопки лёгкий упругий перелёт.

Ведущий: А третий закон про время?

Ведущая: Да. Отклик на наведение курсора занимает примерно пятую долю секунды, появление карточки или подсказки — треть секунды. Всё, что длиннее полусекунды в рабочем интерфейсе, воспринимается как искусственная задержка. Выезд широкой боковой панели может позволить себе чуть больше. И есть обязательная страховка для людей с настройкой «уменьшить движение», о ней скажу в конце.

Ведущий: То есть хороший запрос к нейросети уже не «сделай красиво», а техническое задание.

Ведущая: Именно. Перечисляем: только сдвиг и прозрачность, длительность для наведения и для появления, нужная кривая, каскадная задержка между соседними карточками и блок для уменьшенного движения. Каскад, кстати, секрет живого движения: карточки появляются не разом, а с шагом в доли секунды, и взгляд плавно ведёт за ними.

Ведущий: Назови три самых ходовых приёма, чтобы я понимал, что вообще просить.

Ведущая: Конечно. Пульсация главной кнопки: при наведении она чуть увеличивается и обзаводится мягким ореолом, заметно, но не агрессивно. Появление карточки снизу: в начале она прозрачна и сдвинута вниз, затем встаёт на своё место и проявляется. И третий, галочка с рисующимся контуром, о ней чуть ниже. А ещё правило для ухода: пока элементы появляются на мягкой кривой, исчезать они должны быстро и по обратной, чтобы уходящая плашка не задерживала взгляд.

Ведущий: А если нужна не одна анимация, а вся страница?

Ведущая: Просим связанную систему одним запросом. Кнопка с лёгким подъёмом и свечением. Три карточки с каскадным появлением. Галочка, которая сама прорисовывает контур. Подсказка, которая проявляется с лёгким увеличением. И шапка, где при прокрутке появляется размытие фона. Все пять на одной кривой и в одном темпе, поэтому интерфейс движется как единое целое. А сильная сторона языковой модели в том, что ей можно передать цвета и скругления вашей дизайн-системы, а потом несколькими короткими репликами подстроить упругость или задержку.

Ведущий: Галочка, которая рисует сама себя. Как это вообще работает?

Ведущая: Очень просто. Контур галочки нарезается на штрихи и сдвигается так, что линия невидима. Потом сдвиг плавно возвращается к нулю, и линия протягивается от начала до конца, как нитка через иголку. Тот же приём годится для любой линейной иконки.

Ведущий: Допустим, нейросеть выдала код. Я просто вставляю его в проект?

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

Ведущий: А быстрые генераторы анимаций, которые сразу показывают превью? Есть в них смысл?

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

Ведущий: Ты обещала сказать про доступность.

Ведущая: Скажу, это не опция. Заметная часть людей испытывает дурноту, мигрень или дезориентацию от активного движения и параллакса, и они включают в системе настройку «уменьшить движение». Поддержать её обязан каждый проект: короткий блок в глобальных стилях, который при этой настройке делает анимации мгновенными, а контент показывает сразу. Проверяется за пять секунд: в браузере включаем эмуляцию уменьшенного движения и убеждаемся, что карточки не застряли невидимыми.

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

Ведущий: Получится лоскутное одеяло. Логотип кислотно-зелёный и плоский, сайт по умолчанию красится в фиолетовый градиент, иллюстрации уезжают в мрачный киберпанк, а трёхмерная иконка блестит мультяшным пластиком. Арт-директор смотрит пять секунд и говорит: это не дизайн-система, а случайный набор генераций.

Ведущая: Звучит знакомо. И чем лечат такое лоскутное одеяло?

Ведущий: Паспортом стиля: одним текстовым файлом, который вы вставляете первым сообщением в каждый инструмент. Характер бренда в двух фразах. Цвета с ролями и точными кодами. Шрифтовая шкала. Сетка, отступы, скругления. Правила для векторной графики, фото и видео, например мягкий утренний свет слева и матовые натуральные текстуры. И список запретов: никаких неоновых градиентов, никаких глянцевых стеклянных шаров, никаких стоковых улыбок в камеру.

Ведущая: Давай на примере, а то всё абстрактно.

Ведущий: Возьмём запуск сервиса экспресс-доставки фермерских продуктов FreshGo. Характер бренда: чистый скандинавский фудтех. Фон не стерильно-белый, а тёплый молочно-кремовый, основной текст глубокий лесной графит, изумрудно-зелёный только для главных кнопок, терракотовый только для бейджа «доставим за пятнадцать минут». Любой инструмент, получив такой файл, перестаёт придумывать свои цвета.

Ведущая: Хорошо, файл есть. Что дальше?

Ведущий: Шесть этапов, и выход каждого становится входом следующего. Этап первый: исследование. Берём пятнадцать реальных отзывов на конкурентов и в языковой модели собираем портрет клиента: какую работу он поручает сервису, что его толкает к заказу, что тянет, чего боится и что держит по привычке. Затем карта пути. И выбираем три страха, которые интерфейс обязан закрыть.

Ведущая: Какие страхи у человека, который заказывает продукты?

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

Ведущая: Красиво: каждый блок сайта вырастает из конкретной боли.

Ведущий: В этом и смысл. Те же три страха потом превратятся в сцены ролика и в слайды защиты, и вся история держится на одном исследовании. Этап второй: айдентика и прототип. Коды цветов из паспорта переносим в палитру векторного генератора и в переменные прототипа. В векторном генераторе делаем знак и сетку из шести иконок одной толщины штриха. Потом вставляем паспорт и три решения в инструмент для прототипов и получаем пять связанных экранов лендинга. Первый экран прогоняем через тепловую карту внимания, которую предсказывает нейросеть: главная кнопка должна забирать заметную долю внимания, а экран быть чистым.

Ведущая: А этап третий — сайт?

Ведущий: Живой адаптивный сайт на настоящем адресе, а не картинки, и проверенный на ширине и компьютера, и смартфона. Можно в конструкторе без кода, можно вайб-кодингом: паспорт первым сообщением со словами «используй только эти токены, не придумывай свои цвета». Сюда же добавляем анимации из предыдущей части, на сдвиге и прозрачности, с поддержкой уменьшенного движения.

Ведущая: Дальше видео и трёхмерка?

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

Ведущая: И финальный шестой этап. Это презентация?

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

Ведущая: И сколько это занимает? Звучит как недели работы.

Ведущий: По расчётам курса, около пяти часов против нескольких недель классического цикла. Паспорт — четверть часа, исследование меньше часа, прототип и иконки час, сайт час, ролик три четверти часа, трёхмерный объект полчаса, презентация полчаса. Если вечер один, берите ядро: паспорт, исследование с тепловой картой «до и после», живой адаптивный сайт и презентация. Видео и трёхмерный объект добавите второй итерацией. Три этапа крепко лучше шести наспех.

Ведущая: А как понять, что проект готов к защите?

Ведущий: Шесть вопросов арт-директора. Можете ли вы ткнуть в любой блок первого экрана и назвать боль, которую он решает? Совпадают ли цвета в иконках, в вёрстке и в титрах ролика? Забирает ли главная кнопка достаточно внимания на тепловой карте? Открывается ли сайт со смартфона без горизонтальной прокрутки? Двигаются ли анимации только на сдвиге и прозрачности и уважают ли уменьшенное движение? И видит ли зритель в ролике настоящий интерфейс, а не размытые нейросетевые экраны?

Ведущий: Часть четвёртая. Последняя. Проект готов, и я выкладываю в портфолио пятнадцать самых красивых кадров. Так?

Ведущая: Так не работает. Сегодня красивой картинкой из нейросети никого не удивить, и если портфолио состоит из разрозненных кадров без бизнес-задачи, нанимающий лид закроет вкладку через десять секунд с мыслью: человек умеет писать запросы, но не умеет проектировать продукт. Заказчик покупает не факт генерации, а управляемость, системность и результат.

Ведущий: А что он хочет увидеть?

Ведущая: Четыре вещи. Как вы нашли реальную проблему: отзывы, портрет клиента, проверка первого экрана. Как вы приручили хаос нейросетей: паспорт стиля, единая палитра. Что вы доработали руками и почему отвергли первые варианты: лучше всего это видно, когда рядом лежат сырой черновик нейросети и ваш финальный макет. И как изменились метрики продукта: внимание на главной кнопке, чистота экрана, срок запуска.

Ведущий: Получается, слабая подача звучит как «смотрите, какие картинки я нагенерировал за десять минут».

Ведущая: А сильная — «вот как мы убрали отвал на оформлении заказа и собрали целостный запуск за пять часов на основе единой системы стиля». Бизнес-задача вместо хвастовства запросом.

Ведущий: Тут я всегда спотыкаюсь. Говорить ли заказчику, что я использовал нейросети? Вдруг он подумает, что я просто нажал кнопку?

Ведущая: Говорить, и открыто. Прозрачность работает на репутацию и защищает юридически: появляются стандарты маркировки, например метаданные о происхождении файла, которые уже читают многие платформы и программы. Попытка выдать трёхчасовую генерацию за две недели ручной отрисовки разрушает доверие навсегда. А честный стек поднимает вашу ставку: вы продаёте скорость выхода на рынок и широту проверенных гипотез, а не часы с пером в руке.

Ведущий: А как об этом говорить с разными заказчиками?

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

Ведущий: И это можно оформить прямо в кейсе?

Ведущая: Да, в подвале проекта короткий блок с вашей ролью и стеком. Роль: исследование, архитектура дизайн-системы, интерфейсы, арт-дирекшн и вёрстка. И отдельной строкой, какие инструменты ускорили работу: языковая модель для разбора интервью и анимаций, генератор вектора для базовых знаков, видеомодель для сцен ролика. Коротко и без оправданий.

Ведущий: Куда всё это выкладывать?

Ведущая: Три площадки, и они дополняют друг друга. Для российского рынка это Dprofile: там дизайнеров ищут студии и компании, и там внимательно смотрят на кириллическую типографику. Никакого английского текста-рыбы и кривых букв из растрового генератора: заголовки набраны живым шрифтом, с правильным тире и кавычками-ёлочками. Для международной витрины Behance: обложка конкурирует с сотнями работ, поэтому нужен чистый трёхмерный рендер или контрастный кадр с продуктом без мелкого текста, а внутри кейса чередуйте статичные слайды и видео на всю ширину. И третье, главное: личный сайт-портфолио, где вы закрываете сделку.

Ведущий: А что должно быть на личном сайте?

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

Ведущий: А как построить сам кейс? Он ведь не галерея.

Ведущая: Это инженерный детектив из шести глав. Первая: контекст, бизнес-задача, ограничения и сразу ссылка на живой сайт. Вторая: доказательное исследование, портрет клиента и три страха, из которых выросла структура. Третья: дизайн-система и укрощение нейросети, где сырая генерация лежит рядом с вашей финальной версией: этот слайд снимает подозрение, что вы просто нажали кнопку. Четвёртая: проверка иерархии цифрами, тепловая карта «до» и «после». Пятая: интерфейс в движении, трёхмерный объект и гибридный ролик. Шестая: итоги и честная рефлексия: что сработало, где нейросеть ошиблась и как вы это исправили, и какие две гипотезы проверите следующим спринтом.

Ведущий: И последнее: как называть себя? «ИИ-художник» звучит модно.

Ведущая: Только не так. «ИИ-художник», «промпт-дизайнер», «оператор нейросети» на рынке ассоциируются с демпингом и отсутствием школы. Называйте себя через основную профессию, усиленную ИИ: продуктовый дизайнер интерфейсов с нейросетями в арсенале или веб-дизайнер полного цикла, который отвечает за путь от бренд-системы до живого сайта с анимациями и роликом. И главное правило портфолио: три глубоких кейса побеждают двадцать картинок. Один продуктовый лендинг с полным циклом, один редизайн с доказанным ростом, один мобильный сервис с глубоким исследованием.

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

Ведущая: Вот и всё: этот выпуск закрывает трек «AI для дизайнеров». Вы прошли путь от первой сгенерированной картинки до проекта, который не стыдно показать заказчику. Поздравляем и желаем вам хороших проектов.

Ведущий: Упражнения, картинки и все примеры лежат в уроках на сайте. А в курсе есть и другие направления, например про контент и медиа. Если хочется попробовать разные нейросети в одном месте, без VPN и с оплатой рублями, это наш сервис arckep.ru.

Ведущая: Спасибо, что слушали!

Ведущий: До встречи!