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 и тяжелый вес, поэтому визуально замечание дизайнера остается актуальным.

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

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

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

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

Этап 3. Header и mega-menu

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

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

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

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

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

Приоритет

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

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

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

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