Autosmm.ru

Информация о проекте

AutoSMM — российская платформа, использующая передовые нейросети для автоматизации создания и публикации контента в социальных сетях (ВКонтакте, Telegram). Сервис позволяет предпринимателям и маркетологам настроить источники новостей, а искусственный интеллект самостоятельно генерирует тексты, изображения и видео в фирменном стиле бренда и публикует их по расписанию.

Цели создания сайта:

• ярко и запоминающееся представить новый сервис на рынке
• донести ключевые преимущества автоматизации с помощью ИИ
• выделиться на фоне конкурентов нестандартным, дерзким дизайном, созвучным с брендом («панковость»)
• обеспечить понятную навигацию и призывы к регистрации
•  содержать формы сбора заявок (лид-формы) и настроить отправку данных на почту
• быть полностью адаптивным для корректного отображения на всех устройствах

Особенности проекта:
Проект отличался нестандартным подходом к визуальному оформлению и рядом технических нюансов:

• требовался уникальный дизайн, сочетающий «панковскую» эстетику с современными трендами веб-дизайна, что было реализовано через графические элементы, нестандартную сетку и «негативное пространство» в блоках
• концепция дизайна разрабатывалась итеративно: от прототипа до финального макета с учётом пожеланий заказчика по стилю и сокращению дублирующейся информации
• в дизайне присутствуют пустые блоки, которые после обсуждения было решено оживить микроанимацией — при наведении в них появляется кнопка для вызова лид-формы
• потребовалась настройка нескольких лид-форм на различные элементы (кнопки, пустые ячейки) с отправкой данных на почту заказчика, включая валидацию номера телефона
• после завершения основной вёрстки были обнаружены и исправлены баги с отображением на разных разрешениях и анимацией иконок

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

На основе макета выполнена адаптивная вёрстка с использованием HTML, CSS и JavaScript. Особое внимание уделено микроанимациям: пустые ячейки в одном из блоков получили анимацию появления кнопки при наведении, что добавило интерактивности и вовлекает пользователя. Все кнопки и некоторые элементы интерфейса привязаны к вызову лид-форм.