Директор за технологіями компанії Whiteboard Джонатан Катрелл вивчив приклади вдалого розташування тексту поверх фотографій і склав п'ять рекомендацій для дизайнерів.
Digital-агентство Red Collar підготувало для рубрики «Інтерфейси» переклад замітки Шоафа.
Патерн, коли текст ставиться поверх фонового зображення, популярний вже багато років. Він виник задовго до появи веб-дизайну - текст над зображенням здатний забезпечити більшу емоційну привабливість і більш широкий контекст. До недавнього часу зображення повинні були бути меншого розміру через повільне інтернет-з'єднання. У міру зростання швидкостей і стрімкого збільшення дозволу відкриваються можливості у використанні великих зображень в дизайнах.
Дуже важливо ретельно обмірковувати дизайнерські рішення, що застосовуються в цьому паттерне. Ви не можете просто поставити текст поверх будь-якої картинки і очікувати, що вона завжди буде відмінно виглядати.
У цій статті ми обговоримо п'ять основних аспектів в розташуванні тексту над зображенням, що допоможе вам належним чином поєднувати текст і картинки.
1. Контраст за допомогою кольору і яскравості
Обов'язково використовуйте зображення, які мають значний контраст з текстом. Зокрема, використання темних зображень зі світлим текстом або їх затемнення фільтрами або накладенням може бути ефективним способом для забезпечення достатнього контрасту.
Деякі поради для досягнення необхідного розмаїття:
- Якщо ви відразу не можете розрізнити букви, ваш контраст - халтура.
- Контраст не завжди означає протиставлення темного і світлого, додаткові кольори теж можуть забезпечити натуральний контраст.
- Якщо зображення складне і знаходиться повністю в фокусі, використання накладення або редагування зображення будуть найбільш дієвими рішеннями.
У цьому прикладі ми використовуємо WebKit-фільтри для управління контрастом і яскравістю зображення, які ми встановлюємо за допомогою додаткового тега. Фільтр без префікса виглядає так: filter: brightness (40%) contrast (70%).
Читати набагато легше; потрібно CSS-фільтр
ayr.com
geckoboard.com
anodpixels.com
obakkifoundation.org
2. Контраст за допомогою розміру і розташування
Колір - не єдиний спосіб роботи з контрастом зображення по відношенню до тексту. Розмір тексту і його розташування щодо фокусних елементів зображення має велике значення, так як це безпосередньо позначається на читання тексту.
У цьому прикладі вибрано зображення з великою і відносно однорідної областю неба. Це відмінне місце для розташування тексту. Для порівняння, менш читається розміщення заголовка - прямо в центрі зображення, де проходить лінія горизонту.
Поганий приклад - поганий контраст, невірне становище тексту
Хороший контраст, краще розташування
themostnorthernplace.com
eup.volkswagen.no
3. Читаність за допомогою глибини
Виберіть зображення, в якому є глибина композиції. Це дасть тексту більш гладкий фон, що підвищить читаність. Помістіть текст на розфокусувати область зображення, і перевірте, щоб колір тексту адекватно контрастував з основним кольором розфокусувати області.
Це легко робиться простим розташуванням тексту в зонах з меншим фокусом, як на цьому прикладі.
une.ch
gloriasrestaurants.com
atelier-serge-thoraval.com/a>
purplerockscissors.com
4. Вибір об'єкта зображення
Текст на зображенні ефективний тільки тоді, коли ця передбачувана комбінація відмінно поєднується між собою. Приміром, не вибирайте узагальнююче зображення, якщо є більш конкретне зображення, яке більш адекватно передасть ваше повідомлення. При виборі зображення враховуйте його емоційність і буквальний контекст, особливо як вони співвідносяться з тоном повідомлення, яке повинен передати текст.
- Вибирайте зображення, що показують повне пропозицію. Користувач повинен чітко бачити об'єкт зображення і розуміти дію, відображена в зображенні, якщо таке взагалі є.
- Не вибирайте зображення зі слабкими фокусними точками.
- Тримайте в голові значення «зрозумілості» зображення. Якщо зображення більш-менш викликає почуття і менше передає деталі, важкі накладення або фільтри можуть застосовуватися без втрати дієвості зображення.
blood-and-water.animalplanet.com
pixelgrade.com
formula1data.com
5. Фішка з тривимірність
Правило великого пальця: чим менше текст, тим імовірніше він виявиться в Z-позиції.
danielladraper.com
lobagola.com
vivaco.com