Ілюстрації в додатках і на сайтах завжди актуальні. Чому варто застосовувати мальовані зображення, у яких випадках це доречно, у чому плюси та мінуси? Платити, малювати самостійно чи взяти безкоштовно? Про це сьогодні поговоримо. + Бонус: ТОП-15 ресурсів із безкоштовними ілюстраціями.


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

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

Це спосіб зробити красиво, ефектно та ефективно. 

Це можливість створити схематичне пояснення процесу гіпотетичної або зовсім неіснуючої в реальному світі ситуації.

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

Плюси і мінуси ілюстрацій у веб-дизайні


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

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

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

Малюнок має суперсилу вдихнути життя навіть у найнудніші справи і предмети. Усе залежить тільки від фантазії. Можна свіжо і нетривіально подати продукт і вигідно виділитися серед конкурентів.  

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

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

Фото чи ілюстрація?

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

Ціна. Якщо картинку тобі малює не Бенксі, то часто вона виходить дешевше, ніж фото. Мова, звісно, про кастомні зображення. Для малюнка не потрібна апаратура, локація, моделі та реквізит. І правки внести зручніше, а це теж час/гроші. А якщо фотосесія виявилася провальною, то виправити це дуже складно. Тому за інших рівних умов ілюстрації тут нерідко перемагають.

Оригінальність. Зробити дійсно незвичайні фото, що чіпляють, важко. Знову ж таки, це питання ціни теж. Але і в цілому складно придумати велосипед у багатьох стандартних нішах. А ще твої картинки будуть точно оригінальними і неповторними. Багато фірм навіть будують свій образ на мальованих маскотах, як Монобанк, наприклад. І це їхня фішка, яку не відняти. Обличчя Скарлетт Йоханссон, можливо, теж спрацювало б, але навіть вона не в силах переплюнути милого котика.

Простота реалізації. Часто трапляється так, що відповідне фото просто складно знайти. У замовника є дуже багато вимог саме до того, що там має бути. Він вказує і розташування деталей, і зачіску персонажів, а потім ще у них виявляється "недостатньо спрямований погляд" або щось таке. Плюс до такого завдання потрібно знайти фото, яке впишеться в дизайн і палітру. Звичайно, знайти такі фотографії на стоці ти навряд чи зможеш. А зйомка - це довго і дорого. Ось ілюстрація якраз врятує в цьому питанні. Будь-яке ТЗ під силу досвідченому ілюстратору. Навіть сім перпендикулярних червоних ліній, дві з яких намальовані зеленим кольором, одна прозорим, а одна у формі кошеняти. Якщо ти розумієш, про що ми)

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

Коли ілюстрація не працює?

  • Якщо тобі потрібно показати фізичний товар. Покупець має його бачити, а не уявляти. Хоча і тут можна додати додатково схематичну інструкцію або щось таке.
  • Якщо потрібно показати експерта/селебріті/особистість. Звичайно, гурт Gorillaz довів, що мультяшки можуть замінити людей. Але це у творчій сфері. У багатьох ситуаціях хочеться подивитися в очі людині, якій ти збираєшся довіритися.
  • Якщо замовник проти. Тут нічого не зробиш - навіть якщо покажеш, що стилі бувають різними. 


Стоки з ілюстраціями

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

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

Добре, розглянемо тоді стоки. Платити чи не платити? Брати платні ілюстрації на стоках - це добре. І підтримка художників, і більш рідкісні рішення, і набагато ширший вибір. Але це не дає гарантії 100% оригінальності. Тільки авторські ілюстрації на замовлення з викупом права власності можуть дати впевненість у тому, що таке буде тільки у тебе. Ну або дасть право судитися з плагіаторами. Якщо в планах немає настільки серйозних намірів і бюджетів, то бери безкоштовні елементи, вони нічим не гірші.

На стоках є буквально десятки тисяч крутих паків ілюстрацій. І багато з них навіть безкоштовні. У цій статті, наприклад, картиночки взяті з розділу безкоштовних ілюстрацій iconscout.

Ось наша добірка ТОП-ресурсів:

  1. Mixkit - тут малюнки розділені за тематиками. Абсолютно безкоштовно можна взяти у свій проєкт справжній шедевр - багато нестандартних напрямів і стилів.
  2. IconScout - звідси беруть свої елементи такі гіганти як Disney, Amazon, Netflix, Spotify і Uber. Хочеш робити продукти їхнього рівня - користуйся. Є не тільки ілюстрації, а й інші корисні штуки: плагіни, іконки, анімація, 3D-графіка. 
  3. Pictor - лаконічні малюнки на тему офісу. Нічого зайвого.
  4. Absurd Design - оригінальний абсурдний стиль, який рятує, коли типові малюнки приїлися. Тут більшість картинок платні, але й безкоштовних достатньо. У будь-якому разі, це не той стиль, який підійде будь-якому проєкту і багато таких ілюстрацій і не потрібно. 
  5. Sapiens - тут ти не просто береш ілюстрацію, а створюєш її в конструкторі. Небезпечна платформа, яка затягує. Гратися з параметрами можна довго, це захоплює. 
  6. Drawkit - база, на яку варто підписатися, бо там щотижня є оновлення і розсилка з новинками. Є можливість оплатити пакет, але й безкоштовних варіантів достатньо.
  7. Isometric - хороший ресурс для тих, хто оформляє об'ємні проєкти. Тут дуже багато напрямків, але всі вони в одному стилі. Для інформаційних порталів, інтернет-магазинів і майданчиків-агрегаторів це чудове рішення.
  8. Streamline - величезна кількість трендових рішень, є платні та безкоштовні пакети. 
  9. Open Peeps - величезний плюс цього ресурсу в тому, що звідси можна забирати ілюстрації в комерційні проєкти безплатно і без зазначення авторства.
  10. Shapefest - тут знайдуться картинки з різними текстурами, вибирай за темою свого продукту і шукай відповідні рішення.
  11. Ouch! - зверни увагу, тут потрібно при використанні ілюстрацій залишати посилання на сайт. Але зате ти отримуєш доступ до елементів, створених найкращими ілюстраторами з Dribbble.
  12. ls.graphics - тут круті картинки безкоштовні, але теж потрібно вказувати авторство згідно з ліцензією.
  13. Freepik - ти вже знаєш цей сток. Ти береш тут фото і шрифти. Але й ілюстрацій тут багато. А ще іконок, фонів, шаблонів, векторної графіки та інших крутих безкоштовних штук.
  14. Avatarz.design - цей сервіс допомагає створити мальованих аватарів. Добре підійде для генерації віртуальних асистентів, героїв історії, персонажів.
  15. Indian Doodle Illustration Pack - портал з ілюстраціями винятково для цифрових проєктів. Стиль витриманий у найкращих традиціях Індії. Дуже доречно для колл-центру техпідтримки міжнародної компанії.


Само собою, ілюстрації є і на вже легендарних стоках Unsplash, Pixabay і Pexels. Але ми їх не включаємо до нашого ТОПу, бо вони настільки популярні, що деякі малюнки вже використовували сотні разів усі, кому не ліньки. Якщо хочеш зробити оригінальний проєкт - копай глибше. Не варто піддавати ризику свою репутацію і бути дизайнером, який робить попсу.

Як впроваджувати це в проєкт

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

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

Тут потрібно вивчати теорію кольору, основи UX/UI і володіти дизайнерськими інструментами, щоб довести проєкт до стану цілісності. Вчися, шукай хороші ресурси з ілюстраціями  і спробуй виділяти, що саме в них має вдалий вигляд і чому. Без практики не обійтися - треба спробувати, тоді буде зрозуміліше. Хочеш швидше опанувати тонкощі майстерності? Ти в курсі, що треба робити. Записуйся на онлайн-курс "UX/UI легенда".