Розробка дизайну багатосторінкового корпоративного сайту
Корпоративний сайт — не лендинг і не інтернет-магазин. Тут одночасно живуть різні аудиторії: потенційні клієнти, партнери, здобувачі роботи, журналісти. Кожен приходить з іншим запитом і читає різні сторінки. Завдання дизайну — побудувати єдину візуальну систему, в якій всі ці розділи працюють узгоджено, не втрачаючи специфіку кожного.
Що входить у багатосторінковий корпоративний дизайн
Типовий обсяг проекту: 15–40 унікальних макетів. Не кожна сторінка унікальна за структурою — частина збирається з переиспользуємих блоків. Але деякі розділи потребують окремої архітектури:
- Головна сторінка — hero-секція, стисла навігація по продукту/послугам, блок довіри (клієнти, цифри, сертифікати), 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
Контентні сторінки суворо дотримуються сітки. Hero-секція та спеціальні сторінки (кейси) можуть виходити за межі контейнера для повноширинних елементів.
Типографіка та кольори
Корпоративний стиль зазвичай заданий брендбуком. Якщо його немає — створюємо в рамках проекту. Мінімальний набір:
- Основний шрифт: один 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 — замери беруться з макету, не з специфікацій вручну.