wascade Голосов: 0 Адрес блога: http://wascade.blogspot.com/ Добавлен: 2013-11-10 21:46:47

Контраст у веб дизайні

2013-09-26 22:21:00 (читать в оригинале)

Контраст у веб дизайні

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


Контраст впливає на сприйнятливість

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

Контраст - одна з проблем сучасного веб дизайну. Багато починаючі веб дизайнери не надають йому особливого значення і створюють сайти, елементи яких не мають розділений контраст, що в кінцевому підсумку призводить до поганій сприйнятливості дизайну в цілому.


Як правильно використовувати контраст

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

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


Приклад недостатнього контрасту

На прикладі розглянемо дизайн сайту http://www.getinspired.at. Дизайн сайту має кілька великих проблем.

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

Використання тексту сірого кольору на сірому тлі вмісту, та ще й у сукупності з сірим фоном сторінці не дуже хороша ідея. У підсумку виходить, що найбільш значущим елементом сторінки є фірмовий банер Get FireFox. У цьому випадку ймовірність того, що відвідувачі зайдуть на сайт FireFox і скачають однойменний браузер набагато вище, ніж вірогідність того, що вони скористаються послугами веб дизайнера Juergen Lang :)

Однак при внесення невеликих змін в контраст, сторінка дійсно може виглядати набагато привабливіше.

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


Правила контрасту

1. Області високого контрасту більш привабливі, ніж елементи низького контрасту. Насправді важливі елементи можна виділити і за допомогою низького контрасту. Наприклад, якщо всі елементи сторінки будуть високого контрасту, а якийсь блок - низького, безумовно, увагу буде звернено саме на нього.
2. Різка зміна контрастів приваблює. Різкий змін контрасту з низького на високий виглядає досить оригінально. Це ж стосується і використання тонких кордонів і ліній замість товстих. Чим товще кордону, тим більше інтервал між елементами, а значить, роздільник втрачає свою ясність.
3. Контрасту можна домогтися, використовуючи тону і кольору. Зрозуміло, якщо помістити на помаранчевий фон елемент блакитного тони, то він буде помітніше, ніж, якщо на фон помістити елемент, близький за колірною гамою до тла.
4. Динаміка приваблює. Так вже влаштовано людське зір, що найбільшої уваги можна добитися, використовуючи динаміку, руху на веб сторінці. Це не обов'язково може бути анімація.

Вимірювання контрасту Щоб виміряти рівень контрасту необхідно порівняти блиск/яскравість переднього плану і фону. Чим більше різниця, тим вище контраст. Використання чорного кольору на білому є найбільш оптимальним для зручного читання тексту. У другому прикладі жовтий колір використовується на сірому тлі, що є поганою ідеєю, так як досить важко розрізнити, що ж все-таки написано в меню. Жовтий колір не додає контрасту, а навпаки, поглинає його. При використанні легкого фону, також можна домогтися максимального контрасту. Використання інвертованого виділення також є гарною ідеєю, але тільки в тому випадку, якщо кольори підібрані відповідним чином. Наприклад, той же жовтий колір в сукупності з сірим виглядає досить погано. А ось наприклад інвертувати чорний і білий колір - чудова ідея. З вами був Greed.