Почему сайт через нейросеть выглядит дёшево: 7 ошибок дизайна

Нейросеть собирает сайт за вечер, а смотришь на него — как из 2007 года: тесно, пёстро, всё кричит. Проблема не в нейросети: код она пишет нормальный, проседает дизайн. Я дизайнер с 2015 года, поэтому покажу 7 ошибок, из-за которых сайт выглядит «дёшево», и как каждую исправить без дизайнера.

Воздух — это пустое место между блоками, строками и кнопками. (В дизайне это называется whitespace — «белое пространство». Это не пустота, а инструмент: чем больше воздуха, тем дороже выглядит страница.) Когда всё слеплено впритык, глазу не за что зацепиться, и сайт выглядит как доска объявлений в подъезде.

Как исправить: увеличь отступы между блоками в 1,5–2 раза. Правило: расстояние между блоками всегда больше, чем между элементами внутри блока. Нейросети так и пиши:

Заголовок курсивом, подзаголовок с засечками, текст рукописный. Каждый шрифт по отдельности красивый, вместе — цирк. (Засечки — маленькие «хвостики» на концах букв, как в Times New Roman.)

Как исправить: пара шрифтов — один для заголовков, один для текста. Заголовки — жирные и крупные, текст — обычный. Нейросети:

Синий заголовок, красная кнопка, зелёная плашка, оранжевый акцент. Каждый элемент спорит за внимание — и все проигрывают.

Как исправить: правило 60/30/10. (60% страницы — спокойный фон, обычно светлый; 30% — второстепенный цвет, например, тёмный текст и серые блоки; 10% — один акцентный цвет для кнопок и важных деталей.) Один акцент на страницу — и сайт сразу выглядит собранным.

Заголовок, подзаголовок и кнопка одного размера — непонятно, куда смотреть. (Иерархия — это когда размером, цветом и жирностью ты говоришь глазу: «сначала читай это, потом это, потом это».)

Как исправить: на каждом экране — одна главная мысль и одно главное действие. Заголовок — самый крупный текст на экране, кнопка — акцентным цветом. Нейросети:

(Hero-блок — первый экран сайта, который видишь сразу после открытия.)

Такие картинки мозг считывает как рекламу мгновенно — и перестаёт доверять. (Стоки — банки готовых фотографий, которые используют все подряд.)

Как исправить: реальные фото работ или никаких фото вообще. Для кондитера — торты крупным планом, для кофейни — интерьер и кофе. Если реальных фото нет — чистая графика и цвет лучше стока.

Заголовок начал с одного края, кнопка уехала на три пикселя правее, картинка — ещё правее. Мелочь, а выглядит разваленно. (Сетка — невидимые линии, по которым выравниваются все элементы. Как линовка в тетради.)

Как исправить: все блоки — по одной левой границе. Нейросети:

Глаз не видит сетку, но чувствует порядок.

На компьютере красиво, на телефоне заголовок в три строки и кнопка на пол-экрана. 60–70% людей смотрят с телефона — они и решают, «дорого» или «дёшево».

Как исправить: проверяй каждый блок на мобильном (в браузере F12 → иконка телефона). Нейросети:

• Открыл с телефона — текст читается без увеличения, кнопки нажимаются
• Прищурился — видно, где заголовок, а где кнопка (иерархия работает)
• Посчитал шрифты — не больше двух
• Посмотрел на цвета — один акцентный
• Отступы между блоками — большие, внутри блоков — поменьше
• Фото — реальные или их нет

Если хоть один пункт провален — это и есть «дёшево». Хорошая новость: всё лечится одним промптом нейросети.

Это база. Система — композиция, цвет, шрифты, «чтобы было красиво» — в моём мини-курсе по веб-дизайну за 390 ₽: без воды, конкретно для тех, кто кодит, но не дизайнер. А если хочешь, чтобы твой сайт разобрал дизайнер лично — запишись на бесплатную консультацию ниже.