Фоновое фото, которое не съедает текст
Фон — единственное решение в оформлении, которое одним и тем же файлом может страницу и улучшить, и уничтожить.
Что страница делает с вашим снимком
При загрузке фона происходят три вещи. Картинка перекодируется и ограничивается по весу, так что она никогда не становится причиной медленной страницы. Поверх ложится затемнение — достаточное, чтобы белый текст оставался читаемым. И шаблон переключается на палитру для фотографий: кнопки получают собственную подложку вместо того, чтобы висеть прямо на вашем снимке.
У затемнения есть ползунок, потому что фотографии разные. Ночному кадру его почти не нужно, яркому пляжу нужно много. Двигайте, пока самое неконтрастное слово на странице не станет комфортным для чтения на телефоне на расстоянии вытянутой руки, и оставьте так.
- Берите фотографию с пустой областью: небо, стена, вода, тень. В этой пустоте и будет стоять ваше имя.
- Избегайте лиц. Лицо за текстом конкурирует с текстом и проигрывает, и от этого никому не лучше.
- Предпочитайте собственные снимки. Стоковый градиент говорит о вас меньше, чем отсутствие фона.
- Поставьте точку кадрирования: фон сильнее всего режется на вертикальном экране телефона.
Когда лучше без фона
- Когда страница состоит в основном из ссылок. Шесть кнопок на фотографии читаются как меню, приклеенное к витрине.
- Когда у ссылок уже есть картинки на карточках. Два слоя фотографии дерутся друг с другом.
- Когда единственное имеющееся фото — занятое. Занятый фон всегда хуже, чем ровный цвет шаблона.
- Когда страница должна открываться на плохом мобильном интернете. Даже ограниченный фон — самое тяжёлое на странице.
Шаблоны, которые его ждут
Photo, Showcase и Noir построены вокруг изображений и хорошо несут фон. Whisper и Editorial построены вокруг типографики, и фотография за ними разрушает ровно то, что делает их хорошими. У Aurora уже есть собственный градиент: картинка поверх — третий слой, которого никто не просил.
Надёжнее всего решать глазами. Превью телефона рядом с редактором рисует настоящий шаблон с вашим настоящим содержимым, и разница между идеей и страницей обычно видна с первого взгляда.