Почему одни сайты выглядят дорого — и как этому научиться

После курса · Обновлено 4 ноября 2026 · 20 мин чтения

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

Почему «красиво» — это не вкус

Вкус объясняет, что нравится вам. А восприятие экрана у людей устроено одинаково: глаз и внимание работают по одним законам, независимо от того, какой стиль сейчас в моде. Именно поэтому правила дизайна можно выучить, а не «почувствовать».

Человек не читает страницу. Он просматривает её за две-три секунды: несколько точек-фиксаций, между ними — прыжки взгляда. Если за это время не нашлось, за что зацепиться, остальное уже не имеет значения. Поэтому дизайн — это в первую очередь управление вниманием, а не украшение.

• Крупное пятно замечается раньше мелкого — отсюда размер как первый инструмент.
• Контраст важнее цвета: тёмное на светлом видно даже боковым зрением.
• Расстояние сообщает связи: то, что рядом, читается как одно целое.
• Ограничение создаёт стиль: десять разных решений выглядят как беспорядок, три — как система.

Иерархия: один главный объект

Иерархия — это порядок важности. На экране должен быть один самый главный объект, один-два второстепенных, а всё остальное — фон. Выделяют четырьмя инструментами, и лучше не всеми сразу:

• Размер. Разница в два раза читается, разница в 1,2 раза — нет.
• Вес. Жирный шрифт отделяет заголовок от текста, не меняя размера.
• Цвет. Самый сильный инструмент, поэтому его оставляют для действия, а не для красоты.
• Отступ. Работает как рамка, только тише: вокруг главного должно быть пусто.

Проверка простая: прищурьтесь до половины. Если главное всё ещё видно, а остальное расплывается — иерархия есть. Разобрано в уроке про иерархию.

Близость и воздух: расстояния вместо рамок

Самая частая причина «страница выглядит как черновик» — не цвет и не шрифт, а одинаковые промежутки везде. Когда все отступы равны, экран превращается в ровное полотно: непонятно, где заканчивается одна мысль. Отступ сообщает связи раньше, чем человек прочитает текст: внутри группы меньше, между группами больше.

Это закон близости из гештальт-психологии: мозг объединяет в группу не то, что связано по смыслу, а то, что стоит рядом. Второй закон — подобие: похожие по цвету и форме элементы читаются как родственные. Отсюда практическое правило: если два элемента должны читаться вместе, сократите расстояние; если они разные — увеличьте.

• Держите шкалу из четырёх чисел: 8, 16, 32, 48 px. Остальные не нужны.
• Заголовок и его текст — 8–12 px между ними.
• Блоки между собой — 32–48 px.
• Внутри карточки — 14–20 px от края до текста; 4 px выглядят как ошибка вёрстки.
• Рамка нужна только там, где отступ невозможен. Обычно её работу делает воздух.

Практика — в уроке про близость и воздух.

Четыре закона, на которых это держится

Все правила выше — не чья-то фантазия. За каждым стоит исследование о том, как человек видит, выбирает и двигает рукой. Их полезно знать по именам: тогда правило перестаёт быть «мне так сказали» и становится объяснимым.

Практика по каждому закону — в модуле «Законы восприятия»: гештальт, закон Фиттса, закон Хика и закон Якоба.

Цвет: три параметра вместо «красивого оттенка»

Любой цвет описывается тремя величинами, и это единственный способ говорить о цвете точно, а не «мне нравится это бордо».

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

Психология цвета: что он сообщает до слов

Тёплые цвета — красный, оранжевый, жёлтый — воспринимаются как близкие и активные: они быстрее притягивают взгляд и кажутся «громче». Холодные — синий, зелёный, фиолетовый — как спокойные и дальние: они дают ощущение порядка и доверия. На этом различии и построены типичные решения интерфейсов.

Второй важный эффект — насыщенность. Чистые цвета (#ff0000, #00ff00, #0000ff) на экране выглядят дёшево не из-за моды: у них максимальная насыщенность, они вибрируют рядом друг с другом и не дают глазу отдохнуть. Смешивая цвет с белым или серым, получают спокойные оттенки — ими и делают фоны и поверхности.

Палитра — это роли, а не список любимых цветов

Палитра собирается не «подбором красивых оттенков», а распределением работы. Пять ролей — и цвета складываются сами.

Пропорция примерно 60-30-10: около 60% площади — фон, 30% — поверхности, 10% — акцент. Когда акцента становится 40%, он перестаёт быть акцентом: глаз больше не понимает, что здесь главное.

Сочетание цветов: три способа, а не сто

1. Монохромный — один оттенок в разных светлотах. Самый безопасный и самый «дорогой» на вид: так собраны почти все спокойные интерфейсы.
2. Аналогичный — соседние оттенки, например синий и фиолетовый. Мягко и цельно; хорошо для фонов и градиентов.
3. Контрастный — противоположные оттенки, например синий и оранжевый. Даёт силу, но пользоваться им надо точечно: на акцент, а не на всё сразу.

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

Контраст: цифры вместо «на глаз»

Контраст считают как отношение яркостей двух цветов: от 1:1 (цвет совпадает) до 21:1 (чёрное на белом). Общепринятые пороги: для обычного текста — не меньше 4,5:1, для крупного (от 24 px или от 19 px жирным) — 3:1, для границ и иконок — 3:1. Это стандарт WCAG, и за ним стоят исследования читаемости, а не вкус.

Глаз адаптируется, поэтому «на глаз» контраст не проверить: в тёмной комнате бледный текст кажется нормальным, на улице исчезает. Проверка: прищуриться, посмотреть в градациях серого, а лучше — посчитать отношение яркостей. Подробно — в уроке про контраст.

Цвет не должен быть единственным сигналом

Примерно каждый двенадцатый мужчина и одна из двухсот женщин плохо различают красный и зелёный. Если «ошибка» отличается от «успеха» только цветом, для них это одно и то же. Поэтому цвет всегда дублируется словом или значком: «Готово», «Внимание», «Ошибка».

Это же правило спасает и в бытовых условиях: на солнце, на плохом экране, при выключенной цветопередаче. Цвет — ускоритель смысла, а не сам смысл.

Единство: красота в ограничениях

«Дорого» выглядит не то, где много деталей, а то, где все детали из одного набора. Один шрифт. Одна форма скругления. Одна тень. Один акцентный градиент. Одна шкала отступов. Когда всё разное — получается «разбросанные кнопки». Когда всё одинаковое, кроме одного — получается стиль.

• Один шрифт (и четыре размера из шкалы на всю страницу, не семь).
• Один радиус: если карточки 16 px, кнопки не 4 px.
• Одна тень: мягкая и одна на весь сайт.
• Один акцент: второй цвет — только для состояний.
• Сетка и выравнивание: элементы стоят по одним линиям, а не «примерно рядом».
• Аффорданс: то, что нажимается, выглядит нажимаемым — об этом урок про кнопку.

Текст: кегль, интервал и длина строки

Текст — это почти весь интерфейс: кнопки и картинки замечают, а читают текст. И «нечитаемый текст» почти никогда не про гарнитуру: он про размер букв, расстояние между строками и ширину блока. Две настройки, font-size и line-height, меняют ощущение страницы сильнее, чем любой декор.

Соседние ступени должны отличаться заметно — в 1,25–1,5 раза. Разница между 16 и 17 px не видна вообще, поэтому «сделать чуть больше» — самая бесполезная правка в типографике. Четырёх размеров хватает почти на любую страницу; если понадобился пятый, скорее всего это тот же уровень, но с другим весом или цветом.

Вторая половина читаемости — [длина строки](word:Длина строки). Она задаётся не количеством знаков, а шириной блока: единица ch равна ширине символа «0», поэтому max-width: 65ch — это примерно 65 знаков. Хорошая строка — 45–75 знаков: длиннее — глаз промахивается при возврате на следующую строку, короче — чтение становится рваным.

Третья часть — сетка. Невидимые линии, по которым выровнены блоки, и один зазор на все промежутки. В CSS это display: grid с grid-template-columns: repeat(3, 1fr) и gap. Глаз замечает сдвиг в 3–4 px, даже не понимая, что именно не так, а общие линии считывает мгновенно — отсюда и ощущение аккуратности.

И последнее: сетка должна перестраиваться. Больше половины людей откроют страницу с телефона, и две колонки на узком экране превращаются в тонкие полоски. Медиазапрос @media (max-width: 640px) перестраивает сетку в одну колонку. Шрифт при этом не уменьшают: уменьшение — не адаптивность, а способ сделать текст нечитаемым.

Практика — в модуле «Типографика и сетка»: кегль и интервал, длина строки, шкала размеров, сетка, адаптивность и проект «страница, которую приятно читать».

Как получился этот сайт

Честно: с людьми исследования не проводилось. Основа — те же принципы, что выше, плюс замечания клиента и замеры. Именно замеры и замечания сделали его таким, какой он есть, — и почти каждое исправление было про структуру, а не про украшения.

• «Мрачная плашка». Цифры 48 / 8 / 24 стояли тёмной полосой во всю ширину. Заменили на светлую карточку с градиентными числами.
• «Тетрадный лист». Фон был почти белым, карточки — белыми: контраста не было вовсе. Фон стал светло-сиреневым, текст остался на белом.
• «Слишком много воздуха». Причина — не отступы, а их сложение на стыках секций: 112 px. Свели к 80.
• «Описание бледное». slate-600 → slate-800, контраст с 7,5:1 до 14:1.
• «На телефоне уезжает за экран». Причина — длинный токен в примере кода распирал колонку сетки: 442 px при экране 388. Лечится min-w-0 и break-words, а не уменьшением шрифта.
• «Колокольчика не видно». Он был только в широкой части шапки — то есть от 1280 px. Вынесли наружу, теперь виден на любой ширине.

Из этого списка видно главное: «красиво» почти никогда не добавляется — оно получается, когда убрано лишнее и выровнено нужное.

Как разобрать экран за пять минут

Собрать страницу — половина навыка. Вторая половина — открыть готовую и назвать, что в ней не так. Без этого невозможно ни исправить свою работу, ни объяснить правку заказчику, ни принять чужой макет. Пять вопросов ниже работают и на своей странице, и на чужой, и на скриншоте в чате.

1. Что здесь главное? Прищурьтесь до половины. Осталось одно крупное пятно — хорошо; всё расплылось в ровный текст — иерархии нет.
2. Куда глаз смотрит первым и куда вторым? Если оба раза в случайные места, человек не понимает, с чего начать.
3. Где заканчивается одна мысль? Одинаковые промежутки превращают экран в один абзац: группы не собираются.
4. Что приходится читать дважды? [Длинная строка](word:Длина строки), бледный текст и мелкий шрифт ощущаются одинаково — «тяжело», хотя лечатся по-разному.
5. Легко ли попасть в то, что нужно нажать? Мелкая цель, неотличимая от текста, без реакции на наведение — человек промахивается или не догадывается, что это кнопка.

Практика — в модуле «Разбери экран»: пять вопросов на карточке вебинара (11.1), длинная строка, слипшиеся блоки, раскладка на телефоне, контраст и размер цели и проект: починить страницу целиком.

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

Как этому учиться

1. Насмотренность. Раз в неделю разбирайте три сайта по шести вопросам: что здесь главное, куда смотрит глаз первым, сколько цветов, где воздух, как это на телефоне, что я могу повторить.
2. Копировать, а не вдохновляться. Сделайте свою страницу точным повтором чужой. Не «по мотивам» — повторите. Это самый быстрый способ набрать навык.
3. Сначала чёрно-белый макет. Если структура читается без цвета и картинок — цвет её усилит. Если не читается — никакой градиент не спасёт.
4. Ограничения на себя. Один акцент, два размера шрифта на блок, шаг сетки 8 px, один радиус.
5. Проверять замером, а не глазом. Контраст, ширина на 390 px, сколько блоков попадает в первый экран.
6. Смотреть на людей. Не спрашивать «нравится?», а смотреть, куда они нажали и что не нашли.

План на 30 дней

1. Неделя 1. Структура. Соберите страницу без цвета: заголовок, текст, три карточки, кнопка. Добейтесь, чтобы главное было видно при прищуре.
2. Неделя 2. Воздух. Введите шкалу 8 / 16 / 32 / 48 и уберите все рамки, которые заменяются расстоянием.
3. Неделя 3. Цвет. Соберите палитру из пяти ролей и проверьте пропорцию 60-30-10. Убедитесь, что акцент один.
4. Неделя 4. Читаемость и состояния. Проверьте контраст по цифрам, длину строки, hover и focus у кнопок. Покажите страницу человеку и посмотрите, где он застревает.
5. В конце. Переделайте свою же первую страницу — не начните новую, а переделайте старую. Разница «до/после» и есть навык.

Что дальше

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

Следующий модуль — «Законы восприятия»: восемь уроков о том, почему эти правила работают. Там есть задания на группировку (гештальт), размер цели (закон Фиттса), число вариантов (закон Хика), привычные места (закон Якоба), дробление длинного (закон Миллера) и движение группой (общая судьба), а заканчивается модуль проектом «экран, который ведёт за руку» и разбором экрана по законам.

Дальше — «Типографика и сетка»: шесть уроков про технику текста и раскладки. Там разобрано то, чего не видно на скриншотах: кегль и межстрочный интервал (урок 10.1), длина строки, шкала размеров, сетка на grid и адаптивность, а заканчивается модуль проектом «страница, которую приятно читать».

И последний шаг — «Разбери экран: что не так и как починить»: шесть уроков не про «собери», а про «заметь». Каждый начинается с готовой, но плохой страницы: пять вопросов к любому экрану, длинная строка, слипшиеся блоки, колонки на телефоне, контраст и размер цели и проект, где надо починить всё сразу. Первый урок открыт без подписки.

Если вопрос шире — «куда расти» — читайте «Куда расти дальше: уровни и треки» и «Как выбрать направление». А если интересно, что ещё можно собрать руками, — «Персонажи и игры: что дальше».

Слова из этой статьи — в словаре программиста: иерархия, контраст, палитра, насыщенность, сетка, отступ, аффорданс, гештальт, [закон Фиттса](word:Закон Фиттса), [закон Хика](word:Закон Хика), [закон Якоба](word:Закон Якоба), [когнитивная нагрузка](word:Когнитивная нагрузка), типографика, кегль, [межстрочный интервал](word:Межстрочный интервал), [длина строки](word:Длина строки), брейкпоинт, юзабилити, скринридер и [тепловая карта](word:Тепловая карта).

Другие статьи раздела

• Что делать после курса — Курс пройден, уроки закрыты — и наступает самый неудобный вопрос: «и что теперь?» Ниже честный план на год: что сделать в первые три месяца, что добрать к полугоду и как выбрать одну нишу, чтобы не учиться бесконечно.
• Куда расти дальше — Разработка — не лестница с одной вершиной, а дерево: с любой ветки видно несколько следующих. Разбираем, что меняется по мере роста, какие есть пути кроме «стать старшим разработчиком» и как выбрать направление, если пока непонятно.
• Как это работает в жизни — В курсе код живёт в песочнице: написали строку — сразу видите результат. В жизни у программы есть место — файл на диске, папка проекта, сервер и адрес в интернете. Разница не в языке и не в сложности кода, а в окружении. Ниже — карта этого окружения, честные предупреждения, куда новичку лезть не нужно, и закон о персональных данных простыми словами.
• Персонажи и игры — Персонаж в игре — это картинка, место на сцене и число, которое меняется при нажатии. Всё остальное — надстройки. Разбираем, что уже есть в курсе, чего пока нет, где заканчиваются интерфейсы и начинается геймдев, и что делать в первые тридцать дней.