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

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

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

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

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

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

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

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

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

Шапка сайта:

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

1-й блок:

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

О парке:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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