DesignCorp Docs

Appearance

Design Doctrine 2026 ​

Обновлено: 2026-03-22

Это каноническая дизайн-доктрина DesignCorp для лендингов, сайтов и публичных product pages. Документ фиксирует не вкусовые мнения, а практические выводы, которые уже дали лучший результат в landing.

Зачем ​

Нам нужен не набор случайных референсов, а единый visual doctrine, чтобы:

  • агентам не приходилось каждый раз выдумывать стиль с нуля;
  • страницы не превращались в шаблонную пачку блоков;
  • библиотека секций и шаблоны строились в одном качестве;
  • новые проекты DesignCorp сохраняли общий стандарт.

Главный вывод ​

Сильный landing начинается не с шаблона, а с сильных секций.

Правильный порядок такой:

  1. Сначала строим library sections.
  2. Потом собираем template.
  3. Потом создаём project и публикуем runtime.

Шаблон не должен быть первым артефактом дизайна. Если библиотека слабая, красивого template не получится.

P0: Канон страницы ​

Базовый premium flow для marketing/product landing:

  1. Header + Hero
  2. Proof / Trust
  3. Offer / Services
  4. Process / How it works
  5. CTA / Contact
  6. Footer

Если страница не проходит через этот скелет, агент обязан объяснить, почему композиция отклоняется от канона.

P0: Что уже подтвердилось как правильное ​

1. Hero должен быть проще, чем кажется ​

Сильнее всего сработал hero без отдельного правого promo-card/visual-shell.

Правильная модель:

  • один сильный background image;
  • сверху нормальный header с навигацией;
  • headline, supporting copy, CTA и trust читаются сразу;
  • атмосфера приходит из изображения и typography, а не из дополнительного виджета справа.

2. Header обязателен с первого экрана ​

Меню нельзя откладывать “на потом”.

Above the fold обязан включать:

  • logo/brand;
  • навигацию;
  • primary CTA;
  • mobile menu.

3. После hero страница должна светлеть ​

Тёмный hero работает лучше, если следующие секции переходят в светлую, спокойную зону. Это создаёт ритм и снимает визуальное напряжение.

4. Палитра рождается из hero image ​

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

  • тёплые нейтрали;
  • приглушённые olive/sage/clay/gold оттенки;
  • 1 акцентный цвет, а не набор случайных акцентов.

5. Секции должны ощущаться как один continuous flow ​

Лучший результат дали секции без ощущения “стопки отдельных карточек”.

Нужно:

  • убирать лишние card backgrounds;
  • минимизировать визуальные коробки;
  • держать единый surface rhythm;
  • использовать разделение через воздух, типографику и тонкие линии.

6. Реальные изображения сильнее абстрактной графики ​

Если есть выбор между:

  • абстрактной иллюстрацией;
  • схематичным SVG;
  • реальным image-led surface,

то для premium landing почти всегда выигрывает третий вариант.

7. Заголовки должны быть широкими и уверенными ​

Headline и section titles нельзя без причины душить узкими max-width. Ограничение ширины допустимо только там, где оно реально улучшает чтение, а не потому, что “так удобнее в компоненте”.

8. Display-типографика должна быть чистой ​

Слишком декоративный serif быстро ломает ощущение современного premium-product landing.

Текущий устойчивый вывод:

  • clean display sans работает лучше;
  • градиент в headline допустим;
  • типографика должна давать силу через scale/spacing, а не через декоративность.

9. Меньше теней, меньше бордеров, меньше “UI-шумa” ​

Нужно избегать:

  • тяжёлых карточных теней;
  • постоянных крупных рамок;
  • случайных радиусов;
  • пёстрых декоративных акцентов.

Хорошая premium-page держится на:

  • image art direction;
  • крупной typography;
  • spacing;
  • ритме;
  • одном понятном акценте.

10. Асимметрия делает страницу взрослее ​

Не все блоки должны быть равными.

Хороший паттерн:

  • один доминирующий элемент;
  • два поддерживающих;
  • разный visual weight внутри одной секции.

Пример: trust row, где первый показатель шире и сильнее остальных.

P1: Чего делать нельзя ​

Антипаттерны ​

  • страницы как стек одинаковых белых карточек;
  • generic SaaS gradients;
  • случайные purple/blue акценты без связи с hero image;
  • giant abstract art без продуктового смысла;
  • отсутствие меню above the fold;
  • 3-4 равных CTA одновременно;
  • искусственно узкие headline поля;
  • попытка строить template раньше секций;
  • дизайн “из референсов по кускам” без единой системы.

P1: Роль AI-инструментов ​

Stitch и похожие генераторы полезны как reference engine, но не как final art direction authority.

Что они умеют хорошо:

  • искать композиции;
  • давать layout-ритм;
  • подсказывать варианты секций.

Что они держат плохо:

  • точный hero image semantics;
  • сильный premium control на длинной странице;
  • последовательную quality bar по всем секциям.

Правило:

  • AI используется для exploration;
  • финальный landing собирается в нашей библиотеке вручную.

P1: Дизайн-стандарт для агентов ​

Любой агент, делающий public-facing page, обязан проверить:

  1. Понятно ли за 5 секунд, что это, для кого и зачем.
  2. Есть ли нормальный header и навигация.
  3. Есть ли один главный CTA.
  4. Hero работает за счёт image + copy, а не декоративного шума.
  5. Следующие секции продолжают один visual flow.
  6. Нет ли ощущения “template blocks glued together”.
  7. Не стали ли секции слишком карточными.
  8. Есть ли реальный visual hierarchy, а не просто набор разных блоков.
  9. Не душат ли заголовки случайные max-width.
  10. Не провалилась ли mobile-версия.

P2: Что это значит для landing ​

Для landing это фиксирует продуктовый порядок:

  • сначала делаем сильные library sections;
  • потом собираем system templates;
  • потом проверяем owner flow;
  • потом публикуем page/project.

Канон для текущего rebuild:

  • hero.v2 = Header + Hero
  • дальше: Proof, Offer, Process, CTA, Footer

Связанные документы ​