воротнички.shop
Бриф и цели (0.5 дня)
Собрали ключевые задачи: быстрый заказ для B2B, минимум кликов до заявки, понятная витрина 1–2 продуктов, акцент на срок отгрузки и стабильность поставок.
Информационная архитектура (IA)
Собрали структуру в 1 экран + 3 коротких секции:
Hero (УТП + 2 CTA) → Преимущества в цифрах → Продуктовые форматы → Контакты/форма. Убрали всё лишнее: блог, сложные меню, слайдеры.
Контент-стратегия «только суть»
Тексты до 7–12 слов на блок: УТП, цифро-фактоиды («72 часа», «99,8% QC», «50 000/день»), карточки товаров с 3–4 характеристиками, 1 форма «Запросить прайс/сэмпл-кит».
Прототип (low-fi)
Сделали одностраничный вайрфрейм: одна вертикаль, липкая верхняя панель с CTA, повтор CTA внизу для «ловли» горячего трафика.
Дизайн-система «чистое поле»
Цвета: белый фон, графитовый текст, акцент — фирменный синий (CTA).
Шрифты: системные (Inter/Segoe) — ради скорости загрузки.
Компоненты: крупные кнопки, большие заголовки, плашки-фактоиды, одна форма.
Бриф и цели (0.5 дня)
Собрали ключевые задачи: быстрый заказ для B2B, минимум кликов до заявки, понятная витрина 1–2 продуктов, акцент на срок отгрузки и стабильность поставок.
Информационная архитектура (IA)
Собрали структуру в 1 экран + 3 коротких секции:
Hero (УТП + 2 CTA) → Преимущества в цифрах → Продуктовые форматы → Контакты/форма. Убрали всё лишнее: блог, сложные меню, слайдеры.
Контент-стратегия «только суть»
Тексты до 7–12 слов на блок: УТП, цифро-фактоиды («72 часа», «99,8% QC», «50 000/день»), карточки товаров с 3–4 характеристиками, 1 форма «Запросить прайс/сэмпл-кит».
Прототип (low-fi)
Сделали одностраничный вайрфрейм: одна вертикаль, липкая верхняя панель с CTA, повтор CTA внизу для «ловли» горячего трафика.
Дизайн-система «чистое поле»
Цвета: белый фон, графитовый текст, акцент — фирменный синий (CTA).
Шрифты: системные (Inter/Segoe) — ради скорости загрузки.
Компоненты: крупные кнопки, большие заголовки, плашки-фактоиды, одна форма.
UX-решения для скорости заявки
— Две равнозначные цели: «Запросить прайс» и «Получить сэмпл-кит».
— Автоскролл к форме с якоря.
— Маски ввода и минимум полей (Имя/Компания/Телефон/Город/Объём).
— Кнопка связи в мессенджере (WhatsApp/Telegram) с предзаполненным текстом.
Реализация на Tilda
Базовые блоки Tilda вместо тяжёлых кастомов, Zero Block — только для hero.
Изображения WebP, lazy-load, без сторонних виджетов.
Формы: интеграция в почту + Telegram/CRM.
Производственный акцент (B2B-тон)
Факторы доверия в одном экране: объёмы производства, сроки отгрузки, контроль качества, география поставок. Никаких «водных» обещаний — только проверяемые формулировки.
SEO-минимум
Title/H1 совпадают по ключу, короткий meta description, ЧПУ-якоря, alt у изображений.
Оптимизация скорости
Лёгкая страница < 300 КБ, без каруселей, один шрифт, кэш, критический CSS, CLS<0.1, LCP <2.0 c на 4G.
Тестирование
Мобайл-приоритет (375–430 px), проверка форм/уведомлений, доступность (контраст, фокус-стейты, таб-навигация), корректность на iOS/Android/Windows.
Запуск и аналитика
Подключили Метрику/GA4, цели: клик по CTA, отправка формы, переход в мессенджер. Отдельные UTM для контекста/соцсетей.
Гайд клиенту (1 стр.)
Как править тексты/цены на Tilda, как выгружать лиды, как менять контакты и баннер.
Что в итоге:
— Две равнозначные цели: «Запросить прайс» и «Получить сэмпл-кит».
— Автоскролл к форме с якоря.
— Маски ввода и минимум полей (Имя/Компания/Телефон/Город/Объём).
— Кнопка связи в мессенджере (WhatsApp/Telegram) с предзаполненным текстом.
Реализация на Tilda
Базовые блоки Tilda вместо тяжёлых кастомов, Zero Block — только для hero.
Изображения WebP, lazy-load, без сторонних виджетов.
Формы: интеграция в почту + Telegram/CRM.
Производственный акцент (B2B-тон)
Факторы доверия в одном экране: объёмы производства, сроки отгрузки, контроль качества, география поставок. Никаких «водных» обещаний — только проверяемые формулировки.
SEO-минимум
Title/H1 совпадают по ключу, короткий meta description, ЧПУ-якоря, alt у изображений.
Оптимизация скорости
Лёгкая страница < 300 КБ, без каруселей, один шрифт, кэш, критический CSS, CLS<0.1, LCP <2.0 c на 4G.
Тестирование
Мобайл-приоритет (375–430 px), проверка форм/уведомлений, доступность (контраст, фокус-стейты, таб-навигация), корректность на iOS/Android/Windows.
Запуск и аналитика
Подключили Метрику/GA4, цели: клик по CTA, отправка формы, переход в мессенджер. Отдельные UTM для контекста/соцсетей.
Гайд клиенту (1 стр.)
Как править тексты/цены на Tilda, как выгружать лиды, как менять контакты и баннер.
Что в итоге:
- Одностраничный сайт без «нагрузки», фокус на конверсии в заявку.
- Путь до заявки — 1–2 клика, ключевые цифры видны сразу.
- Быстрая загрузка и корректная работа на мобильных — основное требование B2B-клиентов «в полях» выполнено.
