Сначала дерево каталога.
Решаем, как закупщик ищет позицию: по разделам, по параметрам, по названию. Потом рисуем.
От 1 100 BYN, срок 1–2 недели
Система знака — 3 200 BYN, 2–3 недели
Сайт-каталог
БрифРазговор об ассортименте: что у вас есть, кто выбирает и как просит расчёт.
Сначала дерево каталога.
Решаем, как закупщик ищет позицию: по разделам, по параметрам, по названию. Потом рисуем.
Каталог в кармане закупщика.
И на большом мониторе.
Файлы для наполнения.
Figma, код и инструкция.
Инструкция для разработчиков.
Сайт запустит любой программист.
Каталоги в разных нишах.
Производство, десерты, фарма, спорт.
Избранное
Корзины нет: каталог показывает товар и подводит к запросу цены. Нажмите работу — откроется во весь экран.
Портфолио
Здесь каталоги и сайты с разделами и карточками. Двенадцать из них разобраны выше, остальные — рядом.
Конструкция
Каталог растёт позициями. Сетка и общий шаблон карточки не дают ему превратиться в свалку.
Сетка. Двенадцать колонок: позиции встают в ряды.
Система каталога
Закупщик придёт из поиска, с выставки по QR или из письма. Для каждого экрана каталог собран отдельно.
До
50
страниц в структуре
в тарифе «Бизнес»
Не меньше
3
версии сайта
десктоп, планшет, телефон
Десктоп
Дерево разделов слева, список позиций рядом, кнопка запроса на виду — без поиска по меню.
Планшет
Две колонки, а таблицы характеристик прокручиваются внутри карточки, не ломая страницу.
Телефон
На телефоне каталог открывают в дороге и на объекте. Разделы в меню, карточки в одну колонку, звонок и запрос — одним касанием.
Переключайте устройство и смотрите, как каталог выглядит на нём.
Десктоп. Основная версия на широком экране.
Раздел — одна тема. Если раздел собирает «всё подряд», закупщик не находит ничего. Дерево строится по тому, как просят, а не по складу.
Параметр крупно. Главный размер или мощность видны раньше описания и в списке, и в карточке.
Таблица читается. Мелкая таблица на телефоне выглядит как картинка — читать её нельзя.
Не больше двух шрифтов. Ровные цифры и меньше начертаний — таблицы читаются быстрее, а страница не прыгает.
В жизни
Не в макете у дизайнера, а на мониторе закупщика, на планшете на выставке и в телефоне у заказчика.
Срок жизни
Ассортимент меняется каждый сезон. Если карточка собрана по шаблону, новые позиции добавляются за час.
Сколько живёт каждая часть
Пока не меняется логика заказа. Добавляются разделы, а схема остаётся.
Живут вместе с фирменным стилем. Новая позиция собирается из готовых полей за час.
Меняются каждый сезон: фото, размеры и цены подставляются в готовую карточку.
Планшет и телефон пересобираются из основного макета без новой разработки.
Сроки — по частям. Общий ориентир по каталогу: 3–4 года в среднем, если он собран на наборее блоков3, а не склеен из страниц разных лет.
Его переделывают, когда позиции добавляли разные люди: у одних есть параметры, у других нет, фото разных пропорций, а названия не по правилу.
новая позиция встаёт в каталог и выглядит как тысячная. Вот разница между свалкой позиций и системой: свалка работает на старте, система — на всём сроке жизни ассортимента.
Зачем система
Позиции добавляют разные менеджеры: названия по-разному, фото разного размера. Найти нужное можно только поиском.
КАК ПРИДЁТСЯ
У одной есть параметры, у другой нет; фото разного формата, а названия «по настроению». Закупщик не может сравнить.
четыре входа — и в каждой свой каталог
СИСТЕМОЙ
Шаблон карточки, таблица и правила наполнения. Проверяю сразу на ПК, телефоне и в письме.
четыре входа — каталог один
Процесс
Этапы идут внахлёст: пока вы согласуете дерево каталога, я уже собираю карточку позиции и таблицу характеристик.
Созваниваемся на час: сколько позиций, как их группируют, какие параметры решают выбор и как клиент просит расчёт. Прошу прислать текущий каталог или прайс.
Строю дерево разделов по тому, как просят закупщики, а не по складскому учёту. Вы правите схему до дизайна.
Собираю серые блоки: список, карточка позиции, таблица параметров, форма запроса цены.
Определяю обязательные параметры и правила фото. Из этого появляется таблица, которую менеджер заполняет для каждой позиции.
Показываю главную, раздел и карточку позиции. Стиль утверждаем на них, остальное собирается из тех же блоков.
Вы смотрите макет, собираете замечания у инженеров и менеджеров. Правки вношу до утверждения; число итераций зависит от тарифа.
Собираю остальные разделы, страницу «Где купить» и версии под планшет и телефон. Таблицы проверяю на узком экране.
Верстаю разделы и карточки и подключаю к системе управления сайтом. Первые позиции загружаю сам и пишу инструкцию, как добавлять новые.
Помогаю выбрать хостинг, зарегистрировать домен на вас, включить защищённое соединение (HTTPS), защиту форм и резервные копии.
Прохожу путь закупщика на трёх экранах: от раздела до запроса цены. Передаю макеты, код, таблицу позиций в инструкции и иконки.
Выставка через месяц, а каталога нет. Для этого есть тариф «Старт»: до 10 страниц, базовый дизайн и версия для телефона. Этого хватит на выставку, а структуру можно наращивать после неё.
Ваша ситуация
Выберите строку, похожую на вашу. Покажу, что это даёт сегодня, что будет после работы и с чего начать.
Ассортимент лежит в PDF и в прайсе в Excel, а закупщик просит ссылку и конкретную позицию.
Как сейчас
Как будет
Что рекомендую
Новый каталог на «Старте» — до 10 страниц. Если разделов больше, лучше «Бизнес» с прототипом структуры.
Каталог лежит одним разделом сайта: список позиций без группировки и параметров.
Как сейчас
Как будет
Что рекомендую
Новый каталог: в списке без структуры нечего улучшать — логику придётся строить заново.
Каталог сделала студия, но макета и исходников у вас нет.
Как сейчас
Как будет
Что рекомендую
Решаю на брифе, глядя на каталог: рабочее дерево — в редизайн, слабое — в полную разработку. Скажу прямо.
Пятьсот позиций в одном разделе, а нужное найти можно только поиском.
Как сейчас
Как будет
Что рекомендую
Пересборка дерева: ассортимент ваш, структуру и дизайн перестраиваю я.
Каталогу несколько лет, он приводит заявки. Вопрос — не пора ли обновить вид.
Как сейчас
Как будет
Что рекомендую
Полностью переделывать не нужно. Это случай, когда я отговариваю от разработки с нуля: хватит обновления.
Кроме «Старта»: там меньше объём и нет прототипа. Полный состав — ниже, в тарифах.
Версии
3
десктоп, планшет, телефон
Макеты
Figma
правки без пересоздания
Код
HTML · CSS · JS
готов к загрузке на хостинг
Инструкция
для программиста
Исходники
У вас
права и файлы передаются вам
Что вы получаете
Макеты в Figma, готовая вёрстка, иконки — и 8 файлов под три экрана.
0 из 8 файлов · 7 форматов в архиве
Файлы. Макеты, код и иконки — всё, что спросит программист.
Что входит
Файлы для программиста, для согласования и для запуска — и у каждого подписано, куда он идёт. Семь форматов в одном архиве.
Разделы, карточка позиции и форма запроса для десктопа, планшета и телефона, набор блоков и кликабельный прототип. Программист берёт размеры и цвета, не обращаясь к вам.
Страницы каталога, которые открываются в браузере: главная, раздел, карточка позиции, форма запроса. Программист подключает к ним ваши данные — вид уже готов. Подключается к системе управления сайтом (CMS).
Цвета, шрифты, сетка и отступы лежат в одном месте. Чтобы сменить акцентный цвет или шрифт, достаточно поправить одну строку, а не каждую страницу.
Меню, раскрывающиеся блоки и отправка формы заявки. Только то, что нужно сайту, без лишних библиотек — страница остаётся лёгкой.
Пиктограммы параметров, значки и графика в векторе. Остаются чёткими при любой плотности экрана и весят килобайты.
Фото и графика в современном лёгком формате: страницы открываются быстро даже на слабом мобильном интернете.
Каталог одним файлом, который открывается без Figma: инженер и директор смотрят макет с телефона. По нему каталог утверждают.
Как устроены файлы, где лежат цвета и шрифты, какие размеры экранов поддерживаются и как выложить сайт на хостинг. Новый программист разберётся без созвона.
Исходники передаю, ваш каталог в чужих проектах не использую.
Нужен другой формат — отдам в тот же день.
Нужен новый раздел или серия позиций — соберу из готовых карточек.
Проект хранится у меня: файлы восстановим и через годы.
Презентация, письма и реклама строятся на том же каталоге.
Кто делал каталог, тот и отвечает на вопросы.
Что дальше
Каталог подводит к запросу, а убедить закупщика должны презентация и письма. Всё в том же стиле. Эти услуги строятся на готовом каталоге и не требуют переделки.
Почему со мной
Не витрина агентства и не набор подрядчиков. Задачу собираю, считаю смысл, держу арт-дирекшн и веду систему целиком — от первого брифа до результата в бизнесе.
Цепочки «менеджер — арт-директор — исполнитель» нет: про ассортимент и закупщиков вы рассказываете мне, и я же её разрабатываю. В пересказе ничего не теряется. Если нужен узкий специалист — вёрстка, копирайтер, съёмка, — подключаю сам, но отвечаю за результат один я.
Прототип приходит раньше дизайна: видно, как закупщик идёт от раздела до запроса и где он может застрять. Вам есть что показать директору и отделу продаж.
Прохожу путь закупщика на каждом устройстве: раздел, фильтр, карточка, запрос цены, ссылка из письма. Ошибка находится на проверке, а не у закупщика. Красивый список на мониторе дизайнера ещё не значит, что позицию найдут.
Тариф и срок согласованы в начале. Стоимость не растёт по ходу работы — меняется только если меняется состав задачи, и только по согласованию.
Права и файлы — ваши. Не держу клиента на «а исходники за отдельную плату» и не прячу рабочие слои.
Через год понадобился файл или новая версия — пишете напрямую, а не ищете подрядчика, который делал каталог. Проект лежит в архиве, доступ не потеряется.
Цены
Небольшой ассортимент: до 10 страниц.
4 000 BYN4–5 недель1
ОбсудитьЧаще всего берут
Каталог на пятьдесят страниц: дерево проверено до дизайна.
12 000 BYN8–10 недель2
Обсудить
Крупный каталог: мультиязычность и кабинет партнёра.
28 000 BYN12–16 недель
ОбсудитьСистема ART-OS
Модуль 01 · Стратегия
Позиционирование решает, чем ваш ассортимент отличается и с чего начинается каталог.
ПозиционированиеАргументыПортреты ЦАВозражения ›Модуль 02 · Айдентика
Цвета, шрифты и графика берутся из фирменного стиля, а не придумываются под каждый раздел.
ЛоготипПалитраТипографикаИконкиФото ›Модуль 03 · Инструменты продаж
Каталог, презентация и КП говорят одним голосом.
ПрезентацияШаблон КПКаталогТендерный пакет ›Модуль 08 · Дизайн-системы
Инструкция и набор блоков отвечают подрядчикам вместо вас.
ГайдлайнUI KitБрендбукБиблиотека компонентов ›Вопросы
Двенадцать вопросов, которые задают на первом созвоне. Отвечаю так же, как отвечу голосом.
От 4 000 BYN — тариф «Старт»: до 10 страниц, базовый дизайн, версия для телефона. Каталог до 50 страниц с прототипом структуры, дизайн-системой и интеграцией с CRM — 12 000 BYN. Крупный каталог с мультиязычностью и кабинетом партнёра — 28 000 BYN. Цена согласуется до начала работы и по ходу не меняется.
4–5 недель на «Старте», 8–10 на «Бизнесе», 12–16 на «Визионере». Срок считается от подтверждённого брифа и предоплаты. Этапы идут внахлёст: пока вы согласуете дерево, я уже собираю карточку.
Восемь файлов в семи форматах: макеты разделов и карточки в Figma, готовая вёрстка (HTML, CSS, JS), иконки в SVG, картинки в WEBP, PDF для согласования и инструкция для разработчиков в PDF. Права и исходники передаются вам.
Права и исходники передаются вам. Макеты не используются в чужих проектах, в портфолио работа попадает только с вашего согласия. Рабочие файлы не прячу и не продаю отдельно.
Да: макет собран из шаблона карточки, а инструкция объясняет, как внести позицию и не нарушить порядок. Параметры, фото и названия подставляются без перерисовки.
Задачу веду я: бриф, дерево, дизайн, макеты. Менеджера и исполнителя между нами нет. Когда нужен узкий специалист — вёрстка, копирайтер, съёмка, — подключаю проверенного, но отвечаю за результат сам.
В каталоге нет корзины и оплаты: человек выбирает позицию и оставляет запрос цены или звонит. Он дешевле и подходит производителю или дистрибьютору с индивидуальными условиями. Если нужен онлайн-заказ, это магазин — от 4 500 BYN. На брифе скажу прямо, что вам подходит.
Пишете мне напрямую, а не ищете, кто делал каталог. Проект хранится в архиве, файлы восстановим и через годы. Вопросы по форматам счёта не получают, новый раздел соберу из готовых карточек.
Число правок зависит от тарифа: на «Старте» — одна итерация, на «Бизнесе» — до трёх, на «Визионере» — до результата. Смысл правим на прототипе, пока он не встал: это дешевле, чем переделывать дизайн.
Нет: я проектирую карточку и структуру, показываю на нескольких позициях, как это выглядит. Наполнять будет ваш менеджер по таблице XLSX и гайду. Если нужна помощь с фото — подключаю фотографа.
PDF не ищется, не открывается нормально с телефона, и на позицию нельзя поставить ссылку. Сайт-каталог показывает именно ту позицию, которую ищет закупщик, и принимает запрос, пока вы спите.
Сроки в договоре с запасом, и больше двух проектов в работу я не беру, поэтому форс-мажор сдвигает срок, а не срывает. Все файлы лежат в архиве: если ситуация затянется, передам их, и каталог закончит любой дизайнер — для этого и нужна инструкция.
Бесплатно и ни к чему не обязывает
Пришлите ссылку на каталог или файл с ассортиментом — за 30 минут пройду путь закупщика и скажу честно: нужен новый каталог, хватит обновления или деньги лучше потратить на другое.
Пришлите ссылку или файл и скажите, что нужно: больше запросов, быстрый поиск или порядок в позициях. Этого хватит, чтобы разобрать каталог и сказать, что нужно на самом деле.
Артём Дементьев · разбираю сам, обычно в тот же день
ваша очередь
