Elservice.ru

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

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

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

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

Решение
Проект начался с детального анализа бизнес-задач и технических требований. Клиент четко обозначил, что хочет видеть сайт, который будет не хуже конкурентов, но при этом станет отражением фирменного стиля компании. Мы сразу предложили использовать WordPress как CMS, обеспечивающую гибкость и простоту управления, несмотря на первоначальные сомнения клиента в «бесплатном» ПО. В ходе созвона мы аргументировали выбор, сделав акцент на многолетнем опыте работы с этой платформой и отсутствии рисков при грамотной настройке.

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

Особое внимание уделили страницам продуктов и услуг. По просьбе клиента мы реализовали слайдеры с возможностью автоматической смены изображений, добавили стрелки и точки для навигации, а также сделали редактируемыми все текстовые блоки. Для страницы контактов интегрировали Яндекс-карту с возможностью прокладки маршрута, а для географии проектов — интерактивную карту России, на которой отображались города присутствия компании.

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

Интеграция на WordPress потребовала настройки кастомных типов записей для продукции, услуг, новостей и проектов. Мы расширили возможности визуального редактора, чтобы клиент мог самостоятельно создавать и редактировать таблицы, загружать документы (PDF, DWG) и управлять слайдерами без помощи разработчика. Все настройки были собраны в удобные блоки админки, а для обучения мы записали подробные видеоинструкции.