«Польза графических нейросетей для дизайнера очевидна, а в чем может быть польза лингвистических?», — задумался наш арт-директор, пошел и написал мини-сервис для генерации визиток с помощью ChatGPT. А потом еще один с игровой механикой для вовлечения, и еще — для разработки креативной концепции. И вы так можете! Рассказываем подробности в статье.
Что может накодить дизайнер
Когда дизайнеру приходит рутинная задача вроде создать очередную презентацию или макет визиток, в голове часто всплывает вопрос «Я что, серьезно должен это делать сам?». Это звоночек, чтобы задуматься, нельзя ли упростить задачу и автоматизировать работу с помощью какого-нибудь сервиса. Давайте посмотрим, что это может быть, на примере сервисов от нашего арт-директора Кости Остроухова.
Сервис генерации визиток
Создание визиток — задача, которая требует минимум творчества и максимум усидчивости. Если этот процесс не автоматизировать, то дизайнерам приходится готовить дополнительные макеты для каждого нового человека и править типографику. А еще в таком процессе большой риск опечаток. В общем, радости мало. Поэтому Костя придумал сервис генерации визиток и разработал его с помощью ChatGPT.
Такое решение пришлось кстати для одного из наших заказчиков, для которого мы создали диджитал-брендбук. Подробнее об этом расскажем в кейсе — следите за обновлениями.
Нейросеть закрыла большинство вопросов: подсказала, какие библиотеки использовать и какие методы есть в библиотеках, помогла отрефакторить и настроить получающийся код — добавила логику выбора обложки визитки.
С таким сервисом дизайнеру остается один раз утвердить верстку и варианты оформления — а потом все, кому нужна визитка, просто переходят по ссылке, вписывают в поля свои данные и скачивают файл, который можно передавать в типографию.
Пятнашки
Не все сервисы нужны, чтобы упрощать какую-то работу, — иногда хочется просто повеселиться. Так, в проекте по созданию диджитал-брендбука нам нужно было показать применение фирменного стиля к мерчу, а именно — к пятнашкам. Вместо того, чтобы просто добавить статичный макет, Костя сделал настоящую интерактивную головоломку. С такой механикой вовлечения у брендбука будет очень высокая конверсия по количеству проведенного в нем времени.
Карточки эмоций
Есть такая практика проектирования единого видения креативной концепции среди команды — эмоциональные карточки. Ими можно описать характер бренда: например, молодой, задорный, рок-н-ролльный.
Костя создал сервис, в котором есть наглядный набор карточек с эмоциями — команде нужно только зайти, выбрать подходящие и выгрузить коллаж в PNG. И не нужно каждый раз составлять список эмоций и пытаться как-то где-то зафиксировать выбор.
Как подружиться с ChatGPT по шагам
1. Пишем запрос чату: «Хочу создать такой-то веб-сервис на HTML, JS, CSS. Напиши мне код».
2. Получаем код и вставляем его, например, в Webflow — как Embed code. Или в CodePen — онлайн-редактор для фронтендеров.
3. Проверяем ошибки, которые нападали в консоль. Копируем и отправляем в ChatGPT.
4. Получаем от чата исправления и вставляем в выбранный сервис.
Лайфхак №1: чтобы не искать, какую часть кода нужно заменить, можно просить чат присылать исправленный код целиком.
Лайфхак №2: создавать сервис лучше итерациями — сначала реализуете одну главную возможность, а потом наращиваете функциональности.
Например, при создании карточек эмоций Костя сначала определился с тем, как это будет выглядеть — как таблица Менделеева. Потом реализовал возможность выбирать карточки. А следом добавил выгрузку в PNG.
5. Подключаем умения дизайнера — добавляем стили, делаем адаптивную верстку и другие кастомные штуки.
Работая с ChatGPT, ощущаешь себя в фантастическом фильме. Раньше программисту нужно было искать ответы в документации. Я же, если не знаю, например, как нарисовать линию в PDF — просто обращаюсь в чат и получаю в ответ готовый рабочий код.
При этом нужно понимать грани нейровозможностей. ChatGPT пока не очень хорошо справляется с точными настройками. Нейросеть не может сделать сервис полностью без помощи человека.
Так зачем дизайнеру кодить?
Чтобы оптимизировать время и силы
Автоматизация позволяет не только не заниматься тем, чем не очень хочется, но и, например, сокращает петли согласований. Вы один раз сделали сервис — и уже не нужно утверждать каждый результат, который в нем получается.
А то, что эти сервисы делает не программист за условных шесть часов, а дизайнер за час-два, еще и бережет один из самых дефицитных ресурсов любой команды.
Чтобы создавать от и до
Чем больше у вас зон ответственности — тем значимее вы себя чувствуете и тем больше свободы у вас есть. Дизайнеры, которые еще и немного разработчики, могут создавать не просто визуальные образы, а продукты целиком. Пусть небольшие.
Так идеи быстрее воплощаются, а результат — отражение личности дизайнера, а не коллективное творчество, ведь нейросеть делает ровно так, как ты ее попросишь. Правда, иногда, конечно, полезно подумать об кого-то еще.
Так интереснее
Дополнительные компетенции позволяют воплощать более смелые фантазии — в результате получается не только полезный инструмент, а продукт, которым интересно и весело пользоваться — дизайнерам, заказчикам и их клиентам. Вспомните пятнашки.
Такие веселые дополнения обычно не вписываются в бюджет, а благодаря оптимизации затрат за счет нейросетей — могут и вписаться.
А что, так можно было?
Если к концу статьи у вас возник такой вопрос — значит, впереди вас ждет увлекательное путешествие в мир разработки с помощью нейросетей. Делитесь своими идеями сервисов и результатами их разработки в комментариях.
А если у вас есть похожая задача на дизайн или разработку — напишите о ней в наш Телеграм: @jetstyle_bot. Вместе что-нибудь придумаем!