Лучшие статьи и кейсы стартапов
Включить уведомления
Дадим сигнал, когда появится
что-то суперстоящее.
Спасибо, не надо
Вопросы Проекты Вакансии
сервис динамического ремаркетинга
Рекомендуем
Продвинуть свой проект
Лучшие проекты за неделю
45
Битрикс24

Битрикс24

www.bitrix24.ru

15
GIFTD

GIFTD

giftd.tech

13
Aword

Aword

Приложение для изучения английских слов

12
Логомашина

Логомашина

logomachine.ru

12
Convead

Convead

convead.ru

11
Devicerra

Devicerra

devicerra.com

11
Eczo.bike

Eczo.bike

www.eczo.bike

11
Flowlu

Flowlu

flowlu.ru

10
Отследить-посылку

Отследить-посылку

отследить-посылку.рф

10
KEPLER LEADS

KEPLER LEADS

keplerleads.com

Показать следующие
Рейтинг проектов
Подписывайтесь на Спарк в Facebook

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

887 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
правильно пишут, за случай когда в блоке новостей притемненые картинки с текстом поверху дизайнеру надо отрывать яйца. был эпизод, дизайнер в макете изобралил картинки с церемонии оскара, "богатые", солидные, темные. заказчик был в восторге. потом стал заряжать свои. с корпоративов. и к удивлению затемнение и добавление градиентов не прибавило благородства а лишь подчеркнуло фекальность.
Ответить
Выбрать файл
Читайте далее
Загружаем…
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать