30 Марта 2019

10 советов по использованию шрифтов

Рустам А
Чтобы правильно подать текст, он должен быть прежде всего читабельным

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

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

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

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

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

 2. Сделайте текст частью изображения

Зачастую текст становится, или является, частью изображения, с которым вы работаете. Сделать такое непросто и это может сработать лишь в определенных случаях. Для реализации этой идеи вам нужно простое изображение и слово, с которым вы будете работать, (например, как это получилось у McLaren), или изображение, которое уже сфотографировано с текстом на объекте.

3. Следуйте визуальному потоку

 

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

Ориентируясь на визуальный поток посетителей сайта, выбирайте такие места для текста, которые будут подчеркивать объекты на изображениях.

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

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

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

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

5. Поместите текст в форму

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

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

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

 

 

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

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

7. Играйте по крупному

 

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

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

8. Добавьте цвета

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

9. Используйте цветовую подложку

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

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

10. Будьте проще

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

Источник: designmodo.com
Перевод студии som.media