Niing.ru

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

Национальный исследовательский институт нефти и газа (НИИНГ) — научная организация, занимающаяся исследованиями и разработками в нефтегазовой отрасли. На момент обращения требовался современный, технологичный сайт, который бы отражал инновационный характер деятельности института и служил эффективным каналом коммуникации с партнёрами.

Цели создания сайта:

• Разработать имиджевый лендинг с уникальной, «нешаблонной» стилистикой, подчёркивающей технологичность и научный профиль организации.
• Реализовать сложную интерактивную анимацию на главном экране (анимированные частицы, реагирующие на движение курсора) для создания вау-эффекта и запоминающегося первого впечатления.
• Создать оригинальный, современный логотип на основе существующего, улучшив его читаемость и адаптивность для цифровых носителей.
• Спроектировать и запрограммировать нестандартный блок «Цели и задачи», где контент (изображение/видео в макете ноутбука) меняется синхронно с прокруткой списка задач, обеспечивая высокую вовлечённость.
• Обеспечить возможность гибкого управления контентом через WordPress: редактирование текстов, изображений, видео, а также добавление и изменение сертификатов и направлений исследований.

Решение:

Проект стартовал с обсуждения уникальной концепции. Заказчик предоставил референсы с нестандартной анимацией и структурой, и нам предстояло воплотить эти идеи, сохранив строгую научную эстетику. Первым этапом стала разработка логотипа. На основе старого логотипа (с зубчатым колесом и каплей) дизайнер предложил несколько вариантов упрощения и модернизации. После нескольких итераций и детального обсуждения каждого элемента (толщина контура, заполненность пространства, вынос названия) мы пришли к лаконичному и технологичному варианту, который отлично читается как в шапке сайта, так и в виде фавикона.

Параллельно с логотипом вёлся поиск визуального стиля. Дизайнер подготовил несколько вариантов главного экрана. Ключевым вызовом стала интеграция сложной анимации частиц, которая должна была подчёркивать научную направленность и реагировать на действия пользователя. Мы нашли библиотеку, позволяющую реализовать эту задумку без ущерба для производительности, и детально проработали поведение частиц (шлейф, скорость, цвет), добившись точного соответствия ожиданиям заказчика.

Наиболее сложным технически и творчески оказался блок «Цели и задачи». Изначально планировалось статичное видео, но в процессе мы пришли к более гибкому и эффектному решению: при скролле списка задач контент внутри ноутбука динамически меняется. Дизайнер проработал два варианта отображения ноутбука — реалистичный и схематичный. Заказчик выбрал реалистичный вариант с возможностью в будущем заменять изображения и добавлять видео. Это потребовало от разработчика продумать архитектуру так, чтобы контентом внутри мокапа можно было управлять через админку, а само видео загружать и вставлять без потери качества.

В блоке «Направления исследований» мы реализовали карточки услуг, при нажатии на которые открывается модальное окно с подробным описанием и формой быстрой заявки (имя и телефон). Это решение позволило не перегружать основной экран, но дать пользователю возможность мгновенно откликнуться на интересующее направление. Для каждого направления в админке предусмотрены отдельные поля для текста и изображения, что позволяет заказчику легко дополнять и редактировать список услуг.

Отдельного внимания потребовал баннер «Научный полигон». Заказчик хотел разместить на нём две функционально разные кнопки: одна ведёт на вход в личный кабинет полигона, другая — к форме заявки на том же сайте. Мы реализовали эту логику, сделав баннер не просто статичной картинкой, а интерактивным навигационным элементом.

На этапе верстки и интеграции с WordPress особое внимание уделили мобильной адаптации, так как дизайн изобиловал сложными элементами. Разработчик в ручном режиме оптимизировал отображение каждого блока, включая модальные окна и слайдеры, для корректной работы на iOS. Мы также настроили отправку писем через SMTP, установили защиту от спама (reCAPTCHA), заменили стандартный фавикон и подготовили подробные инструкции по работе с админкой, чтобы заказчик мог самостоятельно управлять контентом и сертификатами.