Дизайн шрифтів та кольору

Дизайн шрифту

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

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

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

Дизайн графічного наповнення веб-сторінки

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

1. Горизонтальна пряма лінія визначає орієнтацію зображення. Її око вловлює найперше.

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

3. Величина (відносний найбільший розмір). На дуже ранній стадії аналізу мозок виділяє фігури найбільшого порівняно з іншими об’єктами розміру. Величина завжди сприймається лише як відношення до інших об’єктів зображення і не заважає упізнанню форми.

4. Симетрія лежить в основі всіх символів досконалості.

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

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

7. Кут, трикутник, квадрат. Найпомітнішим елементом є трикутник вершиною вгору, далі — трикутник в інших положеннях, квадрат, прямокутник, круг та багатогранник. Трикутник — особливий об’єкт, він має чітку спрямованість та внутрішню динаміку. Зазвичай у веб-дизайні його використовують для позначення напрямку руху, стрілки, маркера списку чи кнопки. Прямокутник відіграє особливу роль у комп’ютерному дизайні взагалі та у веб-дизайні зокрема. Цю фігуру використовують найчастіше: майже всі об’єкти екрана мають прямокутну форму — вікна, блоки тексту, зображення.

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

9. Контур. Лінія — це найчастіше межа між двома об’єктами, край, тінь. Якщо лінія контуру пряма, це викликає підвищену увагу. Під час огляду зображення зоровий аналізатор миттєво добудовує лінії, яких бракує, створюючи навіть ілюзію їхньої видимості.

10. Текстура— це зображення різних поверхонь: гладких, шорстких, переплетених.

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

Щодо застосування кольорів у веб-дизайні можна виділити кілька правил.

1. Використовуйте достатню кількість кольорів. Колір може підкреслити важливість деяких елементів, допомогти їх згрупувати або навпаки — розділити.

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

3. Краще, коли тло сторінки є світлим, а текст, відповідно, — темним. Це звичніше і зручніше для очей та мозку. Водночас яскраві кольори незамінні для привертання уваги.

4. Враховуйте поєднання кольорів оформлення сторінки та зображень на ній. Зображення будуть губитись на яскравому тлі.

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

Гармонія кольорів

Емоційна дія кольорів відома багато століть. Червоні тони називають гарячими (вогонь), жовті — теплими (сонячне світло), блакитні — прохолодними (небо). Синій (вечір), фіолетовий (захід сонця) і чорний (ніч) — заспокоюють та пригнічують. Водночас темні насичені кольори несуть у собі силу та загадковість, яка змушує хвилюватись. Помаранчевий колір створює відчуття благополуччя та веселості, має значну стимулюючу дію, але швидко втомлює. Зелений колір — нейтральний, це колір миру і спокою, до нього око найбільш чутливе і сприймає його найперше. Блакитний, так само як і зелений, має заспокійливий ефект, але у значній кількості може пригнічувати. Червоний колір — теплий і дратівний. Білий утворюється від змішування всіх кольорів, він є втіленням чистоти, миру та холоду, а чорний — це відсутність кольору, він викликає занепокоєння. Не варто допускати використання на невеликому просторі надмірно великої кількості кольорів. Дизайнери зазвичай обирають для оформлення сторінки не більше чотирьох, використовуючи кожен із них для розфарбовування кількох елементів. Надмірна яскравість кольору підкреслює дефекти зображення, низька — знижує чутливість до виявлення малих деталей і контрастів. Один і той же колір у різному оточенні може здаватись холодним або теплим, тож розподіл кольорів на групи є досить відносним. Так, яскраво-червоний колір порівняно з багряним буде холодним, а поряд із синім — теплим. Щоб не стомлювалося око відвідувача сайту, необхідно враховувати принципи колірної гармонії. На кольоровому колесі кольори змінюються за годинниковою стрілкою за спектром червоний-оранжевий-жовтий-зелений-блакитний-фіолетовий. Є кілька схем кольорових гармоній: Доповнювальна — беруть два кольори з протилежних частин кольорового колеса (наприклад, червоний та зелений). Коли їх помістити поряд, вони посилюватимуть інтенсивність одне одного, а якщо змішати між собою, то їхня яскравість зменшиться. Це — контрастна гармонія. Аналогова — гармонія кольорів-сусідів на кольоровому колесі. Аналогова гама поєднує близькі тони — жовті (жовтий, жовто-зелений та жовто-оранжевий) чи сині (синій, синьо-фіолетовий та синьо-зелений). Тріада — гармонія рівновіддалених між собою кольорів. Тріадою є основні кольори: червоний, жовтий та синій.