80 безкоштовних ресурсів в допомогу дизайнеру

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

Створити свій проект з нуля може не кожен. Але кожен може в рази полегшити собі життя, дізнавшись про деяких інструментах і «примочки», якими ми поділимося в цій статті. Тим більше що всі представлені безкоштовні ресурси (ну або майже все).

Матеріал розбитий на тематичні блоки, щоб вам було простіше орієнтуватися і вибирати потрібний сервіс. Загалом, читайте, беріть і користуйтеся. 😉

Дивись, милуйся, надихайся

    1. https://dribbble.com/ – популярний серед дизайнерів веб-портал. Дизайнери з усього світу викладають свої роботи і діляться досвідом. Сайт – це соціальна мережа для креативних людей: дивіться і оцінюйте чужі роботи як зареєстрований користувач. Ділитися своїми роботами можна після спеціального запрошення (invite) від друга-дизайнера. Чи показавши свої роботи іншого користувача з вашим запрошенням.
    2. https://www.behance.net/ – мережева платформа для творчих людей. Behance призначений не тільки для дизайнерів та ілюстраторів, але і для художників, фотографів, відеографів, архітекторів і багатьох інших людей, чия професія пов’язана з креативом. Більшість робіт представлені як повноцінні презентації своїх навичок і талантів.
    3. http://revision.ru/ – мережевий виставковий зал в основному з роботами російськомовних дизайнерів.
    4. https://onepagelove.com/ – майданчик з великою різноманітністю односторінкових сайтів, створених дизайнерами та розробниками з різних куточків планети.
    5. https://land-book.com/ – ще один сайт-портфоліо тільки односторінкових сайтів.
    6. https://www.awwwards.com/ – авторитетна премія в світі веб-дизайну і розробки сайтів. На сайті представлені кращі роботи студій зі всього світу.
    7. http://www.webdesign-inspiration.com/ – назва сайту говорить сама за себе. Ресурс, створений для натхнення сайтами. Зручна фільтрація робіт за кольором, типом і тематик.
    8. http://www.fltdsgn.com/ – ви любитель сайтів в стилі FLAT? Тоді цей ресурс для вас.
    9. http://www.siteinspire.com/ – тут зібрані красиві і надихаючі сайти. Сам ресурс регулярно оновлюється і поповнюється новими роботами.
    10. https://www.thebestdesigns.com/ – ще один сайт з надихаючими роботами у сфері веб-дизайну.
    11. https://www.uplabs.com/material/ – для любителів Material Design корисно заглянути сюди. Натхнення не змусить себе чекати.
    12. https://ru.pinterest.com/ – як же обійтися без Світової дошки натхнення. Тут можна знайти натхнення на що завгодно і кого завгодно.
    13. https://pttrns.com/ – сайт з шаблонами користувальницького інтерфейсу на будь-який смак.
    14. http://www.gomoodboard.com/ – сайт для створення власної дошки натхнення.

Безкоштовні фотостоки

Фотографії, картинки і відео часто потрібні в роботі. Де брати, якщо немає можливості зробити свої якісні фотографії? На фотостоках. В мережі є платні і безкоштовні. Ми перерахували для вас відмінні безкоштовні фотобанки, які перевірили і рекомендуємо до використання.

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

    1. https://www.pexels.com/ – величезна кількість красивих і безкоштовних фотографій на різні теми з вільною ліцензією. Є дуже зручний фільтр по колірній гамі фотографії.
    2. https://unsplash.com/ – більше 200 000 безкоштовних фотографій з вільною ліцензією. Фотографії розбиті на колекції від гідних фотографів зі всього світу.
    3. https://pixabay.com/ – безкоштовні зображення високої якості, так само є ілюстрації та відео (для комерційних цілей).
    4. https://www.firestock.ru/ – безкоштовний фотосток з величезною кількістю категорій. Тип ліцензії Editorial (для особистого користування).
    5. http://isorepublic.com/ – безкоштовні зображення для творчих людей. Кожен день додається величезна кількість нових фотографій. Можна використовувати для комерційних цілей.
    6. http://jeshoots.com/ – понад 800 000 безкоштовних фотографій високого дозволу. І тут є ліцензія для комерційного використання.
    7. http://cupcake.nilssonlee.se/ надихаючі зображення від талановитого фотографа Nilsson Lee, які можна ставити на сайт і рекламу. Комерційно придатні фото.
    8. https://magdeleine.co – на сайті представлені приголомшливі фотографії різних тематик. Доступний пошук по переважаючому кольору. Ну і ліцензії на всі випадки життя.
    9. http://nos.twnsnd.co/ – вінтажні фотографії з публічних архівів. Все круто, але тільки для особистого і некомерційного використання.
    10. https://picjumbo.com/ – понад 3 000 зображень високої якості, бібліотека активно поповнюється. Дозволено використання фотографій у комерційних цілях, але заборонена перепродаж.
    11. https://www.freestockimages.ru/photo/ – безкоштовний фотобанк ліцензійних фотографій високого дозволу. Допускається використання в комерційних цілях.
    12. https://www.sitebuilderreport.com/stock-up/ – понад 18 000 доступних фотографій. Stock Up об’єднує безліч різних безкоштовних веб-сайтів з фотографіями, тому ліцензія на кожну фотографію буде відрізнятися.
    13. http://kaboompics.com/gallery – популярний безкоштовний джерело якісних фотографій. Фотографії з Kaboompics з’являються на сайтах, таких як BBC, CNN, Forbes, Cosmopolitan, Yahoo і т. д. Але важливо перевіряти ліцензії на фотографії, вони можуть бути різними.
    14. https://www.foodiesfeed.com/ – безкоштовний фотобанк з зображеннями їжі у високому дозволі. Допускається використання в комерційних цілях.
    15. https://www.splitshire.com/ – фото та ілюстрації для безкоштовного використання.
    16. http://www.lifeofpix.com/ – ще один безкоштовний фотосток з фотографіями високої якості і його цілком можна використовувати для пошуку фото в комерційних цілях.
    17. http://www.gratisography.com/ – сайт з креативними знімками від фотографа Райана Макгуаера. Фотосток поповнюється щотижня і також підходить для комерційного використання.
Читайте також  Михайло Бессмельцев з колегою розробив нові алгоритми векторизації графіки

Безкоштовні відео

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

    1. http://www.clipcanvas.com/free-footage/ – на сайті велика кількість платних і безкоштовних відеороликів високої якості.
    2. http://www.lifeofvids.com/ – безкоштовні відео високого дозволу з ліцензією ROYALTEE-FREE. Дозволено використання в комерційних цілях.
    3. http://www.wedistill.io/ – безкоштовні професійні відео для творчості. Можна використовувати в рекламних цілях.
    4. https://www.videezy.com/ – майданчик професійних і початківців відеооператорів, чиї роботи знаходяться у відкритому доступі. Дозволено використання в комерційних цілях.
    5. http://www.free-hd-footage.com/ – безкоштовні відео відмінної якості. Також є такі категорії як 3D, 4k, 2k. Відео банк невеликий, але категорії найрізноманітніші.
    6. https://www.videvo.net/ – безкоштовні відео для будь-якого проекту. Для завантаження потрібна реєстрація. Відео дозволено використовувати в комерційних цілях.
    7. http://mitchmartinez.com/free-4k-red-epic-stock-footage/ – безкоштовні 4к-відео від професійного фотографа і відеограф Mitch Martinez. Його відео дозволяється використовувати тільки в особистих цілях, не в комерційних, але є можливість домовитися з автором про розширеної ліцензії.
    8. https://pixabay.com/ru/videos/ – безкоштовні відео відмінної якості. Дозволено комерційне використання.
    9. http://www.coverr.co/ – сервіс для підбору фонового відео на сайті. Відео дозволені для використання в комерційних цілях.
    10. http://mazwai.com/ – велика кількість спокійних і мальовничих відео про природу. Ліцензія дозволяє використовувати в комерційних цілях.

Безкоштовні векторні ілюстрації, іконки, фони і psd

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

Читайте також  Ще одна система частинок. Постмортем

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

    1. http://ru.365psd.com/ – на сайті величезна кількість колекцій безкоштовних векторних зображень, емблем і PSD-исходников.
    2. http://www.freepik.com/ – графічні ресурси для всіх. Допоможе вам знайти безкоштовну векторну графіку, зображення, іконки, PSD і фотографії для використання на сайтах, банерах, презентаціях, журналах. На сайті є в тому числі і платні преміум-ілюстрації.
    3. https://www.flaticon.com/ – понад 400 000 іконок на самі різні теми. Є вбудований редактор іконок за кольором, розміром. У доважок є і платні якісні іконки.
    4. https://icons8.com/ – 55 000 іконок в стилі Flat. Іконки формату png безкоштовні, за формат svg потрібно заплатити.
    5. http://dbfreebies.co/ – на сайті відібрані кращі безкоштовні роботи з behance і dribbble. Серед них дизайнерські шрифти, іконки, PSD шаблони і мокапы, які використовуються для презентацій свого дизайну на порожньому макеті продукту.
    6. https://www.toptal.com/designers/subtlepatterns/ – велика кількість акуратних фонів для сайту. Є можливість подивитися на фон «в роботі» перед скачуванням.
    7. http://www.heropatterns.com/ – невеликий сайт з патернами і фонами у форматі svg від дизайнера Стіва Сергера. Є зручний редактор кольору, формату і розміру візерунка. Всі патерни Стів надає безкоштовно.
    8. https://freevectormaps.com/ – сайт повністю присвячений векторних карт в різних стилях і техніках. Від великих карт Світу до карт дрібних островів.
    9. https://freebiesbug.com/ – безкоштовні ілюстрації, шрифти і PSD від популярних дизайнерів.
    10. http://www.fribbble.com/ – безкоштовні PSD-файли та інші безкоштовні дизайнерські ресурси від Dribbble.
    11. https://www.mockupworld.co/ – джерело безкоштовних фотореалістичних мокапов для презентацій, кейсів.
    12. http://fontello.com/ – велика кількість іконок хорошої якості в форматі svg, є можливість генерації шрифту з іконок.
    13. http://perfecticons.com/ – генератор іконок соціальних мереж онлайн.
    14. https://thenounproject.com/ – на сайті майже мільйон дизайнерських іконок формату png і svg. Є редактор іконок перед скачуванням.
    15. http://www.endlessicons.com/ – безкоштовна бібліотека плоских і контурних іконок.
    16. http://fontawesome.io/ – шрифт, який генерує іконки.
    17. http://pixelmap.amcharts.com/ – генератор карти в акуратні пікселі. Вийшло зображення можна завантажити у форматі svg, html, png.
    18. https://www.iconfinder.com/free_icons/ – безкоштовні колекції іконок в різних стилях.

Підбір кольорової схеми та панелі

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

    1. https://color.adobe.com/ – один з найпопулярніших помічників по підбору колірної схеми. Є можливість зберігати свої палітри і дивитися палітри інших дизайнерів.
    2. https://colorscheme.ru/ – зручний інструмент для веб-дизайнера. Допомагає не тільки визначитися з кольором сайту, але і подивитися вибране поєднання на сайті-прикладі.
    3. http://bootflat.github.io/color-picker.html – добірка контрастних кольорів для проектів у стилі Flat.
    4. https://uigradients.com/ – на сайті зібрані самі модні і приємні градієнти для ваших проектів.
    5. https://dribbble.com/colors/9cf4df?percent=30 – у сайту dribbble.com так само є фільтр за кольором робіт. Можна вибрати відповідний колір з палітри і подивитися поєднання в роботі популярних дизайнерів.
    6. http://discovercolor.ru/ – зручний сайт з приємними фотографіями, розбитими на колірні палітри.
    7. https://brandcolors.net/ – найбільша колекція офіційних кольорів популярних світових брендів.
    8. https://chrome.google.com/webstore/detail/eye-dropper/ – зручний визначник кольору для браузера Google Chrome (перед використанням потрібно установка).
    9. http://www.0to255.com/ – сайт для підбору більш світлих і темних відтінків одного кольору. Дуже зручний для створення градієнтів і hover-ефектів.
    10. https://www.materialpalette.com/ – генерація палітр в стилі material design.
    11. https://coolors.co/ – супершвидкий і безкоштовний генератор колірних схем.
Читайте також  Розробка GLSL шейдерів на Kotlin

Безкоштовна типографіка

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

    1. https://fonts.google.com/ – безкоштовні шрифти від Google.
    2. https://www.canva.com/font-combinations/ – безкоштовний пошук колірних комбінацій для вашого дизайну.
    3. http://fishtext.ru/ – генератор рыботекста для незакінчених шаблонів або інших ваших проектів.
    4. http://allfont.ru/cyrillic/ – велика колекція кириличних шрифтів (не всі ліцензії підходять для комерційного використання).
    5. http://typespiration.com/ – безкоштовний підбір надихаючих колірних комбінацій. На жаль, не всі шрифти доступні в кирилиці.

Hover-ефекти, анімація і живі фони

Можливо, у когось виникло питання: навіщо тут інформація для front-end розробників? Але вибрати правильний hover-ефект або анімацію – завдання дизайнера. Знання html і css ще жодному веб-дизайнеру не нашкодили і бути в курсі новинок в стезі верстки його прямий обов’язок. У цьому допоможуть наведені нижче сервіси і не обов’язково винаходити велосипед. Надихайтеся тим, що вже є, і застосовуйте це у своїй роботі.

  1. https://tympanus.net/ – це блог веб-дизайну і розробки. Можна знайти гідні приклади hover-ефектів і анімації для вашого сайту.
    Виділимо кілька особливо корисних посилань з цього ресурсу:
  2. https://tympanus.net/Development/ButtonStylesInspiration/ – колекції ефектів кнопок при наведенні.
  3. https://tympanus.net/Tutorials/CaptionHoverEffects/ – ефекти накладення заголовка.
  4. https://tympanus.net/Development/HoverEffectIdeas/ надихаючі колекції ефектів при наведенні на фотографію.
  5. https://codepen.io/search/pens?q=canvas&limit=all&type=type-pens – безкоштовні живі фони для вашого сайту від професійних розробників і любителів (в основному для натхнення, не для комерційного використання).

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

Степан Лютий

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

You may also like...

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *