Девять советов для создания сайтов с текстом на больших фотографиях

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

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

Для того чтобы текст был понят, он должен быть читабельным. Убедитесь, что цвет текста достаточно отличается от фотографии под ним. Если фотография с тёмным фоном, выбирайте белый или другой светлый цвет. Если со светлым фоном — выбирайте тёмные оттенки.

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

Например, на сайте Packdog.com фотография большая, а шрифт текста тонкий и лёгкий. Эти элементы сочетаются, и в то же время в композиции есть контраст.

(packdog.com)

2. Сделайте текст частью композиции

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

(meandmyselfportfolio.co.uk)

3. Следуйте за силовыми линиями фотографий

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

(workdiary.de)

Что касается силовых линий, выбирайте для текста место, в которое смотрит персонаж на фотографии.

4. Размойте изображение

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

(wallmob.com)

5. Поместите текст на однотонный фон

Когда фотографии содержат множество цветов или переходов между тёмными и светлыми цветами, текст на однотонном фоне станет более заметным.

Подберите форму фона в зависимости от фотографии и текста. Затем выберите такой цвет, который достаточно контрастирует с цветом текста.

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

(tradestoneconfections.com)

(fall.tnvacation.com)

6. Добавьте на фон текст

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

(caitlinwicker.com)

7. Используйте крупный шрифт и фотографию

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

(plainmade.com)

8. Используйте оттенки цветов

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

(winshape.org)

9. Придерживайтесь простоты

Используйте простую типографику и не размещайте текст поверх важных элементов фотографии.

(eepsareal.com)