Як ілюстрація додає емоції до UX

Як ілюстрація додає емоції до UX

Від 45 000-річних печерних малюнків до діаграм космічних ракет 21-го століття — ілюстрації вже давно відіграють важливу роль у спілкуванні людей.

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

Слово «ілюструвати» має два основних значення: створити картину; і продемонструвати або надати приклад. У контексті Інтернету ілюстрація — це частково прикраса, частково емоційний сигнал, який допомагає створити особливе враження на користувача, малюючи метафоричну картину.

Навіщо використовувати ілюстрації на веб-сайті?

Ілюстрації є корисним скороченим засобом для передачі настрою чи тону, голосу бренду.

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

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

Популярні види онлайн-ілюстрацій

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

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

Читайте також:  Поради провідних ілюстраторів щодо пейзажних ілюстрацій

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

Фінансові та корпоративні

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

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

Це створює відчуття, типове для нових компаній (Acorns було засновано в 2014 році), особливо тих, які переважно працюють в Інтернеті.

Більш традиційні організації використовують ілюстрацію для тих же цілей, хоча вони можуть бути обмежені лише певними областями, де вони хочуть підкреслити доступність. Danske Bank Наприклад,

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

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

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

Читайте також:  10 причин, чому цифрові ілюстрації ефективні в маркетингу


Їжа та напої

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

Palais Kitchen , і Caleño роблять перше, з кресленнями ліній, що відповідають бренду.

My Drink у вінтажному стилі замінюють фотографії, щоб збалансувати текст на його домашній сторінці.

Melopeion Honey використовує не так багато ілюстрацій, але те, що він використовує, є великим.

Monkey47 можна описати як концептуальний веб-сайт, і ілюстрації відіграють ключову роль. (Меню соціальних мереж справді досить чарівне.)


Гостинність і дозвілля

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

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

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

Готель Frida також присвячений характеру, а фантастичні ілюстрації тварин у вікторіанському стилі допомагають створити незвичайність.

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

The Neverlands не просто використовує ілюстрації; Весь сайт — це захоплюючий досвід, заснований на ілюстраціях.


Відповідальна мережа

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

Читайте також:  4 поширені помилки, які допускають ілюстратори книжок

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

Wild Souls уникає будь-якого натяку на хіпність (культуру гіппі), з відчуттям випадковості в розміщенні ілюстрації.

Джин Superfood робить рослинну справу, але тут стосується рослинних інгредієнтів, тому він дуже актуальний.

Головна сторінка компанії Capsul’in є досить стандартною пропозицією, але для Zero Impact вона має окремий розділ з ілюстраціями, які допомагають пояснити особливості продукту.

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

Різноманітні дитячі бренди використовуватимуть ілюстрації — навіть якщо справжньою метою є батьки чи опікуни, — і Little Yawn Collective поєднує дружній до дітей та натуральний підхід до продуктів із своїми ілюстраціями сонних тварин.


Використання ілюстрації в Інтернеті

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

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

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

Джерело