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

Для молодого бренда Ermenrich дизайнеры Студии Артемия Лебедева создали яркий и смелый фирменный стиль. В его основе лежит контрастное сочетание черного, фиолетового и акцентного желтого цветов, благодаря чему упаковка заметно выделяется на полках магазинов и в онлайн-каталогах. Мы занимались версткой страниц сайта по предоставленным макетам и разработкой внутренних механизмов в соответствии с запросами заказчика.

Немного о клиенте

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

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

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

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

Этапы работы

1. Разработка дизайна
   С уходом западных брендов измерительных инструментов азиатские и ближневосточные компании воспользовались появившимся «окном» возможностей. Чтобы выделиться среди разнообразия новых предложений, новому бренду был необходим яркий и запоминающийся дизайн.

2. Верстка макета
   Перевести статичный макет в HTML — задача относительно простая, но требует внимательности. Гораздо сложнее создать динамичный интерфейс с продуманной внутренней логикой. В этом проекте дизайн-макеты не были полностью готовы к началу работ, что вызвало определенные риски по срокам. Однако благодаря нашему опыту мы начали с каркасной структуры системы, минимизировав возможные задержки.

3. Анимация страницы о компании
   Бренд Ermenrich обладает своей историей и ценностями, которые важно было представить увлекательно. Чтобы захватить внимание пользователей, мы использовали идею с анимацией brand stories. Даже минималистичный текст ожил благодаря динамичным визуальным решениям, что сделало страницу интересной и захватывающей.

4. Интеграция с 1С
   Большинство онлайн-площадок редко выступают мастер-системами учета. Для Ermenrich мы реализовали обмен данными о номенклатуре, заказах, остатках и ценах через интеграцию с 1С. Вместо стандартного модуля интеграции 1С и «Битрикс управление сайтом» был разработан уникальный инструмент, адаптированный под сильно доработанную учетную систему клиента.

5. Доработки для SEO
   Чтобы сайт понравился поисковым системам, мы учли рекомендации валидаторов и Page Speed Insights. Были ускорены загрузка мобильной версии, внедрена разметка Schema.org для ключевых разделов, а также реализована работа с заголовками, автогенерация alt и title для изображений.

Разработка дизайна

Логотип бренда отсылает к классической геральдике, сочетая в себе образы башенной стены в форме буквы E, щита и головы быка. Черный цвет в сочетании с ярко-желтыми акцентами используется на упаковке, инструментах и веб-макетах, создавая выразительный визуальный контраст. Такой подход помогает быстро выделить продукцию бренда на фоне аналогов.

Проект Ermenrich базируется на тиражном решении платформы 1С-Битрикс: Управление сайтом, редакция «Бизнес». Это решение ранее было использовано при редизайне розничного магазина «Четыре глаза» в 2024 году, что подтвердило его надежность и гибкость.

На одном и том же «движке» могут быть реализованы сайты с абсолютно разным внешним видом. В Ermenrich дизайн полностью отражает уникальную концепцию бренда, демонстрируя, что внешний облик сайта зависит исключительно от идей и потребностей заказчика.

Страница каталога

Страница категории

Карточка товара

Корзина

Верстка сайта Ermenrich

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

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

1. Создание HTML-разметки
   Работа начинается с создания HTML-разметки, которая содержит весь основной контент сайта. Позже, с помощью CSS-стилей, эта разметка преобразуется в полноценные, визуально привлекательные страницы. Для корректного отображения в браузерах разметка проверяется на соответствие стандартам W3C.

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

3. Добавление JavaScript-сценариев
   Для создания интерактивных функций сайта подключаются JavaScript-сценарии. Простые действия можно реализовать с помощью CSS, но сложное поведение требует использования JavaScript. Например, для интернет-магазина необходимы такие элементы, как слайдеры, валидаторы форм, калькуляторы доставки или счетчики товаров в корзине.

4. Оптимизация загрузки и работы страниц
   Оптимизация включает избавление от лишнего кода, чтобы браузер загружал только нужное. Также проводится минификация и правильное размещение CSS/JS-файлов, сжатие данных и преобразование изображений в современные форматы. Все это ускоряет загрузку страниц и повышает комфорт использования сайта.

5. SEO-оптимизация
   Проект включает встроенный SEO-модуль, который автоматизирует часть задач, таких как генерация метатегов и оптимизация шаблонов. Тем не менее, не все задачи можно решить модулем. Например, теги Alt и Title для изображений были настроены на автогенерацию, чтобы поисковые системы могли правильно идентифицировать приборы и технику Ermenrich.

Все описанные этапы frontend-разработки касаются лишь одного интерфейса онлайн-магазина Ermenrich. Однако на практике мы создаем не менее 7 версий дизайна для различных разрешений экрана — от 320 до 1800 пикселей. При этом учитывается работа на трех разных браузерах, включая сотни их версий, чтобы гарантировать стабильное отображение и функциональность сайта.

Стилизация и анимация для Safari нередко превращаются в настоящее испытание. Этот браузер часто преподносит неожиданные сюрпризы, требуя отдельного подхода. В то же время браузеры на Android более предсказуемы, что делает процесс адаптации под них менее трудоемким. Такой разнообразный опыт помогает команде находить креативные решения даже в самых нестандартных ситуациях.

Сложная анимация

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

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

Трансформация логотипа 

В этом месте логотип компании представлен в виде 3D объекта, который находится в 3D сцене. Для этого мы воспользовались инструментом, который позволяет управлять сценой на специализированном браузерном движке.

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

Смотреть анимацию

Перемещение букв в строке

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

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

Смотреть анимацию

Трансформация сцены

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

Смотреть анимацию

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

Каждый анимированный элемент находится в отдельном контейнере, а все контейнеры объединены в один общий. Как только этот общий контейнер становится видимым на экране, запускается соответствующая анимация. Степень завершенности анимации зависит от процента видимости контейнера: если он виден на 50%, анимация будет на полпути, а при 100% — завершена.

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

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

Инструменты, которыми мы пользовались

• Anime.js — библиотека для работы с анимацией. Работает со свойствами CSS, SVG, атрибутами DOM и объектами JavaScript.

• Lenis — набор инструментов для создания плавного скролла. Позволяет превращать плоскую графику и текст в объемные презентации.

• SimpleBar — набор инструментов для создания красивых скролл-баров. SimpleBar заменяет стандартную полосу прокрутки браузера на пользовательскую используя чистый CSS, без потери производительности.

• three.js - набор инструментов для создания 3D-сцен с учетом источников света, теней, современных материалов и текстур. Является отраслевым стандартом для создания 3D WebGL-контента непосредственно в браузере.

• Webpack — сборщик проектов, позволяющий реализовать динамические нагрузки «тяжелых» страниц. Собирает модули React, JS и др. в правильном порядке, чтобы исключить ошибки выполнения кода.

Рост количества визитов за последний месяц составил 583%. Отличный результат.

Надеюсь, что статья была вам полезна ?

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