Разработка фирменного стиля и сайта для чата на базе искусственного интеллекта INTIMATE.AI.

К нам обратился клиент из ОАЭ с запросом создать фирменный стиль и привлекательный сайт для стартапа - романтического чата на базе искусственного интеллекта. Обученная нейросеть у клиента уже имелась, оставалось упаковать проект и донести ценность до пользователя. У клиента был запрос на яркий и привлекательный сайт с эффектными анимациями.

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

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

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

Основной цвет сайта был выбран в темном стиле, так как на нем лучше выделяются неоновые цвета и создается особая атмосфера. За акцентные цвета были выбраны салатово-зеленый градиент и чистый салатовый оттенок. Концепции мы делали только для мобильной версии, исходя из нашего подхода. В итоге, из нескольких вариантов было принято решение объединить несколько концепций в одну.

После согласования концепции мы отрисовали остальные экраны. Сгенерировали девушек, исходя из оттенков и стилистики сайта. Они получилось реалистичными и привлекательными. Далее подготовили адаптивы для десктопа и планшета, чтобы хорошо отображался на всех устройствах. Для презентации дизайна клиенту мы анимировали некоторые из блоков в Jitter.

Работа по бекенду была минимальная. Весь упор был сделан на фронтенде. Из-за сложности в анимации нам потребовалось время, чтобы сделать их плавными и нативными.

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

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

— Для добавления плавной прокрутки всего сайта использовался плагин ASScroll.

— Для анимации использовалась библиотека GSAP. Она позволяет создавать высокопроизводительные и контролируемые анимации.

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

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