Рекомендации по визуалу вашего сайта

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

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

Пустое пространство между блоками должно выглядеть как часть композиции, а не как ошибка.

Рекомендуем оставлять между большими блоками суммарно не меньше 80px на компьютере-планшете и 64px на телефоне.

Одинаковые типы блоков должны иметь одинаковые отступы на всех страницах.

Чтобы добавить акцента заголовку, увеличьте под ним отступ, а не только размер шрифта (не нарушая правило из п. 1).

Сочетания блоков влияют на то, как выстраивается страница целиком: какие типы блоков вы выбираете, какой настраиваете для них цвет фона.

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

Не применяйте её подряд на нескольких экранах — это усложняет восприятие.

Если страница кажется тяжёлой при быстром просмотре — упрощайте структуру.

Чередуйте типы блоков, но не используйте 5-6 разных подряд без пауз.

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

Всегда проверяйте страницы на широких экранах — там ошибки композиции видны сильнее.

Читаемый и простой текст поможет пользователям лучше понимать ваш сайт: избегайте сложных формулировок и придерживайтесь правил для визуального улучшения текста.

Используйте заголовки разных размеров, сочетая их логически: заголовок 1 (H1) — единственный и основной на странице, заголовок 2 (H2) — для названий секций и т. п.

Длинные строки ухудшают читаемость. Комфортная длина строки — 50–75 символов с пробелами для компьютера и 30–40 символов для мобильных устройств. Проверить количество символов можно в сервисе text.ru.

Используйте центрирование точечно — для героев и акцентов, а не для всего контента (особенно текстового).

Если есть перечисление — используйте маркированные или нумерованные списки, а также карточки.

Разбивайте длинные секции подзаголовками для облегчения чтения.

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

Выбираем уместный фон, подбираем изображения и иллюстрации.

Применяйте паттерны как акцент, а не как основной фон под текстом.

Если фон перегружен деталями — выносите текст в отдельный блок или затемняйте изображение.

Каждое изображение должно усиливать смысл блока, а не просто заполнять пространство.

Избегайте повторяющихся изображений в соседних блоках — это создаёт ощущение шаблонности.

Для однотипных блоков используйте изображения одинаковых пропорций.

Используйте иконки одного стиля и размера в рамках однотипных блоков всех страниц сайта.

Старайтесь соблюдать баланс: если блок текстовый — разбивайте его, если визуальный — добавляйте пояснение.

Правила для работы с повторяющимися элементами.

Либо строгая сетка, либо осознанная асимметрия — избегайте «случайных» композиций.

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

При помощи кнопок и акцентов можно управлять вниманием пользователя. Это позволит сделать более эффективными целевые действия — CTA (call to action, «купить», «перейти», «подписаться» и т. п.).

На одном экране должна быть одна основная точка действия.

Не смешивайте формы, размеры и типы кнопок без причины.

Если несколько CTA ведут к одному действию — оставьте один.

Выделяйте цветом и размером только то, что действительно важно пользователю.

Цвет должен выделять важное действие, а не быть фоном для всего.

Первый экран и меню блока (шапка) — критически важные зоны страницы, поэтому им стоит уделить особое внимание.

Первый экран должен быстро отвечать на вопрос «о чём этот сайт».

В шапке оставляйте только ключевые разделы — всё остальное переносите в подменю или футер. На одном уровне рекомендуется оставлять не более 7 пунктов меню.