Tkonditer

Цели

Заказчику требовалось решить три ключевые задачи. Во-первых, привести визуальный стиль в соответствие с премиальным позиционированием — старый сайт не передавал «вкус» и качество продукции, нужен был современный и минималистичный дизайн, где главными героями становятся фотографии товаров. Во-вторых, создать удобный инструмент для B2B-клиентов (сетей и дистрибьюторов) — упростить поиск продукции через гибкую систему фильтров по брендам, типу теста, начинке и фасовке, а также обеспечить быстрый доступ к актуальным каталогам. В-третьих, разработать масштабируемую структуру под огромный ассортимент (500+ позиций), позволяющую легко добавлять новые товары, категории и акции без помощи разработчиков. Дополнительной, но важной задачей стало отражение географии поставок (Россия, СНГ, Китай, Грузия, Таджикистан), подтверждающее статус крупного игрока.

Решение

Когда мы получили запрос, то поняли: перед нами не просто «сделать сайт», а провести ребрендинг в цифре для компании, где каждый продукт — повод для гордости. Погружение началось с анализа ассортимента и аудитории. Главная сложность была в том, что у клиента два больших направления (кондитерка и заморозка), и внутри каждого — своя логика фильтрации. Если для печенья критичны бренд и тип упаковки, то для круассана — вид теста и начинки. Наша задача была не просто «поставить галочки», а спроектировать логику, которая будет интуитивна для менеджера по закупкам «Пятёрочки» или «Ашана».

Проектирование заняло почти месяц активной переписки и несколько созвонов. Мы настояли на детальном ТЗ, потому что понимали: любой пробел в логике фильтров или карточек товаров потом выльется в часы правок. Вместе с клиентом мы буквально «перебрали» каждую категорию. Самым горячим спором стал блок «Наши бренды»: заказчик хотел просто логотипы, а мы предложили динамические карточки, где при клике на бренд меняется не только картинка, но и описание, и список продукции. Это потребовало дополнительной проработки логики, но в итоге именно это решение сделало блок живым и информативным.

Дизайн начинался с мудбордов. Мы предложили клиенту путь от сложного к простому: первый прототип (с черным фоном и нестандартной композицией) был отвергнут — клиент честно сказал: «Мы не увидели дизайна, для нас дизайн — это картинки и цвет». Это был ценный момент. Мы не стали спорить, а перегруппировались. Второй прототип, с пастельными тонами, «воздухом» и мягкими округлыми блоками, залетел с полпинка. Мы использовали шрифт Onest для текстов и Hagin Caps для акцентов — это придало сайту утончённость, но сохранило читаемость.

Самым технически сложным этапом стала разработка каталога и фильтров. Ассортимент выгружался частями, фото были разного качества, формата и разрешения. Мы пошли дальше простой вёрстки: организовали работу контент-менеджера, который вручную приводил к единому знаменателю сотни карточек товаров. Для заморозки мы настроили фильтры по виду теста и начинки, для кондитерки — по брендам и типу продукции (сахарное, затяжное, без сахара, с начинками). Отдельным вызовом стала логика переключения фасовок (400гр / 3кг / 5кг) внутри одной карточки товара. Клиент хотел, чтобы это были по сути разные товары, но связанные в интерфейсе. Мы нашли решение, которое устроило всех: переключение граммовки меняет описание, а фото остаётся общим, если продукт идентичен.

Анимации добавляли аккуратно, чтобы не перегружать. Сделали плавное увеличение карточек при наведении, динамическую смену логотипов брендов — ровно столько, чтобы сайт «дышал», но не отвлекал от главного — еды. В блоке «Где мы представлены» мы долго подгоняли логотипы сетей под единый размер и фон, а некоторые (как «Чижик», «Светофор», «Ашан») добавили уже по ходу проекта, когда клиент получил официальные разрешения.