Чому ШІ-дизайн виглядає шаблонно і як це виправити

Простими словами: чому всі ШІ-сайти на одне обличчя

Попроси будь-який ШІ «зроби красивий сучасний лендинг». У девʼяти випадках із десяти повернеться один і той самий сайт. Фіолетово-синій градієнт згори. Заголовок по центру. Під ним - три однакові картки з емодзі-ракетою, емодзі-блискавкою і емодзі-щитом. Кнопка «Get Started». Відкриваєш - і одразу відчуваєш: дешево. Наче замість склянки зі скла дали пластикову.

Чому так виходить? Уяви: ти зсипав у капелюх тисячу чужих сайтів і навмання витягнув «середній». Він не буде ні жахливим, ні красивим. Він буде найзвичайнісіньким - бо зібраний із того, що трапляється найчастіше. ШІ робить рівно це. Надивився на мільйони сторінок і видає усереднене - не найкраще, а найчастіше. А середнє по інтернету - це і є той самий шаблон.

Навіщо тобі вміти прибирати «ШІ-почерк»

Ти вайбкодиш сайт. Він генериться за хвилину - і виглядає як ще одна крапля в океані однакових лендингів. Клієнт дивиться і думає: «це ж нейронка наліпила». Довіра падає. А разом з нею і ціна твоєї роботи.

• Навчишся з першого погляду впізнавати «ШІ-почерк» і стирати його.
• Зрозумієш, що смак - не вроджений дар, а кілька простих правил, які застосовуються руками.
• Будеш давати ШІ точні вказівки замість «зроби красиво» - і отримувати не штамп, а свій стиль.
• Перестанеш тонути серед мільйона однакових сайтів і почнеш виділятися. А виділятися - означає продавати.

Справа не в «слабкому ШІ». Дай тому ж ШІ конкретний напрямок - і він зробить чудово. Проблема не в інструменті. Проблема в тому, що йому не сказали, чого хочуть.

Прикмети шаблону: як упізнати ШІ-дизайн з першого погляду

ШІ - це машина усереднення Усереднення - модель училася на величезній купі наявних сайтів і видає найбільш статистично частий варіант. Не найвдаліший, а найпоширеніший. Тому результати схожі один на одного. . Просиш «сучасний сайт» без деталей - отримуєш найчастіше з усього, що модель бачила. Ось її фірмові прикмети. Запамʼятай їх в обличчя - далі помічатимеш на автоматі.

Фіолетово-синій градієнт - мітка номер один

Найвпізнаваніша мітка ШІ-дизайну. Той самий перелив із фіолетового в синій - на фоні чи на кнопці. Трапляється так часто, що мозок зчитує його миттєво: «шаблон». І справа не в тому, що градієнт поганий сам по собі. Справа в тому, що цей конкретний перелив бачили вже всі.

Безликий шрифт і текст по центру

Гладенький шрифт без характеру - і весь текст вирівняний по центру. Заголовок по центру - окей. Але коли по центру і заголовок, і абзац на три рядки, і список, і підписи - сторінка втрачає вісь. Читати важко. Виглядає як презентація з нульових.

Емодзі замість іконок і вічні три картки в ряд

Ракета, блискавка, щит, галочка - емодзі в ролі іконок. Різнокольорові, різностильові, і кожен тягне ковдру на себе. Плюс безсмертний блок «три картки в ряд»: три фічі, три тарифи, три переваги. Не тому що у тебе рівно три. А тому що так робить шаблон.

Як прибрати шаблонність: чотири принципи смаку

Смак - не магія і не дар обраних. Це чотири правила, які працюють майже завжди. Застосовуй по порядку.

1. Один акцент - підсвіти лише головне

На екрані має бути одна головна дія - і вона одна горить яскравим кольором. Усе решта приглуши. Коли «кричить» одразу все - яскрава кнопка, яскравий банер, яскравий бейдж, яскрава позначка, - око не розуміє, куди дивитися. Сторінка перетворюється на ярмарок.

Правило просте. Виріши, що людина має зробити на цьому екрані, - і тільки це роби яскравим. Другорядні кнопки залиш спокійними, без заливки.

2. Своя палітра замість дефолтного градієнта

Відмовся від градієнта «за замовчуванням». Візьми один акцентний колір плюс пару нейтральних - темний або світлий фон і один-два відтінки сірого. Цього вистачить на весь сайт. Колір - це голос бренду. Навіть один нестандартний відтінок миттєво віддаляє сайт від «нейронка наліпила».

3. Повітря - порожнє місце, яке працює

Повітря Повітря (whitespace) - порожній простір навколо елементів і між ними. Воно не «пустує»: воно групує, розставляє акценти і дає оку відпочинок. Чим дорожче виглядає сайт, тим більше в ньому повітря. - це порожнє місце навколо тексту і блоків. Новачок боїться порожнечі і забиває її вщерть. Адже саме повітря робить сайт дорогим. Дай заголовку відступ згори і знизу. Не ліпи блоки впритул. І не центруй усе підряд: довгий текст читається зліва направо - вирівнюй по лівому краю, залиш сторінці вісь.

4. Деталі - смак живе в дрібницях

Дрібниці. Поодинці їх не помічаєш, а разом вони створюють те саме відчуття «зроблено людиною».

• Однакові відступи. Один крок відстаней по всьому сайту (наприклад, усе кратне восьми), а не «тут трішки, там побільше на око».
• Типографіка. Нормальні лапки « », тире замість дефіса там, де треба, не більше двох шрифтів, читабельна довжина рядка.
• Іконки замість емодзі. Один набір лінійних іконок в одному стилі - і блок одразу виглядає зібраним.

Приклад із життя: лагодимо промпт за хвилину

Найшвидше лікування - перестати просити «зроби красиво» і назвати напрямок. Порівняй два промпти для одного й того ж лендингу. Різниця між ними - уся прірва між штампом і стилем.

Зроби красивий сучасний лендинг для застосунку. Додай градієнт, іконки і блок з перевагами.

Зроби лендинг застосунку у спокійному стилі. Палітра: темний фон, один акцентний колір teal, решта - нейтральний сірий. Без градієнтів. Один головний заклик до дії, яскравий лише він, друга кнопка - спокійна без заливки. Текст вирівнюй по лівому краю, не по центру. Багато повітря між блоками. Лінійні іконки в одному стилі замість емодзі. Один шрифт, відступи кратні восьми.

Часті помилки новачка в ШІ-дизайні

• Просити «зроби красиво». Для ШІ це порожній звук - він підставить найчастіше, тобто шаблон. Називай напрямок і обмеження.
• Залишати дефолтний градієнт. Перша прикмета, за якою зчитують нейронку. Заміни на один колір або плоский фон.
• Центрувати все підряд. По центру - короткий заголовок. Абзаци і списки - по лівому краю, інакше втрачається вісь і читати важко.
• Емодзі в ролі іконок. Різностильові, різнокольорові - вони здешевлюють блок. Візьми один набір лінійних іконок.
• Боятися порожнечі. Забитий вщерть екран виглядає дешево. Повітря - не втрата місця, а ознака дорогого дизайну.
• Сипати яскравими кольорами. Коли кричить усе, не кричить ніщо. Один акцент, решту приглуши.
• Міняти все разом. Прав по одній прикметі за раз, інакше не зрозумієш, що спрацювало. Почни з акценту і градієнта.