Лучшие статьи и кейсы стартапов
Включить уведомления
Дадим сигнал, когда появится
что-то суперстоящее.
Спасибо, не надо
Главное Свежее   Проекты
Рекомендуем
Продвинуть свой проект
955 2 В избр. Сохранено
Авторизуйтесь
Вход с паролем

Модульная верстка: текст поверх фотографий

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

Павел Моисеенко — системный аналитик проектов reEnter и Releadgion.

Хотим поделиться с вами его мини-исследованием, как правильно разместить текст поверх фотографий.

Формат «картинка + текст поверх» за несколько лет стал базовым в дизайне СМИ. Формат автоматизирован — текст и картинки автоматически подтягиваются из базы, а поверх картинки кладется полупрозрачный черный слой.

Градиенты и затемнения — это всегда компромисс между сохранением качества картинки и читаемости текста. Картинки запороты, а текст на грани читаемости. Ничего хорошего:

b_570fa5a545e89.jpg

Арзамас

Батарея одинаковых серых модулей заполонила интернет:

b_570fa5f88f7c9.jpgМедуза до редизайна, Ирк.ру, Охмаймастер

Формат плохо подходит для иллюстраций с контрастными мелкими деталями:

b_570fa6248aa3a.jpgАфиша-город

Самые сильные градиенты не спасают:

b_570fa649f3a3f.jpgАфиша-воздух

Часто в модуле выводятся данные о просмотрах и комментариях. Метаданные — это мусор:

b_570fa6917076c.jpg

Иконка видео громоздится на заголовок, просмотры и комментарии влезают на описание. Охмаймастер

Формат не нов:

b_570fa6c1656d1.jpgЧтобы название газеты и информация о выпуске читалась участок под фото высветлили. The Oregonian, выпуск 15 августа 1945

Редактор не контролирует результат: тексты и фотографии лягут друг на друга как получится. Всю суть отражает картинка из интернета:

b_570fa6f1a9e84.jpg

В хорошем модуле иллюстрации и текст согласованы друг с другом. Чтобы добиться согласованности есть три пути.

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

b_570fa8a968593.jpgОбтравленные иллюстрации на нейтральном фоне выглядят опрятно. Лук эт ми и Виллэдж

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

b_570fa8a9b9d09.jpgЛук эт ми и Вондерзин

Оба пути предполагают ручную работу. Редактор с умом должен подобрать иллюстрации. Не каждая иллюстрация подойдет — это дополнительно усложняет работу.

3. Отделить текст от картинки. Это бронебойная защита. Текст читается прекрасно, картинку видно целиком, выглядит олдскульно:

b_570fa8aa0e804.jpg

+3
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Подбираем рекоммендации...
Комментарии
Первые Новые Популярные
Иван Козлов
Подчастую на чёрном фоне смотрится отлично. Не соглашусь.
Ответить
Gordon Shamway
правильно пишут, за случай когда в блоке новостей притемненые картинки с текстом поверху дизайнеру надо отрывать яйца. был эпизод, дизайнер в макете изобралил картинки с церемонии оскара, "богатые", солидные, темные. заказчик был в восторге. потом стал заряжать свои. с корпоративов. и к удивлению затемнение и добавление градиентов не прибавило благородства а лишь подчеркнуло фекальность.
Ответить
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать