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

Добавьте контраста

Текст должен легко читаться и быть хорошо различимым на фото. Поэтому для изображений с темным фоном выбираем светлый цвет шрифта, и наоборот. Контрастным может быть также размер и начертание текста. На примере ниже видно, что на изображении с крупными объектами хорошо смотрится тонкий шрифт.

Интегрируйте текст в изображение

Можно достичь эффектного результата, если сделать текст частью самого изображения, как на примере ниже. Этот совет можно воплотить не всегда, и не в каждом проекте это требуется. Прием хорош, если нужно «вписать» в картинку с одним доминирующим элементом короткое слово, надпись или название бренда.

Учитывайте логику изображения

Это базовое правило работы с изображениями. Ни в коем случае не размещайте текст на ключевых элементах картинки (лица людей, основное действие, рекламируемый продукт).

Универсальный вариант — размещать текстовые элементы там, куда направлен взгляд человека на фото, повернут его корпус или направлена рука. Тогда пользователи будут плавно переходить от картинки к тексту.

Размытие картинки

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

Разместите текст в поле

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

В качестве подложки подойдет простая геометрическая фигура — прямоугольник или круг, например. Цвет фона и надписи должны быть контрастными по отношению друг к другу, и одновременно хорошо выделяться на фотографии.

Вынесите текст на фон

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

Больше, значит лучше

Чтобы текст смотрелся на фото лучше и был более заметным, можно поэкспериментировать и увеличить или размер шрифта, или само изображение. С одной стороны, крупная надпись хорошо привлекает внимание. С другой — масштабирование изображения поможет выделить на нем 1-2 крупных объекта, которые будет проще совместить с текстом.

Раскрасьте текст

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

Используйте полупрозрачное покрытие

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

Смысл приема в том, чтобы верхний цветовой слой был прозрачным настолько, чтобы пользователь понимал, что изображено на картинке, но одновременно мог легко прочитать текст. Экспериментируйте, используйте разные цвета и прозрачность, чтобы найти идеальный баланс. Начать можно с наложения цветов, используемых в айдентике продвигаемого бренда.

Выйдите за рамки фона

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

1. Увеличить основную текстовую надпись (слоган, название бренда или проекта, призыв к действию).
2. Сжать фоновое изображение.

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

Заключение

Перечисленные в статье приемы отлично подойдут начинающим UX/UI-дизайнерам и их более опытным коллегам для развития навыка совмещения фотографий с текстом. Освоив их, вы сможете в дальнейшем испробовать еще немало более сложных приемов, позволяющих интересно и гармонично совместить изображения с текстовыми надписями.