Группа компаний Levenhuk — производитель оптической техники мировых брендов: Levenhuk, Discovery, MAGUS, Ermenrich и эксклюзивный дистрибьютер брендов Bresser, Sky-Watcher, Konus, Meade.
Сейчас под управлением компании находится международная сеть магазинов оптической техники «Четыре глаза» (в Европе – «Zoom'n'Joy»). Магазины расположены в России, странах СНГ, Европе, Азии и Северной Америке. Оптическая техника бренда Levenhuk также представлена на крупнейших торговых интернет-площадках.
Компания в цифрах
- 20+лет на рынке
- 75магазинов оптической техники по всему миру
- 96зарегистрированных товарных знаков
- 43страны присутствия
- 25языков сайта
- 1,9млрд руб. капитализации
Причина обращения
Желание сделать дизайн уникальным, нетипичным для B2B
Предыдущий вариант дизайна опирался на традиционную концепцию проектирования интерфейсов торговых площадок: табличный вид каталога, типовые размеры и форма элементов, спокойные цвета, мелкий шрифт. Он был промежуточным и предназначался для тестирования нового движка сайта.
Причина обращения
Желание сделать дизайн уникальным, нетипичным для B2B
Предыдущий вариант дизайна опирался на традиционную концепцию проектирования интерфейсов торговых площадок: табличный вид каталога, типовые размеры и форма элементов, спокойные цвета, мелкий шрифт. Он был промежуточным и предназначался для тестирования нового движка сайта.
Компания Levenhuk обратилась к нам с осознанной потребностью, но без готового макета. На первой планерке с представителями заказчика и студии обсудили формат работы, зоны ответственности и сроки. К верстке неприменимо понятие MVP, нужно выдать новый интерфейс целиком, без итераций. Поэтому особую роль играют предпроектные исследования, которые взяла на себя команда студии Лебедева.
Максим
Менеджер проекта
Компания Levenhuk обратилась к нам с осознанной потребностью, но без готового макета. На первой планерке с представителями заказчика и студии обсудили формат работы, зоны ответственности и сроки. К верстке неприменимо понятие MVP, нужно выдать новый интерфейс целиком, без итераций. Поэтому особую роль играют предпроектные исследования, которые взяла на себя команда студии Лебедева.
Максим
Менеджер проекта
Когда статичные страницы готовы, их нужно «оживить»: распределить роли при отрисовке элементов между frontend и backend, настроить логику обмена данными, добавить динамику и интерактивность, поправить импорты и др.
Дизайн, созданный студией Лебедева — сложный. Как с точки зрения концепции, так и по реализации в HTML/CSS. Но макеты сделаны чисто, верстать их легко.
Задачи,
поставленные заказчиком
Верстка по макету
Добавление функционала элементам дизайна
Когда вы добавляете товар в «корзину», он попадает туда «почти физически», даже если «корзина» — виртуальная.
А поскольку основной целью каждого поставщика является зарабатывание денег, то график продаж и показатель закупочной маржи находятся на переднем плане страницы личного кабинета.
А поскольку основной целью каждого поставщика является зарабатывание денег, то график продаж и показатель закупочной маржи находятся на переднем плане страницы личного кабинета.
Уникальный счетчик товаров в корзине
Эти простые и понятные, но очень выразительные методы позволили создать привлекательные и запоминающиеся элементы интерфейса
Как сделать дизайн
Как это работает? Просто.
При добавлении, последний элемент списка копируется, а цена увеличивается. При уменьшении, наоборот.
При добавлении, последний элемент списка копируется, а цена увеличивается. При уменьшении, наоборот.
живым и уникальным
- Элементы каталога "свернули" в заголовок, на освободившееся место подтянули фильтры
- Сделали выпадающее меню визуально более заметным
что изменили:
В механике перемещений по каталогу ничего не изменилось:
выбираем категорию — подкатегорию — товар.
выбираем категорию — подкатегорию — товар.
оригинальный способ вывода каталога
При открытии выпадающего списка, генерируются два эллипса, с разным смещением.
Размеры эллипсов можно найти по формуле малой полуоси.
Нам известная высота и длина прямоугольной области вокруг которой описан эллипс. Этих данных достаточно чтобы найти длину этого эллипса.
Размеры эллипсов можно найти по формуле малой полуоси.
Нам известная высота и длина прямоугольной области вокруг которой описан эллипс. Этих данных достаточно чтобы найти длину этого эллипса.
Список брендов или партнеров на сайте традиционно представляют в виде шахматной доски или слайдера.
Но видимый нами свет — это волны. Так как вся линейка товаров Levenhuk предназначена для наблюдений (путём сбора электромагнитного излучения — видимого света), то бренды представлены в виде волн из фотонов.
Но видимый нами свет — это волны. Так как вся линейка товаров Levenhuk предназначена для наблюдений (путём сбора электромагнитного излучения — видимого света), то бренды представлены в виде волн из фотонов.
Сетка создана с помощью свойства grid.
Так как по условию, количество карточек в этой секции всегда строго определено, то для каждого круга записана конкретная позиция в grid сетке.
На странице списка брендов все круги построены по заданному алгоритму поэтому они и добавляются волной.
Так как по условию, количество карточек в этой секции всегда строго определено, то для каждого круга записана конкретная позиция в grid сетке.
На странице списка брендов все круги построены по заданному алгоритму поэтому они и добавляются волной.
новое представление линейки брендов
Обычно важные кнопки меняют цвет при наведении. Это делает их более заметными и повышает кликабельность. Но что если пойти дальше и поместить на задний план простой объект, который добавит глубины плоской кнопке?
Линза подходит для этой цели идеально!
Линза подходит для этой цели идеально!
СТАТИЧНЫЕ ЭЛЕМЕНТЫ СТРАНИЦЫ приобрели объем И АНИМАЦИЮ
При наведении создаётся эллипс, который в половину меньше чем кнопка.
При перемещении курсора над кнопкой, получаем координаты мышки и находим новые координаты эллипса.
При перемещении курсора над кнопкой, получаем координаты мышки и находим новые координаты эллипса.
В карточках каталога мы обычно видим миниатюрные изображения товаров. Чтобы разглядеть структуру поверхности, расположение кнопок и множество других мелких деталей приходится делать еще пару «лишних» шагов.
Но зачем их делать, если все подробности можно узнать сразу, прямо на странице каталога?
Но зачем их делать, если все подробности можно узнать сразу, прямо на странице каталога?
детализация когда она нужна
Эффект зума осуществляется через дополнительный элемент с background-img (еще один слой с более крупным изображением).
Во время движения курсора позиция картинки смещается относительно координат.
Во время движения курсора позиция картинки смещается относительно координат.
При наведении применяется CSS-стиль, отвечающий за поворот элемента.
Отклик интерфейса помогает пользователю понять, что именно меняется из-за его действий. Они не должны быть скучными, ведь люди не роботы.
«Живые» заголовки необычны для раздела полезной информации, они вызывают интерес, подталкивают пользователя к тому, чтобы узнать «что будет, если нажать?»
«Живые» заголовки необычны для раздела полезной информации, они вызывают интерес, подталкивают пользователя к тому, чтобы узнать «что будет, если нажать?»
Микровзаимодействия в разделе, который редко читают
Специально для раздела новостей и блога была сделана карточка, стилистически и функционально отличающаяся от карточек в каталоге. Изображение на ней статичное и многослойное одновременно.
Согласитесь, оно как будто из глянцевого журнала, а не каталога для B2B-клиентов.
Согласитесь, оно как будто из глянцевого журнала, а не каталога для B2B-клиентов.
карточка товара без видимых границ
На самом деле, в этой карточке два эллипса (клик на картинке, чтобы увидеть).
Тот, который с градиентом, отвечает за изменение цвета у картинки.
Второй мы не видим, но он отвечает за обрезание картинки и практически полностью повторяет первый, с одним исключением: скругленные края у него лишь снизу, это позволяет обрезать картинку только снизу.
Тот, который с градиентом, отвечает за изменение цвета у картинки.
Второй мы не видим, но он отвечает за обрезание картинки и практически полностью повторяет первый, с одним исключением: скругленные края у него лишь снизу, это позволяет обрезать картинку только снизу.
Специально для раздела новостей и блога была сделана карточка, стилистически и функционально отличающаяся от карточек в каталоге. Изображение на ней статичное и многослойное одновременно.
Согласитесь, оно как будто из глянцевого журнала, а не каталога для B2B-клиентов.
Согласитесь, оно как будто из глянцевого журнала, а не каталога для B2B-клиентов.
карточка товара без видимых границ
На самом деле, в этой карточке два эллипса (клик на картинке, чтобы увидеть).
Тот, который с градиентом, отвечает за изменение цвета у картинки.
Второй мы не видим, но он отвечает за обрезание картинки и практически полностью повторяет первый, с одним исключением: скругленные края у него лишь снизу, это позволяет обрезать картинку только снизу.
Тот, который с градиентом, отвечает за изменение цвета у картинки.
Второй мы не видим, но он отвечает за обрезание картинки и практически полностью повторяет первый, с одним исключением: скругленные края у него лишь снизу, это позволяет обрезать картинку только снизу.
Ассортимент компании широк: в нем есть небольшие предметы — театральные бинокли и огромные телескопы-рефлекторы на треноге. Обрезать и уменьшать большие картинки в слайдере не хотелось, поэтому решили сам слайдер сделать особенным. Он меняет свою высоту в зависимости от размера карточек.
«Резиновый» слайдер
Эллипс на фоне создается с помощью стилей и зависит от длины и высоты конкретного слайда.
Чтобы сообщить клиенту о том, что товар в настоящий момент пользуется особым спросом или участвует в акции, прибегают к разным приемам. Иногда такую информацию можно «закодировать» одним символом (∞ — пожизненная гарантия). А вот символа для «bestseller» пока не придумали. Оно длинное, выходит за контур слайдера и сливается с фоном. Менять цвет нужно только у некоторых букв. Здесь важно правильно смешивать слои и цвета.
смешивание слоев и цвета
Задний фон у слайдера черный. Текст во всплывающем tooltip тоже.
Необходимо было сделать текст двухцветным: белый текст на чёрном фоне и черный текст на белом фоне.
За это отвечает mix-blend-mode.
Но, из-за нестандартного положения текста и его анимации, требовался особенный подход в котором текст и иконка анимируются отдельно друг от друга.
Необходимо было сделать текст двухцветным: белый текст на чёрном фоне и черный текст на белом фоне.
За это отвечает mix-blend-mode.
Но, из-за нестандартного положения текста и его анимации, требовался особенный подход в котором текст и иконка анимируются отдельно друг от друга.
Мы показали только небольшую часть дизайнерских решений, которые наши разработчики реализовали на новом B2B-сайте. Они видны всем посетителям.
Но есть детали, которые видны только после регистрации.
Они тоже сложные, но красивые и полезные.
Но есть детали, которые видны только после регистрации.
Они тоже сложные, но красивые и полезные.
Проект большой и системный, поэтому вложения в него нужно рассматривать как инвестиции
Трудоемкость проекта
550+
часов на верстку макета, созданного дизайнерами студии Артемия Лебедева
5+
месяцев работы специалистов по frontend и backend
часов на «переодевание» сайта в новый дизайн
900+
Мнение заказчика
От лица ОАО «Левенгук» хотим поблагодарить команду ИНТЕРВОЛГИ за добросовестную работу над проектом. Вместе мы разработали и поддерживаем мультиязычный интернет-магазин и личный кабинет дилера.
К старту проекта по редизайну у нас, руководителей компании, уже был опыт общения с ведущими студиями страны. Выбирали подрядчика из топ-10 по рейтингу, портфолио, отзывам в сети. До первой беседы с аналитиком компании ИНТЕРВОЛГА, опыт был негативным, и мы сформировали пул важных для Левенгук критериев.
Учитывая эти критерии мы выбрали интегратора осознанно. Результат нас удовлетворяет на протяжении уже более трех лет, к тому же отсутствует излишняя бюрократия. Радует и профессиональная команда проекта. Отдельно благодарим за предоставление комплексных решений — интеграция с 1С, решение серверных вопросов, стабильность поддержки.
К старту проекта по редизайну у нас, руководителей компании, уже был опыт общения с ведущими студиями страны. Выбирали подрядчика из топ-10 по рейтингу, портфолио, отзывам в сети. До первой беседы с аналитиком компании ИНТЕРВОЛГА, опыт был негативным, и мы сформировали пул важных для Левенгук критериев.
Учитывая эти критерии мы выбрали интегратора осознанно. Результат нас удовлетворяет на протяжении уже более трех лет, к тому же отсутствует излишняя бюрократия. Радует и профессиональная команда проекта. Отдельно благодарим за предоставление комплексных решений — интеграция с 1С, решение серверных вопросов, стабильность поддержки.
Антон Епифанов
Генеральный директор
ОАО «Левенгук»
ОАО «Левенгук»
Перенос сайта c Wordpress для Завода бурового оборудования
ООО «Завод бурового оборудования», г. Оренбург
01.
Наши проекты по редизайну и верстке
Разработка сайта для проекта компании ЕВРАЗ
Лендинг для оптовых поставок щебня
07.
Дизайн сайта для внутреннего проекта банка
Клуб клиентов Альфа•Банка
04.
Метизная группа ДОБРОГА
Обновление и доработка интернет-магазина
09.
Сеть аптек «Аптека 22», Алтай
Доработка и обновление сайта для аптечной сети
02.
Доработка и обновление сайта для бутика
Бутик швейцарских часов GENEVA
03.
Магазин рок атрибутики Castle Rock
Разработка крупного интернет-магазина тематической атрибутики
05.
Редизайн промышленного маркетплейса
Новый интерфейс STEEL RADAR
08.
Интернет-магазин Кирпич.ру
Верстка сайта поставщика строительных материалов
06.
Хотите больше подробностей?
Прочитайте статью о проекте в нашем блоге. В ней достаточно боли и нюансов по организации взаимодействия между дизайнерами и фронтендом. Бонус - чек-лист контроля работы дизайнеров, который помог нам уложиться в сроки и не выйти за рамки первоначальной оценки.
ИНТЕРВОЛГА имеет опыт работы в масштабных проектах с крупными партнерами. Мы умеем управлять проектами, поэтому нам доверяют сложную разработку. Если перед вами стоит задача внедрения, замены или интеграции корпоративных систем — опишите ваши потребности. А мы предложим решение.
- 20+ летна ИТ-рынке
- 1000+успешных проектов
- 10 000часов разработки в месяц
- 150+штатных сотрудников
- 100+программистов и инженеров
- 14производственных команд
20+ лет
на ИТ-рынке
1000+
успешных проектов
10 000
часов разработки в месяц
150+
штатных сотрудников
100+
программистов и инженеров
14
производственных команд
Заявка на разработку
Нажимая кнопку «Отправить», я даю свое согласие на обработку моих персональных данных, в соответствии с Федеральным законом от 27.07.2006 года №152-ФЗ «О персональных данных», на условиях и для целей, определенных в Согласии на обработку персональных данных
Хотите получать лучшие статьи от INTERVOLGA раз в месяц?
Подпишитесь на рассылку — спамить не будем