Дизайнер + ChatGPT: как, когда и зачем мы создаем сервисы без привлечения кодеров

«Польза графических нейросетей для дизайнера очевидна, а в чем может быть польза лингвистических?», — задумался наш арт-директор, пошел и написал мини-сервис для генерации визиток с помощью ChatGPT. А потом еще один с игровой механикой для вовлечения, и еще — для разработки креативной концепции. И вы так можете! Рассказываем подробности в статье.

Когда дизайнеру приходит рутинная задача вроде создать очередную презентацию или макет визиток, в голове часто всплывает вопрос «Я что, серьезно должен это делать сам?». Это звоночек, чтобы задуматься, нельзя ли упростить задачу и автоматизировать работу с помощью какого-нибудь сервиса. Давайте посмотрим, что это может быть, на примере сервисов от нашего арт-директора Кости Остроухова.

Сервис генерации визиток

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

Такое решение пришлось кстати для одного из наших заказчиков, для которого мы создали диджитал-брендбук. Подробнее об этом расскажем в кейсе — следите за обновлениями.

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

С таким сервисом дизайнеру остается один раз утвердить верстку и варианты оформления — а потом все, кому нужна визитка, просто переходят по ссылке, вписывают в поля свои данные и скачивают файл, который можно передавать в типографию.

Пятнашки

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

Попробуйте поиграть

Карточки эмоций

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

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

Пользуйтесь!

1. Пишем запрос чату: «Хочу создать такой-то веб-сервис на HTML, JS, CSS. Напиши мне код».

2. Получаем код и вставляем его, например, в Webflow — как Embed code. Или в CodePen — онлайн-редактор для фронтендеров.

3. Проверяем ошибки, которые нападали в консоль. Копируем и отправляем в ChatGPT.

4. Получаем от чата исправления и вставляем в выбранный сервис.

Лайфхак №1: чтобы не искать, какую часть кода нужно заменить, можно просить чат присылать исправленный код целиком.

Лайфхак №2: создавать сервис лучше итерациями — сначала реализуете одну главную возможность, а потом наращиваете функциональности.

Например, при создании карточек эмоций Костя сначала определился с тем, как это будет выглядеть — как таблица Менделеева. Потом реализовал возможность выбирать карточки. А следом добавил выгрузку в PNG.

5. Подключаем умения дизайнера — добавляем стили, делаем адаптивную верстку и другие кастомные штуки.

Чтобы оптимизировать время и силы

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

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

Чтобы создавать от и до

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

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

Так интереснее

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

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

Если к концу статьи у вас возник такой вопрос — значит, впереди вас ждет увлекательное путешествие в мир разработки с помощью нейросетей. Делитесь своими идеями сервисов и результатами их разработки в комментариях.

А если у вас есть похожая задача на дизайн или разработку — напишите о ней в наш Телеграм: @jetstyle_bot. Вместе что-нибудь придумаем!