dp-trade-UI-kit/docs/design-audit-followup.md

DP Trade - разбор предложений дизайнера

Источник: /Users/lexx/Downloads/Аудит сайт дп-трейд.pdf
Дата разбора: 2026-04-21

Короткий вывод

Предложения дизайнера в основном подтверждаются текущей версткой. Главная системная проблема - сайт все еще построен на retail/B2B-визуальном языке: Montserrat/Inter, жирные uppercase-заголовки, холодный серо-голубой фон, конкурирующие синий и бордовый акценты, тяжелые CTA и градиентные карточки товара. Для премиального винного каталога нужно сместить систему к более спокойной editorial-подаче: Cormorant Garamond для заголовков и названий вин, Manrope для текста, теплый белый/кремовый фон, один основной бордовый акцент.

Часть аудита уже не полностью совпадает с текущей реализацией: на главной CTA в hero присутствуют (Смотреть каталог, Открыть UI-kit), а заголовки в исходных HTML не набраны капсом руками. Но CSS принудительно включает uppercase и тяжелый вес, поэтому визуально замечание дизайнера остается актуальным.

Статус проекта - 2026-05-19

Кодовая база сейчас находится в состоянии V1 + переключаемый V2. Источник правды - src/, сборка идет через Eleventy в _site/. Основные дизайнерские замечания закрыты в V2: обновлены токены, подключены легкие Cormorant 400/500, снижена жирность Cormorant, переработаны карточки товара, section headings, mega-menu, footer, контакты и product breadcrumbs. V1 остается для сравнения и не считается финальным направлением.

Открытые задачи: визуальный QA V2 на desktop/tablet/mobile, финальная продуктовая модель и расширенное описание товара, проверка плотных catalog list-cards, перенос V2-токенов в Elementor-документ/production handoff, production-блоки вроде pagination, 404, cookie/privacy и полноценной form validation.

Статус проверки кода - 2026-04-23

Важно: исправления внедрены как переключаемая версия V2, а не как замена V1. В src/_includes/layouts/base.njk подключен css/v2.css, src/js/design-switcher.js переключает data-design-version="v1|v2" через localStorage, а переключатели есть в header и UI-kit. По умолчанию без сохраненного выбора открывается V1, поэтому статусы ниже означают "исправлено в V2".

Блок	Статус	Что найдено в коде
Механика V2	[done] исправлено	Добавлены src/css/v2.css, src/js/design-switcher.js, переключатели V1/V2 в src/_includes/partials/header.njk и src/ui-kit.njk.
Системные токены	[done] исправлено в V2	В src/css/tokens.css для :root[data-design-version="v2"] заданы #7D021D, #FFFDFA, #F5F0E8, Cormorant Garamond и Manrope.
UI-kit токены	[partial] частично	src/css/ui-kit.css все еще содержит старые V1-токены, но V2-override подключается после него через src/css/v2.css. Для полной чистоты можно синхронизировать сам ui-kit.css.
Типографика и uppercase	[done] исправлено в V2	src/css/v2.css снимает uppercase с H1-H4, hero, карточек, page hero, формы и снижает веса заголовков. Caps оставлен для meta/eyebrow.
Минимальный размер 8px	[done] исправлено в V2	.brand-logo small поднят до 12px в src/css/v2.css.
Палитра и синий телефон	[done] исправлено в V2	В V2 синий акцент заменен на бордовый, .phone-link стал бордовым и легче по весу.
Холодные фоны	[partial] частично	Главные конфликтные фоны (news-section, muted-section, contacts hero) переведены в теплую гамму в V2. В V1 и отдельных старых CSS-участках холодные цвета остаются.
Карточки товара	[done] исправлено в V2	Градиенты .product-media* заменены на #F5F0E8, название стало serif/normal case, footer перестроен вертикально, CTA стал outlined/full-width.
Карточки каталога	[partial] частично	Заголовки списка облегчены и переведены в serif/normal case. Цена и плотная B2B-композиция в основном сохранены.
Mega-menu	[done] исправлено в V2	Заголовки снижены до 18px/normal case, изображения уменьшены, страны/апелласьоны разведены по иерархии, popular chips получили единый min-width.
Главная	[done] исправлено в V2	Hero H1 и H2 секций переведены в Cormorant/normal case, карточки рекомендаций и фон новостей обновлены. CTA уже был.
Страница продукта	[partial] частично	Добавлены V2-only breadcrumbs, H1 облегчен, описание ограничено 66ch. Расширенного описания пока нет, и вертикальную композицию метаданных/CTA стоит еще проверить визуально.
"О нас"	[partial] частично	H1, article width, H2, feature-card, blockquote и muted-section исправлены в V2. Hero все еще использует темную фотографию и правую meta-карточку, хотя карточка стала мягче.
"Контакты"	[partial] частично	Hero без фото, телефон уменьшен, форма облегчена, поле контакта разделяется JS на телефон/email, success-state добавлен. Юридический блок только опущен в конец левой колонки, но не вынесен ниже формы/в конец страницы.
Проверка сборки	[done] проверено	npm run build успешно прошел 2026-05-19; Eleventy записал 12 файлов в _site.

Новые замечания дизайнера - 2026-04-28

Источник: скриншоты/комментарии от Виктории.

Блок	Статус	Что сделано
Легкие Cormorant 400/500	[done] подключено	Добавлены CormorantGaramond-Regular.woff2 и CormorantGaramond-Medium.woff2; в src/css/tokens.css и css/tokens.css прописаны настоящие @font-face для весов 400 и 500.
Общая жирность Cormorant в V2	[done] CSS-слой	В src/css/v2.css Cormorant-заголовки переведены с 500/600 на 400 там, где это карточки, секции, mega-menu, footer, page hero, article blocks.
Карточки товара	[done] V2	.product-card h3 увеличен до 22px, вес снижен до 400, normal case сохранен.
Заголовки секций	[done] V2	.section-heading h2 сделан тонким uppercase с Cormorant 400, без дополнительной жирности. Hero H1 не затронут caps-правилом.
Footer	[done] V2	Заголовки колонок footer стали Cormorant 16px/400, без uppercase; подпункты остаются Manrope. Телефон в footer оставлен бордовым.
Mega-menu	[done] V2	Заголовок Вина по географии увеличен до 22px и облегчен до 400; меню, колонки и ссылки выровнены по левому краю; popular chips стали менее кнопочными и с левым текстом.
Апелласьоны	[done] V2	.country-link (Франция, Италия) перекрашен в бордо, вес снижен до 500; апелласьоны под ними остались normal case с левым отступом.

Ключевые замечания

1. Типографика

• В tokens.css основными токенами стоят Montserrat для заголовков и Inter для body. Дизайнер предлагает заменить на Cormorant Garamond + Manrope, оба шрифта уже подключены.
• В CSS много font-weight: 800 и text-transform: uppercase для hero, H2, карточек, меню, контактов и карточек преимуществ. Это создает ощущение "крика" и снижает премиальность.
• Важное уточнение: проблема не в текстах шаблонов, а в стилях. Например, src/about.njk содержит нормальный регистр, но .page-hero h1 принудительно делает uppercase.
• Минимальный размер текста должен быть не ниже 12px. Текущий 8px встречается в .brand-logo small; если этот элемент реально используется или вернется, его надо поднять до 12px.

2. Цвет и палитра

• Сейчас системные цвета: бордовый #4b0f24, фон #f4f6f9, синий акцент #1f3476. Дизайнер предлагает: основной бордовый #7D021D, теплый белый #FFFDFA, теплый карточный фон #F5F0E8, синий оставить только в логотипе.
• Синий телефон в шапке конкурирует с бордовым CTA.
• Холодные фоны #f4f6f9, #eef2f6, #f8fafc встречаются во многих секциях и выглядят чужими для винной темы.
• Градиенты в карточках товара выглядят случайными и конкурируют с этикетками бутылок. Нужен единый нейтральный фон под товар.

3. Карточка товара

• На главной карточки рекомендаций используют разноцветные градиенты под бутылками.
• Название товара в карточке визуально становится жирным uppercase через CSS. Рекомендация: normal case, Cormorant Garamond, 16-18px.
• Цена и кнопка стоят в одной строке как равнозначные элементы. Лучше выстроить вертикальную иерархию: регион, название, мета, разделитель, цена, full-width outlined CTA.
• Основной CTA сейчас темный залитый. Для карточек дизайнер предлагает более легкую outlined-кнопку на всю ширину.

4. Mega-menu

• Заголовки mega-menu слишком крупные и тяжелые: 26px, 800, uppercase.
• Фото занимает целую колонку и перетягивает внимание с навигации. Лучше уменьшить изображение до декоративного акцента или вынести в промо-блок в конце меню.
• В апелласьонах страна и регионы недостаточно различаются по иерархии. Страна должна быть золотой, 11px, caps; апелласьоны - 14px normal case с отступом.
• Чипы популярных регионов имеют разную ширину. Лучше задать единый min-width или вытянуть в ровную горизонтальную строку.

5. Главная

• Hero сейчас уже содержит явные CTA, поэтому замечание из аудита про отсутствие CTA неактуально.
• Остается актуальным: hero H1 слишком тяжелый из-за Montserrat, 800 и uppercase. Нужно перевести в Cormorant Garamond, normal case, более спокойный вес.
• H2 в секциях тоже надо убрать из uppercase и снизить визуальный вес.

6. Страница продукта

• Нет хлебных крошек. Для каталога это важно для ориентации и SEO.
• Описание продукта пока короткое, но для будущего длинного описания нужен текстовый блок с max-width: 65-72ch.
• Есть большой разрыв между метаданными и кнопками из-за сетки и отступов. Нужно проверить вертикальную композицию после добавления breadcrumbs и описания.
• H1 товара также наследует тяжелый uppercase.

7. "О нас"

• Hero-паттерн похож на остальные внутренние страницы: темная фотография, большой H1, белая карточка справа. Это снижает ощущение перехода между разделами.
• H1 спокойнее сделать serif, 48-56px, normal case, без давления.
• Правая карточка в hero сейчас работает как приклеенный светлый прямоугольник. Ее стоит смягчить: меньше кегль, обычный текст, меньше uppercase.
• Основной текст ограничен max-width: 860px, дизайнер предлагает 600-640px или около 66ch.
• Подзаголовки внутри статьи слишком крупные и uppercase.
• Карточки 01-04 имеют жесткую высоту 210px и align-content: space-between, из-за чего контент искусственно растянут.
• Цитата в CSS оформлена цветной левой границей и холодным фоном. Если блокquote используется в контенте, его лучше сделать через italic serif и тонкую нейтральную линию.
• Финальный muted-section на холодном фоне надо перевести в теплый кремовый.

8. "Контакты"

• Для контактов полноэкранный/крупный hero с темной фотографией слишком тяжелый. Контакты должны быстрее показывать телефон, email и форму.
• Телефон в карточке слишком крупный и тяжелый, выбивается из общей иерархии.
• Юридическая информация стоит рядом с телефоном и email как равнозначная карточка. Ее лучше перенести ниже формы или в конец страницы мелким справочным блоком.
• Заголовок формы крупный и uppercase, labels слишком жирные.
• Поле "Телефон или email" неоднозначно. Лучше разделить на два поля или дать понятную подсказку.
• Нет видимого success-state после отправки формы.

Расхождения с аудитом

• CTA в hero главной уже есть: src/index.njk содержит две кнопки в первом экране. Значит пункт "отсутствует явный CTA" стоит закрыть как неактуальный или переформулировать в "сделать CTA визуально легче/элегантнее".
• В исходных шаблонах многие заголовки набраны нормальным регистром. Капс появляется из CSS. Исправлять надо в основном CSS-токены и правила text-transform, а не тексты.
• В аудите упоминается Playfair Display как почти неиспользуемый шрифт, но итоговая рекомендация дизайнера - Cormorant Garamond + Manrope. Лучше не распыляться на Playfair и зафиксировать одну пару.
• В карточках каталога (product-card--list) названия уже без uppercase, но слишком тяжелые и крупные. Замечание про uppercase точнее относится к карточкам рекомендаций/общим .product-card h3.
• Страница продукта пока очень короткая. Замечание про ширину описания надо учесть как требование к будущему расширенному описанию, а не как текущий критический баг.

План доработок

Этап 1. Системные токены и базовая типографика

1. [done] V2: обновить src/css/tokens.css: --font-heading на Cormorant Garamond, --font-body на Manrope, основной бордовый на #7D021D, фон на теплый #FFFDFA, surface/card background на теплую белую/кремовую шкалу.
2. [partial] Частично: синхронизировать те же токены в src/css/ui-kit.css, чтобы витрина UI-kit не расходилась с сайтом. V2-override работает, но базовый ui-kit.css остался на V1-токенах.
3. [done] V2: убрать uppercase с H2-H4, product titles, news titles, page hero titles, form titles. Caps оставить только для eyebrow/meta labels.
4. [done] V2: пересобрать шкалу весов: H1 может быть крупным, но не обязательно 800; H2-H4 сделать 500-600 или доступный локальный эквивалент с текущими файлами шрифтов.
5. [done] V2: проверить минимальные размеры: не использовать текст ниже 12px.

Этап 2. Карточки и CTA

1. [done] V2: заменить градиентные product media на единый теплый нейтральный фон #F5F0E8.
2. [done] V2: перестроить карточку рекомендаций: region label, serif title 16-18px, gray meta 13px, разделитель, цена 22-24px, outlined full-width CTA.
3. [done] V2: смягчить primary/secondary buttons: новый бордовый, меньше "B2B-тяжести", четкие hover/focus states.
4. [partial] Частично: проверить карточки каталога отдельно: сохранить плотность B2B-списка, но снизить вес заголовков и цены.

Этап 3. Header и mega-menu

1. [done] V2: убрать синий цвет телефона в шапке, оставить синий только внутри логотипа.
2. [done] V2: уменьшить и облегчить заголовки mega-menu: 16-18px, normal case, semibold.
3. [done] V2: переделать визуальную колонку mega-menu: уменьшить изображение или вынести его в небольшой промо-блок.
4. [done] V2: настроить иерархию апелласьонов: страна как meta label, регионы с отступом и normal case.
5. [done] V2: выровнять popular chips: единый min-width или одна строка с равномерным ритмом.

Этап 4. Страницы

1. [done] V2: главная - обновить hero-типографику, H2 секций, карточки рекомендаций и холодные фоны новостей.
2. [partial] Частично: продукт - добавить breadcrumbs, расширенный description-блок с max-width: 65-72ch, пересобрать вертикальную иерархию metadata/price/CTA.
3. [partial] Частично: о нас - сделать hero спокойнее, смягчить правую карточку, сузить основной текст до 66ch, облегчить подзаголовки, убрать жесткую высоту feature-card, заменить холодный muted-section.
4. [partial] Частично: контакты - сделать компактный hero без тяжелой фотографии, вывести телефон/email в первый экран, юридический текст перенести ниже, облегчить форму, разделить контактные поля или добавить подсказку, добавить success-state.

Этап 5. Проверка

1. [done] Прогнать npm run build.
2. [todo] Проверить страницы минимум на desktop и mobile: index.html, catalog.html, product.html, about.html, contacts.html, ui-kit.html.
3. [todo] Отдельно проверить, что длинные русские заголовки и телефоны не ломают сетку.
4. [partial] Частично: сверить UI-kit с сайтом: токены, кнопки, карточки, hero, формы.

Приоритет

P0: токены, шрифты, uppercase, фон, основной бордовый. Без этого остальные правки будут точечными и визуально не соберутся.

P1: карточки товара, CTA, header/mega-menu. Это самые заметные пользовательские интерфейсы и они прямо влияют на восприятие каталога.

P2: страницы "О нас", "Контакты", "Продукт". Здесь много композиционных улучшений, но они лучше лягут после системной смены визуального языка.

P3: финальная полировка UI-kit, состояния формы, hover/focus, адаптивные проверки.