Разработка дизайна многостраничного корпоративного сайта
Корпоративный сайт — не лендинг и не интернет-магазин. Здесь одновременно живут разные аудитории: потенциальные клиенты, партнёры, соискатели, журналисты. Каждый приходит с разным запросом и читает разные страницы. Задача дизайна — выстроить единую визуальную систему, в которой все эти разделы работают согласованно, не теряя специфики каждого.
Что входит в многостраничный корпоративный дизайн
Типовой объём проекта: 15–40 уникальных макетов. Не каждая страница уникальна по структуре — часть собирается из переиспользуемых блоков. Но некоторые разделы требуют отдельной архитектуры:
- Главная страница — хиро-секция, краткая навигация по продукту/услугам, блок доверия (клиенты, цифры, сертификаты), CTA
- О компании — история, команда, ценности, структура; часто нелинейная компоновка
- Страницы услуг/продуктов — шаблон раздела + шаблон карточки + детальная страница
- Кейсы — листинг + детальная страница с нестандартной вёрсткой под каждый кейс
- Блог / пресс-центр — листинг, статья, категории
- Карьера — листинг вакансий, страница вакансии, форма отклика
- Контакты — карта, форма, реквизиты
Дизайн-система как основа
Для многостраничного сайта создание макетов «поштучно» — медленно и дорого. Правильный подход: сначала дизайн-система, потом страницы.
Атомарная структура (по методологии Atomic Design):
| Уровень | Содержание |
|---|---|
| Токены | Цвета, типографика, отступы, тени, border-radius |
| Атомы | Кнопки, инпуты, иконки, теги, badge |
| Молекулы | Карточка услуги, превью кейса, блок контакта |
| Организмы | Хедер, футер, секция услуг, блок команды |
| Шаблоны | Сетка страницы, логика размещения организмов |
| Страницы | Финальные макеты с реальным контентом |
В Figma это организуется через Variables (Figma 2023+) для токенов и Component Properties для вариантов компонентов. Переключение между Light и Dark mode — через Variable Modes, не дублированием файлов.
Глубже: проектирование навигации
Навигация — самое частое место провала в корпоративных сайтах. Мегаменю с 40 пунктами, которое появляется при ховере, — классическая антипаттерн. Хорошая навигация решает несколько задач одновременно:
Структура меню должна отражать не оргструктуру компании, а задачи пользователя. Типичная ошибка: раздел «О компании» → «Структура» → «Департамент X» → «Команда». Пользователь ищет «с кем я буду работать», а не орг-схему.
Для корпоративного сайта с 50+ страницами проектируем навигацию с двумя-тремя уровнями:
- Основная навигация: 5–7 пунктов, без выпадающих списков
- Боковая навигация внутри раздела: для глубоких разделов (услуги, документация)
- Мегаменю — только если есть реальная потребность охватить 3+ подраздела
Breadcrumbs обязательны для разделов глубже второго уровня. Якорная навигация — для длинных страниц услуг.
Отдельно прорабатываем мобильную навигацию. Бургер-меню — не решение для сложной иерархии. На мобиле лучше работает bottom navigation bar (для 4–5 ключевых разделов) + slide-out drawer со всей структурой. Переключение между уровнями меню — с анимацией slide, не замена всего оверлея.
Сетки и адаптив
Корпоративный сайт живёт на всех устройствах. Проектируем под три брейкпоинта минимально: 375px (mobile), 768px (tablet), 1440px (desktop). Часто добавляем 1920px для wide-экранов.
Сетки:
- Desktop: 12 колонок, 24px gutter, max-width 1280px или 1440px
- Tablet: 8 колонок или 12 с увеличенным gutter
- Mobile: 4 колонки, 16px gutter
Контентные страницы — строже следуют сетке. Хиро-секция и специальные страницы (кейсы) — могут выходить за пределы контейнера для полноширинных элементов.
Типографика и цвета
Корпоративный стиль обычно задан брендбуком. Если его нет — создаём в рамках проекта. Минимальный набор:
- Основной шрифт: один sans-serif для UI (Inter, IBM Plex Sans, Manrope — хорошо читаются на экране)
- Акцентный шрифт: опционально, для заголовков (Display-гарнитура или serif)
- Размерная шкала: 12/14/16/18/20/24/32/40/48/56px — минимум 6–7 ступеней
Цветовая палитра: primary + secondary + neutral (grey scale) + semantic (success, warning, error, info). Проверяем контрастность по WCAG 2.1 AA для всех пар текст/фон.
Сроки
| Этап | Время |
|---|---|
| Анализ, moodboard, утверждение направления | 3–5 дней |
| Дизайн-система (токены, компоненты) | 5–8 дней |
| Ключевые страницы (главная, услуга, о компании) | 5–7 дней |
| Остальные страницы (по шаблонам) | 7–14 дней |
| Адаптив для всех макетов | 4–7 дней |
| Правки и финализация | 3–5 дней |
Итого: 4–8 недель в зависимости от количества уникальных страниц и скорости согласования. Проекты с разветвлённой структурой (30+ страниц) и сложными анимациями — до 10–12 недель.
Передача в разработку
Финальные макеты в Figma включают:
- Auto Layout на всех компонентах
- Правильные constraints для адаптива
- Exported Assets для иконок и изображений
- Dev Mode аннотации для отступов и токенов
- Прототип с навигационными переходами
Разработчики работают напрямую с Figma через Dev Mode — замеры берутся из макета, не из спецификаций вручную.