Запуск интернет-магазина Ermenrich
Новый проект в сотрудничестве с Levenhuk и Студией Артемия Лебедева
Запуск интернет-магазина Ermenrich
Новый проект в сотрудничестве с Levenhuk
и Студией Артемия Лебедева
и Студией Артемия Лебедева
Ermenrich — бренд измерительных инструментов с немецким подходом к качеству. Сам бренд относительно молодой, на момент этой публикации ему исполнилось 4 года.
В ассортименте представлены инструменты для профессионального и бытового использования: лазерные и классические рулетки, датчики влажности и газа, дальномеры, лазерные уровни, детекторы проводки, аккумуляторные тестеры, индикаторы напряжения и многое другое. Всего более 150 наименований измерительных инструментов. В ближайших планах — выпуск электроинструмента и оснастки на единой аккумуляторной платформе.
Представительства бренда есть в России, США и Европе, а товары продаются на территории более 40 стран. Продукция представлена на крупнейших маркетплейсах и в магазинах дилеров.
В ассортименте представлены инструменты для профессионального и бытового использования: лазерные и классические рулетки, датчики влажности и газа, дальномеры, лазерные уровни, детекторы проводки, аккумуляторные тестеры, индикаторы напряжения и многое другое. Всего более 150 наименований измерительных инструментов. В ближайших планах — выпуск электроинструмента и оснастки на единой аккумуляторной платформе.
Представительства бренда есть в России, США и Европе, а товары продаются на территории более 40 стран. Продукция представлена на крупнейших маркетплейсах и в магазинах дилеров.
Причина обращения
Вывод нового бренда на рынок — задача дорогая и непростая. Но сам момент и стратегия выбраны удачно. Большинство известных брендов строительного и измерительного инструмента официально покинули прилавки российских магазинов, а параллельный импорт ещё больше взвинчивает цены на товары топовых производителей.
Дизайнеры Студии Артемия Лебедева разработали для молодого бренда смелый и яркий фирменный стиль, в основе которого контрастное сочетание черного, фиолетового и акцентного желтого, чтобы упаковка выделялась на магазинной полке и в онлайн-каталоге. Наша задача заключалась в верстке страниц сайта по макетам и создании внутренних механик о которых просил заказчик.
Мы уже работали со Студией на проекте по редизайну мультиязычного B2B-магазина компании Levenhuk, поэтому понимали как совместить их креатив с нашими технологическими требованиями.
Дизайнеры Студии Артемия Лебедева разработали для молодого бренда смелый и яркий фирменный стиль, в основе которого контрастное сочетание черного, фиолетового и акцентного желтого, чтобы упаковка выделялась на магазинной полке и в онлайн-каталоге. Наша задача заключалась в верстке страниц сайта по макетам и создании внутренних механик о которых просил заказчик.
Мы уже работали со Студией на проекте по редизайну мультиязычного B2B-магазина компании Levenhuk, поэтому понимали как совместить их креатив с нашими технологическими требованиями.
Этапы проекта
1
Разработка дизайна
С уходом западных торговых марок измерительного инструмента азиатские и ближневосточные вендоры воспользовались «окном» возможностей. Чтобы не теряться на полках магазинов среди возникшего разнообразия, новому бренду требовался яркий и узнаваемый дизайн.
2
Верстка макета
Перенести статичный макет в html — задача не сложная, но требует внимательности. Больше времени и сил уходит на создание «живого» интерфейса и внутренней логики. Не всегда дизайн-макет бывает готов до старта работ и здесь тоже были опасения насчет сроков. Но мы уже знаем как с этим работать, поэтому начали заранее с каркаса всей системы.
3
Анимация страницы о компании
Бренд Ermenrich имеет историю и ценности, о которых требовалось нескучно рассказать. По опыту знаем, что даже лаконичный текст может не зацепить внимание пользователя, поэтому дизайнеры придумали идею с анимацией brand stories. Получилось интересно и динамично.
4
Интеграция с 1С
Редко встретишь торговые онлайн-площадки, которые являются мастер-системами в вопросах учёта. Для обмена номенклатурой, заказами, остатками, ценами, интегрировали Ermenrich с 1С. Для этого использовали не типовой модуль интеграции 1С с «Битрикс управление сайтом», а специально написанный под сильно доработанную учетную систему заказчика.
5
Доработки для SEO
Сайты должны нравиться поисковым системам, поэтому рекомендации валидаторов и Page Speed Insights важны. Нужно было немного ускорить мобильную версию, внедрить разметку Sсhema.org на основных разделах, поработать с заголовками, автогенерацией alt и title к изображениям.
Разработка дизайна
Дизайн создавали, вдохновившись историей бренда и его основателя.
Эмблема отсылает к традиционной геральдике: она сочетает в себе башенную стену в форме буквы E, щит и вписанную в него голову быка. Черный цвет и ярко-желтые пятна на упаковке, инструментах и веб-макетах создают мощный визуальный контраст — прием, который помогает быстро идентифицировать нужный товар среди аналогов.
В основании проекта Ermenrich — тиражное решение на платформе 1С-Битрикс: Управление сайтом в редакции «Бизнес». Мы разработали его для проекта редизайна розничного магазина «Четыре глаза» в 2024 году.
Вот так по-разному могут выглядеть сайты на одном «движке». Дизайн может быть любым. Таким каким вы его видите.
Вот так по-разному могут выглядеть сайты на одном «движке». Дизайн может быть любым. Таким каким вы его видите.
Страница каталога
Страница категории
Карточка товара
Корзина
Верстка сайта Ermenrich
Работа frontend-разработчиков начинается задолго до начала самого процесса вёрстки. Такая практика сложилась потому, что не всегда дизайн-проект бывает готов вовремя. Чтобы исключить осложнения, перед созданием макетов мы согласовали с дизайнерами технические нюансы. Ознакомиться с этими требованиями можно в нашем «Чек-листе контроля дизайнеров». Следуя практике, каркас будущего ERMENRICH начали делать заранее, еще до финальной прорисовки макетов.
- Создание html-разметкиВначале создается html-разметка, содержащая контент. Позже, благодаря CSS-стилям она превратится в красивые страницы. Разметка проверяется на соответствие рекомендациям стандартов W3C , чтобы браузеры правильно смогли её интерпретировать.1
- Стилизация элементовЗдесь много нюансов: важно учесть разную длину контента, учесть что элемент может отсутствовать, что он может быть расположен в другом месте страницы. Нужно предусмотреть совмещение элементов, добавить их реакцию на действия пользователя (наведение, нажатие) и т.д.2
- Добавление Java-сценариевС их помощью мы создаем сложное поведение, которое делает сайт интерактивным. С помощью CSS можно реализовать простые действия, для сложных нужен JavaScript. Редкий интернет-магазин сегодня может обойтись без слайдера, валидатора веб-форм, калькулятора доставки или счетчика товаров в корзине.3
- Оптимизация загрузки и работы страницПроцесс оптимизации обычно комплексный. Как минимум, это избавление от лишнего кода. Браузер пользователя не должен загружать и обрабатывать код который не нужен в данный момент. Правильное размещение и минификация CSS/JS, сжатие, конвертация изображений в современные форматы4
- SEO-оптимизацияВ проект интегрирован SEO-модуль, поэтому значительная часть SEO-задач автоматизирована и решается на уровне шаблонов. Но он не всемогущий, некоторые моменты решаются непосредственно в коде. Например, у изображений обязательно должны быть теги Alt и Title. Мы настроили их автогенерацию чтобы поисковик «узнавал» приборы и технику Ermenrich.5
Всё, что мы описали относительно frontend-разработки, касается только одного интерфейса онлайн-магазина Ermenrich. Как правило, мы делаем не менее 7 различных разрешений от 320 до 1800 пикселей для трех разных браузеров с сотней версий.
Особенно занимательными могут быть опыты по стилизации и анимации для Safari, который часто преподносит сюрпризы, в отличие от более предсказуемых браузеров под Android.
Особенно занимательными могут быть опыты по стилизации и анимации для Safari, который часто преподносит сюрпризы, в отличие от более предсказуемых браузеров под Android.
Сложная анимация
В проекте редизайна, который мы делали для интернет-магазина оптической техники, потребовалось анимировать поведение большего количества web-элементов. Но там своя концепция и аудитория.
Покупатели средств измерения всё же более консервативный сегмент, ориентирующийся на практичность. Поэтому на сайте Ermenrich потребительским свойствам уделяется больше внимания. Тем не менее, здесь тоже есть что показать.
Покупатели средств измерения всё же более консервативный сегмент, ориентирующийся на практичность. Поэтому на сайте Ermenrich потребительским свойствам уделяется больше внимания. Тем не менее, здесь тоже есть что показать.
В этом месте логотип компании представлен в виде 3D объекта, который находится в 3D сцене. Для этого мы воспользовались инструментом, который позволяет управлять сценой на специализированном браузерном движке.
Вся сцена собрана вручную: расположение камеры и объектов, размер и угол поворота логотипа, его освещение, состоящее из нескольких источников света. Всё как в настоящем 3D. Только ко всему этому прибавляются трудности браузерной разработки: оптимизация загрузки и работы, настройка сцены под каждое разрешение экрана, ну и само собой поддержка во всех браузерах и на всех устройствах.
Вся сцена собрана вручную: расположение камеры и объектов, размер и угол поворота логотипа, его освещение, состоящее из нескольких источников света. Всё как в настоящем 3D. Только ко всему этому прибавляются трудности браузерной разработки: оптимизация загрузки и работы, настройка сцены под каждое разрешение экрана, ну и само собой поддержка во всех браузерах и на всех устройствах.
Трансформация логотипа
Чтобы создать эффект трансформации имени короля древних готов, мы разбили его на буквы. Новые буквы скрыли от глаз пользователя. Каждой отдельной букве добавили свойство, определяющее траекторию её смещения и объединили всё в одну сцену. Состояние анимации зависит от того, в каком месте на странице сейчас находится пользователь.
За анимацией строки следует анимация стены замка. В ней также присутствует слово Ermenrich, которое стилистически напоминает клеймо мастера на кирпичной кладке. Чтобы анимация выглядела эффектно два логотипа должны совпасть по размеру и расположению. Конечно же всё это должно красиво отображаться на каждом возможном разрешении в различных браузерах.
За анимацией строки следует анимация стены замка. В ней также присутствует слово Ermenrich, которое стилистически напоминает клеймо мастера на кирпичной кладке. Чтобы анимация выглядела эффектно два логотипа должны совпасть по размеру и расположению. Конечно же всё это должно красиво отображаться на каждом возможном разрешении в различных браузерах.
Перемещение букв в строке
По своей механике сцена похожа на трансформацию строки с именем исторического персонажа в имя бренда. Объекты, задействованные в сцене имеют начальную позицию и масштаб, которые меняются по мере того как пользователь перемещается по странице.
Трансформация сцены
Технологически перехода между сценами с анимацией нет, они все независимые и могу срабатывать одновременно. Единственное ограничение — это видимость анимации.
Каждый анимированный объект лежит в отдельном контейнере, и все они объединены в один общий контейнер. Когда контейнер появляется на экране, запускается анимация, зависящая от процента видимости контейнера. Если контейнер виден на 50 процентов — анимация находится на своей середине, на 100 — анимация закончилась.
Помимо видимости используется отступ от этого контейнера, если анимация должна закончиться/начаться раньше/позже чем контейнер появиться/скроется.
Помимо этого, для сложных пошаговых анимаций, таких как логотип, есть возможно разбивать контейнер по шагам, то есть одна анимация закончится когда контейнер скроется на 30 процентов, а следующая начнётся когда процент дойдёт до 40.
Каждый анимированный объект лежит в отдельном контейнере, и все они объединены в один общий контейнер. Когда контейнер появляется на экране, запускается анимация, зависящая от процента видимости контейнера. Если контейнер виден на 50 процентов — анимация находится на своей середине, на 100 — анимация закончилась.
Помимо видимости используется отступ от этого контейнера, если анимация должна закончиться/начаться раньше/позже чем контейнер появиться/скроется.
Помимо этого, для сложных пошаговых анимаций, таких как логотип, есть возможно разбивать контейнер по шагам, то есть одна анимация закончится когда контейнер скроется на 30 процентов, а следующая начнётся когда процент дойдёт до 40.
Инструменты, которыми мы пользовались
Anime.js — библиотека для работы с анимацией. Работает со свойствами CSS, SVG, атрибутами DOM и объектами JavaScript.
Lenis — набор инструментов для создания плавного скролла. Позволяет превращать плоскую графику и текст в объемные презентации.
SimpleBar — набор инструментов для создания красивых скролл-баров. SimpleBar заменяет стандартную полосу прокрутки браузера на пользовательскую используя чистый CSS, без потери производительности.
three.js - набор инструментов для создания 3D-сцен с учетом источников света, теней, современных материалов и текстур. Является отраслевым стандартом для создания 3D WebGL-контента непосредственно в браузере.
Webpack — сборщик проектов, позволяющий реализовать динамические нагрузки «тяжелых» страниц. Собирает модули React, JS и др. в правильном порядке, чтобы исключить ошибки выполнения кода.
Цифры проекта
- 1100+ часовпотребовалось на запуск сайта в работу с учетом верстки, программирования логики и всех интеграций
- 3 месяцадлились работы по переносу дизайна из Figma в HTML/CSS/JS и программированию бекенда
- 9 экспертовучаствовало в создании онлайн магазина со стороны ИНТЕРВОЛГИ
- 15000+количество визитов за первые 3 месяца работы магазина
- 583%рост количества визитов за последний месяц
Качественный редизайн или верстка сложного сайта с вниманием к деталям
Нужен подрядчик, умеющий делать сайты, которые нравятся клиентам и поисковикам?
Оставьте контактные ваши данные. Мы перезвоним и обсудим задачу.
Оставьте контактные ваши данные. Мы перезвоним и обсудим задачу.
Нажимая на кнопку «Оставить заявку», вы даете согласие на обработку персональных данных и соглашаетесь c политикой конфиденциальности.
Перенос сайта c Wordpress для Завода бурового оборудования
«Завод бурового оборудования», г. Оренбург
01.
Наши проекты по редизайну и верстке
Разработка сайта для проекта компании ЕВРАЗ
Лендинг для оптовых поставок щебня
07.
Дизайн сайта для внутреннего проекта банка
Клуб клиентов Альфа•Банка
04.
Метизная группа ДОБРОГА
Обновление и доработка интернет-магазина
09.
Сеть аптек «Аптека 22», Алтай
Доработка и обновление сайта для аптечной сети
02.
Доработка и обновление сайта для бутика
Бутик швейцарских часов GENEVA
03.
Магазин рок атрибутики Castle Rock
Разработка крупного интернет-магазина тематической атрибутики
05.
Редизайн промышленного маркетплейса
Новый интерфейс STEEL RADAR
08.
Интернет-магазин Кирпич.ру
Верстка сайта поставщика строительных материалов
06.
Почему ИНТЕРВОЛГА?
ИНТЕРВОЛГА имеет опыт работы в масштабных проектах с крупными партнерами. Большие задачи — наш профиль. Доля таких проектов — более 70%.
на это есть веские причины:
Мы завершили 1000+ проектов сложных внедрений и интеграций под ключ для производственных компаний и предприятий сферы услуг.
Умеем управлять разработкой, поэтому нам доверяют решать критичные для бизнеса задачи: миграция, кастомная интеграция, проектирование архитектуры IT-систем, развитие ранее «замороженных» проектов, доработка и поддержка «неудачных» решений менее опытных команд.
Если перед вами стоит задача внедрения, замены, доработки или интеграции корпоративных систем — опишите ваши потребности.
Мы предложим решение.
Мы предложим решение.
20+ лет
на ИТ-рынке
1000+
успешных проектов
10 000
часов разработки в месяц
150+
штатных сотрудников
100+
разработчиков Битрикс, Битрикс24, 1С
14
производственных команд
Бесплатная консультация эксперта по разработке порталов на Битрикс24
Заполните форму, чтобы мы смогли перезвонить и запланировать встречу.
Нажимая на кнопку «Оставить заявку», вы даете согласие на обработку персональных данных и соглашаетесь c Политикой конфиденциальности.
Хотите получать лучшие статьи от INTERVOLGA раз в месяц?
Подпишитесь на рассылку — спамить не будем