arazor72
/
brand_book
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Цифровой бренд бук клиники. Описание элементов сайта: цвета, шрифты, блоки, формы, страницы
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 Commit
7 Branches
0 Tags
7.7 MiB
 
 
 
Tree: 4f1b611065
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '4f1b611065'
${ noResults }
brand_book/docs/BRANDBOOK_SCOPE.md

8.3 KiB
Raw Blame History

Содержание брендбука — Клиника «О!Клиника» (oclinica.ru)

Документ описывает полный состав интерактивного цифрового брендбука. Формат: Living Styleguide — веб-приложение для дизайнеров (внутренних и внешних подрядчиков).

1. Фундамент бренда (Brand Foundation)

1.1 Цветовая палитра

  • Основные цвета (Primary) — из файла брендбука клиники
  • Дополнительные цвета (Secondary)
  • Нейтральные / серые оттенки
  • Цвета состояний UI: success, warning, error, info
  • Для каждого цвета: hex, RGB, HSL, название, рекомендации по применению
  • Примеры сочетаний (color pairs) с проверкой контрастности (WCAG AA)

1.2 Типографика

  • Шрифт: Fira Sans (веса 300, 400)
  • Шкала размеров: h1–h6, body, caption, label, overline
  • Межстрочный интервал, межбуквенный интервал для каждого стиля
  • Правила использования: жирный, курсив, caps
  • Примеры живого текста (заголовки, абзацы, списки)

1.3 Логотип

  • Основная версия (светлый фон)
  • Инвертированная версия (тёмный фон)
  • Монохромная версия
  • Охранная зона (минимальные отступы)
  • Минимальные размеры
  • Недопустимые варианты использования
  • Скачивание файлов (SVG, PNG)

⏳ Логотип будет добавлен после получения вектора

1.4 Иконография

  • Принципы выбора иконок
  • Рекомендованная сторонняя библиотека (определяется в процессе разработки)
  • Размеры: 16px, 20px, 24px, 32px
  • Правила цвета иконок

2. Базовые UI-компоненты (Components)

2.1 Кнопки (Buttons)

  • Primary, Secondary, Ghost/Outline, Danger
  • Размеры: sm, md, lg
  • Состояния: default, hover, active, focus, disabled, loading
  • Иконка + текст, только иконка

2.2 Поля ввода (Form Controls)

  • Text input: default, focus, error, success, disabled
  • Textarea
  • Select / Dropdown
  • Checkbox (одиночный, группа)
  • Radio button (группа)
  • Toggle/Switch
  • Подписи (label), подсказки (hint), сообщения об ошибках

2.3 Бейджи и теги (Badges & Tags)

  • Бейджи статуса (цветные)
  • Теги фильтрации
  • Счётчики (notification badge)

2.4 Алерты и уведомления

  • Inline: info, success, warning, error
  • Toast-уведомления

2.5 Карточки (Cards)

  • Карточка врача (фото, имя, специализация, кнопка записи)
  • Карточка услуги / заболевания
  • Карточка новости (превью, дата, заголовок, анонс)
  • Карточка отзыва (автор, текст, рейтинг, дата)
  • Карточка цены (услуга, стоимость, описание)

2.6 Модальные окна

  • Информационное
  • Форма записи на приём
  • Подтверждение действия

2.7 Навигация

  • Главное меню (header nav)
  • Мобильное меню (бургер)
  • Хлебные крошки (breadcrumbs)
  • Пагинация

2.8 Таблицы

  • Базовая таблица цен
  • Таблица с сортировкой

3. Блоки страниц (Page Blocks / Sections)

3.1 Hero-блок

  • Вариант с фоновым изображением + заголовок + CTA-кнопка
  • Вариант с иллюстрацией сбоку
  • Вариант с формой записи внутри

3.2 CEO / Вступительный текст

  • Блок с фото руководителя/главного врача
  • Цитата, подпись, должность

3.3 Наши врачи

  • Сетка карточек врачей (3–4 в ряд)
  • Фильтрация по специализации
  • Кнопка «Все врачи»

3.4 Отзывы пациентов

  • Карусель отзывов
  • Статичная сетка
  • Блок рейтинга (звёзды, количество)

3.5 Новости / Статьи

  • Сетка превью (3 в ряд)
  • Горизонтальный список
  • Блок «Последние новости» (сайдбар)

3.6 Форма контакта / Запись на приём

  • Короткая форма (имя, телефон, кнопка)
  • Расширенная форма (имя, телефон, специализация, врач, дата)
  • Форма в модальном окне

3.7 Контактный блок

  • Карта + адрес + часы работы
  • Схема проезда

3.8 Услуги / Заболевания

  • Сетка иконок с названиями
  • Список с описанием

3.9 Преимущества клиники

  • Иконки + текст (3–4 колонки)

4. Страницы (Pages)

Каждая страница показывается в брендбуке как полноразмерный макет, собранный из утверждённых блоков.

Страница Ключевые блоки
Главная Hero, Преимущества, Наши врачи, Услуги, Отзывы, Новости, Форма записи
Заболевание Hero (мини), CEO-текст, Описание, Врачи по теме, Форма контакта
Все врачи Фильтры, Сетка карточек врачей, Пагинация
Врач (профиль) Фото + инфо, Специализации, Расписание, Форма записи, Отзывы
Цены Фильтры, Таблица цен, Форма контакта
Контакты Карта, Адрес + часы, Форма контакта

5. Экспериментальная секция (Experimental)

Ключевая особенность брендбука — возможность создавать и сохранять новые компоненты и страницы прямо в интерфейсе.

5.1 Конструктор компонентов

  • Создание нового компонента через UI
  • Редактирование параметров (цвет, размер, текст)
  • Сохранение в базу данных
  • Статус: draft / review / approved

5.2 Конструктор страниц

  • Drag-and-drop сборка страницы из блоков
  • Сохранение как эксперимент
  • История версий

5.3 Библиотека экспериментов

  • Список всех экспериментальных компонентов/страниц
  • Фильтрация по статусу
  • Возможность «утвердить» и перенести в основную секцию

6. Технические требования брендбука

  • Адаптивность: desktop (1440px), tablet (768px), mobile (375px)
  • Темная тема (опционально, обсудить)
  • Копирование CSS/кода компонента в один клик
  • Экспорт цветов в Figma-токены (JSON)
  • Доступность: WCAG AA минимум