ICE FACE · дизайн-система

Как управлять дизайн-системой

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

Главная витрины Карта готовности копий

Где что лежит

Четыре места

Исходники

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

Витрина

Из исходников собираются страницы, которые открываются в любом браузере без интернета. Витрина для заказчика публикуется на design.ice-face.ru; в неё попадают предложения и только те копии страниц, которые полностью совпали с сайтом.

Действующий сайт

Сайт ice-face.ru — единственный образец для копий страниц. Дизайн-система его не меняет: ни страницы, ни адреса, ни настройки сайта, ни данные магазина и онлайн-записи.

Доказательства сверки

Снимки сайта и копий, разница между ними и замеры хранятся отдельно от исходников. В самом проекте остаётся реестр готовности: какая страница совпала, по какому прогону и когда.

Как проходит правка

Одна правка — все страницы

Правку делают там, где элемент описан, а не на каждой странице отдельно. Чем общее место, тем больше страниц она затронет.

1. Общее значение: цвет, размер шрифта, отступ

Каждое такое значение записано один раз под своим именем. Меняем его в одном месте — и оно меняется на всех страницах, где используется.
2. Элемент: кнопка, карточка, слайдер

Элемент описан один раз и собирается на всех страницах из одного описания. Правка элемента меняет его везде сразу; список затронутых страниц есть в карте использования.
3. Общий блок: шапка, подвал, отзывы, специалисты

Блок тоже собирается из одного источника. Шапка и подвал общие почти для всех страниц, поэтому их правка затрагивает почти всю витрину.
4. Одна страница

Правка шаблона или текста одной страницы меняет только её. Если нужное изменение касается общего элемента, его делают в элементе, а не на странице.

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

Состояния страниц

Сейчас, предложение, остановлено

Новое решение никогда не меняет копию действующего сайта: оно живёт рядом, отдельной страницей, пока его не утвердят.

Сейчас

Точная копия страницы действующего сайта. Она повторяет сайт как есть, включая его недостатки. Улучшения в неё не вносятся.

Предложение

Новое решение показывается отдельной страницей с плашкой «Предложение · не утверждено и не внедрено». Копия сайта при этом не меняется.

Остановлено

Страницы на сайте нет или данных недостаточно. Черновик не выдаётся за решение, пока не собраны доказательства.

Кто и как утверждает

От идеи до внедрения

Шаг	Кто	Что происходит
Предложение	Команда проекта	Готовит новое решение отдельной страницей-предложением — только там, где отдельное улучшение явно разрешено. Копия сайта остаётся без изменений.
Решение	Заказчик	Утверждает конкретный вариант. Решение записывается с датой и ссылкой на утверждённый вариант; сама ссылка на макет или доступ к нему утверждением не считаются.
Внедрение	Команда проекта	Переносит утверждённое решение в общие элементы и страницы, затем повторяет все проверки и сверку.
Проверка и приёмка	Названы в задаче	Кто проверяет содержание, кто — дизайн и кто принимает результат, указывается отдельно в каждой задаче. Имена не угадываются по участию в переписке или встрече.

Утверждение одной страницы не меняет статус других страниц, шапки или подвала: каждое решение принимается отдельно.

Совпадение с сайтом

Как проверяется копия

Каждая копия сравнивается с сайтом в одинаковом состоянии на двух контрольных ширинах: компьютер 1440 пикселей и телефон 390 пикселей.
Совпадать должны изображение страницы (расхождение не больше 0,2 % точек), положение и переносы каждого текста, шрифты и размеры элементов с точностью до одного пикселя.
Копия получает статус «Совпадает с сайтом», только если совпали все ширины и все проверяемые состояния. Иначе статус «Есть расхождения»; если страницы на сайте нет — «Нет страницы на сайте», если сверки ещё не было — «Ещё не сверялась».
Действия, которые на сайте что-то меняют — отправка форм, корзина, вход, онлайн-запись, — при сверке не выполняются.
Статус и дата сверки каждой страницы видны в карте готовности на главной странице витрины.

Открыть карту готовности

Публикация и откат

Новая версия витрины

До начала правки команда сверяет рабочую копию с опубликованной версией по Git-коммиту. Название ветки или одинаковый номер версии не заменяют эту проверку. При расхождении сначала объединяют изменения, сохраняя библиотеку и новые страницы.
Новая версия витрины собирается только из сохранённого состояния проекта и проходит все автоматические проверки.
Публикация автоматически блокируется, если рабочая история не содержит серверную версию или из пакета пропали опубликованные страницы, Storybook, его примеры либо файлы переносимой библиотеки.
У каждого файла версии есть контрольная сумма: на сервере она сверяется, и файл, пришедший с ошибкой, не пропускается.
Витрина переключается на новую версию сразу целиком. Предыдущая версия остаётся на сервере.
Если что-то не так, прежняя версия возвращается одной командой, так же целиком.
После публикации проверяются точная версия, контрольные суммы, библиотека и новые страницы на компьютере и телефоне. Совпадение копий с основным сайтом проверяется отдельно; выпуск макетов сам по себе не означает внедрения в WordPress.

Документы

Где прочитать подробнее

Документы лежат в проекте дизайн-системы; команда проекта пришлёт нужный по запросу.

docs/GUIDE.md — подробная инструкция для команды: как работать с дизайн-системой шаг за шагом
docs/USAGE_MAP.md — карта использования: какие страницы затронет правка каждого блока, стиля и группы значений
docs/LIVE_PARITY.md — как устроена сверка копий с сайтом и публикация
docs/EVOLUTION_MODEL.md — статусы страниц и порядок перехода от текущего сайта к утверждённым изменениям

Каталог элементов дизайн-системы: открыть дизайн-систему.