Интернет-витрина электронных компонентов «РуЧип»
Для поставщика электронных компонентов мы с нуля создали логотип и фирменный стиль, спроектировали и разработали B2B-витрину каталога и наполнили её более чем 100 000 товарных позиций.
Сайт сейчас не на нашем обслуживании. На действующем сайте могут быть изменения: показываем проект таким, каким мы его запускали.
Не только витрина, но и большой каталог: пока одни рисовали знак и экраны, другие собирали и переписывали сотни тысяч карточек товаров.
О клиенте
«РуЧип» — поставщик электронных компонентов: микросхемы, разъёмы, реле, резисторы, корпуса и тысячи других позиций для тех, кто проектирует и собирает электронику.
Задача
Нужно было показать устойчивость и надёжность компании, «к которой возвращаются с доверием», и дать ей B2B-витрину, на которой за секунды находится нужный компонент среди огромного каталога, а корзина собирает заявку для менеджера.
Решение
Разработали логотип и фирменный стиль, собрали прототип и дизайн, реализовали витрину на 1С-Битрикс и написали собственный парсер для наполнения. После запуска вели рекламу и SEO.
Электронный компонент, собранный из блоков
В основе знака образ микросхемы: геометрическая форма с «ножками», приведённая к модульной сетке. Шрифтовую часть старого логотипа сохранили. Переключайте версии и фон.
Триколор из логотипа
Синий, красный и белый: сдержанная палитра, которая вызывает доверие. Градиенты используются в цифровой среде, в печати только чистые цвета. Нажмите на цвет, чтобы скопировать код.
Montserrat
РУЧИП
Аа Бб Вв Гг Дд 0123456789Электронные компоненты
Аа Бб Вв Гг Дд 0123456789Как устроен фирменный стиль
Идея знака, версии логотипа, цвета, паттерны и шрифты. Листайте, нажмите на страницу, чтобы увеличить.
От визитки до вывески
Сначала структура, потом красота
Перед дизайном собрали кликабельный прототип витрины в Axure: каталог, карточка товара, корзина-заявка, избранное, поиск и загрузка спецификации. Потяните ползунок, чтобы увидеть, как каркас стал готовым экраном.
- 29 экранов: компьютер и телефон
- Сценарии каталога, заявки и поиска проверены до дизайна
- Прототип открывается прямо в браузере
ПрототипДизайн
Поиск по партномеру в первом экране
Шапка с каталогом и строкой поиска, крупное предложение, три причины заказать и популярные категории с количеством товаров. Наведите на точки, чтобы увидеть детали.
- Кнопка «Каталог товаров» всегда под рукой
- Поиск по партномеру, избранное и корзина в шапке
- Фирменные красный и синий в кнопках и акцентах
От категорий до вопросов и ответов
Главная ведёт в каталог, показывает популярные категории, блок «Не нашли нужный товар?», новости и контакты. Скролльте страницу, окно справа прокручивается вместе с вами.
Фильтры и цены прямо в списке
Листинг товаров с набором фильтров по параметрам, ценами по партиям, кратностью и кнопкой «В корзину»: позиции собираются в заявку. Для компонентов, где цена зависит от количества, стоимость запрашивается.
- Фильтры по производителю, серии, корпусу и другим параметрам
- Оптовые цены от количества в одной строке
- Количество, избранное и добавление в заявку без перехода на страницу
Категории, карточка, поиск и блог
Больше 100 000 товаров, собранных парсингом
Каталог электронных компонентов не набрать вручную. Мы собирали товары парсингом, а затем переписывали описания, чтобы карточки были понятными и уникальными. Парсер часто блокировали, поэтому написали собственный скрипт под этот проект. Сбор данных шёл два месяца.
- ПарсингСвой скрипт под проект: парсер часто блокировали
- Очистка и сопоставлениеНазвания, производители, характеристики
- РерайтОписания переписаны под каталог
- Загрузка в каталогРазделы, фильтры и карточки на 1С-Битрикс
Каталог в телефоне
Для телефона нарисованы отдельные экраны: меню с каталогом, фильтры на весь экран, листинг и карточка товара.
Компоненты витрины собраны в UI-кит
Карточки категорий, строки товаров, счётчики количества, фильтры, пагинация и вопросы-ответы: один раз нарисованы и собираются в любые экраны.
Под капотом
Каталог «под ключ»
Не только витрина, но и её содержимое: товары, разделы и характеристики подготовили и загрузили мы.
- Собственный парсер под проект
- Два месяца сбора данных
- Рерайт описаний
- Загрузка в 1С-Битрикс
Для клиента
- Поиск по партномеруСтрока поиска в шапке каждой страницы
- ФильтрыПо производителю, серии, корпусу и другим параметрам
- Загрузка спецификацииЗаказ списком позиций (BOM)
- Корзина-заявкаПозиции собираются в корзину и уходят менеджеру как заявка через форму
Каталог и заявки на 1С-Битрикс
Конвейер наполнения
источники → парсер
очистка → сопоставление
рерайт → каталогСхема этапов наполнения
- Mobile-FriendlyПолная адаптивность проекта
- Прототип и дизайнAxure и Figma, 29 экранов прототипа
- Реклама и SEOПродвижение после запуска
От знака до продвижения
- 1
Логотип и стиль
Знак, цвета, шрифт, носители
- 2
Прототип
Структура витрины в Axure
- 3
Дизайн
Компьютер и телефон, UI-кит
- 4
Разработка
Магазин на 1С-Битрикс
- 5
Наполнение
Парсинг и рерайт каталога
- 6
Реклама и SEO
Продвижение после запуска
Нужна витрина с большим каталогом?
Оставьте заявку — придумаем стиль, соберём витрину и наполним его товарами.
