16 прикладів ілюстрацій веб-дизайну

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

Плоскі ілюстрації

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

Давайте розглянемо кілька прикладів:

1. The New Yorker

Це перше з The New Yorker :

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

2. Copper

Іншим чудовим прикладом того, як бренд використовує ілюстрації, є Copper . У блозі CRM до кожної публікації додаються індивідуальні ілюстрації:

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

3. Школа Годдарда

Якщо вам цікаво використовувати ілюстрацію як фон, The Goddard Family of Schools містить гарний приклад того, як це зробити правильно:

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

4. CrowdHealth

CrowdHealth — ще один бренд, який отримав правильний плоский ілюстративний дизайн:

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


Напівплоскі та 3D ілюстрації

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

Читайте також:  Що таке система проектування (дизайн система)?

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

Обидва ці неплоскі прийоми дизайну можна використовувати в ілюстраціях. Ось кілька прикладів:

5. Chuck E. Cheese

Веб Chuck E. Cheese використовує комбінацію плоских і тривимірних ілюстрацій. Фон і декоративні елементи плоскі, а талісман мишки об’ємний:

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

6. 23 and Me

23 and Me використовує ілюстрації, щоб підкреслити особливості свого програмного забезпечення:

Вміст на екрані телефону – це те, що користувачі 23 and Me бачитимуть під час використання програми. Однак дизайнер додав плоскі ілюстрації, які ніби висуваються з екрана, щоб підкреслити цінність послуги генетичного тестування.

7. Compose.ly

Compose.ly — ще одна компанія, яка використовує ілюстрації, щоб наочно пояснити переваги цифрового продукту:

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

8. Barkbox

Barkbox має гарний приклад тонкого напів плоского дизайну:

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

Читайте також:  12 тенденцій графічного дизайну та ілюстрацій в 2022 році

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

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

Якщо ви підете цим шляхом, ви зможете створити кілька речей:

Інтерактивні розділи героїв
Індивідуальні анімації Lottie
Відео з повним поясненням

Ми вже бачили кілька прикладів інтерактивних ілюстрацій. Давайте розглянемо ще деякі з них:

9. Updata One

Updata One — це спільнота бізнес-аналітики. Як написано на домашній сторінці: «Ми розуміємо інформацію». Це не обов’язково найпростіша ідея, яку можна зафіксувати за допомогою фотографій чи відео — принаймні, у візуально цікавий спосіб.

Ось чому ці абстрактні ілюстровані анімації працюють так добре:

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

10. BetterUp

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

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

11. Recurrency

Recurrency є хорошим прикладом того, як пропустити пояснювальне відео та замість цього створити більш стислий опис того, що ви робите:

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

12. MeanPug Digital Agency

Останній інтерактивний приклад ілюстрації, який ми повинні розглянути, знаходиться на MeanPug Digital Agency :

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

Читайте також:  10 ефективних способів використання ілюстрацій для вашого бренду

Мальовані ілюстрації

Якщо ви ілюстратор або хочете спробувати свої сили у створенні власного для майбутнього веб-сайту, ви можете скористатися багатьма способами. Штрихові малюнки. Ескізи. Карикатури. Наведені нижче приклади покажуть вам деякі з можливостей:

13. Marlow

Marlow виробляє подушки. Хоча відвідувачі знайдуть на сайті справжні фотографії своїх подушок, вони також час від часу натраплять на ці сонні ілюстрації:

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

14. Misfits Market

Misfits Market — це ще одна ілюстрація, яка спочатку може здатися незначною, але насправді багато розповідає відвідувачам про бренд:

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

15. Airbnb

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

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

16. Cleo

Веб-сайт програми для грошей Cleo створює враження, ніби ви проходите крізь триповий мультфільм із 90-х:

Джерело