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

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

Сапожники с сапогами: как компания по разработке и 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-агентств полного цикла. У них получается передать главный посыл: здесь оказывают качественные и крутые услуги. Такие же смыслы мы транслируем на нашем сайте.

Концепция для ребрендинга

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

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

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

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

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

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

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

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

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

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

Еще немного дизайна

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

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

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

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

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

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

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

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

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

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

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

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

Чуть-чуть про техничку и SEO

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

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

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

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

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

Резюмируем

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

И подписывайтесь на наш ТГ, если еще этого не сделали — там еще больше красоты на сайтах наших клиентов.

2727
16 комментариев

Отличный кейс! Почему-то агентства редко пишут о том, как сделали что-то крутое для себя. А вы молодцы)

9
Ответить

Вот даже просто пролистать заметку оказалось очень приятно, глаз отдыхает, оформление супер)

3
Ответить

Самый любимый проект!

1
Ответить

❤️

Ответить

Красиво получилось. Сначала не поняла, зачем было столько заморачиваться, потом увидела до/после и вопросы отпали👌

1
Ответить

Спасибо, мы старались)

Ответить