Колір та типографіка у веб-дизайні



Скачати 37.51 Kb.
Дата конвертації09.11.2019
Розмір37.51 Kb.
ТипРеферат
Міністерство освіти і науки України

Національний технічний університет України


«Київський політехнічний інститут імені Ігоря Сікорського»

Видавничо-поліграфічний інститут


Реферат на тему

«Колір та типографіка у веб-дизайні»
з дисципліни «Медійна інженерія 1: Основи медіатехнологій»

Виконали

Студентки 2 курсу групи СТ-71

Алтуніна Анастасія Володимирівна

Гущик Софія Вікторівна

Перевірила:

доц.

Золотухіна Катерина Ігорівна



Київ – 2018

ЗМІСТ



РОЗДІЛ 1. ПОНЯТТЯ КОЛЬОРУ У ВЕБ-ДИЗАЙНІ 3

1.1.Колірне коло (комплементарні, тріадні та аналогові кольори) 3

1.2.Досягнення кольорової виразності веб-продуктів 6

РОЗДІЛ 2. ШРИФТОВЕ ОФОРМЛЕННЯ ВЕБ-ПРОДУКТУ 7

2.1. Основні групи шрифтів у веб-дизайні 7

2.2. Покращення параметрів типографії 9

ВИСНОВКИ 13

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

2.Шрифтове оформлення веб-продукту дозволяє не тільки привернути увагу читача, а й змусити його прочитати представлену інформацію з початку і до кінця. Якщо веб-сторінка містить великий обсяг інформації, необхідно дотримуватися ієрархії, що дозволить читачеві знайти саме те, що йому потрібно за лічені хвилини. 13

3.Створення веб-дизайну сторінки – це трудомістка і клопітлива робота, яка вимагає поєднання як і кольорів, так і різних гарнітур. Щоб досягти досконалості необхідно слідувати низці правил, які зроблять ваш сайт найкращим. 13

СПИСОК ЛІТЕРАТУРИ 14

РОЗДІЛ 1. ПОНЯТТЯ КОЛЬОРУ У ВЕБ-ДИЗАЙНІ




    1. Колірне коло (комплементарні, тріадні та аналогові кольори)

Колірне коло - це спосіб уявлення безперервності колірних переходів. Воно носить ім'я Йоханнеса Іттена. Йоханнес - це швейцарський художник, знаменитий завдяки своєму навчального курсу, який ліг в основу викладання в сучасних мистецьких навчальних закладах.

Ще до Іттена дослідженнями властивостей кольору займався Ісаак Ньютон. На основі своїх дослідів він відкрив колірний спектр, який містить у собі 7 спектральних кольорів, які відомі всім як кольори веселки.

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

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

жовтий + червоний = помаранчевий;

жовтий + синій = зелений;

червоний + синій = фіолетовий.

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

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

Якщо просто, компліментарні кольори - це ті, які розташовані один навпроти одного в колірному колі. Вони доповнюють один одного. Наприклад, червоний та зелений кольори можуть змусити вас подумати про Різдво. Або часто можна побачити поєднання блакитного і оранжевого [3]. При використанні контрастної колірної схеми важливо вибрати домінуючий колір і використовувати додатковий колір для акцентів. Наприклад, основний колір для фону і додатковий колір, щоб виділяти важливі елементи. Водночас комплементарна колірна схема найбільш контрастна з усіх колірних схем і найбільш сильно привертає увагу, але в ній важче досягти балансу кольорів, ніж у монохроматичній або аналоговій схемах, особливо при використанні м'яких, теплих відтінків [4].

Тріадні кольори мають декілька варіацій:


  1. класична тріада (рівновіддалене поєднання). У даній тріаді використовуються три кольори, рівновіддалені один від одного на колірному колі. Ця схема популярна серед дизайнерів і художників, тому що пропонує сильний візуальний контраст, зберігаючи при цьому баланс і колірну насиченість. Тріада не така контрастна, як комплементарна схема, але виглядає більш збалансованою. З нею найлегше експериментувати, проте важливо зберігати відчуття міри [4].

  2. поєднання - контрастна тріада (розділена комплементарна гармонія). Вона є варіантом комплементарного поєднання кольорів, лише замість протилежного кольору використовуються сусідні для нього кольори. Інакше кажучи, ключові відмінність такого варіанту від комплементарної полягає у можливості варіювати тон протилежних кольорів, як в аналоговій колірній схемі. Виглядає така схема майже настільки ж контрастно, як комплементарна, але не настільки напружено. Якщо ти не впевнений, що зможеш правильно використовувати комплементарні кольори, використовуй контрастну тріаду. Роздільна комплементарна схема має більше нюансів, ніж комплементарна, тому є більш складною у балансуванні. У такій схемі рекомендується використовувати один теплий колір проти діапазону холодних кольорів (наприклад, червоний проти синього та синьо-зеленого).

Це одна з найбільш гармонійних груп на колірному колі. Схеми можуть бути простими, контрастними і збалансованими водночас. Роздільна комплементарна схема відповідає за нестандартні, візуально «інтригуючі» комбінації контрастних кольорів з хорошим балансом [4].

  1. аналогічне, або аналогова тріада. Являє собою поєднання кольорів з трьох сусідніх по колу секторів. Характеризується м'якою і приємною палітрою і навіть часто зустрічається у природі.

Допускає поєднання від 2 до 5 (в ідеалі від 2 до 3) кольорів, які перебувають поруч один з одним на колі. Прикладом може бути поєднання приглушених кольорів: жовто-помаранчевий, жовтий, жовто-зелений, зелений, синьо-зелений. Таке поєднання кольорів завжди буде виглядати приємно і гармонійно. При цьому правильно один колір можна обрати як домінантний, другий — доповнюючий, а третій — для акцентування.

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

І хоча аналогові колірні схеми легко складати, вони теж можуть стати монотонними. Аби уникнути цього, потрібно використовувати різні за яскравістю та насиченістю кольори та їх відтінки. Найпростіший спосіб — перенести акцент на один колір і зробити його домінуючим. Ось деякі способи, за допомогою яких можна надати будь-якому кольору домінуючу роль: виділити для нього велику площу, зробити його більш насиченим і контрастним. У той же час слід уникати розташування поруч двох однаково яскравих кольорів шляхом «додавання» невеликої кількості одного кольору до інших. Іншим же методом є додаткове введення комплементарних акцентів [4].


    1. Досягнення кольорової виразності веб-продуктів

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

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

Головним завданням графічного дизайну є привертання уваги, візуальне виокремлення інформації або товару із загального потоку. Вихід один — цікавий, яскравий, неординарний дизайн, що змусить зупинитися, прочитати від палітурки до палітурки, запам’ятати логотип [5].

РОЗДІЛ 2. ШРИФТОВЕ ОФОРМЛЕННЯ ВЕБ-ПРОДУКТУ


2.1. Основні групи шрифтів у веб-дизайні

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

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

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

Велику кількість шрифтів було розроблено при винайденні першої друкарської машинки. Друкарі виконували велику роботу категоризуючи шрифти за їх стилями, розділивши всі західні типи на чотири категорії: Serifs (з зарубками), Sans Serif (без зарубок), Script (сценаріїв) і Decorative (декоративний) [6].



  1. Шрифти групи Serif: Розглядаючи літери шрифту Times New Roman можна помітити короткі лінії зверху і знизу на кожній літері, які називають насічками. Якщо шрифт містить насічки, то це однозначно шрифт з групи Serif. Шрифти Serif зазвичай використовуються у офіційній кореспонденції, де важливими є престиж і гарне оформлення. Для прикладу, якщо б для офіційного листування використовувати шрифти типу Sans Serif, то вплив на читача був би повністю протилежним. Шрифти забезпечують кращий користувацький досвід в друкованій продукції, ніж у вебі. Будьте обережними використовуючи їх на екрані, вони добре працюють в заголовках, а для використання їх в основному тексті підберіть належні розмір та інтервал для забезпечення зручності читання в русі. Шрифти Serif користувачами сприймаються як тонкі, красиві, дорогі теплі і трохи «пахнуть» старовиною.

  2. Шрифти групи Sans Serif: Група шрифтів без зарубок називається Sans Serif. Порівняно з шрифтами інших груп, шрифти Sans Serif найкраще сприймаються на екрані. Тоді як зарубки не сприймаються при читанні з екрану (але вітаються у друкованій продукції) шрифти без зарубок сприяють чистому та інтуїтивному читанню та ідеально підходять як для заголовку так для основного тексту. Шрифти групи Sans Serif викликають відчуття неформальності, тому не рекомендуємо їх використовувати для юридичних та інших офіційних сайтів, а для блогів чи персональних сайтів це найкращий вибір. Зазвичай читачі сприймають ці шрифти як міцні, незугарні, дешевенькі, холоднуваті та юні.

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

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

  1. Декоративні шрифти: Якщо перед вами шрифт, який ви не можете віднести до жодної з розглянутих груп, значить перед вами декоративний шрифт. Більшість декоративних шрифтів є творчість користувачів інтернету. Веб рясніє різноманіттям декоративних шрифтів і майже всі вони є безкоштовними, серед яких зустрічаються дуже цікаві і креативні роботи. Як правило, ці шрифти використовуються для створення візуальної теми вашого дизайну. Вони прекрасно підходить для заголовків, але безглуздо їх використовувати для загального тексту. Якщо говорити про емоції, які вони викликають у читача, то їх важко однозначно виділити, адже різноманіття шрифтів цієї групи здатне викликати як радість так і огиду [6].

2.2. Покращення параметрів типографії

Для покращення типографії у веб-дизайні можна корегувати такі параметри:



  • Відстань між рядками. Для забезпечення зручності читання потрібно не забувати про міжрядковий інтервал. Оптимальніший його розмір повинен бути 30-60% від розміру шрифту. Якщо текст ви подаєте шрифтом розміром у 12 пт, то між рядками слід подавати відступ 4-6 пт. Це дозволить полегшити читання тексту.

  • Довжина стрічки. Як і міжрядковий інтервал впливає на зручність читання. Чим довшими будуть стрічки, тим менша ймовірність, що читач їх дочитає до кінця. Якщо стрічки будуть занадто короткими, це змушує часто переводити погляд з початку стрічки на її кінець, що також не вітається. Золота середина – 45-85 символів у стрічці (7-10 слів, у широкоформатному режимі може бути і більше).

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

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

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

Комбінування декількох типів шрифтів в одному дизайні може бути непростим заняттям, особливо якщо ви не впевненні, що вони гармоніюватимуть між собою. У парі вони повинні виглядати так, ніби належать один одному. Ось декілька порад, як це можна робити [7]:

  1. Комбінуйте шрифт із зарубками і шрифт без зарубок, щоб створити контраст. Чим більше стилі шрифтів не схожі один на одного, тим більше у вас шансів створити вдалу пару. Шрифти, які занадто однаково виглядають, погано виглядають разом. (Спробуйте сумістити Helvetica і Univers, щоб переконатися на прикладі, що це поганий варіант). Можна вибрати два шрифту з зарубками або два без зарубок для створення комбінації тільки в тому випадку, якщо вони радикально відрізняються один від одного.

  2. Використовуйте не більше 2 гарнітур. Це дасть вам до 8 шрифтів для роботи: нормальний, напівжирний, курсив і напівжирний курсив. Можна додати третій унікальний шрифт в дуже обмеженій кількості, наприклад, в заголовку журналу або в логотипі сайту.

  3. Уникайте вибору шрифтів з однієї категорії, наприклад, рукописні шрифти або бруски. (Шрифти Clarendon і Rockwell виглядають разом не дуже добре).

  4. Визначте кожному шрифту його завдання і дотримуйтеся її.

  5. Спробуйте шрифти з різних категорій, які мають однакову висоту малих знаків і ширину гліфів. (Наприклад, Futura разом з Times New Roman виглядають погано, тому що у них велика різниця між х-висотою і шириною.)

  6. Знайдіть будь-яке відношення між основними формами. Наприклад, подивіться на букву “О” в верхньому і нижньому регістрі. Круглі і овальні літери «О» не люблять один одного, тому їх краще не поєднувати.

  7. Порівняйте накреслення шрифтів: воно повинно бути різним. (Наприклад, Didot і Rockwell виглядати дуже погано разом з багатьох причин, але одна з головних – тому що вони обидва мають жирне накреслення).

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

  9. Знайдіть розумний спосіб для створення контрасту. Збільште трекінг для одного шрифту і перевірте, як виглядає поєднання.

  10. Не нехтуйте тим, щоб використовувати різні шрифти з одного сімейства. Наприклад, можна вибрати Helvetica Black для заголовка і Helvetica normal для основного тексту.

  11. Використовуйте контраст виразних і нейтральних шрифтів. Якщо один шрифт має виразний характер (наприклад, жирний шрифтом), поєднуйте його з нейтральним шрифтом.

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

  13. Уникайте змішування моноширинних шрифтів з пропорційними шрифтами.

  14. Не змішуйте настрій шрифтів. Безтурботний Gill Sans не захоче стояти поруч з діловим Didot, виглядати разом вони будуть погано. Поєднуйте два шрифти з однаковим або схожим настроєм.

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

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

ВИСНОВКИ



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

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

  3. Створення веб-дизайну сторінки – це трудомістка і клопітлива робота, яка вимагає поєднання як і кольорів, так і різних гарнітур. Щоб досягти досконалості необхідно слідувати низці правил, які зроблять ваш сайт найкращим.

СПИСОК ЛІТЕРАТУРИ



  1. Колірне коло, [Електронне джерело] / Режим доступа: https://atelieroom.ua/ua/tsvetovoy-krug

  2. Колірне коло, Мистецтво кольору, [Електронне джерело] / Режим доступа: https://libdiz.com/uk/knygy/mystetstvo-kolioru/6-kolirne-kolo/

  3. Chelsea London, Теорія кольору для фотографів, [Електронне джерело] / Режим доступа: http://www.l-house.in.ua/blog/color-theory

  4. Правила і палітра поєднання кольорів в інтер’єрі та екстер’єрі, [Електронне джерело] / Режим доступа: https://astra.pl.ua/pravila-poednannya-koloriv-v-intereri-ta-ekstereri.html

  5. Гармонія, Контраст і виразність у графічному дизайні, [Електронне джерело] / Режим доступа: http://narodna-osvita.com.ua/6995-garmonya-kontrast-viraznst-u-grafchnomu -dizayn.html

  6. Websvit, Емоції і шрифти у веб-дизайні, [Електронне джерело] / Режим доступа: http://www.websvit.com/blog/2015/11/04/emotsiji-i-shryfty-u-veb-dyzajni/

  7. Підвищення ІК-компетентності, Рекомендації по використанню шрифтів в статтях/презентаціях, [Електронне джерело] / Режим доступа: http://cikt.kubg.edu.ua/



Поділіться з Вашими друзьями:


База даних захищена авторським правом ©chito.in.ua 2019
звернутися до адміністрації

    Головна сторінка