Текстуры, иллюстрации или просто цветные заливки на заднем плане помогают передать настроение, акцентировать внимание на контенте, а иногда — наделить его дополнительным смыслом. Разбираемся, как правильно выбирать фон для дизайн-макетов в разных ситуациях.
Чаще всего поверх фона размещают текст, иконки и фотографии. Чтобы элементы были хорошо видны, между ними и фоном важно обеспечить достаточный контраст — разницу, которая может выражаться в яркости, насыщенности или оттенке цвета.
Яркость. Хороший контраст будет у светлого текста на темном фоне и наоборот. Но важно учесть, что такое сочетание подойдет не всегда. Так как белый имеет 100% яркость, а черный — 0%, глаза быстро устают. Чтобы этого избежать, можно заменить черный на темно-серый.
Цвет. Если вам хочется цветной фон, можно воспользоваться цветовым кругом. Цвета, расположенные напротив друг друга или образующие равносторонний треугольник, дадут достаточный контраст. А оттенки, расположенные рядом, будут обладать малым контрастом.
Однако у любого оттенка цвета также есть яркость и насыщенность. Красный и фиолетовый смотрятся хуже еще и потому, что оба достаточно темные — как если бы у нас был темно-серый текст на черном фоне. А в примере справа оттенки контрастируют не только по самому цвету, но и по яркости, поэтому читать легче.
Также важно учитывать, что разные цвета создают разное настроение. Красный, например, может ассоциироваться с энергией или агрессией, а синий часто связывают со спокойствием и умиротворением. Слишком яркие и кислотные цвета могут затруднять чтение больших объемов текста. Если планируете размещать много текста, лучше отдать предпочтение более спокойным оттенкам.
Градиент. Плавный переход от одного цвета к другому можно использовать в качестве фона, чтобы сделать дизайн интереснее. Выбирайте цвета, которые хорошо сочетаются между собой и создают достаточный контраст с текстом.
Например, градиент от темно-синего к фиолетовому будет смотреться лучше, чем градиент от красного к зеленому. Красный и зеленый — комплементарные цвета, расположенные на цветовом круге напротив. Сами по себе они хорошо сочетаются, но при смешении комплементарных цветов выходит серый оттенок, который делает градиент «грязным». Необязательно заучивать такие правила, можно найти хорошее решение методом проб и ошибок: варьировать цвета и смотреть, что больше нравится.
Не делайте градиент слишком контрастным по яркости. Иначе одна часть текста будет читаться хуже, чем другая. Также не используйте слишком много различных оттенков в градиенте. Лучше всего работают плавные переходы между близкими оттенками одного-двух цветов.
В качестве фона могут служить любые картинки, всё зависит от задач и контекста.
Фотографии. Могут смотреться впечатляюще и задавать атмосферу всему макету. Но важно выбирать фото, которые не будут отвлекать от основного контента. Лучше всего подходят изображения с неброским, размытым фоном и без мелких деталей — например, фото природы или архитектуры. Избегайте фотографий с большим количеством объектов, яркими цветами и контрастными элементами. Убедитесь, что текст хорошо читается поверх выбранного фото.
Иллюстрации. Часто имеют меньшую детализацию по сравнению с фотографиями, поэтому хорошо подходят для фона. Выбирайте иллюстрации с ограниченной цветовой палитрой, простыми формами и достаточным свободным пространством для размещения текста. Изображения с крупными элементами без деталей будут меньше отвлекать от содержания.
Паттерны. Повторяющиеся узоры и орнаменты могут состоять из геометрических фигур, линий, цветов или стилизованных графических элементов. Для фона подойдут простые, неброские узоры с крупными элементами, монохромные, не слишком контрастные и яркие. Следует избегать слишком мелких и замысловатых узоров. Следите, чтобы текст не сливался с фоном и был читаемым.
Текстуры. Это изображения, имитирующие различные поверхности: дерево, металл, ткань,бумагу. Они добавляют глубину и реализм в дизайн, а также могут создавать определенное настроение и стиль. Для фона лучше использовать неброские текстуры без резких перепадов цвета и контраста. Избегайте слишком зернистых, неоднородных поверхностей, они могут спорить с текстом и перетягивать на себя внимание.
Помните, что фоновое изображение должно помогать восприятию контента, а не соперничать с ним за внимание. Для достижения лучшего эффекта иногда стоит вручную отредактировать картинку для фона. Например, добавить размытие, если оно уместно.
Также хороший вариант — использовать полупрозрачные плашки поверх изображения.
Можно отрегулировать прозрачность и контраст изображения, чтобы добиться оптимального баланса между фоном и текстом.
Если вам трудно работать с графическими редакторами, используйте нейросети для обработки фото, с ними можно добиться интересных эффектов.
Интерфейсы должны быть не только визуально красивыми, но и удобными для просмотра на разных устройствах, быстро загружаться, не отвлекать пользователя от основного контента. Посмотрим, какие решения будут актуальны.
Иллюстрации с частично однотонным фоном. Это классический вариант, который не отвлекает внимание от контента и хорошо смотрится на любых устройствах. На примере ниже в иллюстрацию органично вписано небо белого цвета. Весь текстовый контент, логотип и кнопка по факту размещены на нем. Они максимально хорошо читаются, но одновременно гармонируют с иллюстрацией, и дизайн выглядит нескучным.
Фотографии. Отдавайте предпочтение изображениям с высоким разрешением, но оптимизируйте их для быстрой загрузки. Стоит проверить, как фото выглядит на разных устройствах и при разных разрешениях экрана. Фон частично может обрезаться в мобильной версии, иногда для фотографий это критично. В остальном действуют все те же правила, которые мы рассмотрели — участки фото, на которые будет наложен контент, должны контрастировать с ним и быть однородными.
Градиент. Может стать интересной альтернативой изображению, если вы хотите создать лаконичный дизайн. Градиенты часто используются для создания плавных переходов между разделами сайта или для выделения отдельных элементов. Выбирайте сочетания цветов, которые хорошо работают на экране и не затрудняют чтение текста. CSS позволяет создавать градиенты без использования графических редакторов, что упрощает их внедрение и снижает нагрузку на сайт.
Параллакс. Это эффект анимации, при котором фоновое изображение двигается с одной скоростью, а остальное содержимое страницы с другой. Можно сочетать его с любыми изображениями. Параллакс создает ощущение динамики, но важно использовать его дозированно, чтобы не перегружать страницу. Также важно проверять, насколько корректно такая анимация работает на мобильных устройствах.
В подборке красивых сайтов для вдохновения можно почерпнуть идеи работы с фоном и интересные решения для веб-дизайна.
В презентациях фоновые изображения задают общий стиль и создают визуальную связь между слайдами. Это особенно важно для поддержания единства оформления в длинных презентациях. Выбирая фон, ориентируйтесь на тему выступления, целевую аудиторию и бренд. Рассмотрим несколько стандартных вариантов использования фона в презентациях.
Фон занимает весь слайд. Размещение фонового изображения на весь слайд может стать эффектным дизайнерским приемом, особенно для титульных и завершающих слайдов. Выбирайте яркие запоминающиеся картинки: фото, иллюстрации, градиенты или паттерны.
Фон на половину слайда. Разделение слайда на две части, одна из которых занята фоновым изображением, а вторая — текстом, может стать интересным композиционным решением. Этот прием позволяет создать визуальную иерархию и привлечь внимание к ключевым идеям. Размещайте заголовок на части с фоном, а основной текст и графики — на однотонной части.
Маскирование. Фон помогает сохранить единый стиль для всех слайдов. Но чтобы презентация не казалась однообразной, можно использовать фрагменты фона как часть контента. Например, с помощью маски поменять местами цвет фона и цвет текста.
В рекламных баннерах и публикациях в соцсетях фон играет особенно важную роль, он должен мгновенно привлекать внимание и передавать суть рекламного предложения.
Чтобы баннер выделялся, можно использовать контрастные цветовые сочетания, необычные текстуры, 3D-графику и фото.
Например, в Instagram* можно использовать несколько связанных изображений с одинаковым фоном для создания визуальной истории. Когда пользователь листает такие квадратики, они плавно перетекают друг в друга. Такой прием помогает удержать внимание пользователя и побуждает его просмотреть всю серию картинок, а не остановиться на первой.
Мы рассмотрели основные правила выбора картинок. Подбирать фотоизображения удобно на одном из бесплатных стоков, а в еще одной нашей подборке можно найти иллюстрации и готовые градиенты. Экспериментируйте, и многое станет понятно интуитивно. Если вам хорошо виден контент на макете, а чтение текста не вызывает проблем, то и вашей аудитории будет легко воспринять информацию.
Делимся новостями и свежими статьями, рассказываем о новинках сервиса
Искренние письма о работе и жизни. Свежие статьи из блога. Эксклюзивные кейсы и интервью с экспертами диджитала.
