Сколько цветов и шрифтов использовать, чтобы сайт не выглядел дёшево

Если вы смотрите на свой сайт и чувствуете, что чего-то „слишком много”, но не можете понять, чего именно, — почти всегда дело в количестве смешанных цветов и шрифтов. Это самая частая причина дешёвого, перегруженного вида, и хорошая новость в том, что её же проще всего исправить.

Чтобы решить это, „вкус” не нужен. Нужно одно простое правило и дисциплина применять его везде. В этой статье я дам вам точное правило, которым пользуются профессиональные дизайнеры: сколько цветов, сколько шрифтов, как выбрать сочетающиеся и быстрый двухминутный тест перед публикацией. Никакой лишней теории — только то, что применимо уже сегодня.

Короткое правило: 2-3 цвета, максимум 2 шрифта

Если из всей статьи вы запомните одно, пусть это будет вот что: опрятный сайт использует 2-3 цвета и не более 2 семейств шрифтов. Всё.

По цветам на практике:

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

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

Почему сайт в итоге выглядит дёшево

Сайт выглядит дёшево не потому, что цвета „уродливые”, а потому, что ничто не имеет приоритета. Когда весь текст цветной, ничто не выделяется. Когда есть три-четыре ярких акцента, глаз не знает, куда смотреть, и всё будто кричит одновременно.

То же со шрифтами. У каждого шрифта своя „личность”. Поставьте три-четыре на одной странице — и это как четыре человека говорят разом, каждый в своём тоне. Мозг читателя чувствует беспорядок, даже если не может его назвать.

Секрет сайтов, которые выглядят дорого, обратный: много спокойствия (нейтральные тона, воздух) и одно-единственное место, где случается „цвет”. Контраст работает, только когда он редкий.

Как выбрать реально сочетающиеся цвета

Не угадывайте из головы. Отталкивайтесь от того, что уже есть, — логотип, продукт, фирменное фото — и возьмите акцентный цвет оттуда.

Задайте конкретные правила:

• Нейтральные делают большую часть работы: светлый фон, тёмный текст. Они занимают большую часть страницы.
• Акцент появляется редко и всегда в одной роли: кнопки, ссылки, пара деталей. Не разбрасывайте его повсюду.
• Хотите больше разнообразия — используйте оттенки одного цвета (светлее / темнее), а не новые цвета.

Старый надёжный ориентир — 60-30-10: примерно 60% доминирующего нейтрального, 30% более сдержанного второго цвета, 10% акцента. Не меряйте линейкой — держите идею: акцент используется меньше всего, именно поэтому он и выделяется.

Как выбрать шрифты и не ошибиться

Самый безопасный выбор для того, кто не уверен во вкусе: один хорошо подобранный шрифт в разных начертаниях. Заголовки жирные и крупные, основной текст спокойный и обычный. Это уже даёт иерархию без всякого риска.

Если хотите два шрифта, сделайте их явно разными, а не смутно похожими — например, шрифт с „засечками” (serif) для заголовков и чистый гротеск (sans-serif) для текста. Два похожих шрифта выглядят как ошибка, а не как выбор.

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

Двухминутный тест перед публикацией

Перед тем как выложить сайт, сделайте быструю проверку:

• Посчитайте видимые цвета на одной странице. Больше трёх (не считая оттенков нейтрального)? Уберите лишнее.
• Посчитайте шрифты. Больше двух? Уберите один.
• Сделайте скриншот и переведите в чёрно-белый (или прищурьтесь). Если по-прежнему понятно, что важно, а что нет, — иерархия здоровая. Если всё выглядит одинаково „громко”, не хватает контраста в размерах.
• Проверьте, что главная кнопка действия везде одного цвета. Если она красная на одной странице и зелёная на другой, читатель так и не поймёт, куда нажимать.

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

В MPO Web Studio мы работаем именно по этому принципу: сначала делаем вам бесплатное демо сайта с уже аккуратно собранной палитрой и шрифтами, чтобы вы увидели результат до того, как за что-либо заплатите. Работаем удалённо, по всей стране, с прозрачными ценами. Хотите честное мнение о вашем нынешнем сайте — напишите нам в WhatsApp, коротко скажем, что стоит убрать.