Нейрослоп в дизайне

40 повторяющихся приёмов веб-дизайна с примерами. можно посмотреть каждый отдельно или открыть четыре демонстрационных сайта.

скачать pdf

в материале

градиент, шрифт или сетка сами по себе не делают работу плохой. стоит посмотреть, что они объясняют посетителю и почему выбраны для проекта.

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

Сайты

градиенты, стекло, bento и обещания бесконечной продуктивности.

открыть отдельно

synapse.ai hyperflow kroma vibecode.dev

скачать сайты (zip)

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

Приёмы

Фиолетовый градиент

знакомый перелив сразу создаёт ощущение технологичного продукта. если палитра выбрана только поэтому, за ней легко потерять характер проекта.

откуда взялись эти цвета и что они означают здесь?

Градиент внутри букв

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

можно ли сделать заголовок понятным без заливки?

Стекло поверх пятен

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

помогает ли прозрачность понять слои интерфейса?

Капсула над заголовком

маленькая плашка сообщает о новизне ещё до знакомства с продуктом. часто она повторяет обещание, которое дальше повторится ещё раз.

есть ли в плашке полезная дополнительная информация?

Знакомая шрифтовая пара

space grotesk и instrument serif хорошо работают вместе. одинаковая пара на десятках разных проектов начинает выглядеть как готовый ответ на любую задачу.

подходят ли эти формы содержанию и языку сайта?

Курсивное важное слово

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

почему выделено именно это слово?

Цветной край карточки

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

что кодирует полоска, кроме желания добавить цвет?

Три шага к чему угодно

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

повторит ли человек процесс по этим шагам?

Впечатляющие числа

крупные показатели обещают масштаб. без периода, способа подсчёта и источника они остаются частью декора.

можно ли проверить каждое число?

Эмодзи на каждой строке

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

что изменится, если убрать половину значков?

Отзыв без человека

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

есть ли настоящий автор и разрешение на публикацию?

Доверие из логотипов

ряд названий обещает связь с известными компаниями. без пояснения непонятно, были ли они клиентами, партнёрами или просто понравились автору.

какая именно связь у проекта с каждым логотипом?

Кнопка без понятного действия

начать бесплатно звучит удобно, но не говорит, что откроется дальше. хорошая кнопка помогает принять конкретное решение.

понятно ли, что произойдёт после нажатия?

Размытые цветные шары

пятна заполняют пустое пространство и добавляют глубину. их легко поставить даже там, где фону вообще не нужно привлекать внимание.

можно ли объяснить выбор фона через задачу страницы?

Неон в темноте

яркая кнопка и свечение выглядят убедительно в превью. мелкий серый текст рядом легко теряется на реальном экране.

читается ли второстепенный текст без усилия?

Пауза в каждом предложении

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

можно ли назвать действие прямо?

Плитки вместо иерархии

мозаика собирает разный контент в аккуратный экран. случайные размеры плиток могут при этом сделать главное и второстепенное неразличимыми.

чем обоснован размер каждой плитки?

Все карточки взлетают

подъём даёт заметную обратную связь. если карточка никуда не ведёт, движение обещает взаимодействие, которого нет.

можно ли нажать на то, что выглядит нажимаемым?

Готовый шрифт для премиальности

playfair display даёт яркий характер крупному тексту. повторять этот характер для любого дорогого продукта проще, чем найти его собственную интонацию.

что связывает типографику с самим продуктом?

Маркер под важным словом

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

выделена ли главная мысль или просто красивое слово?

Бесконечно светящаяся рамка

движущийся контур постоянно возвращает внимание к одному объекту. полезно сначала решить, заслуживает ли он этого внимания.

какое событие показывает эта анимация?

Галочки у любых преимуществ

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

можно ли проверить каждый пункт на практике?

Точка, которая всегда live

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

какой настоящий статус отображает точка?

Прожектор за курсором

подсветка следует за мышью и делает карточку игрушкой. на телефоне и при работе с клавиатурой такой опыт часто просто исчезает.

что получает человек, который не пользуется мышью?

Технологичная миллиметровка

сетка намекает на точность и инженерную работу. этот намёк может не иметь отношения к тому, что делает продукт.

нужен ли фону этот смысл?

Свечение и масштаб на ховере

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

достаточно ли одного сигнала обратной связи?

Средний тариф уже победил

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

для кого именно этот тариф будет подходящим?

Огромная кавычка

кавычка становится самым крупным объектом в отзыве. оформление легко оказывается убедительнее самого свидетельства.

что здесь главное: слова человека или оформление?

Хит в каждом углу

угловая метка может помочь сориентироваться в каталоге. если пометка есть на каждом товаре, она перестаёт что-либо выделять.

по какому правилу присвоена метка?

Строка, которая не останавливается

бегущая строка добавляет движения даже к служебной информации. прочитать её в своём темпе становится сложнее.

можно ли остановить движение и дочитать текст?

Призыв листать очевидную страницу

движущаяся линия объясняет привычное действие. иногда она занимает место, где могло бы начаться полезное содержание.

нужна ли подсказка именно в этом экране?

Иконка, заголовок, обещание

три колонки легко собрать и удобно заполнить общими словами. структура начинает повторяться раньше, чем выясняется, что нужно рассказать.

почему преимуществ ровно три и что они объясняют?

Цифра поверх фотографии

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

какая связь у фотографии с этой цифрой?

Золото как готовый премиум

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

можно ли отличить этот бренд без логотипа?

Разрядка до предела

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

можно ли быстрее прочитать надпись с обычными интервалами?

Терминал, который ничего не запускает

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

понятно ли, что перед нами демонстрация?

Универсальный человек с блобом

абстрактная фигура подходит почти любому сервису. вместе с универсальностью она часто приносит отсутствие деталей о самом продукте.

показывает ли иллюстрация что-то конкретное?

Волна между секциями

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

помогает ли форма понять переход между темами?

Дизайн под вашу задачу

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

написать мне в telegram направления работы

Сетка не делает композицию хорошей как выбирать расположение элементов по содержанию.