Как СhatGPT помог нам создать сайт для благотворительного экопроекта

Привет! Я Вадим Ойкин, арт-директор ИТ-компании Itech, которая помогает корпорациям цифровизировать бизнес-процессы. В январе 2023 года, когда истерия вокруг искусственного интеллекта только набирала обороты, мы провели эксперимент и собрали сайт для экопарка в Ульяновске с помощью ChatGPT. Рассказываю, насколько удачно нейросеть придумала структуру, построила повествование и написала текст для страницы.

Как СhatGPT помог нам создать сайт для благотворительного экопроекта

Как мы начали работать с экопарком

ITECH — компания из Ульяновска, и наш основатель, Александр Щербина, ежегодно запускает благотворительные проекты в родном городе. Например, он учредил школьную олимпиаду по математике, победители которой получают бесплатное обучение компьютерным наукам. А во время пандемии вместе с другими предпринимателями организовал доставку еды для маломобильных горожан. Один из его последних проектов — экопарк, где ульяновцы смогут больше узнать о заботе об окружающей среде, сдать вторсырье на переработку и приятно провести время в современном общественном пространстве.

<i>Проект экопарка</i>
Проект экопарка

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

До этого мы пользовались нейросетями только эпизодически, в основном для чего-то забавного и нерабочего. Например, с помощью Midjourney, которая преобразует текст в изображения, сделали набор стикеров с котиками и милыми животными

<i>Cтикеры до сих пор красуются на ноутбуках команды</i>
Cтикеры до сих пор красуются на ноутбуках команды

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

Первый этап: рассказываем ChatGPT о проекте

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

  • Экологические организации: подробная информация об инициативах и мероприятиях парка, связанных с охраной окружающей среды.
  • Местные органы власти и муниципалитеты: информация об инфраструктуре парка, объектах и характеристиках устойчивого развития, а также о влиянии парка на местное сообщество и окружающую среду.
  • Школы и образовательные учреждения: учебные программы и материалы по экологическому просвещению, информация о посещении школ и экскурсиях в парк.
  • Общественные группы и районные ассоциации: мероприятия в парке, открытые для массовой публики, информация о возможностях волонтеров в сообществе и влиянии парка на местный район.
  • Предприятия и корпорации: информация о корпоративных инициативах в области устойчивого развития, партнерских отношениях и спонсорстве, а также о возможностях для бизнеса поддержать парк.
  • Широкая общественность: обзор миссии, объектов и услуг парка, правила сортировки мусора, советы по сокращению отходов и защите окружающей среды.
<p><i>Позже предложения нейросети легли в основу отдельного блока на сайте</i></p>

Позже предложения нейросети легли в основу отдельного блока на сайте

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

Второй этап: создаем структуру сайта

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

Шапка сайта:

  • Логотип экопарка
  • Главное меню навигации (Главная, О программе, Программы, Посещение, Контакты)

1-й блок:

  • Четкий заголовок, подчеркивающий миссию парка
  • Подзаголовок, описывающий цель парка, который обеспечит контекст
  • Призыв к действию (узнать больше, запланировать посещение)

О парке:

  • Краткий обзор парка и его объектов
  • Информация о функциях устойчивого развития
  • Фото или видео, демонстрирующее парк

Наши программы:

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

Свяжитесь с нами:

  • Контактная форма для запросов и отзывов
  • Информация о социальных сетях парка

Нижний колонтитул:

  • Ссылки на правила парковки и политику конфиденциальности
  • Информация о партнерах и спонсорах парка
  • Информация об авторских правах
<i>Использовали структуру, которую нам подсказал ИИ</i>
Использовали структуру, которую нам подсказал ИИ

Дальше мы уточняли детали. Например, через нейросеть мы проверяли идеи о том, как правильно вывести блок с пожертвованиями на строительство парка. ChatGPT порекомендовал:

  • Расположение: блок пожертвований лучше разместить на видном месте, например, в верхнем или нижнем колонтитуле, чтобы посетители могли его легко увидеть.
  • Призыв к действию: блок должен содержать четкий призыв к действию, например «Пожертвовать сейчас» или «Поддержать строительство экопарка», чтобы побудить пользователей к действию.
  • Варианты пожертвований: в блоке должны отображаться различные варианты пожертвований: разовые пожертвования, ежемесячные пожертвования и индивидуальные суммы, чтобы удовлетворить предпочтения разных доноров.
  • Способы оплаты: блок должен предоставлять различные способы оплаты: кредитная карта, PayPal и банковский перевод, чтобы удовлетворить различные потребности доноров.
  • Безопасность: процесс пожертвования должен быть безопасным, и на веб-сайте должно быть четко указано, что пожертвование безопасно и что личная и финансовая информация пользователя будет защищена.
  • Обратная связь: блок должен предоставлять обратную связь спонсорам, например, подтверждение по электронной почте или страницу благодарности, чтобы выразить признательность и держать их в курсе.
<i>Так блок с пожертвованиями выглядит на сайте</i>
Так блок с пожертвованиями выглядит на сайте

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

Добавили интерактива по совету ИИ

Последний этап: подключаем человека

Все тексты, в том числе заголовки, по своим же идеям нам написал ChatGPT. Но здесь понадобилось больше попыток, чем в работе со структурой, чтобы отшлифовать текст. Мы задавали настроение текста, количество знаков и просили нейросеть выдавать 10 ответов, чтобы выбрать среди разных вариантов, а затем предлагали доработки по ним.

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

Проектирование сайта мы уместили в 30 часов, а затем перенесли результаты на движок Tilda. Посмотреть результат можно по ссылке: http://ecopark73.ru/

Вот, что получилось в итоге

Итоги эксперимента и мысли об ИИ

В работе с благотворительными и общественными проектами вижу очень большой потенциал ChatGPT.

  • Во-первых, сокращение часов работы дизайнеров, отсутствие копирайтера и проектировщика снижают затраты на сборку сайта примерно в три раза. Так, создание и редизайн страниц и более сложных сайтов могут быть доступны для большего спектра проектов и компаний.
  • Во-вторых, нейросеть, которая обновляется не по дням, а по часам, уже умеет быть эмпатичной и понимает разные группы людей. О развитии эмпатии искусственного интеллекта много говорит Дмитрий Мацкевич, которого я очень советую почитать, если вы хотите больше понимать про нейросети. Например, статью для журнала Setters, где он описывает плюсы ИИ: от преодоления СДВГ до выстраивания более качественного контакта с детьми. Эмпатичность ChatGPT помогает четко доносить смыслы до разных аудиторий и привлекать больше людей к благотворительным проектам.

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

Еще в 2020 году я выступал на Дизайн-выходных и рассказывал про страшное будущее, где сюжеты из фантастических фильмов станут реальностью. Зрительница из зала тогда меня спросила, что же нам дизайнерам делать. Я ответил, что когда этот день настанет, нам нужно будет перенаправить свою работу в другое русло. И вот, это будущее пришло, правда, неожиданно быстро. О полной замене дизайнерской работы нейросетью речи не идет, но теперь мы можем сокращать рутинные действия и постоянно расти через взаимодействие с искусственным напарником — копирайтером, проектировщиком и креативщиком в одном лице.

Буду рад вашей обратной связи в комментариях! А если вы захотите поддержать проект экопарка, это можно сделать здесь.

16
14 комментариев

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

Ответить
Автор

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

2
Ответить

Когда запустится парк?

Ответить
Автор

Сейчас проект на рассмотрении у городских властей. Если его одобрят, посетить экопарк можно будет осенью 2024 года

2
Ответить

Да, для НКО ИИ — глоток воздуха

1
Ответить

по итогу картинка приятная, цвета не напрягают глаз

1
Ответить

Как планируете использовать чат на других проектах?

Ответить