Корпоративный сайт консалтинговой компании
Задача
Международная компания Enercor, специализирующаяся на управлении, реструктуризации и развитии бизнеса, обратилась к нам с задачей разработать корпоративный сайт-визитку консалтинговой компании на WordPress. На момент обращения клиент уже имел десктоп-дизайн сайта с инфоблоками, отражающими:
- миссию и преимущества,
- спектр оказываемых услуг,
- состав команды и реализованные проекты,
- новости, вакансии и контакты компании с формой заявки для консультаций.
За нами же оставалась разработка — необходимо было вдохнуть в проект жизнь и презентовать клиенту современный, функциональный и адаптивный сайт. О том, как мы это сделали — читайте в нашем кейсе.
Технологические решения
При разработке сайта мы использовали СMS WordPress — одну из самых популярных платформ. Она хороша тем, что в дальнейшем клиент сможет легко управлять содержимым сайта: добавлять веб-страницы и размещать текст, изображения и видео даже без помощи разработчика. Также WordPress позволяет в будущем масштабировать сайт — например, добавить блог или другие дополнительные возможности.
Вёрстка сайта
Перед нашим front-end разработчиком встала задача превратить картинки в код с помощью языков HTML, CSS (с использованием SCSS синтаксиса препроцессора Sass) и JS. В работе также был применён один из современных приёмов вёрстки — Grid (сетка). В чём его суть? Вёрстка в сетке позволяет создавать адаптивные страницы под любой тип устройств и грамотно располагать элементы на сайте — текст, фото, видео или любой другой HTML-блок:
Интересной была реализация модальных окон на странице Projects: при нажатии на кейс карточка с информацией появляется на экране в удобном для чтения виде.
Не менее интересной была задача оживить веб-страницы с помощью анимаций. Например, при скролле страницы, малейшем движении мышки либо прикосновении тачпада можно не на шутку увлечься оригинальным эффектом следования курсора. Декоративный курсор в виде воздушных капель был реализован с помощью JavaScript-библиотеки GSAP, или GreenSock Animation Platform — популярному набору инструментов для создания скриптовой веб-анимации:
Front-end разработка заняла 170 часов с учётом правок от клиента. Для ускорения работы и грамотной подготовки проекта к релизу наш фронтендер использовал сборщик проектов Gulp — это инструмент для автоматизации задач (минификации, тестирования, объединения файлов и т. п.), написанный на языке программирования JavaScript.
Функциональность сайта
Разработка серверной части сайта заняла 126 часов. В ходе работы была реализована сложная структура переходов между разделами через множество якорных и простых внутренних ссылок. Это означает, что при нажатии на линк пользователь переходит не только на нужную страницу, но и на подходящую по смыслу её часть:
Так, раздел Services отражает деятельность компании с перелинковкой на отдельные страницы, где каждая услуга описывается более подробно:
На странице услуг находится блок Expertise с перечнем ключевых областей, на которых специализируется компания. На этот блок также ведут одноименные пункты в описании экспертизы каждого члена команды. В дальнейшем клиент планирует связать эти пункты ещё и с конкретными проектами компании.
Раздел Projects представляет собой каталог завершённых проектов компании 2-х типов: с краткой информацией в виде карточки и с полным описанием кейса в виде отдельной веб-страницы.
Раздел Team презентует всех членов команды с фото, коротким описанием, экспертизой и привязкой к городу. Клик на одну из карточек переносит пользователя на страницу с более подробной информацией, которая содержит ссылку на профиль LinkedIn и перечень финансово-экономических изданий, где публиковались эксперты:
Раздел Vacancies содержит предложения компании о работе, а также форму с возможностью отправить резюме даже при отсутствии вакантных мест:
В новостном блоке сайта News отображаются публикации в виде галереи, подгруженные с профиля компании в LinkedIn. Возможность встраивать данный тип контента на сайт была реализована с помощью агрегатора социальных сетей Tagembed:
Раздел 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 пришла к нам с макетами для десктопа. Поэтому наш фронтендер также позаботился об удобстве посетителей будущего сайта, грамотно адаптировав макеты под мобильные устройства. Если вы зайдёте на сайт со смартфона или планшета, то убедитесь, что воспринимать текстовую и визуальную информацию будет так же удобно, как и с экрана компьютера:
Презентация компании
Ещё одной задачей, но уже для отдела дизайна, стала презентация компании Enercor. Визуальное оформление полностью соответствует фирменному стилю компании: выдержаны цвета, шрифты и корпоративная символика. 28 слайдов пронизаны своеобразными элементами в виде нейросетей, а весь массив информации удобно и чётко структурирован. Деловой тон повествования смягчён ненавязчивой анимацией, которая позволит захватить и удержать внимание аудитории:
Читайте также:
Редизайн презентации для консалтинговой компанииИтоги
Готовый проект Enercor и наш опыт разработки корпоративного сайта консалтинговых услуг на WordPress лишний раз доказывает, что веб-площадка международной консалтинговой компании может быть нескучной и гармонично совмещать в себе серьёзную информацию с плавной анимацией и увлекательными декоративными элементами. Добавьте к этому структурированную анимированную презентацию — и вы получите ещё один мощный маркетинговый инструмент.
Комментарии