«Так» і «Ні»: застосування прозорості у веб-дизайні

28

Від автора: експериментуючи з прозорістю, можна відмінно розширити свій дизайнерський репертуар. Як і інші ефекти, застосовуйте цей по чуть-чуть і тестуйте дизайн в безлічі навколишніх середовищ, переконуючись, що він буде працювати і стане виглядати саме так, як вам потрібно.

Веб-дизайн з прозорістю може виявитися прекрасним, і в той же час мати підводні камені. Прозорість – це ефект, створюваний, коли кольорова область, текст або зображення «стоншується», або як ніби «промокає», так що колір розбавляється і проявляється те, що приховано під ним.

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

Однак при використанні прозорості дизайнеру слід бути обережним. Ефект може виявитися складним для сприйняття, і проблема тут – читаність тексту. Крім того, прозорі блоки і текст на неправильних рівнях можуть відволікати від загальної ідеї.

Далі слід набір «так» і «ні» – своєрідних «за» і «проти» – з прикладами сайтів, де чудово застосовується прозорість.

«Так»: застосування прозорості для створення контрасту

Перевага №1 прозорості використання як дизайнерського прийому – створення контрасту. Ефект дає дизайнерові можливість ввести фокусну точку з колірним імпульсом, великим текстом поверх зображення або об’ємний мінливий кольоровий екран.

Прозорість також можна застосовувати для виділення тексту на такому тлі, який нездатний показати його найкращим чином.

Особливо важливо при роботі з прозорістю обміркувати контраст. Прозорість буде добре працювати тільки з зручними для читання зображенням (або фоном) та текстом. При обмірковуванні цього ефекту запитайте себе: чи Стане таким чином текст/зображення більш зрозумілим для користувачів?

«Ні»: перекриття істотних деталей зображення

Прозорість не повинна закривати ті частини фону або зображення, які важливі для передачі основної ідеї. При розміщенні кордонів прозорості чітко усвідомлювати, що «загубиться».

«Так»: використання різних рівнів прозорості

Не існує ідеального рівня прозорості. Для деяких проектів відмінно підходить прозорість у 80 відсотків; для інших краще всього буде 15 відсотків. Для кожного проекту «пограйте» з різними рівнями прозорості.

«Ні»: думкам про те, що прозорість зробить текст читабельним

Одне лише використання прозорого блоку тексту не зробить його легким для читання автоматично. Продумайте контраст – як щодо прозорого блоку до тексту, так і фонового зображення до прозорої рамці.

Застосовуючи ефект до зображення, кольоровим блокам або тексту, життєво важливо обміркувати читаність слів. Пам’ятайте про те, що ваше послання не буде передано, якщо ефекти дизайну зроблять текст нерозбірливим.

«Так»: використання прозорості в невеликих областях

Прозорість призначена не тільки для основної частини вашого сайту. Цей ефект відмінно виглядає в маленьких просторах.

Подумайте про використання його для показу інструментів навігації або в якості ефекту проведення мишею стосовно до кнопок і елементів клацання. Просто намагайтеся не занадто захопитися застосуванням прозорості. Виберіть елемент і стиль прозорості, і дотримуйтеся їх при розробці всього дизайну сайту.

«Ні»: розміщення прозорості поверх сильно контрастують зображень

З міркувань зручності читання краще всього уникати використання прозорості поверх тих елементів, які вже містять дуже контрастні елементи – подумайте про застосування зон чорного і білого кольорів, протилежних один одного на колірному колі.

Використання прозорості поверх елементів такого типу, за винятком справді ненасиченою, може надати на ваш дизайн негативний вплив, тому що важко створити правильний ефект у всіх областях фону. Замість цього застосуйте вікно-врізку (плашки).

«Так»: застосування прозорості як мистецтва

Прозорість – ефект не вторинний по значущості. З його допомогою можна створити домінантне зображення для свого сайту.

Велика прозора область може виявитися чудовим способом створення контрасту, наголоси і візуальної інтриги.

«Ні»: застосування прозорості в якості прикраси

Прозорість – не той ефект, який можна додати потім, якщо дизайн раптом здасться вам нудним. Його застосування в якості прикраси – найвірніший спосіб опинитися в дизайнерському жалюгідному стані.

Використання прозорості має бути сплановано і обдумано заздалегідь. Це не такий простий ефект, як виділення шрифту і, будучи неякісно зроблених, виглядає «сиро» і непрофесійно.

«Так»: застосування прозорості у фоні

Прозорість – не тільки для елементів переднього плану дизайну, цей ефект також застосуємо до фонових зображень. Найкращі прозорі елементи – тонкі, ледь помітні.

Деякі прозорі елементи можуть лежати між шарами зображення. На сайті Тоні Честера (Tony Chester) для створення багатовимірного дизайну, наприклад, використовується чудовий набір шаруватих технік із застосуванням прозорості.

«Ні»: одночасного використання занадто великої кількості ефектів прозорості

Обмежте вживання в одному проекті ефектів прозорості різних типів. Прозорість повинна створювати розмежування, контрастність і візуальний інтерес. Введення надто сильного розмежування може вести користувачів в бік.

«Так»: застосування прозорості зі статичними та/або чергуються зображеннями

Застосування прозорості не обмежується статичним дизайном або проектом, що складається з однієї сторінки. Вона також працює з різними зображеннями і фонами. Використовуйте її і з тим, і з іншим.

Створення прозорості для чергуються зображень може виявитися одним з складних, але водночас самих вражаючих методів застосування цього ефекту. Ретельно обміркуйте застосування множинних фонових зображень. Підберіть зображення, що мають однаковий колір і схему контрастності з тим, щоб одна і та ж прозора деталь працювала, поки рухаються фонові зображення позаду неї.

Приділіть увагу тому, щоб прозорість підходила до кожного зображення: для підтримки інтеграції зображень, створення читаного фото — або іншого фону і тексту, і вироблення візуальної зв’язаності.

Висновок

Експерименти з прозорістю – відмінний спосіб розширити свій дизайнерський репертуар. Як безліч інших ефектів, застосовуйте цю техніку з обережністю і тестуйте дизайн в різних середовищах з тим, щоб гарантувати його роботу і хороший вид – саме те, що ви і мали намір отримати.

Найбільш складне завдання – створення такої прозорості, коли текст залишається читабельним при використанні взаємозамінних зображень, і гарантується те, що прозорий елемент не закриє чого не слід.

Експериментуйте з різними рівнями і типами застосування прозорості – з зображеннями, з фонами, в якості ефекту проведення мишею – щоб визначити, що краще всього працює для кожного проекту.