Хочешь сделать хорошо, сделай сам: как Rocket Business свой сайт разработали

И забрали золото с этим кейсом на WDA 2024. Полный редизайн, разработка на последней версии React, год работы команды. Мейковер принес нам заявки от топов рынка — Мегафона и Билайна. Как это было, рассказываем в статье о большом ребрендинге. 

Познакомимся

Сегодня Rocket Business — партнер известных брендов, федеральных компаний, среднего и крупного бизнеса. Для этого мы прошли большой путь от регионального подрядчика до компании №2 по разработке и продвижению сайтов по версии Рейтинга Рунета. 

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

Чтобы добиться крутого результата, мы:

1. провели анализ сайтов конкурентов;
2. составили технические чек-листы и подобрали референсы;
3. разработали минималистичную и современную концепцию для сайта;
4. совместили элементы графического дизайна и 3D-анимации;
5. сверстали сайт на последней версии Next.js 13 и React;
6. провели тестирование, аудит юзабилити и внесли правки.

Мы получили качественный, легко масштабируемый продукт. Сегодня продолжаем анализировать пользовательский опыт, проводим a/b тесты и дорабатываем элементы интерфейса.  

Анализ конкурентов 

Мы промониторили сайты коллег, собрали референсы и оценили их по критериям:

1. стек технологий;
2. удобство использования;
3. логика навигации;
4. структура;
5. SEO-оптимизация;
6. актуальность дизайна;
7. акцентирование УТП компании.

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

Алексей Егоров

CEO Rocket Business

Источником вдохновения стали сайты дизайн-студий, digital-агентств полного цикла. У них получается передать главный посыл: здесь оказывают качественные и крутые услуги. Такие же смыслы мы транслируем на нашем сайте. 

Новая концепция

Самый сложный этап — создание айдентики компании. Первым делом мы обновили логотип: убрали градиент, сделали лого более графичным и современным.

Затем выбрали шрифт — Helvetica — корпоративные цвета и единые правила визуального оформления.  

В дизайне держались нескольких принципов:

1. чистота и минимализм;
2. функциональные воздушные блоки;
3. безрамочные анимационные баннеры;
4. белый фон на всех страницах;
5. корпоративные цвета — оранжевый и черный — для акцентов. 

От каких идей мы отказались?

Дизайн

Ключевая задача — достичь баланса между противоположными трендами:

1. Яркие изображения и монохром

1. Крупные элементы и пустые пространства

1. Строгие линии и графические детали

1. Статические и анимационные блоки  

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

Самая важная и продающая страница любого диджитал-агентства. У кейсов есть шаблонная структура: но в каждой истории расставлены свои акценты. Где-то есть зрелищные шоурилы, где-то — графики и диаграммы, а где-то — большие иллюстрации на 2-3 скролла. 

Самопрезентация и HR-бренд

Мы проанализировали записи из Вебвизора на старой версии сайта. Оказалось, что один из самых вовлекающих элементов интерфейса — карусель с яркими фото сотрудников.

Наши кликабельные лица мы решили оформить еще красивее. Сделали фотосессию и подготовили карточки в едином стиле. Блок выполняет сразу несколько важных функций: 

Разработка

Сайт собран на фреймворках Next.js 14 App Router + React и работает как реактивное приложение. 

Последняя версия Next.js вышла в мае 2023: она предлагает обновленный, более удобный инструментарий. В этом заключалась сложность разработки. IT-сообщество еще не успело сделать полноценные обзоры на маршрутизатор и написать короткие понятные мануалы. 

Ответов на возникающие вопросы на Stack Overflow не было: команда пользовалась только документацией от разработчиков. Порылись в приложениях с открытым кодом, разобрались в новом подходе к API — и собрали сайт. Верстка и перевод на JavaScript заняли 8 недель. 

Все размеры блоков, текстов, анимаций и фото заданы в vw/vh. Страницы отображаются верно при любом разрешении экрана. Планшет, смартфон, монитор или Smart-TV телевизор — сайт выглядит красиво на всех устройствах и во всех браузерах. 

На сайте использовали:

1. Формат обмена данными — JSON;
2. Библиотеку для создания анимаций — Framer Motion;
3. Библиотеку для работы с React — Redux Toolkit;
4. CSS Modules.

Финальная версия сайта соответствует стандартам качества:

Можно долго перечислять плюсы сайта. Их уже оценило жюри на WDA, оцените и вы!

Мы делаем сайты красиво, а с клиентами сотрудничаем только по-любви: надолго, взаимно, всерьез. 

Увидеть больше наших кейсов можно здесь

Узнать о других услугах тут