Услуги

  • Сайты
  • Контент
  • Продвижение
  • Битрикс24
  • Приложения
Все услуги Оплата
Все услуги Оплата

Поиск

  • Разработка интернет-магазина под ключ
  • Разработка сайтов
  • Разработка леднигов
  • Разработка на битрикс24
  • Разработка на Вордпресс

Корпоративный сайт консалтинговой компании

Задача

Международная компания Enercor, специализирующаяся на управлении,  реструктуризации и развитии бизнеса, обратилась к нам с задачей разработать корпоративный сайт-визитку консалтинговой компании на WordPress. На момент обращения клиент уже имел десктоп-дизайн сайта с инфоблоками, отражающими:

  • миссию и преимущества,
  • спектр оказываемых услуг,
  • состав команды и реализованные проекты,
  • новости, вакансии и контакты компании с формой заявки для консультаций.

За нами же оставалась разработка — необходимо было вдохнуть в проект жизнь и презентовать клиенту современный, функциональный и адаптивный сайт. О том, как мы это сделали — читайте в нашем кейсе.

Технологические решения

При разработке сайта мы использовали СMS WordPress — одну из самых популярных платформ. Она хороша тем, что в дальнейшем клиент сможет легко управлять содержимым сайта: добавлять веб-страницы и размещать текст, изображения и видео даже без помощи разработчика. Также WordPress позволяет в будущем масштабировать сайт — например, добавить блог или другие дополнительные возможности.

Вёрстка сайта

Перед нашим front-end разработчиком встала задача превратить картинки в код с помощью языков HTML, CSS (с использованием SCSS синтаксиса препроцессора Sass) и JS. В работе также был применён один из современных приёмов вёрстки — Grid (сетка). В чём его суть? Вёрстка в сетке позволяет создавать адаптивные страницы под любой тип устройств и грамотно располагать элементы на сайте — текст, фото, видео или любой другой HTML-блок:

Banner

Интересной была реализация модальных окон на странице Projects: при нажатии на кейс карточка с информацией появляется на экране в удобном для чтения виде:

Banner

Не менее интересной была задача оживить веб-страницы с помощью анимаций. Например, при скролле страницы, малейшем движении мышки либо прикосновении тачпада можно не на шутку увлечься оригинальным эффектом следования курсора. Декоративный курсор в виде воздушных капель был реализован с помощью JavaScript-библиотеки GSAP, или GreenSock Animation Platform — популярному набору инструментов для создания скриптовой веб-анимации:

Banner

Front-end разработка заняла 170 часов с учётом правок от клиента. Для ускорения работы и грамотной подготовки проекта к релизу наш фронтендер использовал сборщик проектов Gulp — это инструмент для автоматизации задач (минификации, тестирования, объединения файлов и т. п.), написанный на языке программирования JavaScript.

Функциональность сайта

Разработка серверной части сайта заняла 126 часов. В ходе работы была реализована сложная структура переходов между разделами через множество якорных и простых внутренних ссылок. Это означает, что при нажатии на линк пользователь переходит не только на нужную страницу, но и на подходящую по смыслу её часть:

Banner

Так, раздел Services отражает деятельность компании с перелинковкой на отдельные страницы, где каждая услуга описывается более подробно:

Banner

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

Banner

Раздел Projects представляет собой каталог завершённых проектов компании 2-х типов: с краткой информацией в виде карточки и с полным описанием кейса в виде отдельной веб-страницы:

Banner

Раздел Team презентует всех членов команды с фото, коротким описанием, экспертизой и привязкой к городу. Клик на одну из карточек переносит пользователя на страницу с более подробной информацией, которая содержит ссылку на профиль LinkedIn и перечень финансово-экономических изданий, где публиковались эксперты:

Banner

Раздел Vacancies содержит предложения компании о работе, а также форму с возможностью отправить резюме даже при отсутствии вакантных мест:

В новостном блоке сайта News отображаются публикации в виде галереи, подгруженные с профиля компании в LinkedIn. Возможность встраивать данный тип контента на сайт была реализована с помощью агрегатора социальных сетей Tagembed:

Banner

Раздел Contacts содержит контактные данные компании и удобную форму связи с конкретным представительством:

Для того, чтобы расширить возможности сайта, были использованы такие популярные плагины WordPress:

  • Yoast SEO — для управления SEO, помогающий посетителям и поисковым системам получить максимальную отдачу от сайта.
  • ACF (Advanced Custom Fields) — для полного контроля над экранами редактирования и данными кастомных полей.
  • CF7 (Contact Form 7) — для управления контактными формами на сайте и гибкой настройки содержимого форм и почты.
  • WP Mail SMTP — для исправления проблем с доставляемостью электронной почты через SMTP (Simple Mail Transfer Protocol) — отраслевой стандарт для отправки электронных писем.

Для защиты сайта от спама была использована технология reCAPTCHA v3, установленная через расширение от вышеупомянутого плагина CF7.

Кроме каталога плагинов WordPress имеет широкие возможности для кастомизации — гибкой настройки сайта под запросы клиента: изменение макета, добавление различных опций и т. п. Так, наш бекендер дополнительно создал:

  • кастомные типы записей для разделов Team и Projects;
  • кастомные таксономии для раздела Services, который в свою очередь связан с разделом Projects, и для блока с городами, связанным с сотрудниками раздела Team.

В результате клиент может самостоятельно менять визуальные элементы сайта: порядок пунктов меню, порядок блоков, проектов, членов команды и т. п.

Кстати, помните о нашем нестандартном декоративном курсоре? Клиент долго не мог определиться с его цветом, поэтому разработчик добавил в админ-панель ещё и палитру цветов для курсора. Теперь его внешним видом клиент сможет управлять самостоятельно, без помощи программиста.

Адаптивность

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

Banner

Презентация компании

Ещё одной задачей, но уже для отдела дизайна, стала презентация компании Enercor. Визуальное оформление полностью соответствует фирменному стилю компании: выдержаны цвета, шрифты и корпоративная символика. 28 слайдов пронизаны своеобразными элементами в виде нейросетей, а весь массив информации удобно и чётко структурирован. Деловой тон повествования смягчён ненавязчивой анимацией, которая позволит захватить и удержать внимание аудитории:

Banner

Итоги

Готовый проект Enercor и наш опыт разработки корпоративного сайта консалтинговых услуг на WordPress лишний раз доказывает, что веб-площадка международной консалтинговой компании может быть нескучной и гармонично совмещать в себе серьёзную информацию с плавной анимацией и увлекательными декоративными элементами. Добавьте к этому структурированную анимированную презентацию — и вы получите ещё один мощный маркетинговый инструмент.

Стремитесь выделить свою консалтинговую компанию среди конкурентов и вызывать у клиентов wow-эффект?

У нас есть достаточный опыт в разработке и дизайне сайтов, презентаций и других продуктов, которые стали must have любой компании. Мы удачно презентуем ваш бизнес на рынке с помощью новейших технологий. Оставьте заявку на сайте, чтобы обсудить ваш проект.

Над проектом работали