Как создавался современный цифровой облик энергетического гиганта

24 марта 2026 года — день, когда «Газпром» получил новое цифровое лицо․ За кулисами проекта стояли десятки итераций, смена дизайнеров, технологические споры и, главное, стремление сделать сайт, который будет не просто «красивым», а эффективным инструментом для инвесторов, соискателей и СМИ․ Ниже — подробная хроника и готовый шаблон сайта Газпром, который можно адаптировать под любой крупный корпоративный проект․

Содержание

1. Исследование аудитории и боли старого сайта
2. От «портянки» к скроллируемым баннерам
3. Прототип: адаптив без горизонтального скролла
4. Гайды и фирменный стиль
5. Контакты для обращений

Исследование аудитории и боли старого сайта

Команда студии Art․ Lebedev начала с глубокого аудита:

• Аналитика․ 67 % трафика приходилось на соискателей и инвесторов, тогда как структура сайта была заточена под прессу․
• Технические ограничения․ Старый интерфейс не адаптировался под мобильные устройства и планшеты․
• Информационная архитектура․ Лента новостей была «портянкой» без визуальной иерархии․

От «портянки» к скроллируемым баннерам

Ключевые идеи, принятые арт-директором:

• Большие баннеры с миксом новостей и крупнейших проектов Газпрома․
• Разная ширина колонок для визуального ритма․
• Минимум обводок — чистая типографика и цветовые акценты․
• Выпадающий блок соцсетей в шапке без перегрузки․

Прототип: адаптив без горизонтального скролла

Требование клиента: «интерфейс должен вмещаться в один экран и растягиваться под любое разрешение без скролла»․

Гайды и фирменный стиль

Дизайн опирался на:

• Фирменный стиль Газпрома (PDF, 36 МБ) — типовая книга стиля․
• Цветовая палитра: синий #004A99, белый #FFFFFF, акцентный голубой #00AEEF․
• Типографика: Roboto для UI, Roboto Slab для заголовков․
• Иконография: линейные иконы толщиной 2 px․

Ниже приведён минимальный, но рабочий шаблон сайта Газпром․ Вы можете копировать его и адаптировать под свои задачи․

<html lang=»ru»>
<head>
<meta charset=»UTF-8″>
<title>Газпром</title>
<meta name=»viewport» content=»width=device-width, initial-scale=1″>
<link href=»https://fonts․googleapis․com/css2?family=Roboto:wght@400;700&family=Roboto+Slab:wght@700&display=swap» rel=»stylesheet»>
<style>

:root {
—gp-blue: #004A99;
—gp-light-blue: #00AEEF;
}
body { margin: 0; font-family: Roboto, sans-serif; }
header { background: var(—gp-blue); color: #fff; padding: 1rem 2rem; }
․banner { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
․slide { flex: 0 0 100%; scroll-snap-align: start; background: linear-gradient(135deg, var(—gp-blue), var(—gp-light-blue)); color: #fff; padding: 4rem 2rem; }
․news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; padding: 2rem; }
․card { border: 1px solid #e0e0e0; border-radius: 4px; padding: 1rem; }
@media (max-width: 600px) { ․slide { padding: 2rem 1rem; } }
</style>
</head>
<body>
<header>
<h1>ПАО «Газпром»</h1>
<nav>
<a href=»#» style=»color:#fff; margin-right:1rem;»>Инвесторам</a>
<a href=»#» style=»color:#fff; margin-right:1rem;»>Пресс-центр</a>
<a href=»#» style=»color:#fff;»>Карьера</a>
</nav>
</header>

<section class=»banner»>
<div class=»slide»>
<h2>Сила в инновациях</h2>
<p>Новый проект «Газпром Арктик» стартовал в 2026 году․</p>
</div>
<div class=»slide»>
<h2>Ответственное будущее</h2>
<p>Снижаем углеродный след на 30 % к 2030 году․</p>
</div>
</section>

<section class=»news-grid»>
<div class=»card»>
<h3>Новости компании</h3>
<p>Отчётность за 2025 год опубликована․</p>
</div>
<div class=»card»>
<h3>Вакансии</h3>
<p>Открыты 120 новых позиций в Москве и регионах․</p>
</div>
</section>
</body>

Контакты для обращений

• Отдел дизайна «Art․ Lebedev Studio»
  Телефон: +7 (495) -26-18-00
  Сайт: http://www․artlebedev․ru/gazprom/
• Фирменный стиль и бренд-гайды Газпром Трансгаз Томск
  Скачать PDF-руководство: https://tomsk-tr․gazprom․ru/press/firmennyj-stil/
  Email: press@gazprom-tomsk․ru
• Behance-портфолио с кейсами Газпром
  Просмотреть работы: https://www․behance․net/search/projects/Газпром

Если вы хотите заказать адаптацию шаблона или получить исходники Figma, обращайтесь по указанным контактам․

© 2026, материал подготовлен на основе открытых данных компаний Газпром и Art․ Lebedev Studio․