10 способів використання пастельних тонів у веб-дизайні
Використання пастельних тонів у веб-дизайні – не просто актуальний тренд. Це техніка, яку дизайнери використовували роками для створення вражаючих результатів. Словосполучення «пастельні тони» асоціюється з блідими відтінками рожевого, синього та жовтого, проте насправді ця палітра кольору набагато багатша. У ній є місце не лише дитячим відтінкам.
Сьогодні ви дізнаєтеся про десять способів використання пастельних тонів у веб-дизайні. Які елементи веб-дизайну використовуються найефективніше?
Фотографії
Фотографії пастельних тонів також допомагають створити контраст між зображенням та іншими елементами, такими як логотипи або кнопки. Зверніть увагу як чудово логотип на сайті Solasie ліг на фотографію. У цьому випадку так само доречно виглядала б прозора кнопка.
Фон у пастельних тонах дозволяє використовувати безліч кольорів, але при цьому не втомлювати користувача. Через свою м'якість, цими відтінками можна заповнити весь фон, не створюючи ефекту, що давить.
Популярна техніка при роботі з фоном у пастельних тонах – використання варіацій одного відтінку для створення монохромної схеми кольорів, як на сайті Dear Mum. Лише один колір з невеликими варіаціями створює хорошу картинку і відмінно контрастує з елементами білого кольору. Ця техніка також підходить для створення модного настрою та хіпстерської стилістики. Але в цьому випадку потрібно правильно підібрати друкарню.
Сміливі пастельні тони
Звичайно вирази «сміливий» та «пастельні тони» нечасто зустрічаються разом. Однак це не означає, що їх поєднання не зустрічається зовсім. Так як пастельні тони завжди відступають у боротьбі за увагу користувача, ви можете робити навколо них майже щозавгодно.
Відмінний приклад таких експериментів – сайт Marie Catrib. Пастельні тони виглядають сміливо, але не впадають у вічі, даючи можливість жінці на фото заволодіти увагою відвідувача. Цілком заглушене тло не справляло б такого ефекту.
Пастельний настрій
Які почуття ви хочете викликати у відвідувачів вашого сайту? Пастельні тони дуже допоможуть вам у створенні настрою спокою, розслабленості та простоти. Якщо ці характеристики підходять вашому сайту чи бізнесу, тоді робіть вибір на користь пастельної палітри.
Сайт Sweez - чудовий приклад того, як колір передає емоції. Усі зображення та графічні елементи виконані у приглушених, пастельних відтінках. На цьому сайті прокидається бажання посидіти в тихому, спокійному місці, насолоджуючись смачним, гарячим капучіно. Бачите, як ефективні прості кольори!
Ілюстрації
Пастельні тони – чудовий вибір для ілюстрації. Використовуйте таку схему кольору, щоб намалювати ілюстрацію, яка сподобається відвідувачу.
Ілюстрація в пастельних тонах передає ідею того, що на ній зображена, проте поєднує посил із настроєм спокою, що виникає завдяки кольорам. Таке рішення дозволяє використовувати зображення в найнесподіваніших місцях.
Не варто використовувати пастельні тони у вакуумі. Вони чудово виглядають, контрастую з іншими елементами.
Сайт Kinder Fotografie – чудовий приклад використання пастельних тонів, світлих фотографій та тексту. На пастельній частині дизайну безліч дрібних деталей, проте відвідувач насамперед бачить фото дітей та слово "smiles." Вже потім око починає помічати ці чудові деталі.
М'які кольори також можуть підійти для оформлення елементівнавігації. Зазвичай панелі навігації оформляють у чорно-білому, але кольоровий варіант також цілком допустиме рішення.
Існує причина, через яку має сенс використовувати пастельні тони в елементах навігації: вони не впадають у вічі і не відволікають користувача від основного контенту. Візьмемо для прикладу веб-сайт Wonderfully Wild. Насамперед користувач помічає фотографію. Елементи навігації добре поєднуються з рештою дизайну, але не виходять на перший план.
Плоский дизайн
Нинішня мода на пастельні тони багато в чому вдячна плоскому дизайну, а точніше самому початку його популярності, коли у тренді був flat-дизайн у світлих відтінках.
Використання пастельних тонів у плоскому дизайні добре тим, що кольори несуть той самий сенс і посил як і звичайні відтінки, тільки в нашому варіанті не «перекрикують» контент, привертаючи до себе всю увагу. Процес спрямування користувача стає трохи простіше. Вам легко вдасться привернути увагу в потрібну частину екрана або виділити потрібний елемент.
Друкарня
Немає обмежень на використання пастельних тонів лише для оформлення фону або зображень. Ви можете використовувати їх і в друкарні (правда це зовсім непросто).
Найкраще оформляти в таких відтінках великі, великі написи на тлі жорсткішого фону. Якщо ви оформите текст жирною обведенням, то помітите, що кольори на екрані виглядатимуть приглушеніше. Цей концепт застосовується до написів, що містять невелику кількість символів, і в жодному разі не до звичайного тексту .
Елементи інтерфейсу користувача
Використання пастельних тонів в оформленні елементів інтерфейсу користувача - це ще рішення, яке приніс нам плоский дизайн. Кнопки таІнші елементи UI можуть бути м'яких, світлих кольорів.
На сайті Duy Tran кожен блок у пастельних тонах є гіпертрофованою кнопкою. М'які кольори візуально розділяють блоки та роблять їх легко доступними для кліка. Відтінки також виділяються, оскільки створюють контраст з мінімалістично оформленою зоною загального контенту.
Працюючи з пастельними тонами, прагнете до створення свіжого, а не змитого вигляду. Поєднуйте приглушені кольори з насиченими відтінками та фотографіями. Використовуйте собі заспокійливий ефект пастельних кольорів і стежте за тим, щоб вони вписувалися в загальний дизайн.
Автор статтіCarrie Cousins