Добірка безкоштовних сервісів і ресурсів для дизайнера

1. Дивись, милуйся, надихайся
2. Безкоштовні фотостоки
3. Безкоштовні відео
4. Безкоштовні векторні ілюстрації, іконки, фони і psd
5. Підбір кольорової схеми та палітри
6. Безкоштовна типографіка
7. Hover-ефекти, анімація і живі фони

Не важливо хто ви: професійний дизайнер або любитель, 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/ - супершвидкий і безкоштовний генератор колірних схем.

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

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

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, вставляючи стокові зображення, навіть якщо це дозволяє ліцензія. Проект повинен бути заточений під конкретні цілі, а дизайн - допомагати зрозуміти зміст і зробити цільове дію.

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