В дизайне веб-страниц есть множество спорных моментов. Мы поговорим об одном из них - как правильно совмещать текст и изображение
Наверное, любимыми гарнитурами десять лет назад были системные шрифты и шрифты по умолчанию. Они использовались везде: сайты компаний, визитки, свадебные приглашения. Никаких специальных эффектов, теней, прозрачности. Черный текст, красные заголовки и синие подчеркнутые ссылки. Единственное различие между текстами — полужирный шрифт или курсив. Типографика не рассматривалась как важная часть создания дизайна сайта, как это делается сейчас.
В рамках этой статьи мы рассмотрим лишь расположение текста и изображения на странице.
Текст рядом с изображением
1. Сперва картинка, затем текст
Изображения в первую очередь приковывают наше внимание при посещении сайта. Чтобы текст воспринимался без проблем располагайте его в правильном и понятном порядке: изображение – заголовок – текст.
2. Помните про последовательность
Заголовок нескольких уровней служит сигналом для читателя где заканчивается одна мысль и начинается другая.
Используйте заголовки и интервалы для выделения смысловых блоков. Текст одинаковой величины читать труднее.
Изображения, в свою очередь, так же несут указующую функцию. Крупные изображения выглядят солиднее, а потому их помещают на обложку. Изображения поменьше служат указателями нового блока.
3. С разных сторон
Также, можно располагать текст на одной высоте с изображением.
Не важно, с какой стороны будет текст – справа или слева. Главное, чередуйте подобные блоки в определенном ритме. Читателю будет удобнее воспринимать информацию.
4. Если изображений несколько
Изображения могут рассказать о вас больше, чем текст? Разместите их в формате галереи. Она занимает меньше пространства и несет больше информации. Текст с описанием расположите сверху. Не забывайте про пункт 2 – используйте заголовок.
5. Сноски на изображение
Отсылки на изображение внутри текста превращают чтение в прокручивание страницы в поиске изображения. Располагайте изображение рядом с относящимся к нему по смыслу текстом.
6. Колонки с текстом
Будьте аккуратны с размещением текста в колонки. Чем короче будет текст, тем лучше. Три строки – максимальная длина. Текст длиннее уже не воспринимается читателем и выглядит неаккуратно.
Старайтесь сохранять длину колонок на одинаковом уровне. Это также вносит диссонанс в визуальное оформление.
8. Не перегружайте текст изображениями
Используйте фотографии реального товара, вашей услуги и места ее оказания. Эти фотографии не обязательно должны быть сделаны профессиональным фотографом. Зато они дают представление о том, что ждет читателя или, о чем идет речь в тексте.
Используйте иллюстрации там, где это необходимо. Если можно обойтись без картинки – не публикуйте ее.
Изображения выполняют две функции:
1. Художественная – нужна для декоративных целей. Не все можно передать через фотографии материальных вещей. Такие изображения объясняют абстрактные понятия.
2. Документальная – демонстрирует объект текста. Фотографии продукта, мероприятия, спикера и так далее. Подобные фотографии порой заменяют собой текст.
Текст на изображении
Подобный прием используется в оформлении обложки или первого экрана. На таких информационных блоках находятся призывы к действию и формы обратной связи – кнопки.
Изображение должно отражать тематику страницы или сайта. Текст несет главную смысловую нагрузку. Поэтому, следите за тем, чтобы текст был читаемым. Буквы не терялись на фоне изображения. Поэтому, чаще используют «однородные» изображения без мелких деталей. Монотонные.
1. Контраст с помощью цвета
Очевидно, светлый текст хорошо выделяется на темном фоне. И наоборот.
Чем однороднее изображение, тем проще будет читать текст
Кроме «белый-черный» хорошо сочетаются цвета «красный-белый», «желтый и фиолетовый», «синий-оранжевый»
2. Фильтры и контрастность
Если исходная картинка или фотография слишком светлая, искусственно затемните ее в редакторе или наложите сверху полупрозрачный фильтр.
Не перестарайтесь. Изображение должно быть понятно, а текст читаемым. Найдите золотую середину.
Фон можно выделять не только затемнением. Используйте другие цвета. Монотонные или несколько оттенков. Старайтесь не переборщить.
3. Четкость
Еще одним инструментом, позволяющим выделить текст на картинке является размытие. Вы можете использовать размытие как на всем изображении, так и на той части, где будет располагаться текст (только будьте осторожны. На разных разрешениях текст может находиться на разных частях изображения и съехать туда, где нет размытия)
Этот прием хорошо сочетается с затемнением.
Это лишь обзорный курс по верхушке дизайнерского мастерства. Пренебрежение подобными очевидными вещами ведет к снижению конверсии сайта и уменьшению трафика.
