JetStyle
JetStyle
5 мин. читать
1853 показа
447 открытий

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

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

Что может накодить дизайнер

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

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

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

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

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

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

Пятнашки

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

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

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

 

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

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

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

Как подружиться с ChatGPT по шагам

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

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

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

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

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

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

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

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

Работая с ChatGPT, ощущаешь себя в фантастическом фильме. Раньше программисту нужно было искать ответы в документации. Я же, если не знаю, например, как нарисовать линию в PDF — просто обращаюсь в чат и получаю в ответ готовый рабочий код.

При этом нужно понимать грани нейровозможностей. ChatGPT пока не очень хорошо справляется с точными настройками. Нейросеть не может сделать сервис полностью без помощи человека.
Костя Остроухов, арт-директор JetStyle

Так зачем дизайнеру кодить?

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

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

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

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

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

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

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

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

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

А что, так можно было?

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

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

 
1853

Подпишитесь на еженедельный дайджест с лучшими материалами

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

Cпасибо за подписку!

Теперь каждый понедельник вам будет приходить на почту дайджест. Никакого спама, обещаем!

Читать ещё

Лучшее

Похожее

только для зарегистрированных
только для зарегистрированных
Подтвердите действие
Точно?
Сообщение
Текст
Ошибка загрузки файла
Рекомендуем {optim_res}px или больше. Вес файла не более 5МБ. Вы можете загрузить изображение в формате JPG, JPEG, HEIC, PNG или GIF.
Подтвердите действие