Сапожники с сапогами: как компания по разработке и SEO свой сайт делала

Убираем ракеты, добавляем минимализм и закладываем… почти год на разработку! Как провести редизайн так, чтобы получить предложения о сотрудничестве от крупных компаний? Рассказываем в кейсе о большой работе и заметном ребрендинге.

Дизайн предыдущей версии сайта rbru.ru не менялся уже несколько лет. К 2022 году в «Rocket Business» изменилось позиционирование. Компания уже не региональный подрядчик, а SEO-агентство №1 — партнер известных брендов, федеральных компаний, среднего и крупного бизнеса. На это есть свои основания.

Мы накопили портфолио из больших и сложных работ. Агентство завоевало важные награды и места в топовых конкурсах и рейтингах: Tagline, Workspace, Рейтинг Рунета. 1 место в категории «Создание и продвижение сайтов» обязывает нас иметь сайт, достойный лидеров рынка.

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

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

• провели анализ сайтов конкурентов;

• составили технические чек-листы и подобрали референсы;

• разработали минималистичную и современную концепцию для сайта;

• совместили элементы графического дизайна и 3D-анимации;

• сверстали сайт на последней версии Next.js 14 и React;

• провели тестирование, аудит юзабилити и внесли правки.

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

1. Project-менеджер и руководитель составляют ТЗ;

2. Дизайнер разрабатывает концепцию страницы;

3. Дизайн проходит через 2-3 круга согласований и правок;
4. Согласованный макет уходит в верстку;

5. Разработчик заливает страницу на dev;

6. Тестировщики на аутсорсе проводят аудит;
7. Программисты вносят правки и закрывают задачу.
   

С каждой новой страницей цикл запускался заново. В проекте приняли участие директор компании, 3 дизайнера, 3 программиста, 2 тестировщика и редактор-копирайтер. Обязанности проджекта на себя взяла директор по развитию. Классический Agile в этом проекте не реализовали — но разработке это не помешало.

Сайты наших коллег мы оценивали по нескольким критериям:

• стек технологий;

• удобство использования;

• логика навигации;

• структура;

• SEO-оптимизация;

• актуальность дизайна;

• акцентирование УТП компании.

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

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

Самая кропотливая и долгосрочная работа — разработка новой айдентики компании. Сначала мы определили корпоративные цвета и обновили логотип.

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

Дизайн сайта разработали по установленным правилам:

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

— Total black. Мы любим такие решения и внедряем их там, где уместна заявка на премиум-уровень. Но мы провели a/b тесты и большинством голосов выбрали светлую сторону.

— Чередование белых и черных блоков. Тестовый макет все же сделали. Ощущение складывалось, будто пользователь выходит из темной комнаты на свет, а затем входит обратно.

— 3D-анимация на первых экранах. От 3D-тренда мы не ушли — добавили анимированные обложки кейсов. Но оформлять подобным образом все страницы не стали. Учли возможные риски: разработка одного только сценария анимации требует больших вложений трудочасов. Финальный вариант может не совпадать с изначальным макетом. Кроме того, масштабная 3D-анимация не выигрышно смотрится на маленьких экранах, плохо загружается на компьютерах со слабыми процессорами.

Итак, мы выделили основные принципы: минимализм, брутализм, минимум обработки и дизайна.

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

• яркие изображения и монохром;
• крупные элементы и пустые пространства;
• строгие линии и графические детали;
  
• статические и анимационные блоки.
  

Особое внимание уделили кейсам — самому продающему и полезному контенту любого агентства. Каждую страницу проработали индивидуально. Хотя у текстов есть шаблонная структура, для каждой работы выбраны свои способы расстановки акцентов.

Все размеры блоков, текстов, анимаций и фото заданы в vw/vh. Сайт отлично отображается на всех типах устройств и браузеров.

Детальные страницы услуг не строятся по одинаковой структуре: в каждой из них расставлены разные акценты.

Доскроллив любую страницу и нажав на конверсионную кнопку, пользователь может попасть на страницу с брифом. Ее сделали интуитивно понятной и лаконичной.

А для тех, кому хочется познакомиться с командой поближе, есть страница с кликабельным разделом. Там — заботливые тексты и качественные фото каждого сотрудника. Убиваем двух зайцев — делаем красивую презентацию команды и работаем на HR-бренд.

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

Мы использовали:

• Формат обмена данными — JSON;
• Библиотеку для создания анимаций — Framer Motion;
• State manager — Redux Toolkit;
• CSS Modules.

А что по SEO? Напомним, наше основное позиционирование на рынке — лучшее агентство по разработке и поисковому продвижению сайтов. Свой собственный сайт мы адаптировали под требования поисковиков и сделали удобным для пользователей.
На rbru.ru:

• добавлены только полезные страницы;
• нет разделов с лишним контентом, страниц-дублей, необоснованно пустых областей;
  
• user friendly интерфейс;
  
• использован React Server Components;
  
• отличные показатели по PageSpeed.

Главная цель любого агентства — получать классные лиды и конвертировать их в клиентов. О том, достигли ли мы этой цели, мы рассказали на Workspace. Кстати, если вам понравился кейс, поставьте нам лайк на платформе. Это не гарантирует нам победу, но точно согреет сердечко всей команде, которая трудилась над сайтом.