К разделу «Дизайн»

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

Общие принципы

Контрастность

Фон должен обеспечивать достаточный контраст с основным контентом. Рекомендуемое соотношение контраста для текста - не менее 4.5:1 для обычного текста и 3:1 для крупного текста.

#000000
#121212

Чистый черный (#000000) с белым текстом может вызывать усталость глаз, лучше использовать очень темные оттенки (#121212).

Нейтральность

Фон не должен перетягивать внимание на себя. В большинстве случаев он должен оставаться на втором плане, подчеркивая основной контент.

#FFFFFF
#F5F5F5

Светлые нейтральные фоны (#FFFFFF, #F5F5F5) хорошо подходят для текстового контента.

Единство стиля

Фон должен соответствовать общей стилистике проекта и корпоративному стилю (если таковой имеется).

Адаптивность

Фон должен корректно отображаться на всех типах устройств и разрешениях экрана.

Требования к веб-сайтам

Рекомендации по цветам

  • Для текстовых страниц предпочтительны светлые нейтральные фоны (#FFFFFF, #F5F5F5, #FAFAFA)
  • Темные фоны допустимы для специализированных сайтов, но требуют особого подхода к типографике
  • Избегайте чистого черного (#000000) в качестве фона - лучше использовать очень темные оттенки (#121212, #1A1A1A)

Градиенты и текстуры

Хороший пример: Утонченные, едва заметные градиенты или текстуры, которые не мешают чтению.
Плохой пример: Яркие, контрастные градиенты или агрессивные текстуры, которые отвлекают от контента.

Фоновые изображения

Тип Рекомендации Примеры
Полноэкранные Используйте с осторожностью, убедитесь, что текст остается читаемым Наложение полупрозрачного затемнения, размытие
Паттерны Мелкие, ненавязчивые узоры с низкой контрастностью Точки, линии, геометрические фигуры
Фотографии Высокое качество, релевантность содержанию, минимализм Размытые городские пейзажи, природа

Примеры правильных и неправильных фоновых изображений

Хорошо: Размытый фон
Хорошо: Ненавязчивая текстура
Хорошо: Простой паттерн
Плохо: Яркие цвета
Плохо: Слишком детализировано
Плохо: Конфликт с текстом
Пример хорошего фона

Для технической документации:

#FAFAFA

Цвет текста: #333333 (темно-серый)
Акцентный цвет: #1565C0 (синий)

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

Для маркетингового сайта:

Градиент: #FFF → #F5F5F5

Секции с продуктами могут иметь чередующиеся очень светлые фоны (#FFF и #F9F9F9)

Пример плохого фона

Ошибки:

Градиент: красный → синий
#000000
  • Яркие, контрастные градиенты (например, от красного к синему)
  • Фоновые изображения с мелкими деталями, которые мешают читать текст
  • Чистый черный фон (#000000) с белым текстом - вызывает усталость глаз
  • Анимированные фоны, которые отвлекают внимание

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