Первый лендинг, который я собрала нейронкой, работал нормально. Структура на месте, тексты внятные, кнопки жмутся. И при этом он выглядел как сайт, который собрала нейронка. Я поняла это раньше, чем успела порадоваться.
Знакомое ощущение: вроде всё аккуратно, а внутри пусто. Как переговорка в бизнес-центре. Ничего не раздражает и ничего не запоминается.
Я тогда решила, что нейронка просто не умеет в дизайн, и недели две честно правила всё руками. Зря. Модель тут вообще ни при чём: тот же инструмент, почти тот же запрос, а результат совсем другого уровня, если поменять одну штуку. Про неё дальше.
Из чего складывается пластиковый дефолт
Набор признаков на удивление устойчивый. Если у вас на странице три и больше, вас узнают:
- Один шрифт на всё. Заголовки и текст одной гарнитурой, разница только в размере и жирности. Чаще всего Inter или что-то очень на него похожее.
- Фиолетово-синий градиент. Мем уже, а всё равно вылезает. Иногда с «сиянием» за кнопкой в комплекте.
- Три карточки в ряд. Обязательно три. Обязательно с иконкой сверху, заголовком и двумя строками текста. Даже когда пунктов у вас пять. Или два.
- Плоские мягкие тени. Одна и та же тень под всем подряд, будто над страницей висит одна лампочка ровно по центру потолка.
- Скругления везде и одинаковые. Кнопки, карточки, картинки, поля формы. Один радиус на всех.
- Стоковые улыбки. Довольные люди в офисе с ноутбуками, смотрят в камеру. В новой версии это сгенерированные люди с идеальной кожей.
- Симметрия во всём. Всё по центру, всё выровнено, ни одного акцента. Зацепиться не за что: все элементы кричат одинаково громко, то есть никак.
- Иконки-универсалы. Ракета для «быстро», щит для «надёжно», лампочка для «идея». Смысла ноль, просто занимают место.
По отдельности ни один признак не преступление. Беда в комплекте: он читается как «сделано на автомате», и это ощущение переезжает на продукт. Сайт выглядит шаблонным, значит и предложение шаблонное. Так это читается, даже если вы полгода думали над оффером.
Почему нейросеть выдаёт именно это
Объяснение простое и немного грустное: нейронка выдаёт среднее по тому, что видела. Она прочитала миллионы страниц и запомнила, как выглядит «типичный современный лендинг». Просите «сделай красиво», получаете ровно эту усреднённую картинку.
А среднее это самое частое. Не самое удачное и не самое подходящее вашей аудитории. Просто самое распространённое. Bootstrap-эпоха, шаблоны конструкторов, тысячи стартап-лендингов на одно лицо. Вот всё это и лежит в среднем.
Вторая причина в самом слове «красиво». Для нейронки это пустое место: она не знает ни вашего вкуса, ни вашей аудитории, ни что вы вообще считаете красивым. Прилагательные плохо работают как ТЗ. «Современный», «стильный», «премиальный», «дорого выглядит» дают один и тот же результат. Средний.
Вот это главное. Нейронка работает как оркестратор: собирает результат из того, что лежит вокруг неё. В пустой среде она выдаёт среднее по интернету. В богатой, где есть библиотека стилей, палитр, шрифтовых пар и референсов, уровень совсем другой. Модель та же. Запрос почти тот же. Меняется только среда. Поэтому вопрос «какая нейросеть лучше рисует сайты» ведёт не туда.
Что просить вместо «сделай красиво»
1. Две пары шрифтов, а не один
Самая дешёвая правка и самая заметная. Одна гарнитура на заголовки, другая на текст, и страница перестаёт выглядеть дефолтной. Даже если больше вы вообще ничего не тронете.
Просить так: «подбери шрифтовую пару: контрастную гарнитуру для заголовков и спокойную читаемую для текста, покажи 3 варианта пары с примером первого экрана». Слово «контрастную» тут ключевое. Если обе гарнитуры похожи, эффекта не будет.
2. Конкретные референсы вместо прилагательных
Вместо «современный дизайн» назовите два-три конкретных сайта, которые вам нравятся, и обязательно скажите, что именно в них нравится. Не «как у Linear», а «как у Linear: много воздуха, тёмный фон, тонкая типографика, почти нет иллюстраций».
Секрет тут в том, что вы даёте нейронке признаки вместо оценки. Оценку она понимает по-своему, а признаки просто воспроизводит.
Референсов нет вообще? Тогда опишите ощущение через что-то из офлайна: «похоже на разворот книги, а не на приложение», «атмосфера маленькой пекарни, а не сети кофеен». Работает хуже, чем ссылка на живой сайт, но лучше, чем «стильно».
3. Ограничить палитру
Три цвета: фон, текст, один акцент. Всё. Акцентом красим только то, куда хотим привести взгляд: кнопку и ещё один-два элемента. Не больше.
И прямо запретите то, чего не хотите видеть: «без градиентов, без фиолетового, фон однотонный». Запреты нейронка выполняет заметно охотнее, чем пожелания. Тут ей просто негде додумать по-своему.
4. Многослойные тени и разная глубина
Мелочь, от которой страница выглядит дороже. Вместо одной тени на всё подряд поставьте разную глубину под разные уровни: карточка лежит почти на поверхности, всплывающее окно висит высоко.
Формулировка: «тени многослойные и разные по глубине в зависимости от уровня элемента; не вешать одинаковую тень на всё подряд».
5. Сломать ритм в одном месте
Когда вся страница ровная и симметричная, глазу негде остановиться. Одно намеренное нарушение оживляет всё: крупный блок среди мелких, асимметричный первый экран, элемент, который вылез за сетку.
Просить: «сделай первый экран асимметричным» или «один блок в секции сделай крупнее остальных, чтобы взгляд цеплялся».
6. Три варианта первого экрана вместо одного
Мой любимый приём, и он почти ничего не стоит. Первый экран это 80% впечатления, и просить сразу варианты гораздо толковее, чем править один по кругу до посинения.
Собери 3 принципиально разных варианта первого экрана
для одного и того же текста. Не косметические отличия —
разная логика: 1) типографика крупным планом, почти без картинок;
2) с большой фотографией на весь экран; 3) с асимметричной сеткой.
Для каждого — своя шрифтовая пара и своя палитра из 3 цветов.
Без градиентов и стоковых фото людей.
Открой все три в браузере, чтобы я посмотрела рядом.Дальше выбираете, что ближе, и говорите: «оставь этот стиль, но палитру теплее» или «возьми типографику из первого, а сетку из третьего». Каждый круг занимает минуты.
Собрать это в один запрос
Если свести всё вместе, разница между дефолтом и нормальным результатом видна так:
| Так получается дефолт | Так — что-то своё |
|---|---|
| «Сделай красивый современный лендинг» | «Первый экран асимметричный, крупная типографика. Шрифтовая пара: контрастный гротеск для заголовков, спокойная антиква для текста» |
| «Стильный дизайн, приятные цвета» | «Палитра три цвета: тёплый светлый фон, тёмно-серый текст, один акцент. Без градиентов» |
| «Добавь блок преимуществ» | «Пять пунктов, не выравнивай их в три карточки — сделай списком с крупными цифрами» |
| «Пусть выглядит дорого» | «Референс — [конкретный сайт]: много воздуха, минимум элементов, тонкие линии вместо рамок» |
| «Подбери картинки» | «Без стоковых фото людей. Лучше вообще без картинок: цвет, типографика и воздух» |
Принцип один: чем больше решений вы приняли до запроса, тем меньше решений нейронка примет за вас. А по умолчанию она всегда решает в сторону среднего.
Про дизайн-скилл, честно. В четвёртом модуле курса я отдаю свой дизайн-скилл. Это библиотека, которую я собирала под свои проекты: стили, палитры, шрифтовые пары, референсы продуктов хорошего уровня и production-чеклист лендинга. Смысл ровно тот, о котором я писала выше: скилл делает среду вокруг нейронки богаче, и она перестаёт усреднять. В модуле мы пересобираем ваш же лендинг со скиллом и кладём две версии рядом, «до» и «после». Магии тут нет и дизайнера он не заменяет: позиционирование за вас скилл не придумает и слабые тексты не спасёт. Он убирает пластиковый дефолт. По-моему, уже немало.
Где это не поможет
- Если проблема не в дизайне. Красивый лендинг со слабым оффером конвертит плохо. Порядок всегда один: сначала кому и что продаёте, потом тексты, потом подача. Почему структура растёт из анализа рынка, я разбирала в статье «Лендинг за вечер».
- Если нужен фирменный стиль. Логотип, айдентика, система для всех носителей. Это работа дизайнера. Нейронка соберёт страницу в заданном стиле, но узнаваемый бренд не придумает.
- Если вам не за что зацепиться. Неприятная штука, но так и есть: когда не можете назвать ни одного сайта, который нравится, и не понимаете чем именно, задачу ставить нечем. Лечится не промтом, а тем, что вы просто смотрите чужие сайты и замечаете, что цепляет.
- Если правок набирается много. Двадцать мелких итераций «а тут отступ побольше» съедают вечер. Дешевле попросить пересобрать блок целиком в другой логике, чем допиливать по пикселю. И перед крупной переделкой обязательно точка сохранения: дизайн это та самая область, где на четвёртом заходе хочется вернуться к варианту из середины пути.
Частые вопросы
Почему все сайты от нейросети выглядят одинаково?
Потому что модель выдаёт среднее по тому, что видела, а среднее это самый распространённый шаблон современного лендинга. В запросе «сделай красиво» нет ни одного конкретного ограничения, вот она и заполняет пустоту самым частым вариантом.
Можно ли получить хороший дизайн без дизайнера?
Приличный — да, если вы приняли решения за нейронку: шрифтовая пара, палитра, референс, ограничения. Уровня узнаваемого бренда нет, тут нужен человек. Разница примерно как между грамотным текстом и авторским стилем.
Какие слова в запросе точно не работают?
Все оценочные прилагательные: «современный», «стильный», «премиальный», «дорого», «минималистичный», «продающий». В них нет ни одного признака, который можно воспроизвести. Меняйте на конкретику: что именно должно быть на экране и чего быть не должно.
Сколько времени занимает довести лендинг до нормального вида?
Первая сборка вместе с текстами занимает вечер. Довести дизайн до состояния «не выглядит дефолтом» — обычно час-полтора сверху: варианты первого экрана, шрифты, палитра. Каждый следующий лендинг идёт заметно быстрее, потому что вы уже знаете, что просить.
Что даёт дизайн-скилл, которого нет в обычном запросе?
Готовую библиотеку решений, из которой нейронка выбирает вместо того, чтобы усреднять: стилевые направления, палитры, шрифтовые пары, референсы и чеклист проверки перед публикацией. Она перестаёт изобретать оформление с нуля и начинает подбирать под ваш проект.