docs: add site design spec and implementation plan
This commit is contained in:
@@ -0,0 +1,347 @@
|
||||
# Спецификация: Экспертный портал БИТ.WMS
|
||||
|
||||
**Дата:** 2026-04-03
|
||||
**Статус:** Утверждено
|
||||
|
||||
---
|
||||
|
||||
## 1. Обзор проекта
|
||||
|
||||
### Цель
|
||||
Разработка экспертного контентного портала по складской логистике для компании "Первый Бит" с фокусом на лидогенерацию: привлечение лидов, звонков и подписок по направлению продажи и внедрения WMS-решений.
|
||||
|
||||
### Позиционирование
|
||||
Информационный экспертный портал по решению задач склада. Подход pull-продаж: экспертность через статьи, вебинары, курсы, кейсы и мероприятия. Не push, а привлечение через ценный контент.
|
||||
|
||||
### Целевая аудитория
|
||||
- Руководители складов
|
||||
- Руководители и сотрудники IT-отделов
|
||||
- Директора предприятий
|
||||
- Предприниматели (мелкий, средний, крупный бизнес)
|
||||
- Бухгалтеры и финансовые менеджеры
|
||||
|
||||
### Ценностное предложение
|
||||
- Экспертность в складской логистике
|
||||
- Комплексность (единое окно)
|
||||
- Прозрачность опыта и компетенций
|
||||
|
||||
### KPI сайта
|
||||
- Количество подписок/регистраций/просмотров
|
||||
- Количество лидов через web-формы
|
||||
- Количество звонков с сайта (CallTouch)
|
||||
- Обращения через callback-виджет
|
||||
- Диалоги в онлайн-консультанте (JivoSite)
|
||||
- Конверсия трафика в лиды
|
||||
- Стоимость лида
|
||||
|
||||
---
|
||||
|
||||
## 2. Технологический стек
|
||||
|
||||
| Компонент | Технология |
|
||||
|-----------|-----------|
|
||||
| CMS | WordPress 6.x |
|
||||
| Тема | GeneratePress Premium |
|
||||
| Блоки | GenerateBlocks Pro |
|
||||
| Кастомные поля | ACF Pro (Advanced Custom Fields) |
|
||||
| Кастомные типы записей | CPT UI или код в functions.php |
|
||||
| Формы | Contact Form 7 или WPForms |
|
||||
| SEO | Yoast SEO или RankMath |
|
||||
| Рассылка | Unisender |
|
||||
| Онлайн-консультант | JivoSite |
|
||||
| Callback | Callback-hunter или аналог |
|
||||
| Попапы | Popup Maker |
|
||||
| Аналитика | Яндекс.Метрика, Google Analytics 4, CallTouch |
|
||||
|
||||
---
|
||||
|
||||
## 3. Брендбук и визуальный стиль
|
||||
|
||||
Строго по брендбуку "Первый Бит" (книга по визуальной идентификации бренда, 14.12.2018).
|
||||
|
||||
### Цветовая палитра
|
||||
| Цвет | Значение | Код |
|
||||
|------|----------|-----|
|
||||
| Белый | Основной фон, много воздуха | #FFFFFF |
|
||||
| Розовый/маджента | Основной корпоративный цвет | Pantone 213, RGB 229 0 113, #E50071 |
|
||||
| Чёрный | Заголовки и текст | #000000 |
|
||||
| Светло-серый | Дополнительный цвет | RGB 235 235 235, #EBEBEB |
|
||||
|
||||
### Типографика
|
||||
- **Заголовки:** Suisse Int'l Bold
|
||||
- **Текст:** Suisse Int'l Book
|
||||
- **Запасной шрифт:** Arial (Bold / Regular)
|
||||
|
||||
### Принципы стиля
|
||||
- Минимализм, много белого пространства
|
||||
- Запрещены: градиенты, диагонали, тени, стоковые фото, альтернативные шрифты
|
||||
- Вёрстка левым флагом, соблюдение осей
|
||||
- Логотип всегда в левой части
|
||||
|
||||
---
|
||||
|
||||
## 4. Структура сайта
|
||||
|
||||
### Карта страниц
|
||||
```
|
||||
Главная
|
||||
├── БИТ.WMS (продуктовая страница)
|
||||
│ ├── Функции
|
||||
│ ├── Заказать демо (форма)
|
||||
│ └── Анкета для заполнения
|
||||
├── Кейсы (архив + детальная)
|
||||
├── Статьи (архив + детальная)
|
||||
├── Вебинары (архив + детальная)
|
||||
├── Курсы (архив + детальная)
|
||||
├── Мероприятия (архив + детальная)
|
||||
├── Материалы (архив + скачивание)
|
||||
├── Новости (архив + детальная)
|
||||
└── Контакты
|
||||
```
|
||||
|
||||
### Кастомные типы записей (CPT)
|
||||
|
||||
| CPT | Slug | Кастомные поля (ACF) |
|
||||
|-----|------|---------------------|
|
||||
| Кейсы | `case` | Клиент, отрасль, задача, решение, результат, галерея |
|
||||
| Вебинары | `webinar` | Дата, спикер, запись видео, статус (анонс/прошёл) |
|
||||
| Курсы | `course` | Программа, длительность, формат, стоимость |
|
||||
| Мероприятия | `event` | Дата, место, формат, регистрация |
|
||||
| Материалы | `material` | Файл, тип (PDF/видео/чек-лист), gated (да/нет) |
|
||||
|
||||
Статьи и Новости используют стандартный тип `post`, разделяются рубриками (categories).
|
||||
|
||||
---
|
||||
|
||||
## 5. Лейаут и навигация
|
||||
|
||||
### Фиксированная боковая панель (левая)
|
||||
- Ширина: ~70px свёрнутая (иконки), ~250px при hover/раскрытии
|
||||
- Фон: белый, правая граница — тонкая серая линия
|
||||
- Сверху: логотип "первыйБит" (сокращённый вариант)
|
||||
- Пункты меню (иконка + подпись при hover):
|
||||
- БИТ.WMS (иконка: коробка/склад)
|
||||
- Кейсы (иконка: папка)
|
||||
- Статьи (иконка: документ)
|
||||
- Вебинары (иконка: камера)
|
||||
- Курсы (иконка: шапочка)
|
||||
- Мероприятия (иконка: календарь)
|
||||
- Материалы (иконка: скачивание)
|
||||
- Новости (иконка: колокольчик)
|
||||
- Контакты (иконка: телефон)
|
||||
- Снизу: иконки соцсетей (Telegram, VK)
|
||||
- Мобильные: панель скрыта, гамбургер-меню сверху
|
||||
|
||||
### Верхняя полоса (тонкий хедер)
|
||||
- Левая часть: логотип + слоган "Экспертный портал по складской логистике"
|
||||
- Правая часть: телефон + кнопка "Заказать демо" (розовая) + поиск (иконка лупы)
|
||||
|
||||
### Основная область контента
|
||||
- Отступ слева: ~70px (под боковую панель)
|
||||
- Максимальная ширина контента: ~1200px
|
||||
- Много белого пространства
|
||||
|
||||
### Футер
|
||||
- Логотип + контакты Екатеринбург ПЦ
|
||||
- Колонки: разделы сайта, продукты, контакты
|
||||
- Юридические ссылки: политика конфиденциальности, согласие на обработку данных
|
||||
- Копирайт "Первый Бит"
|
||||
|
||||
---
|
||||
|
||||
## 6. Главная страница
|
||||
|
||||
### Герой (первый экран)
|
||||
- Белый фон, крупная типографика Suisse Int'l Bold
|
||||
- H1: "Всё о складской логистике и автоматизации склада" (или аналогичный экспертный посыл)
|
||||
- Подзаголовок: "Экспертный портал от Первого Бита — кейсы, вебинары, курсы и материалы для руководителей складов"
|
||||
- CTA основная (розовая): "Заказать демо БИТ.WMS"
|
||||
- CTA вторичная (чёрная обводка): "Смотреть кейсы"
|
||||
- Краткие цифры-KPI: количество проектов, лет опыта, клиентов
|
||||
|
||||
### Блок фильтрации по рубрикам
|
||||
- Горизонтальная полоса с тегами-кнопками: "Все", "Статьи", "Кейсы", "Вебинары", "Курсы", "Мероприятия", "Материалы", "Новости"
|
||||
- AJAX-фильтрация без перезагрузки страницы
|
||||
|
||||
### Лента контента
|
||||
- Сетка карточек 2-3 колонки
|
||||
- Карточка: изображение, бейдж типа, заголовок, краткое описание, дата, просмотры
|
||||
- Кнопка "Показать ещё"
|
||||
|
||||
### Промо-блок БИТ.WMS
|
||||
- Заголовок: "БИТ.WMS — комплексное решение для вашего склада"
|
||||
- 3-4 преимущества иконками
|
||||
- CTA: "Подробнее о продукте" / "Заказать демо"
|
||||
|
||||
### Блок подписки на рассылку
|
||||
- Заголовок + поле email + кнопка "Подписаться"
|
||||
- Текст: "Получайте экспертные материалы по складской логистике на почту"
|
||||
|
||||
### Блок "Наши клиенты"
|
||||
- Логотипы компаний-клиентов (горизонтальная строка)
|
||||
- Опционально: цитата из кейса
|
||||
|
||||
---
|
||||
|
||||
## 7. Страница продукта БИТ.WMS
|
||||
|
||||
### Герой
|
||||
- H1: "БИТ.WMS"
|
||||
- Подзаголовок: "Комплексное решение для управления складом"
|
||||
- Краткое описание (2-3 предложения)
|
||||
- CTA: "Заказать демо" (розовая) + "Скачать презентацию" (gated — за email)
|
||||
|
||||
### Блок функций
|
||||
- Сетка 2-3 колонки, карточки: иконка + название + описание + результат применения
|
||||
- Функции: приёмка, размещение, хранение, отбор, отгрузка, инвентаризация, аналитика
|
||||
|
||||
### Блок "Почему Первый Бит"
|
||||
- 3-4 крупных блока с цифрами/фактами:
|
||||
- "Быстро" — профессионалы, знаем бизнес-задачи склада
|
||||
- "Просто" — знаем все о WMS, собственный продукт
|
||||
- "Качественно" — результат и многолетний опыт
|
||||
- "Открыто" — прозрачная ценовая политика
|
||||
|
||||
### Блок кейсов
|
||||
- 2-3 карточки релевантных кейсов
|
||||
- Ссылка "Все кейсы"
|
||||
|
||||
### Блок "Другие решения"
|
||||
- Карточки: 1C:WMS, Клеверенс, 1C:TMS
|
||||
- Подпись: "Возможно, вам будет интересно"
|
||||
|
||||
### Форма "Заказать демо"
|
||||
- Поля: Имя, Компания, Телефон, Email, Комментарий
|
||||
- Чекбокс согласия на обработку данных
|
||||
- Кнопка "Отправить заявку" (розовая)
|
||||
|
||||
### Анкета для детального запроса
|
||||
- Расширенная форма: отрасль, размер склада, количество SKU, текущая система, задачи
|
||||
- Отдельная подстраница БИТ.WMS (доступна по ссылке и из формы демо)
|
||||
|
||||
---
|
||||
|
||||
## 8. Архивные и детальные страницы
|
||||
|
||||
### Шаблон архива (единый для всех CPT)
|
||||
- H1 раздела
|
||||
- Фильтры: по рубрикам/тегам, по дате (горизонтальная полоса)
|
||||
- Сетка карточек 2-3 колонки
|
||||
- Пагинация или "Показать ещё"
|
||||
|
||||
### Карточка контента (единый стиль)
|
||||
- Превью-изображение
|
||||
- Бейдж типа (чёрный текст на сером фоне)
|
||||
- Заголовок (Suisse Int'l Bold)
|
||||
- Краткий текст (2 строки)
|
||||
- Мета: дата, просмотры, автор
|
||||
|
||||
### Детальная страница статьи/новости
|
||||
- H1, дата, автор
|
||||
- Основной текст
|
||||
- Боковая колонка справа: "Связанные материалы" + форма подписки
|
||||
- Внизу: "Читайте также" (3 карточки)
|
||||
- Кнопки шеринга: VK, Telegram, копировать ссылку
|
||||
|
||||
### Детальная страница кейса
|
||||
- Структура: Клиент, Отрасль, Задача, Решение, Результат
|
||||
- Галерея скриншотов/фото
|
||||
- Цитата клиента (если есть)
|
||||
- CTA: "Хотите такой же результат? Закажите консультацию"
|
||||
|
||||
### Детальная страница вебинара
|
||||
- Анонс: дата, спикер, программа, кнопка "Зарегистрироваться"
|
||||
- Прошёл: запись видео (embed), презентация для скачивания (gated)
|
||||
|
||||
### Детальная страница курса
|
||||
- Описание, программа, длительность, формат, стоимость
|
||||
- CTA: "Записаться на курс"
|
||||
|
||||
### Детальная страница мероприятия
|
||||
- Дата, место, формат, программа
|
||||
- CTA: "Зарегистрироваться"
|
||||
|
||||
### Страница материалов
|
||||
- Карточки с иконкой типа файла (PDF, видео, Excel)
|
||||
- Gated-контент: модальное окно с формой (имя, email) перед скачиванием
|
||||
|
||||
---
|
||||
|
||||
## 9. Лидогенерация и интеграции
|
||||
|
||||
### Формы обратной связи
|
||||
| Форма | Расположение | Поля |
|
||||
|-------|-------------|------|
|
||||
| Заказать демо | Страница БИТ.WMS, модальное окно из хедера | Имя, Компания, Телефон, Email, Комментарий |
|
||||
| Получить консультацию | Контакты, внизу кейсов | Имя, Телефон, Email, Вопрос |
|
||||
| Зарегистрироваться | Вебинары, курсы, мероприятия | Имя, Email, Телефон |
|
||||
| Скачать материал | Модальное окно (gated) | Имя, Email |
|
||||
| Обратная связь | Контакты | Имя, Email, Сообщение |
|
||||
|
||||
Все формы: email-уведомление + сохранение в CRM (при наличии интеграции).
|
||||
|
||||
### Подписка на рассылку (Unisender)
|
||||
- Точки захвата: блок на главной, сайдбар детальных страниц, футер
|
||||
- Поля: email (обязательно), имя (опционально)
|
||||
|
||||
### JivoSite
|
||||
- Виджет в правом нижнем углу
|
||||
- Автоприглашение через 30 сек на страницах: главная, БИТ.WMS, кейсы
|
||||
|
||||
### Callback-виджет
|
||||
- Кнопка "Перезвоните мне" — плавающая или встроенная в хедер
|
||||
|
||||
### Попапы
|
||||
| Триггер | Содержание | Страницы |
|
||||
|---------|-----------|----------|
|
||||
| Exit-intent | "Подпишитесь на рассылку" / "Скачайте чек-лист" | Все |
|
||||
| Таймер 60 сек | Предложение демо | Страница БИТ.WMS |
|
||||
|
||||
### Аналитика
|
||||
- Яндекс.Метрика — цели на все формы, колтрекинг
|
||||
- Google Analytics 4
|
||||
- CallTouch — отслеживание звонков
|
||||
- UTM-разметка для рекламных каналов
|
||||
|
||||
### SEO
|
||||
- Yoast SEO или RankMath
|
||||
- XML-карта сайта
|
||||
- Schema.org разметка (Organization, Article, Event)
|
||||
- Open Graph мета-теги для соцсетей
|
||||
|
||||
---
|
||||
|
||||
## 10. Адаптивность (мобильные устройства)
|
||||
|
||||
- Боковая панель скрывается, заменяется гамбургер-меню сверху
|
||||
- Сетки карточек переходят в 1 колонку
|
||||
- Герой адаптируется: текст и кнопки стекаются вертикально
|
||||
- Формы занимают полную ширину
|
||||
- Виджеты JivoSite и callback остаются видимыми
|
||||
- Попапы адаптируются под мобильный экран
|
||||
|
||||
---
|
||||
|
||||
## 11. Референсы
|
||||
|
||||
- **Структура:** [place.lemma.ru](https://place.lemma.ru/) — боковая навигация, карточная сетка, контентный портал для отраслевых специалистов
|
||||
- **Контент:** [blueyonder.com](https://blueyonder.com/) — enterprise B2B стиль, крупная типографика, storytelling через секции, KPI-цифры, блоки доверия
|
||||
|
||||
---
|
||||
|
||||
## 12. Продукты
|
||||
|
||||
| Продукт | Роль на сайте |
|
||||
|---------|--------------|
|
||||
| БИТ.WMS | Основной продукт — полноценная продуктовая страница |
|
||||
| 1C:WMS Логистика. Управление складом | Вторичный — краткая карточка в "Возможно, вам будет интересно" |
|
||||
| Клеверенс | Вторичный — краткая карточка |
|
||||
| 1C:TMS | Вторичный — краткая карточка |
|
||||
|
||||
---
|
||||
|
||||
## 13. Контакты и распределение лидов
|
||||
|
||||
- Основной контакт: Екатеринбург Проектный центр
|
||||
- Распределение лидов: Екатеринбург ПЦ распределяет по территориально ближайшим ЦК WMS
|
||||
- Телефон и адрес отображаются на странице контактов и в футере
|
||||
Reference in New Issue
Block a user