Мини-спецпроект: как создание страницы 404 превратилось в спецпроект

1. Вводная задача от заказчика, проблематика, цели

Ребрендинг нашей компании (Email Soldiers → CRM-group) логично привёл к созданию нового сайта. Предстояло сделать много основных рабочих страниц, поэтому решили, что 404-я временно будет дефолтной — просто с выдачей ошибки от веб-сервера.

Вот причины, почему мы решили не просто сделать страницу 404, а рабочее пространство:

• 1. Невозможно предусмотреть, где ошибётся пользователь или сервер, а значит, высоки шансы потерять посетителя сайта как потенциального клиента.
• 2. Техническая страница с ошибкой выпадает из общей стилистики сайта, что вводит пользователя в ступор.
• 3. Вариантов движения с дефолтной 404-й немного: идти назад или совсем закрыть сайт.

2. Описание реализации кейса и творческого пути по поиску оптимального решения

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

Совместно с руководителем направления спецпроектов разработали механику:

• — Утилитарное решение в основе: переводить пользователя на здоровые страницы.
• — Геймификация: сделать этот переход необычным, чтобы развлечь растерянного посетителя, снизить возможный негатив.
• — Польза для юзера: давать практические советы для улучшения CRM-маркетинга.
• — Профит для себя: продвигать контент.

У нас есть глоссарий с маркетинговыми терминами, блог, практические материалы для скачивания, кейсы. Придумали интегрировать рандомайзер с советами по улучшению маркетинга и переводить на публикацию, с которой выдаётся совет.

Немного технического: ошибка 404 — это код ответа HTTP-протокола. Протокол — сетевая сущность сервера. А «сервер» у пользователя, далёкого от программирования, часто ассоциируется с неким физическим объектом. Получается, что в момент появления 404 страницы посетитель сайта попадает в условную серверную, где узнаёт об ошибке и получает возможность сделать выбор.

Придумали сделать визуализацию этого пространства и поселить туда персонажа, который этот выбор предоставит.

Параллельно разработке 404-й команда CRM-group активно готовилась к ежегодной конференции «Маркетинг и кутёж». Появился кандидат, идеально подходящий для нашего мини-спецпроекта — маскот конференции Котёж.

Персонаж разрабатывался исключительно для мероприятия, но хорошо влился в лейтмотив компании. Эпизодически наблюдаем: некоторые клиенты и партнёры думают, что Котёж — маскот CRM-group, а не отдельно взятого события. Кто мы такие, чтобы их переубеждать? 🙂

Определились с визуалом. Решили использовать пиксельный стиль:

• — это гибкость в креативе;
• — намекает, что пользователь находится не на обычной странице сайта.
• — Нам привычен графический редактор Figma — там были созданы рабочие элементы в пиксельном стиле: кнопки, бабл, пиксельная интерпретация серверов.

С главным персонажем пришлось использовать ряд других приложений.

Сначала кот был санимирован в родной среде Blender и перенесён в виде набора png-изображений Adobe Photoshop. Здесь уменьшили размер холста, чтобы создать эффект пикселизации. Сохранили через функцию «Экспортировать для веб», где в настройках уменьшили количество цветов, увеличили эффект дизеринга, чтобы создать ощущение нехватки цвета и добавить олдскульности переходу между изображениями.

Получившиеся изображения тем же набором снова собрали в фотошопе, чтобы проверить, как выглядит итоговая анимация,а при необходимости поправить пиксельную графику. Например, если вдруг глаз смотрит немного не туда или ус отлетел. 🙂

У наших разработчиков бэклог на два месяца вперёд, а 404-ая не столь важный элемент пазла и не входит в приоритетные задачи. В такой момент можно вспомнить цитату одного персонажа комиксов: «Ладно. Я сделаю это сам», — и пойти своими силами колдовать.

У нас уже был опыт в другом внутреннем спецпроекте, где мы использовали Opensource — движок для создания игр, в том числе и HTML5. Редактор движка из себя представляет nocode-среду, однако, с возможностью использования JavaScript — нам это было важно создания интерактива на странице.

На этом этапе действовали так:

• 1. Расположили все объекты внутри среды разработки так, чтобы они корректно отображались в разных сценариях.
• 2. Описали их привязку относительно центра и краёв экрана.
• 3. Настроили адаптивность с учётом брейкпоинтов сайта CRM-group.
• 4. Реализовали анимацию персонажа и всплывающего окна с контентом.

Из кейсов, ключевых статей, описания услуг собрали небольшие маркетинговые советы.

Нужно было решить, откуда брать текст советов. Если собрать информацию внутри движка, то для обновлений реплик каждый раз придётся пересобирать игровую логику и загружать изменения на сервер, а это не самый удобный вариант.

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

Обработчик подтягивает данные в виде номера совета, описания, текста кнопки и ссылки.

Страницу интегрируем с помощью элемента iframe, чтобы быстро разворачивать её на сайте.

Но с этим способом были две проблемы:

• 1. Стандартный метод window.open() — способ открытия одной страницы внутри другой, — блокируется браузером.
• 2. Переходы по клику происходят не внутри вкладки, а внутри iframe.

За помощью обратились к руководителю IT-отдела — он подсказал такие решения:

• 1. Вместо window.open() использовать свойство window.location.href: это позволяет не открывать новую вкладку, а заменять URL имеющейся.
• 2. Чтобы при клике на кнопку или другой интерактивный элемент внутри iframe менялся адрес родительской вкладки, написали обработчик POST-запросов. Использовали для этого ChatGPT.

3. Результаты сотрудничества

Благодаря спецпроекту, страница 404 получилась креативной, полезной, местами даже забавной.