Задача
«ВиМа» больше 15 лет поставляет медицинские расходные материалы и дезинфицирующие средства по Республике Бурятия. Среди клиентов медицинские организации, государственные и коммерческие учреждения, образовательные и социальные организации, сфера красоты и здоровья.
До сайта «ВиМа» отправляла ассортимент клиентам в виде прайс-листа в Excel. Выбрать в таком документе нужную позицию из 181 товара непросто, поэтому почти вся нагрузка ложилась на менеджеров: они консультировали и объясняли.
Сайт должен был это изменить и сделать так, чтобы клиент мог разобраться в каталоге сам. Для этого нужно было:
До сайта «ВиМа» отправляла ассортимент клиентам в виде прайс-листа в Excel. Выбрать в таком документе нужную позицию из 181 товара непросто, поэтому почти вся нагрузка ложилась на менеджеров: они консультировали и объясняли.
Сайт должен был это изменить и сделать так, чтобы клиент мог разобраться в каталоге сам. Для этого нужно было:
- наглядно показать ассортимент, с изображениями и понятными категориями;
- помочь быстро найти нужную продукцию;
- объяснить, чем компания полезна не только как поставщик товара;
- показать условия доставки и работы с документами;
- дать возможность оформить заказ или обратиться за подбором;
- сделать сайт удобным для разных клиентов, от медицинских организаций до образовательных учреждений.
Результат
- Изучила особенности бизнеса, аудиторию и задачи, которые должен решать сайт.
- Продумала пользовательские сценарии для поиска товаров, подбора продукции и оформления заказа, включая корзину-заявку.
- Спроектировала структуру сайта, каталог и логику переходов между разделами.
- Заложила SEO-основу и подготовила сайт к GEO: проработала заголовки, описания и структуру страниц, добавила файлы llms. txt и разметку Schema.org.
- Подготовила тексты для основных страниц.
- Разработала дизайн сайта с учётом специфики продукции «ВиМы».
- Создала в Gemini изображения для разделов каталога, обложки главной страницы и доставки, а также для страницы 404.
- Собрала сайт на стандартных блоках Tilda и доработала их кодом под общий стиль.
- Настроила каталог и добавила 181 товар с фото, описанием, характеристиками и стоимостью.
Запуск сайта: 28.08.2026 г.
Почему сайту «ВиМы» не нужен классический интернет-магазин
Почему сайту «ВиМы» не нужен классический интернет-магазинУ «ВиМы» заказ это не про то, чтобы выбрать несколько позиций и оплатить их картой.
Компания работает с профессиональной продукцией, в том числе с маркированными товарами. У отгрузки такой продукции свои правила, в том числе работа с системой «Честный знак».
Кроме того, клиентам важны не только сами товары, но и:
Компания работает с профессиональной продукцией, в том числе с маркированными товарами. У отгрузки такой продукции свои правила, в том числе работа с системой «Честный знак».
Кроме того, клиентам важны не только сами товары, но и:
- наличие позиции или возможность привезти её под заказ;
- подбор продукции под конкретную задачу;
- коммерческое предложение, договор, счёт, закрывающие документы и электронный документооборот;
- условия и сроки доставки.
Поэтому я не стала превращать сайт в интернет-магазин там, где процесс устроен иначе. Вместо этого спроектировала его как инструмент выбора продукции и оформления заказа через компанию.
Заказчик сразу понимал, что продажа товаров на сайте ему не нужна. Корзину он изначально тоже не планировал, но я предложила добавить её в другом виде: корзина без оплаты, как способ собрать заявку. Клиент отмечает нужные позиции, отправляет список менеджеру, и дальше всё идёт по привычному сценарию. Выбирать и заказывать так гораздо удобнее, чем сверять позиции с прайсом в Excel.
А если клиент не знает, что именно ему нужно, сайт сразу предлагает другой путь: описать задачу и получить помощь с подбором
Заказчик сразу понимал, что продажа товаров на сайте ему не нужна. Корзину он изначально тоже не планировал, но я предложила добавить её в другом виде: корзина без оплаты, как способ собрать заявку. Клиент отмечает нужные позиции, отправляет список менеджеру, и дальше всё идёт по привычному сценарию. Выбирать и заказывать так гораздо удобнее, чем сверять позиции с прайсом в Excel.
А если клиент не знает, что именно ему нужно, сайт сразу предлагает другой путь: описать задачу и получить помощь с подбором
Несколько сценариев вместо одного
Начинать с дизайна разработку сайта не имеет смысла. Сначала нужно разобраться, как устроен бизнес: с кем работает компания, как формируется заказ, какие вопросы возникают у клиентов до заказа и после него. На этой основе я выстроила сайт не под один путь пользователя, а под несколько
- Знаю, что мне нужноКлиент собирает нужные позиции в корзину и отправляет заявку. Менеджер связывается с ним, уточняет детали и при необходимости подсказывает, что лучше взять. Затем готовит коммерческое предложение, договор и счёт, формирует заказ и отправляет его
- Знаю задачу, но не знаю, что выбратьОн пишет в мессенджере или звонит, описывает ситуацию, и специалист «ВиМы» помогает с подбором
- Не нашёл нужный товарЕсли нужной позиции нет в наличии, её можно запросить отдельно или подобрать аналог при помощи менеджера. Для B2B-клиента это гораздо полезнее, чем формальная кнопка «нет в наличии»: не нашли товар на сайте ещё не значит, что на этом всё закончилось
- Уже работаю с поставщикомНа сайте можно быстро найти информацию об оплате, доставке, договорах, ЭДО и закрывающих документах. Так сайт отвечает не только на вопрос «что вы продаёте?», но и на более важный для B2B-клиента: «как с вами работать?»
Каталог вместо прайс-листа
Ассортимент «ВиМы» большой и разнородный: от перчаток и шприцев до антисептиков и дозаторов. Клиенты привыкли к делению на два направления: медицинские расходные материалы и дезинфицирующие средства, поэтому я сохранила его как основу каталога.
Моя задача была в том, чтобы превратить длинный список в каталог, в котором легко ориентироваться. Я добавила 181 позицию: у каждой есть фото, описание, характеристики и стоимость. Настроила каталог Tilda с фильтрацией, поэтому клиент находит нужное прямо на странице каталога, а выбранные позиции может собрать в корзину-заявку.
Оба направления вынесены в навигацию, поэтому посетителю не нужно сначала разбираться в устройстве компании: он сразу попадает в нужную категорию
Моя задача была в том, чтобы превратить длинный список в каталог, в котором легко ориентироваться. Я добавила 181 позицию: у каждой есть фото, описание, характеристики и стоимость. Настроила каталог Tilda с фильтрацией, поэтому клиент находит нужное прямо на странице каталога, а выбранные позиции может собрать в корзину-заявку.
Оба направления вынесены в навигацию, поэтому посетителю не нужно сначала разбираться в устройстве компании: он сразу попадает в нужную категорию
Дизайн: как совместить видение клиента и современный интерфейс
У клиента было своё видение сайта и референс, на который он хотел ориентироваться. Я не спорила на словах, а показывала: сначала делала так, как просил заказчик, потом предлагала свой вариант, и мы сравнивали их рядом. Так можно наглядно продемонстрировать, почему одно решение работает лучше другого.
Например, клиент хотел сделать все заголовки тёмно-зелёными. Но фирменный зелёный хорош как акцент, а если им окрашены все заголовки, он перестаёт выделять главное, и кнопки теряются среди остального цвета. Поэтому зелёный я оставила для кнопок и ключевых элементов. Со шрифтом то же самое: Times New Roman создавали для печати, а не для экрана, и в интерфейсе он выглядит как документ, а не как сайт. Для основного текста выбрали современный шрифт, а классическую антикву, которую хотел клиент, сохранили для заголовков.
В итоге интерфейс получился чистым и достаточно строгим, без попытки превратить сайт поставщика медицинской продукции в «стерильный» медицинский шаблон. Главное здесь: навигация, читаемость каталога и понятная иерархия информации
Например, клиент хотел сделать все заголовки тёмно-зелёными. Но фирменный зелёный хорош как акцент, а если им окрашены все заголовки, он перестаёт выделять главное, и кнопки теряются среди остального цвета. Поэтому зелёный я оставила для кнопок и ключевых элементов. Со шрифтом то же самое: Times New Roman создавали для печати, а не для экрана, и в интерфейсе он выглядит как документ, а не как сайт. Для основного текста выбрали современный шрифт, а классическую антикву, которую хотел клиент, сохранили для заголовков.
В итоге интерфейс получился чистым и достаточно строгим, без попытки превратить сайт поставщика медицинской продукции в «стерильный» медицинский шаблон. Главное здесь: навигация, читаемость каталога и понятная иерархия информации
Шрифт и цвета
Для крупных заголовков использован Forum: классическая антиква с выразительным характером, которая делает стиль сайта узнаваемым. Для основного текста и небольших заголовков выбран Inter Display: он остаётся читаемым и аккуратным даже при мелком размере.
Основа палитры: зелёный #186A34. Он сохраняет фирменный цвет «ВиМы», но стал глубже и строже, чем в прежнем логотипе. Он используется только как акцент, в кнопках и ключевых элементах интерфейса. Заголовки выполнены в спокойном сером #555 555, чтобы цвет не перетягивал внимание. В сочетании со светлыми нейтральными оттенками это даёт чистый современный стиль
Основа палитры: зелёный #186A34. Он сохраняет фирменный цвет «ВиМы», но стал глубже и строже, чем в прежнем логотипе. Он используется только как акцент, в кнопках и ключевых элементах интерфейса. Заголовки выполнены в спокойном сером #555 555, чтобы цвет не перетягивал внимание. В сочетании со светлыми нейтральными оттенками это даёт чистый современный стиль
#186A34
#56C568
#555555
#F7F7F7
Нейросеть вместо фотосессии: обложки и страница 404
Фотографии товаров предоставил заказчик. Фотографий композиций из нескольких позиций у него не было, а отдельная съёмка в планы проекта не входила. Поэтому для обложек я собрала такие композиции сама: взяла реальные фото товаров и составила из них сцены в Gemini.
Страницу ошибки 404 я тоже сделала в нейросети и не стала ограничиваться сухим «страница не найдена». Вместо этого получилась небольшая иллюстрация с фирменным фургоном «ВиМы» (логотип я нанесла прямо в нейросети) и подпись в тоне компании: страница потерялась, но команда всегда находит правильный маршрут
Страницу ошибки 404 я тоже сделала в нейросети и не стала ограничиваться сухим «страница не найдена». Вместо этого получилась небольшая иллюстрация с фирменным фургоном «ВиМы» (логотип я нанесла прямо в нейросети) и подпись в тоне компании: страница потерялась, но команда всегда находит правильный маршрут
Tilda без ощущения шаблона
Сайт собран на стандартных блоках Tilda, но выглядит не как шаблон: каждый блок я доработала кодом и подогнала под общий стиль проекта. Такой подход даёт сразу несколько преимуществ. Стандартные блоки загружаются быстрее, чем блоки, собранные с нуля в Zero Block, и сайт остаётся удобным для дальнейшего редактирования. А код помогает отойти от типового вида.
Отдельно занялась компоновкой страниц. Блоки растянуты почти на всю ширину экрана, а по краям оставлены аккуратные отступы: 40px на компьютере и 20px на телефоне. Страницы стали современнее и «воздушнее», при этом информация читается так же легко
Отдельно занялась компоновкой страниц. Блоки растянуты почти на всю ширину экрана, а по краям оставлены аккуратные отступы: 40px на компьютере и 20px на телефоне. Страницы стали современнее и «воздушнее», при этом информация читается так же легко
SEO и GEO: как сайт находят поисковики и нейросети
Клиентов сейчас ищут не только через поиск, но и через нейросети. Поэтому я сделала не только базовое SEO, но и подготовила сайт к GEO, то есть к тому, чтобы его могли находить и понимать нейросети
- SEO
- Выстроила логику категорий под реальный ассортимент и с учетом того, как клиенту удобнее искать продукцию, а не ради набора ключевых фраз.
- Проработала структуру заголовков страниц.
- Подготовила SEO-заголовки и описания для каталога и основных разделов.
- Проработала внутреннюю структуру и навигацию между разделами сайта.
- Подготовила подписи и alt-тексты к изображениям.
- GEO
- Подготовила файлы llms.txt и llms-full.txt: краткое и полное описание компании, сайта и его содержания в формате, удобном для обработки нейросетями.
- Проработала разметку Schema.org для WebSite и Organization: структурированное описание сайта и компании, которое помогает поисковым системам и нейросетям правильно понять, что это за сайт и какая компания за ним стоит.
Результат работы: проект завершён
У «ВиМы» появился сайт, который последовательно отвечает на основные вопросы клиента: что поставляет компания, кому, как подобрать продукцию, оформить заказ и получить поставку.
Вместо прайс-листа в Excel у клиентов теперь есть полноценный каталог на 181 товар с фотографиями, описаниями, характеристиками, стоимостью, фильтрацией и корзиной-заявкой.
Сайт не изображает интернет-магазин там, где процесс устроен иначе. Для меня главный результат этого проекта — не количество страниц и не сам интерфейс, а то, что структура сайта повторяет логику бизнеса и помогает клиенту пройти путь от поиска продукции до заказа.
Заказчик остался доволен результатом и прислал благодарственное письмо, а клиенты компании, познакомившиеся с сайтом, отозвались о нём положительно
Благодарственное письмо
Вместо прайс-листа в Excel у клиентов теперь есть полноценный каталог на 181 товар с фотографиями, описаниями, характеристиками, стоимостью, фильтрацией и корзиной-заявкой.
Сайт не изображает интернет-магазин там, где процесс устроен иначе. Для меня главный результат этого проекта — не количество страниц и не сам интерфейс, а то, что структура сайта повторяет логику бизнеса и помогает клиенту пройти путь от поиска продукции до заказа.
Заказчик остался доволен результатом и прислал благодарственное письмо, а клиенты компании, познакомившиеся с сайтом, отозвались о нём положительно
Благодарственное письмо
