anti-neuroslop

name

anti-neuroslop

description

Стоп-лист «нейрослопа» в дизайне сайтов — что нельзя делать по привычке. Читать ПЕРЕД тем, как верстать, редизайнить или рисовать страницу, лендинг, секцию, форму или мобильную версию, и перед показом макета. Триггеры: «сделай сайт/лендинг/страницу», «редизайн», «поправь дизайн», «свёрстай секцию», «выглядит как нейронка», «слишком шаблонно», «аудит дизайна». Не для копирайтинга без вёрстки и не для бэкенда.

Анти-нейрослоп: что нельзя делать при дизайне сайтов

Прямой стоп-лист для того, кто рисует сайт. Прочитать целиком ДО начала работы, а не перед сдачей: цель — не вычищать шаблонность аудитом, а не производить её.

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

⚠️ Самые дорогие пункты (нарушение = не «некрасиво», а обман и юридический риск): придуманные отзывы, кейсы, цифры, логотипы клиентов, награды; сгенерированный человек в роли сотрудника, эксперта или автора отзыва; сгенерированный объект в роли реального товара или работы; заранее отмеченное согласие на обработку данных; согласие на ПДн и рекламу в одном чекбоксе; выдуманные юридические тексты.

Это прямой стоп-лист для нейронки, которая рисует сайт. Перед началом дизайна она читает файл целиком. Во время работы не использует перечисленные решения по привычке и не ждёт финального аудита, чтобы их убрать.

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

Структура страницы

• Нельзя автоматически собирать страницу по схеме: hero, три преимущества, логотипы, отзывы, FAQ, CTA.
• Нельзя добавлять блок только потому, что он обычно бывает на лендингах.
• Нельзя делать ровно три карточки преимуществ, если продукт не даёт именно три равнозначных преимущества.
• Нельзя превращать любой контент в bento-grid.
• Нельзя оформлять каждую секцию отдельной плавающей карточкой.
• Нельзя вкладывать карточки в карточки без функциональной причины.
• Нельзя делать все секции одинаковыми по высоте, ширине, отступам и композиции.
• Нельзя повторять один шаблон секции по всей странице, меняя только текст и картинку.
• Нельзя растягивать короткий смысл на большой декоративный блок.
• Нельзя добавлять пустые декоративные секции ради длины страницы.
• Нельзя давать служебной навигации, фильтрам, рубрикам или табам вес главного контента.
• Нельзя прятать главное предложение после длинной вступительной части.
• Нельзя начинать следующую секцию внизу экрана одной полосой фона без видимого объекта.
• Нельзя переставлять блоки случайно только ради необычности.
• Нельзя копировать структуру референса, если у сайта другая задача.

Первый экран

• Нельзя использовать шаблон текст слева, абстрактная картинка справа по умолчанию.
• Нельзя ставить справа шар, волну, glow, декоративный dashboard или бесформенный 3D-объект вместо продукта.
• Нельзя делать первый экран, по которому за пять секунд непонятно, что предлагает сайт.
• Нельзя заменять предмет страницы настроением, слоганом или общим обещанием.
• Нельзя делать несколько равнозначных заголовков на одном экране.
• Нельзя делать огромный заголовок только ради модного вида.
• Нельзя растягивать заголовок на половину экрана, если в нём нет соответствующего смысла.
• Нельзя ставить несколько равнозначных CTA.
• Нельзя перегружать первый экран плашками, бейджами, статистикой и вторичными ссылками.
• Нельзя использовать декоративное изображение, которое не связано с предложением.
• Нельзя ставить человека только для заполнения пустого места справа.
• Нельзя показывать сгенерированного человека как сотрудника, клиента, эксперта или автора отзыва.
• Нельзя делать hero настолько высоким, что следующий полезный блок полностью скрыт до прокрутки без причины.

Композиция

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

Цвет

• Нельзя делать сайт монохромным.
• Нельзя использовать один hue с белым и чёрным как готовое премиальное решение.
• Нельзя брать фиолетово-синий градиент как универсальный цвет современного сайта.
• Нельзя использовать gradient text без прямой брендовой причины.
• Нельзя добавлять glow, neon и цветные орбы для имитации технологичности.
• Нельзя брать стандартную палитру Tailwind, Bootstrap, Material или другого фреймворка без адаптации к бренду.
• Нельзя делать все изображения и иконки в одном бежево-коричневом тоне ради единства.
• Нельзя подменять единый стиль одной палитрой.
• Нельзя использовать акцентный цвет везде подряд.
• Нельзя делать кнопку того же цвета, что и подложка блока.
• Нельзя ставить текст с низким контрастом ради эстетики.
• Нельзя проверять цвет только по значениям в переменных. Важен живой вид страницы.
• Нельзя передавать статус или смысл только цветом.

Форма, карточки и поверхности

• Нельзя давать один большой радиус кнопкам, полям, карточкам, изображениям и секциям.
• Нельзя делать все элементы округлыми.
• Нельзя превращать любой текст в pill или chip.
• Нельзя оформлять заголовок секции как бейдж без причины.
• Нельзя ставить иконку в кружке над каждым заголовком.
• Нельзя использовать одну мягкую тень на всех элементах.
• Нельзя добавлять тень каждому контейнеру.
• Нельзя использовать glassmorphism без функциональной глубины.
• Нельзя использовать blur как украшение слабой композиции.
• Нельзя рисовать границу вокруг каждого элемента.
• Нельзя делать карточку там, где достаточно списка, строки, таблицы или цельной сцены.
• Нельзя придавать одинаковый визуальный вес сущностям разной важности.
• Нельзя делать навигацию похожей на витрину товаров.
• Нельзя делать витрину похожей на компактное меню.

Типографика

• Нельзя выбирать безликий геометрический grotesk по умолчанию.
• Нельзя выбирать модный serif только для имитации премиальности.
• Нельзя использовать один шрифт, один вес и один размер почти для всего сайта.
• Нельзя делать заголовки огромными без связи с их ролью.
• Нельзя делать основной текст слишком мелким.
• Нельзя использовать слабый серый текст с плохой читаемостью.
• Нельзя красить каждый уровень текста в отдельный цвет вместо нормальной иерархии.
• Нельзя использовать слишком длинные строки.
• Нельзя оставлять одинаковый line-height для заголовков, текста и подписей.
• Нельзя делать все заголовки одинаковыми по масштабу и ритму.
• Нельзя переносить слова в заголовке случайно ради красивой формы.
• Нельзя заставлять пользователя вычитывать длинную официальную формулировку в роли главного заголовка.
• Нельзя использовать капс для больших объёмов текста.
• Нельзя смешивать много шрифтов без назначенных ролей.

Иконки

• Нельзя смешивать line, filled, 3D, emoji и разнотолщинные иконки в одной системе.
• Нельзя использовать emoji как интерфейсные иконки.
• Нельзя рисовать знакомые системные символы вручную, если есть нормальная библиотечная иконка.
• Нельзя выбирать иконку только по внешней похожести.
• Нельзя использовать один символ для разных смыслов.
• Нельзя ставить декоративные иконки возле каждого абзаца.
• Нельзя делать все иконки одинаковыми по размеру, если у них разные роли.
• Нельзя уменьшать крупную смысловую иллюстрацию до маленького glyph без пересборки композиции.
• Нельзя использовать иконки для оживления страницы, если они ничего не объясняют.
• Нельзя брать иконки из разных наборов ради разнообразия.

Изображения

• Нельзя ставить картинку только потому, что в макете осталось пустое место.
• Нельзя использовать изображение, которое связано с текстом только общей темой.
• Нельзя ставить generic 3D вместо реального продукта, процесса или результата.
• Нельзя использовать Corporate Memphis по умолчанию.
• Нельзя использовать абстрактные сферы, волны, кубы, капсулы и стеклянные объекты вместо предмета сайта.
• Нельзя выдавать сгенерированный объект за реальный товар, интерьер, кейс, работу или производство.
• Нельзя выдавать сгенерированного человека за сотрудника, клиента или эксперта.
• Нельзя придумывать подпись, имя, должность или отзыв для сгенерированного человека.
• Нельзя использовать случайную улыбающуюся офисную модель как универсальный образ аудитории.
• Нельзя использовать одинаковый crop, ракурс и крупность для всех изображений страницы.
• Нельзя делать все изображения декоративными. Часть кадров должна показывать предмет, процесс, деталь или результат.
• Нельзя накладывать текст на важную часть фотографии.
• Нельзя использовать плохой crop на mobile.
• Нельзя растягивать маленькое изображение до потери качества.
• Нельзя генерировать изображение продукта без реального исходника и затем выдавать его за точное.
• Нельзя добавлять на изображение несуществующие детали, свойства или комплектацию.
• Нельзя использовать фото без понятной роли в конкретном блоке.

Контент в макете

• Нельзя писать абстрактные обещания вместо фактов.
• Нельзя использовать фразы про новый уровень, раскрытие потенциала, инновационные решения и комплексный подход без конкретики.
• Нельзя придумывать цифры, отзывы, клиентов, кейсы, награды, сертификаты и гарантии.
• Нельзя создавать логотипный ряд для заполнения пространства.
• Нельзя писать одинаковые тройки преимуществ.
• Нельзя обращаться одновременно ко всем аудиториям.
• Нельзя делать заголовки, которые сообщают настроение вместо предмета.
• Нельзя повторять одну мысль в нескольких соседних блоках.
• Нельзя объяснять очевидный интерфейс длинным служебным текстом.
• Нельзя использовать lorem ipsum или правдоподобную выдумку в финальном макете.
• Нельзя сокращать реальный текст только потому, что он не помещается в выбранный шаблон.
• Нельзя проектировать блок под факт, которого у проекта нет.

Кнопки, формы и состояния

• Нельзя делать несколько равнозначных primary-кнопок в одной зоне.
• Нельзя ставить на mobile больше одной кнопки в нижней sticky-панели.
• Нельзя делать кнопку неотличимой от подложки.
• Нельзя использовать неконкретные подписи вроде подробнее там, где можно назвать действие.
• Нельзя заменять label плейсхолдером.
• Нельзя делать форму, которая не помещается в экран.
• Нельзя прятать кнопку отправки за клавиатурой или нижней панелью.
• Нельзя забывать состояния hover, focus, active, disabled, loading, error и success.
• Нельзя показывать состояние, которое невозможно реализовать.
• Нельзя рисовать несуществующие данные и функции как работающий продукт.
• Нельзя отмечать согласие на обработку данных заранее.
• Нельзя объединять согласие на обработку данных и рекламу в один чекбокс.
• Нельзя придумывать юридические тексты.
• Нельзя оставлять ошибку формы без объяснения, что исправить.

Mobile

• Нельзя делать mobile уменьшенной копией desktop.
• Нельзя сохранять desktop-порядок блоков без проверки мобильного сценария.
• Нельзя оставлять desktop split-layout на узком экране.
• Нельзя делать основные кликабельные карточки в две колонки.
• Нельзя уменьшать зоны нажатия ниже удобного размера.
• Нельзя прятать важное действие за hover.
• Нельзя допускать горизонтальный скролл страницы.
• Нельзя обрезать текст, кнопки, формы и изображения.
• Нельзя перекрывать контент sticky-элементами.
• Нельзя ставить несколько CTA в нижнюю фиксированную панель.
• Нельзя делать modal выше доступного viewport без внутренней прокрутки.
• Нельзя прятать close и primary action за пределами экрана.
• Нельзя использовать вложенный scroll без необходимости.
• Нельзя забывать landscape и открытую клавиатуру.
• Нельзя считать мобильную версию готовой после проверки одного экрана шириной 390 px.

Motion

• Нельзя назначать одинаковый fade-in всем секциям.
• Нельзя добавлять движение только ради оживления.
• Нельзя анимировать каждый элемент страницы.
• Нельзя задерживать появление основного контента.
• Нельзя использовать motion, который мешает чтению или нажатию.
• Нельзя забывать prefers-reduced-motion.
• Нельзя делать анимацию заменой понятного состояния интерфейса.

Доступность и читаемость

• Нельзя убирать видимый focus у интерактивных элементов.
• Нельзя делать важное действие доступным только мышью.
• Нельзя передавать ошибку, успех или выбор только цветом.
• Нельзя использовать низкий контраст ради мягкого вида.
• Нельзя делать текст внутри картинки единственным носителем информации.
• Нельзя оставлять значимую иконку без понятного названия.
• Нельзя нарушать логичный порядок табуляции ради визуальной композиции.
• Нельзя делать touch target меньше содержимого пальца.
• Нельзя скрывать содержание при увеличении текста или ширине 320 px.

Технические привычки

• Нельзя рисовать то, что нельзя собрать на выбранном стеке.
• Нельзя считать компонент существующим только потому, что для него есть стили.
• Нельзя назначать sticky или fixed голым тегам header, nav, aside или section.
• Нельзя использовать внешнюю библиотеку только ради одного декоративного эффекта.
• Нельзя подменять реальный контент скриншотом внутри макета.
• Нельзя выдавать плоскую картинку за редактируемый Figma-макет.
• Нельзя оставлять текст, кнопки и ключевые элементы частью одного растра.
• Нельзя менять дизайн только в коде, если Figma заявлена источником правды.

Финальная самопроверка нейронки

Перед показом нейронка должна ответить нет на каждый вопрос:

1. Я использовала знакомый шаблон вместо логики продукта?
2. Я добавила блоки, карточки или декор для заполнения места?
3. Я сделала сайт похожим на generic SaaS, даже если это другая ниша?
4. Я спрятала отсутствие предмета за градиентом, 3D или абстракцией?
5. Я сделала все секции одинаковыми?
6. Я использовала один цветовой тон для ощущения премиальности?
7. Я злоупотребила радиусами, pills, тенями, glass или glow?
8. Я поставила изображения, которые ничего не доказывают и не объясняют?
9. Я придумала хотя бы один факт, отзыв, человека, кейс или состояние?
10. Я сделала mobile сжатой копией desktop?
11. Я добавила больше одной кнопки в нижнюю мобильную панель?
12. Я выбрала приём потому, что он часто встречается в нейросетевых макетах?

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

Как применять на живом проекте

1. Перед работой — прочитать разделы, которые касаются задачи (секция, первый экран, mobile, формы).
2. По ходу — не тянуть привычный приём, если он в списке; выбирать решение от предмета страницы.
3. Перед показом — пройти самопроверку выше. Любое «да» = не показывать, сначала чинить.
4. На чужом/легаси-проекте: механические нарушения (контраст, иерархия заголовков, дубли CTA, mobile) чинить сразу; содержательные (выдуманные отзывы, цифры, логотипы) — не удалять молча, а показать владельцу: это его контент и его решение, но риск назвать обязательно.

Источник

Стоп-лист собран из практики: разборы того, по каким признакам страница читается как «сделанная нейронкой», сведённые в один список правил.