Главная

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

От идеи до дочерней компании всего один сайт

отмечено
Роботы на производстве сегодня — это не будущее, а уже настоящее.
вопрос
Но кто управляет этими железными мастерами?
отмечено
Компании в сфере АСУ ТП, автоматизированных систем управления технологическим процессом.
скринскрин

О проекте

Сарафанное радио в бизнес среде 19 лет приносило поток клиентов, а сайт был скорее формальностью. За такой длительный период работы команда реализовала десятки проектов, и на базе этого опыта появились готовые решения для отдельных отраслей и задач.

Поставленная задача

Задача была ответственной для нас: представить новый бренд EMS онлайн и привлекать клиентов через сайт.

Наши SEO-специалисты разработали требования для создания нового сайта, продумали его структуру и подготовили контент. Но это уже отдельная глава истории проекта.
SEO кейсстрелка вниз

Брендирование проекта

Клиент хотел, чтобы дизайн сайта подчёркивал технологичность, статус и надёжность компании, но при этом был современным и минималистичным. Сперва нужно было объединить все — философию компании, видение клиента и наши идеи, поэтому мы начали с создания брендбука.

ИДЕЯ

Брендбук помогает удерживать все элементы бренда в единой концепции и исключить хаос.

брендированиебрендирование

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

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

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

Логотип

Добавили плавающую навигацию, которая облегчает ориентирование по странице и позволяет пользователям быстро переходить к нужным разделам

Слоган

Все грани автоматизации» отразил подход к работе — универсальность, глубина и внимание к деталям

Шрифт

Получил текстуру стали, заодно подчеркнул твёрдую экспертизу компании

Ключевая идея дизайна
Технология, которой доверяешь
Мы решили показать идею проекта через реальные кейсы и фотографии установок. Пользователь с первых секунд должен видеть примеры готовых решений и главное — доверять компании
Смотрите наши решениястрелка вправо

Гармония визуального и текстового

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

гармония

Графические акценты

Фото установок и процессов  добавляют ощущение надёжности, ведь клиент смотрит на реальные проекты, а не абстракции.

акценты

Меньше кликов — больше информации

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

навигация

Легко найти то, что нужно

Автоматизация — это всегда про уникальные задачи, но мы заметили, что запросы при поиске кейсов компании схожи. Поэтому каждый кейс оснастили тегами: отрасль, технология. Это упрощает процесс принятия решений.

автоматизация

Все дело в деталях 

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

деталидетали

Функциональность, которая заботится о пользователе

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

Плавающая навигация

Добавили плавающую навигацию, которая облегчает ориентирование по странице и позволяет пользователям быстро переходить к нужным разделам.

Интуитивный поиск

Улучшили поиск на сайте, добавив популярные запросы и организовав результаты по удобным категориям.

Эффективная форма ОС

Мы упростили форму обратной связи, оставив только необходимые поля и добавив возможность загрузки технического задания для удобства клиентов.

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

От вопросов к ответам за пару секунд

Поиск на сайте часто разочаровывает: вводишь запрос, а ответы хаотичны и особо не помогают. Мы сделали иначе: добавили запросы, которые ищут чаще всего, и разделили результаты на удобные категории.

заявказаявка

Простая форма заявки

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

Разработка сайта

Изначально, учитывая сложность дизайна, мы предложили разрабатывать сайт на Laravel — фреймворке, который идеально подходит для амбициозных задач. Но бюджет клиента был ниже необходимого для этого фреймворка. И мы решили искать альтернативы. Из большого количества CMS выбор пал на Wordpress. Однако работа с этой CMS для такого сложного проекта была не без трудностей.

wordpress

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

После согласования дизайна мы перешли к вёрстке. Чтобы сайт мог приносить клиентов быстрее, страницы начинали верстать по мере их готовности. Не будем углубляться в отличия Grid от Flexbox, но разберём несколько фишек от наших фронтенд разработчиков.

Уменьшение размеров менюПлавная прокруткаИнтерактивность
  • Уменьшение размеров меню
  • Плавная прокрутка
  • Интерактивность

Уменьшение размеров меню

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

Плавный скролл страницы

Вертикальная прокрутка выполнена с эффектом инерции, благодаря такому подходу просмотр контента становится более плавным и приятным.

Интерактивные элементы с эффектами

Каждый интерактивный элемент — будь то кнопка, ссылка или карточка — снабжён эффектом подсветки или смены цвета при наведении курсора. Это добавляет сайту оживлённости и вовлекает пользователя

эффектыэффекты

Что делали на этапе backend-разработки

{1}

Быстрая загрузка видео

На этапе backend-разработки нас ждала интересная задача. Первый экран сайта — это видео высокого качества, которое наглядно демонстрирует процессы автоматизации и моментально привлекает внимание. Чтобы не жертвовать скоростью загрузки, наши backend-разработчики разбили видео на фрагменты, которые подгружаются поочерёдно.

видео
{2}

Оптимизация обратной связи

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

обратная связь
{3}

Использование паттерна «Фабрика» для гибкости проекта

Весь проект реализовали с использованием паттерна проектирования «Фабрика». Он выбирает какой метод и класс нужно выбрать в зависимости от запроса пользователя. Если в будущем потребуется доработать сайт — например, добавить новую страницу или изменить функционал — это не потребует глобальной переработки кода.

паттерн

Тестирование

Особенности тестирования

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

тестированиетестирование

Тестирование админ-панели

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

тестированиетестирование
Наша команда уже более 12 лет работает с WordPress, Laravel и другими современными технологиями, поэтому с технической точки зрения всё прошло гладко.

Выкатка сайта прошла — время подводить итоги!

Сайт стал не просто витриной с услугами, а реальным помощником в привлечении новых клиентов. Компания получила инструмент, который поможет начать новую главу в развитии бизнеса.

Елена

ACCOUNT MANAGER

Девушка
 Вверх