Правила дизайну та інфографіки

Кисилиця Вікторія

Правила підбору кольорів

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

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

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

ПЕРВИННІ КОЛЬОРИ – червоний, жовтий і синій – основа для інших кольорів. Кожний із семи мільйонів відтінків, що ми розрізняємо, можна скласти з цих основних «будівельних блоків». Ці кольори не можна одержати при змішанні інших фарб. Якщо червоний, синій і жовтий колір змішати в рівних частках, то буде чорний.

ВТОРИННІ КОЛЬОРИ – виходять при змішанні двох основних кольорів.

До них відносяться:фіолетовий (комбінація червоного і синього), Помаранчевий (змішання червоний і жовтого) і зелений (жовтий плюс синій)

ТРЕТИННІ КОЛЬОРИ – так називають кольори, які можна створити змішанням одного основного й одного вторинного кольорів. Їх шість: шафрановий (червоний з оранжевим), янтарний (жовтий з оранжевим), цитрусовий (жовтий із зеленим), бірюзовий (синій із зеленим), бузковий (синій з фіолетовим), пурпурний (червоний з фіолетовим).

Колірне коло

Колірне коло поділяється на теплі і холодні кольори.

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

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

Білий, сірий і чорний – це ахроматичні кольори. У буквальному перекладі з грецького – безбарвні. Хроматичні кольори з ахроматичними найбільш гармонічні в наступних сполученнях: червоний, оранжевий і жовтий (теплі) з чорним; блакитний, синій, фіолетовий (холодні) з білим.

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

Шрифт

Правила використання шрифта у дизайні:

1. Розмір тексту для контенту – від 14

   до 22 пікселів.

   Заголовки – 24+

2. Міжрядковий інтервал
   +8пк від розміру шрифта
3. Ширина строки – від 40 до 85 символів

Першим параметром треба порівнювати безпосередньо будову — тобто тип шрифта як такий. Також можна порівнювати такі конструктивні параметри:

• контраст,
• динаміку,
• вагу,
• ширину.

Композиція

Композиція — це поєднання окремих елементів у цілісний твір, що втілює певну ідею.

Ідеєю композиції може бути будь-що.

Наприклад,

• Ідея Святослава Вакарчука, коли він співає свої пісні, — передати певні емоційні переживання;
• ідея табличок в навігаційному дизайні — якомога швидше та зрозуміліше пояснити людині, як зорієнтуватись в конкретному просторі;
• ідея посадкової сторінки курсу «Основи вебдизайну» — спонукати якомога більше людей, яким ця тема цікава, зареєструватись на цей курс.

Відповідно, пісні Святослава Вакарчука, таблички в навігаційному дизайні та посадкова сторінка нашого курсу — це все композиції.

Правила оформлення інфографіки

Інфографіка – це добірка зображень, діаграм і мінімального обсягу тексту, що роблять огляд теми легкозрозумілим.

В основі інфографіки можуть бути різні підходи до подачі матеріалів. На основі цього, можна виділити такі види інфографіки:

• mind map (або діаграма зв’язків) – структурує зв’язок навколо певного об’єкту шляхом побудови логічних ланцюжків;

• дерево рішень – послідовна схема пошуку вирішення якої-небудь проблеми;

• інструкція – допомагає користувачам легко зрозуміти, як застосовується певний інструмент або виконується процес (наприклад, приготування пирога);

• схема (блок-схема, діаграма, гістограма);

• інформаційні картки (факти і події з ілюстраціями і підписами)

Для чого нам Інофографіка?

1. Спрощує подачу інформації. Уявімо, що ваш сайт займається продажем запчастин для авто. У власників не завжди є час і бажання розбиратись в статтях, ускладнених специфічними термінами (типу нажимного або веденого диску), вони хочуть знайти на сайті і побачити, що тут є потрібний товар, одразу звернувши увагу на його комплектацію або переваги і зробити замовлення. Тут на допомогу прийде інфографіка, котра навіть найскладніший матеріал розкладе по поличкам.
2. Візуальні дані. Доведено, що найкраще людина сприймає і запам’ятовує саме матеріал в картинках. Правильно розташовані дані, кольори інфографіки, що відповідають оформленню веб-сторінки, допоможуть потенційному замовнику надовго залишити в пам’яті ваш сайт і при необхідності повертатись знову і знову (а також рекомендувати друзям).
3. Покращує читабельність статті. Припустимо, у вашої компанії багато переваг і ви волієте їх усі вписати у статтю, проте погодьтесь, що велика кількість і безлике панно з хвалебними одами компанії не вразить потенційного клієнта. Інша справа – короткі вижимки з цієї інформації, подані на тарілочці у вигляді гарної інфографіки.
4. Оптимізувати сайт. Не секрет, що пошуковим системам Google і Яндекс подобаються корисні і відповідно оформлені статті. Вони скоріше виведуть у ТОП сайт з ілюстрованим і експертним матеріалом, ніж ресурс з безликими, мало інформативними статтями, котрі мало хто читає.

Правила оформлення презентації

1. Одна (потужна) фотографія – це тисячі слів.
2. Використовуйте правильні кольору, контраст і білий простір
3. Скажіть “ні” анімації (в основному)
4. Підготуйте ефективний контент і типографіку
5. Бути розумним (або навіть смішним)
6. У вас є 20 хвилин
7. Застосуйте правило трьох
8. Передача одного (сконцентрованого) повідомлення
9. Розкажіть цікаві історії
10. Чудовий кінець

Правила оформлення презентації

1. Відмовитись від готових шаблонів
2. Використовуй правильне поєднання кольорів
3. Не використовувати бліді кольори
4. На одному слайді поєлнювати 2 або 3 кольори
5. У всій презентації не повинно бути більше 5 кольорів
6. Тексту на слайді мало і щоб він добре читався
7. Не використовуй тіні, градієнти та інші ефекти
8. Не використовуй не якісні зображення
9. Уникати зображення які дуже поширені  в інтернеті
10. Не робити занадто широкі рядки

Правила оформлення плакатів

1.Плакат повинен сприйматися з великої відстані

2. Бути помітним на фоні інших засобів візуальної інформації

Плакат — барвисте рекламне видання великого формату.

Зміст

1. Правила підбору кольорів ………………………………………………..ст.3-9
2. Шрифт…………………………………………………………………………ст.10-12
3. Композиція……………………………………………………………………ст.13-26
4. Правила оформлення інфографіки………………………………………ст.27-31
5. Правила оформлення презентації……………………………………….ст.32-35
6. Правила оформлення плакатів…………………………………………..ст.36-37