Мы разрабатываем дизайн многостраничных корпоративных сайтов, которые объединяют разные аудитории: клиентов, партнёров, соискателей, журналистов. Каждый приходит с разным запросом — и мы проектируем интерфейс, который ведёт всех к их цели без трения. Используем атомарный дизайн и дизайн-систему на базе Figma Variables. Это снижает стоимость разработки на 20–30% по сравнению с постраничным проектированием и ускоряет согласование.
Типичные проблемы: необходимость адаптивности под все устройства, поддержка нескольких языков, интеграция с CMS, оптимизация загрузки изображений для разных брейкпоинтов. Дизайн-система с переменными и компонентами решает эти вопросы автоматически — меняешь токен, обновляются все страницы. Экономия бюджета достигает 40% на этапе вёрстки.
Что входит в многостраничный корпоративный дизайн?
Типовой объём проекта: 15–40 уникальных макетов. Не каждая страница уникальна по структуре — часть собирается из переиспользуемых блоков. Но некоторые разделы требуют отдельной архитектуры:
- Главная страница — хиро-секция, краткая навигация по продукту/услугам, блок доверия (клиенты, цифры, сертификаты), CTA.
- О компании — история, команда, ценности, структура; часто нелинейная компоновка.
- Страницы услуг/продуктов — шаблон раздела + шаблон карточки + детальная страница.
- Кейсы — листинг + детальная страница с нестандартной вёрсткой под каждый кейс.
- Блог / пресс-центр — листинг, статья, категории.
- Карьера — листинг вакансий, страница вакансии, форма отклика.
- Контакты — карта, форма, реквизиты.
Почему дизайн-система — основа многостраничного сайта?
Создание макетов «поштучно» — медленно и дорого. Правильный подход: сначала дизайн-система, потом страницы. Атомарная структура (по методологии Atomic Design) включает:
| Уровень | Содержание |
|---|---|
| Токены | Цвета, типографика, отступы, тени, border-radius |
| Атомы | Кнопки, инпуты, иконки, теги, badge |
| Молекулы | Карточка услуги, превью кейса, блок контакта |
| Организмы | Хедер, футер, секция услуг, блок команды |
| Шаблоны | Сетка страницы, логика размещения организмов |
| Страницы | Финальные макеты с реальным контентом |
В Figma это организуется через Variables для токенов и Component Properties для вариантов компонентов. Переключение между Light и Dark mode — через Variable Modes, не дублированием файлов.
Как проектировать навигацию для корпоративного сайта?
Навигация — самое частое место провала. Мегаменю с 40 пунктами при ховере — классический антипаттерн. Хорошая навигация решает несколько задач одновременно.
Структура меню должна отражать не оргструктуру компании, а задачи пользователя. Типичная ошибка: раздел «О компании» → «Структура» → «Департамент X» → «Команда». Пользователь ищет «с кем я буду работать», а не орг-схему.
Для корпоративного сайта с 50+ страницами проектируем навигацию с двумя-тремя уровнями:
- Основная навигация: 5–7 пунктов, без выпадающих списков.
- Боковая навигация внутри раздела: для глубоких разделов (услуги, документация).
- Мегаменю — только если есть реальная потребность охватить 3+ подраздела.
Breadcrumbs обязательны для разделов глубже второго уровня. Якорная навигация — для длинных страниц услуг.
Отдельно прорабатываем мобильную навигацию. Бургер-меню — не решение для сложной иерархии. На мобиле лучше работает bottom navigation bar (для 4–5 ключевых разделов) + slide-out drawer со всей структурой. Переключение между уровнями меню — с анимацией slide, не замена всего оверлея.
Типичные ошибки в навигации
Подробнее
- Копирование оргструктуры компании в меню. - Меню из 10+ пунктов без группировки. - Отсутствие поиска на сайтах с большим объёмом контента. - Игнорирование touch-целей на мобильных (минимальный размер 44×44 px).Какие сетки и брейкпоинты мы выбираем?
Корпоративный сайт живёт на всех устройствах. Проектируем под три основных брейкпоинта:
| Устройство | Ширина | Колонки | Gutter |
|---|---|---|---|
| Desktop | 1440px | 12 | 24px |
| Tablet | 768px | 8 | 16px |
| Mobile | 375px | 4 | 16px |
При необходимости добавляем брейкпоинт 1920px для wide-экранов. Сетки на планшете могут быть 8 колонок или 12 с увеличенным gutter. На мобиле используем 4 колонки с отступом 16px. Контентные страницы строго следуют сетке, а хиро-секция и специальные страницы (кейсы) могут выходить за пределы контейнера для полноширинных элементов.
Типографика и цвета
Корпоративный стиль обычно задан брендбуком. Если его нет — создаём в рамках проекта. Минимальный набор:
- Основной шрифт: один 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 — замеры берутся из макета, не из спецификаций вручную. Получите консультацию по вашему проекту — мы рассчитаем сроки и бюджет.