Как СhatGPT помог нам создать сайт для благотворительного экопроекта
Привет! Я Вадим Ойкин, арт-директор ИТ-компании Itech, которая помогает корпорациям цифровизировать бизнес-процессы. В январе 2023 года, когда истерия вокруг искусственного интеллекта только набирала обороты, мы провели эксперимент и собрали сайт для экопарка в Ульяновске с помощью ChatGPT. Рассказываю, насколько удачно нейросеть придумала структуру, построила повествование и написала текст для страницы.
Как мы начали работать с экопарком
ITECH — компания из Ульяновска, и наш основатель, Александр Щербина, ежегодно запускает благотворительные проекты в родном городе. Например, он учредил школьную олимпиаду по математике, победители которой получают бесплатное обучение компьютерным наукам. А во время пандемии вместе с другими предпринимателями организовал доставку еды для маломобильных горожан. Один из его последних проектов — экопарк, где ульяновцы смогут больше узнать о заботе об окружающей среде, сдать вторсырье на переработку и приятно провести время в современном общественном пространстве.
В январе 2023 года Александр попросил нас сделать для экопарка сайт-визитку — стандартную страницу с рассказом об экопарке. В то время в офисе ITECH только и разговоров было, что о нейросетях — в одном из таких диалогов мы решили, что это идеальный вариант для пробы искусственного интеллекта.
До этого мы пользовались нейросетями только эпизодически, в основном для чего-то забавного и нерабочего. Например, с помощью Midjourney, которая преобразует текст в изображения, сделали набор стикеров с котиками и милыми животными
Иллюстрации для сайта нам предоставили архитекторы парка, поэтому основной запрос был на грамотное проектирование и повествование — нам нужно было рассказать о проекте так, чтобы привлечь разные аудитории и удовлетворить их запросы. С этой задачей мы пошли к чат-боту с искусственным интеллектом ChatGPT, популярность которого росла с каждым днем.
Первый этап: рассказываем ChatGPT о проекте
Мы дали нейросети основную информацию про парк и спросили, кому это может быть интересно. Она выделила шесть групп потенциальных посетителей сайта, после чего мы попросили расписать, какую информацию будет важно видеть каждой из них. Вот что мы получили:
- Экологические организации: подробная информация об инициативах и мероприятиях парка, связанных с охраной окружающей среды.
- Местные органы власти и муниципалитеты: информация об инфраструктуре парка, объектах и характеристиках устойчивого развития, а также о влиянии парка на местное сообщество и окружающую среду.
- Школы и образовательные учреждения: учебные программы и материалы по экологическому просвещению, информация о посещении школ и экскурсиях в парк.
- Общественные группы и районные ассоциации: мероприятия в парке, открытые для массовой публики, информация о возможностях волонтеров в сообществе и влиянии парка на местный район.
- Предприятия и корпорации: информация о корпоративных инициативах в области устойчивого развития, партнерских отношениях и спонсорстве, а также о возможностях для бизнеса поддержать парк.
- Широкая общественность: обзор миссии, объектов и услуг парка, правила сортировки мусора, советы по сокращению отходов и защите окружающей среды.
Позже предложения нейросети легли в основу отдельного блока на сайте
С первого раза получить идеальный ответ вряд ли получится, зато диалог с ChatGPT — отличный способ побороть страх белого листа. Работу уже по сути начинают за вас, остается только подхватывать и направлять.
Второй этап: создаем структуру сайта
После того, как мы выяснили потенциальных посетителей сайта и их интересы, мы попросили ChatGPT предложить последовательность и содержание блоков сайта с акцентом на удобство пользователя. Основной плюс в том, что он помнит все прошлые запросы, поэтому вы находитесь в постоянном диалоге, расширяя контекст. Такую структуру мы получили с 5-7 запроса:
Шапка сайта:
- Логотип экопарка
- Главное меню навигации (Главная, О программе, Программы, Посещение, Контакты)
1-й блок:
- Четкий заголовок, подчеркивающий миссию парка
- Подзаголовок, описывающий цель парка, который обеспечит контекст
- Призыв к действию (узнать больше, запланировать посещение)
О парке:
- Краткий обзор парка и его объектов
- Информация о функциях устойчивого развития
- Фото или видео, демонстрирующее парк
Наши программы:
- Обзор образовательных программ и мероприятий парка
- Информация об экологических образовательных ресурсах
- Список текущих и предстоящих событий
- Спланируйте свой визит: информация о часах работы парка, входных билетах и местоположении
- Интерактивная карта и маршруты до парка
Свяжитесь с нами:
- Контактная форма для запросов и отзывов
- Информация о социальных сетях парка
Нижний колонтитул:
- Ссылки на правила парковки и политику конфиденциальности
- Информация о партнерах и спонсорах парка
- Информация об авторских правах
Дальше мы уточняли детали. Например, через нейросеть мы проверяли идеи о том, как правильно вывести блок с пожертвованиями на строительство парка. ChatGPT порекомендовал:
- Расположение: блок пожертвований лучше разместить на видном месте, например, в верхнем или нижнем колонтитуле, чтобы посетители могли его легко увидеть.
- Призыв к действию: блок должен содержать четкий призыв к действию, например «Пожертвовать сейчас» или «Поддержать строительство экопарка», чтобы побудить пользователей к действию.
- Варианты пожертвований: в блоке должны отображаться различные варианты пожертвований: разовые пожертвования, ежемесячные пожертвования и индивидуальные суммы, чтобы удовлетворить предпочтения разных доноров.
- Способы оплаты: блок должен предоставлять различные способы оплаты: кредитная карта, PayPal и банковский перевод, чтобы удовлетворить различные потребности доноров.
- Безопасность: процесс пожертвования должен быть безопасным, и на веб-сайте должно быть четко указано, что пожертвование безопасно и что личная и финансовая информация пользователя будет защищена.
- Обратная связь: блок должен предоставлять обратную связь спонсорам, например, подтверждение по электронной почте или страницу благодарности, чтобы выразить признательность и держать их в курсе.
ChatGPT также советовал, куда добавить призыв к действию, как сделать сайт более привлекательным для целевой аудитории, в каких блоках должны быть иллюстрации, а в каких можно оставить только текст. Еще нейросеть посоветовала нам добавить на сайт интерактива и анимаций.
Добавили интерактива по совету ИИ
Последний этап: подключаем человека
Все тексты, в том числе заголовки, по своим же идеям нам написал ChatGPT. Но здесь понадобилось больше попыток, чем в работе со структурой, чтобы отшлифовать текст. Мы задавали настроение текста, количество знаков и просили нейросеть выдавать 10 ответов, чтобы выбрать среди разных вариантов, а затем предлагали доработки по ним.
Когда с проектированием было закончено, мы пошли собирать сайт в редакторе Figma, создавать логотип и добавочные мини-изображения — уже без помощи искусственного интеллекта. Мы изначально хотели поэкспериментировать именно со структурой сайта и текстом, поэтому решили не тратить время на запросы в Midjourney и сделали визуал сами.
Проектирование сайта мы уместили в 30 часов, а затем перенесли результаты на движок Tilda. Посмотреть результат можно по ссылке: http://ecopark73.ru/
Итоги эксперимента и мысли об ИИ
В работе с благотворительными и общественными проектами вижу очень большой потенциал ChatGPT.
- Во-первых, сокращение часов работы дизайнеров, отсутствие копирайтера и проектировщика снижают затраты на сборку сайта примерно в три раза. Так, создание и редизайн страниц и более сложных сайтов могут быть доступны для большего спектра проектов и компаний.
- Во-вторых, нейросеть, которая обновляется не по дням, а по часам, уже умеет быть эмпатичной и понимает разные группы людей. О развитии эмпатии искусственного интеллекта много говорит Дмитрий Мацкевич, которого я очень советую почитать, если вы хотите больше понимать про нейросети. Например, статью для журнала Setters, где он описывает плюсы ИИ: от преодоления СДВГ до выстраивания более качественного контакта с детьми. Эмпатичность ChatGPT помогает четко доносить смыслы до разных аудиторий и привлекать больше людей к благотворительным проектам.
Важно сказать, что в тот момент мы учились работать с ChatGPT экспериментальным путем — нейросеть интуитивно понятна любому, что является огромным плюсом. Но не нужно воспринимать ее как источник абсолютной истины. Это, скорее, креативный напарник, который направляет специалиста в нужное русло или дополняет его идеи.
Еще в 2020 году я выступал на Дизайн-выходных и рассказывал про страшное будущее, где сюжеты из фантастических фильмов станут реальностью. Зрительница из зала тогда меня спросила, что же нам дизайнерам делать. Я ответил, что когда этот день настанет, нам нужно будет перенаправить свою работу в другое русло. И вот, это будущее пришло, правда, неожиданно быстро. О полной замене дизайнерской работы нейросетью речи не идет, но теперь мы можем сокращать рутинные действия и постоянно расти через взаимодействие с искусственным напарником — копирайтером, проектировщиком и креативщиком в одном лице.
Буду рад вашей обратной связи в комментариях! А если вы захотите поддержать проект экопарка, это можно сделать здесь.
По опыту — полностью отдавать Чату работу с текстом пока не получается, поэтому рано говорить, что копирайтеры и корректоры в команде больше не нужны. Хороший результат выходит, когда за Чатом, и за тем, что он пишет, присматривает специалист. Все-таки ляпы и шероховатости у него сейчас встречаются нередко
Это так. Для качественного результата нужно несколько итераций, еще лучше дать взглянуть хорошему редактору :)
ChatGPT справляется с текстами лучше большинства людей, и если спеца нет под рукой, это отличный вариант. Кстати, хорошо помогает попросить его написать "проще и короче"
Когда запустится парк?
Сейчас проект на рассмотрении у городских властей. Если его одобрят, посетить экопарк можно будет осенью 2024 года
Да, для НКО ИИ — глоток воздуха
по итогу картинка приятная, цвета не напрягают глаз
Как планируете использовать чат на других проектах?