Коммуникации и бренд2025Собственный проект

Корпоративный сайт Арасака: редизайн, ребрендинг и инженерия с нуля

Полный цикл создания корпоративного сайта — от дизайн-системы и визуальной идентичности до архитектуры, разработки и оптимизации. 16 страниц, 40+ подстраниц, 99% сокращение бойлерплейта, загрузка менее 1.5 секунды.

РедизайнРебрендингNext.js 16TypeScriptDesign SystemSEO
Клиент

Корпорация Арасака

Результат

99% сокращение бойлерплейта

Ключевые метрики

Проект в цифрах

16
страниц
99%
сокращение бойлерплейта
<1.5с
время загрузки
100
Lighthouse SEO
20
design-токенов
7K+
строк удалено
arasaca.ru
Корпоративный сайт Арасака — главная страница
Контекст

Задача

Корпорация Арасака

Консалтинговая компания

Арасака — российская консалтинговая компания с 9 направлениями практики, от стратегического консалтинга до цифровой трансформации и развития территорий. К 2025 году компания выросла из boutique-фирмы в полноценного игрока рынка с клиентами уровня Росатом, Сибур и Новатэк.

Существующий сайт не отражал масштаб экспертизы: типовой шаблон, серые hero-секции, отсутствие единой дизайн-системы, дублирующийся код (2800 строк на одной странице), противоречивая статистика между разделами, мёртвые маршруты и отсутствие адаптивности для мобильных устройств.

Требовалось создать с нуля корпоративный сайт, который транслирует профессионализм и масштаб консалтинговой компании, обеспечивает удобную навигацию по 40+ услугам и 22 отраслям, и при этом легко масштабируется при добавлении новых направлений.

Трансформация

До и после

До — exenta.ru
Сайт до редизайна — exenta.ru
После — arasaca.ru
Сайт после редизайна — arasaca.ru
До
Мобильная версия до редизайна
После
Мобильная версия после редизайна
До

Типовой шаблон

  • Серые hero-секции без характера
  • Дублирующийся код (2800 строк на странице)
  • Противоречивая статистика между страницами
  • Мёртвые маршруты и сиротские директории
  • Отсутствие дизайн-системы и токенов
  • Неоптимизированный мобильный опыт
После

Кастомная дизайн-система

  • Тёмные hero с диагональными паттернами и glassmorphism
  • Модульная архитектура (23 строки вместо 2800)
  • Единый источник статистики (companyStats.ts)
  • Чистая структура с 301-редиректами
  • 20 design-токенов (C.*) и шаблоны страниц
  • Mobile-first responsive, Lighthouse 100
Подход

Как мы решали

6 этапов, нацеленных на измеримый результат

01

Исследование и стратегия

Аудит существующего сайта, анализ конкурентов (Big 4, McKinsey, BCG), интервью с заказчиком. Формирование позиционирования: «структурируем сложное, реализуем важное». Определение ключевых пользовательских сценариев и информационной архитектуры.

02

Дизайн-система и визуальная идентичность

Создание единой системы design-токенов (C.*) — 20 цветовых переменных, покрывающих все состояния. Фирменная палитра: тёмно-синий (#00313C), бирюзовый (#008C95), оранжевый (#E04E39), мятный (#77e2c3). Типографика: Manrope для текста, Russo One для заголовков и чисел. Паттерн: тёмный hero с диагональными линиями и glassmorphism-карточками.

03

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

Редукция структуры: удаление 5 сиротских директорий, объединение /media → /press-center, настройка 301-редиректов. Иерархия: Услуги (3 категории, 9 направлений, 40+ поднаправлений), Отрасли (22), Решения (3 продукта), Пресс-центр (50+ публикаций).

04

Разработка и инженерия

Next.js 16 с App Router: серверные компоненты для SEO, клиентские — только для интерактивности. Модульная архитектура: Homepage 2806 → 23 строки (99.2% сокращение), данные вынесены в отдельные файлы. Универсальные шаблоны ServicePageTemplate и ServiceSlugPageTemplate для генерации 40+ страниц из данных. Сервисный реестр servicesData.ts — единый источник истины для навигации и контента.

05

Оптимизация и качество

Удалено 7000+ строк дублирующегося и мёртвого кода. 18 boilerplate-layout'ов заменены на серверные компоненты с inline metadata. Иконки через строковый реестр (iconRegistry.tsx) для проброса через server/client boundary. Статистика компании (companyStats.ts) — единый источник, устраняющий противоречия между страницами.

06

Адаптивность и доступность

Mobile-first responsive: все 16 страниц оптимизированы для мобильных, планшетов и десктопа. Семантическая HTML-разметка (main, nav, section, article). ARIA-атрибуты, keyboard navigation, alt-text для всех изображений. Кастомные scrollbar-стили, touch-friendly targets ≥ 44px.

Экраны

Каждая страница — на уровне

Главная
Главная страница Арасака
Услуги
Страница услуг
О компании
Страница «О компании»
Отрасли
Страница отраслей
Пресс-центр
Пресс-центр
Технологии

Стек и архитектура

Next.js 16

App Router, Server Components, Streaming

TS

TypeScript 5

Строгая типизация, интерфейсы, generics

🌊

Tailwind CSS 4

Utility-first, кастомные токены, responsive

Framer Motion

fadeUp, scaleIn, viewport-анимации

shadcn/ui

New York style, Lucide icons, доступность

Prisma ORM

SQLite, type-safe queries, migrations

Архитектура

Как устроен код

Design-токены, сервисный реестр и шаблоны — ядро масштабируемой архитектуры

colors.ts + servicesData.ts + ServiceSlugPageTemplate.tsx
// Design Tokens — единый источник цвета
export const C = {
  dna:       "#008C95",  // Фирменный бирюзовый
  dark:      "#00313C",  // Тёмный hero-фон
  orange:    "#E04E39",  // CTA, акценты
  mint:      "#77e2c3",  // Мятный на тёмном
  muted:     "#f1f2f4",  // Нейтральный фон
} as const;

// Сервисный реестр — один источник истины
export const serviceSubDirectionsMap = {
  consulting: { title: "Консалтинг", subDirections: [...] },
  analytics:  { title: "Аналитика",  subDirections: [...] },
  technologies: { title: "Технологии", subDirections: [...] },
};

// Шаблон генерирует 40+ страниц из данных
export default function ServiceSlugPageTemplate(
  config: ServiceSlugPageConfig
) {
  const direction = subDirections
    .find(d => d.slug === slug);
  // → Hero + Accordion + Carousel + QuickLinks
}

Design Tokens

20 цветовых переменных в одном файле. Никакого хардкода hex-значений.

Сервисный реестр

Единый источник данных об услугах — и для навигации, и для контента страниц.

Шаблоны страниц

2 шаблона генерируют 40+ страниц из данных. Новая услуга — 5 строк в data-файле.

Модульность

Homepage: 2806 → 23 строки. Данные в отдельных файлах, секции — независимые компоненты.

Адаптивность

На всех устройствах

arasaca.ru — Desktop
Десктопная версия сайта
Главная
Мобильная главная
Услуги
Мобильная страница услуг
О компании
Мобильная «О компании»

Mobile-first

Все 16 страниц оптимизированы для мобильных, начиная с 320px

Touch-friendly

Минимум 44px для интерактивных элементов, жесты прокрутки

3 breakpoint'а

sm:640px, md:768px, lg:1024px — полная адаптация

Итог

Результат

Достигнуто

Создан с нуля корпоративный сайт консалтинговой компании Арасака — 16 полноценных страниц, 40+ подстраниц услуг, пресс-центр с 50+ публикациями, единая дизайн-система из 20 токенов и 2 универсальных шаблона.

Проведён масштабный рефакторинг: удалено 7000+ строк бойлерплейта и дублирующегося кода, Homepage сокращён с 2806 до 23 строк (99.2%), 9 дублирующихся интерфейсов объединены в единый сервисный реестр, Header сокращён на 96 строк хардкода.

Сайт загружается менее чем за 1.5 секунды, получает 100 баллов в Lighthouse SEO, полностью адаптивен и доступен. При добавлении новой услуги достаточно добавить 5 строк в data-файл — шаблон сгенерирует страницу автоматически.

Навигация

Полезные ссылки

Быстрый доступ к разделам
и ключевым возможностям компании