Для удобства подборка разбита на восемь следующих категорий:
- Фото и видео.
- Иллюстрации.
- Палитры.
- Типографика.
- Анимация и другие эффекты.
- Иконки.
- Паттерны и модели.
- Справочные ресуры и подборки.
1. Фото и видео
1.1. Coverr – фоновые видео
![<a href="https://coverr.co/" target="_blank" rel="noopener noreferrer nofollow">Coverr</a>](https://media.proglib.io/posts/2020/05/15/ff304f25308137328568e5dfec1774f0.jpg)
Coverr – это ресурс с бесплатными фоновыми видео, придающими главной странице ощущение объёма и живости. Есть поиск и разбивка по тегам. Внизу главной страницы – шпаргалка о встраивании видео в HTML, CSS и JavaScript.
1.2. Mixkit – видеоролики и музыка
![<a href="https://mixkit.co/" target="_blank" rel="noopener noreferrer nofollow">Mixkit</a>](https://media.proglib.io/posts/2020/05/15/bbe13a82ec4e0bd360137be8d0039682.jpg)
Потрясающие стоковые видеоклипы, музыка и шаблоны Adobe Premiere Pro. Всё совершенно бесплатно. Внизу главной страницы Mixkit разбиение блоков по тегам.
1.2. Pexels – фото и видео
![<a href="https://www.pexels.com/" target="_blank" rel="noopener noreferrer nofollow">Pexels</a>](https://media.proglib.io/posts/2020/05/15/e0784e01afc9605997ffad279ea8f910.jpg)
Стильные стоковые фотографии и видео от талантливых дизайнеров. Главная страница представляет собой вдохновляющую галерею. Pexels локализован на русский язык, есть поиск по разделам.
1.3. Photo Creator – сборка изображений из изолированных фонов, моделей, объектов
![<a href="https://photos.icons8.com/creator" target="_blank" rel="noopener noreferrer nofollow">Photo Creator</a>](https://media.proglib.io/posts/2020/05/15/19f6876c3479b42d59bdfc44f88bfc3f.jpg)
Сайт-конструктор для создания реалистичных фотографий из изолированных слоев с изображениями тысяч моделей, объектов и фонов. JPEG на Photo Creator бесплатны, PSD-файлы доступны по платной подписке.
1.4. Unscreen
![<a href="https://www.unscreen.com/" target="_blank" rel="noopener noreferrer nofollow">Unscreen</a>](https://media.proglib.io/posts/2020/05/15/73fb5c443f069d525e0696cc17a5487f.jpg)
Unscreen удаляет фон с видео и гифок.
1.5. Remove Background
![<a href="https://www.remove.bg/" target="_blank" rel="noopener noreferrer nofollow">Remove Background</a>](https://media.proglib.io/posts/2020/05/15/a11ca285c001a73530a463934997172e.jpg)
В Remove Background все, как и в предыдущем инструменте, только ресурс работает со статичными изображениями. У сервиса есть платный API для получения батчей полноразмерных изображений с удаленным фоном.
1.6. Generated Photos – сгенерированные портреты
![<a href="https://generated.photos/faces" target="_blank" rel="noopener noreferrer nofollow">Generated Photos</a>](https://media.proglib.io/posts/2020/05/15/864b9e0c17ac70f40091e156e522b31e.jpg)
Самый практичный способ получить качественные портреты с настройкой фона для коммерческого контента – взять лица, сгенерированные нейросетями на Generated Photos.
1.7. Duotone
![<a href="https://duotone.shapefactory.co/" target="_blank" rel="noopener noreferrer nofollow">Duotone</a>](https://media.proglib.io/posts/2020/05/15/3e03f7b1c8988d8ff4117c0c2f29010a.jpg)
Дуотон – представление изображения в паре цветов. Сервис Duotone конвертирует любую фотографию в дуотон за считанные секунды. То есть можно настроить любые два цвета под палитру вашего ресурса и получить стильные вариации фотографии, как будто сделанные специально для вас.
2. Иллюстрации
2.1. Open Peeps – библиотека иллюстраций
![<a href="https://www.openpeeps.com/" target="_blank" rel="noopener noreferrer nofollow">Open Peeps</a>](https://media.proglib.io/posts/2020/05/15/c6da1ba6ea090ba290071bf596243293.jpg)
Open Peeps – интересная библиотека нарисованных от руки иллюстраций.
2.2. Smash Illustrations – конструктор иллюстраций
![<a href="https://usesmash.com/" target="_blank" rel="noopener noreferrer nofollow">Smash Illustrations</a>](https://media.proglib.io/posts/2020/05/15/10912e5f7a118d8c3a60e081fa1265f4.jpg)
Крутой конструктор иллюстраций для построения сцен с красочными рисунками и персонажами. Smash Illustrations работает со Sketch, Figma, можно создавать изображения в формат svg и png.
2.3. Open Doodles – набор иллюстраций
![<a href="https://opendoodles.com/" target="_blank" rel="noopener noreferrer nofollow">Open Doodles</a>](https://media.proglib.io/posts/2020/05/15/945cbdd185b60f9b162fba860f488233.jpg)
Open Doodles – бесплатный набор скетч-иллюстраций и анимаций на любой случай.
2.4. Control Illustrations – конструктор сценок
![<a href="https://control.rocks/" target="_blank" rel="noopener noreferrer nofollow">Control Illustrations</a>](https://media.proglib.io/posts/2020/05/15/e46ca863f32f74e6305c74f8928335a6.jpg)
Библиотека Control Illustrations включает 108 иллюстраций с настраиваемым стилем и типами действий. Используйте конструктор, чтобы создать сцену, которую вы ищете.
2.5. Ouch! – векторные иллюстрации
![<a href="https://icons8.com/ouch" target="_blank" rel="noopener noreferrer nofollow">Ouch!</a>](https://media.proglib.io/posts/2020/05/15/832270e5871cbc2e2deef121272610f5.jpg)
Проект Ouch! посвящен бесплатным векторным иллюстрациям в разных стилях, которые можно применить в пользовательских интерфейсах.
2.6. Avataaars Generator – генератор аватаров
![<a href="https://getavataaars.com/" target="_blank" rel="noopener noreferrer nofollow">Avataaars Generator</a>](https://media.proglib.io/posts/2020/05/15/d528dd47a304b63ecc636cd8b7ad917e.jpg)
Avataaars Generator служит для создания иконок уникальных учетных записей. Не знаете, какой стиль вам нужен – понажимайте на кнопки, пока не найдете то, что вам подходит.
2.7. Faux Code Generator – иллюстрация кода
![<a href="http://knutsynstad.com/fauxcode/" target="_blank" rel="noopener noreferrer nofollow">Faux Code Generator</a>](https://media.proglib.io/posts/2020/05/15/47f2e3bb6b83fa9856a3adddc46d43ed.jpg)
Часто в иллюстрациях, связанных с программированием, полезно изобразить код, но в каком-то обобщенном виде, скрыв само содержание. Faux Code Generator превращает реальный код (GitHub Gist) в искусственный (SVG-изображение).
3. Палитры
3.1. Parametric Color Mixer – микшер палитры
![<a href="https://colormixer.web.app/02007115ff623007ff9bc91b64440301ffff7c5f55610300/Sunset" target="_blank" rel="noopener noreferrer nofollow">Parametric Color Mixer</a>](https://media.proglib.io/posts/2020/05/15/aa1b8f443816e2db4645bb584f23a47e.jpg)
С Parametric Color Mixer можно настроить цветовую палитру, как с помощью звукового эквалайзера.
3.2. CSS Gradient – градиент в стилях
![<a href="https://cssgradient.io/" target="_blank" rel="noopener noreferrer nofollow">CSS Gradient</a>](https://media.proglib.io/posts/2020/05/15/437cd09697b455a27a93f495df093874.jpg)
Помимо того, что CSS Gradient – прекрасный генератор CSS-градиентов, ресурс содержит полезный обучающий контент.
3.3. Colorsinspo – сборник цветовых палитр
![<a href="https://colorsinspo.com/" target="_blank" rel="noopener noreferrer nofollow">Colorsinspo</a>](https://media.proglib.io/posts/2020/05/15/6c3b27ebf102cdf845b6282d7001284e.jpg)
Colorsinspo – это тысячи красивых цветовых палитр и инструментов, которые можно использовать в один клик, а также гора тематического чтива и туториалов.
3.4. Color Hexa – конвертер представлений цветов
![<a href="https://www.colorhexa.com/index.php" target="_blank" rel="noopener noreferrer nofollow">Color Hexa</a>](https://media.proglib.io/posts/2020/05/15/bcd13c41dce69662abaa827f71bb1af3.jpg)
Бесплатный инструмент Color Hexa предоставляет информацию о любом цвете и генерирующий соответствующие цветовые палитры. Просто введите любое цветовое значение в поле поиска и получите конвертированные значения в Hex, RGB, CMYK, HSL, HSV, CIE-LAB/LUV/LCH, Hunter-Lab, XYZ и Binary.
3.5. Color Space – библиотека цветовых схем
![<a href="https://mycolor.space/" target="_blank" rel="noopener noreferrer nofollow">Color Space</a>](https://media.proglib.io/posts/2020/05/15/3e1f161069f3016b4b5ae649daf3c69c.jpg)
Color Space предоставляет множество вариантов построения цветовых схем для вашего следующего проекта.
3.6. Palettte App – цветовые палитры по кривым
![<a href="https://palettte.app/" target="_blank" rel="noopener noreferrer nofollow">Palettte App</a>](https://media.proglib.io/posts/2020/05/15/0fc931fe2cbe08530b8650b8d6c45207.jpg)
Palettte App отличается тем, что цветовой схемы можно генерировать через наложение кривых.
3.7. Colorable – проверка контрастности текста
![<a href="https://colorable.jxnblk.com/" target="_blank" rel="noopener noreferrer nofollow">Colorable</a>](https://media.proglib.io/posts/2020/05/15/ed14fdc285f71c83abc23a5db3771e0f.jpg)
Colorable проверяет контрастность текста для заданной цветовой палитры с учетом цвета фона.
4. Типографика
4.1. Freebiesbug – свободные шрифты
![<a href="https://freebiesbug.com/free-fonts/" target="_blank" rel="noopener noreferrer nofollow">Freebiesbug (free fonts)</a>](https://media.proglib.io/posts/2020/05/15/3cab137b69abb92fc97e55caa74f729d.jpg)
Freebiesbug включает в себя не только шрифты, но и массу полезного контента: картинки, мокапы, шаблоны для сайта, вдохновляющие лендинги и прочее.
4.2. Fonts Arena
![<a href="https://fontsarena.com/" target="_blank" rel="noopener noreferrer nofollow">Fonts Arena</a>](https://media.proglib.io/posts/2020/05/15/349c1a25f952c5c2753251d8cafd9929.jpg)
Fonts Arena распространяет как бесплатные, так и платные шрифты. Для облегчения поиска есть разделение на категории .
4.3. Befonts
![<a href="https://befonts.com/" target="_blank" rel="noopener noreferrer nofollow">Befonts</a>](https://media.proglib.io/posts/2020/05/15/795fd60ea6e0096d9205c7e7eecef9a6.jpg)
На Befonts можно скачать лучшие бесплатные шрифты для личного или коммерческого использования – красивый script type, профессиональный sans serif и многое другое.
4.5. Font Squirrel
![<a href="https://www.fontsquirrel.com/" target="_blank" rel="noopener noreferrer nofollow">Font Squirrel</a>](https://media.proglib.io/posts/2020/05/15/aff37a8aee760896184b34f5cd404734.jpg)
В популярный среди верстальщиков ресурс Font Squirrel встроен генератор цветов, распознаватель, гора бесплатных шрифтов, форум и полезное чтиво по теме.
4.6. Fontjoy – тест сочетания шрифтов
![<a href="https://fontjoy.com/" target="_blank" rel="noopener noreferrer nofollow">Fontjoy</a>](https://media.proglib.io/posts/2020/05/15/81db9aaa88f1fe8be0d3f7ae433d679a.jpg)
Fontjoy – сервис для проверки сочетаний шрифтов из Google Fonts.
4.7. Type Scale – проверка читаемости шрифта
![<a href="https://type-scale.com/" target="_blank" rel="noopener noreferrer nofollow">Type Scale</a>](https://media.proglib.io/posts/2020/05/15/1c36e0526a6ab8a545a96eb6fa9dc56e.jpg)
Если нужно проверить, удобно ли читать шрифт в заголовках и при разном масштабировании, Type Scale делает все необходимые вариации значения line-height и margins.
5. Анимация и другие эффекты
5.1. Генератор плавных теней
![<a href="https://brumm.af/shadows" target="_blank" rel="noopener noreferrer nofollow">Smooth Shadow Generator</a>](https://media.proglib.io/posts/2020/05/15/d6aefc1ca5bdc2da1ae779db1dc1676b.jpg)
Плавными кривыми создаем необходимый теневой рисунок, Smooth Shadow Generator на выходе дает код для вставки на страницу.
5.2. CSSeffectsSnippets – эффекты на Vue.js
![<a href="https://emilkowalski.github.io/css-effects-snippets/" target="_blank" rel="noopener noreferrer nofollow">CSSeffectsSnippets</a>](https://media.proglib.io/posts/2020/05/15/a827ddac3eb9f33c4343905a7e37afa2.jpg)
CSSeffectsSnippets – коллекция CSS-эффектов (анимация, текст, кнопки), выполненная с помощью Vue.js.
5.3. Генератор CSS-разделителей
![<a href="https://wweb.dev/resources/css-separator-generator" target="_blank" rel="noopener noreferrer nofollow">Separator Generator</a>](https://media.proglib.io/posts/2020/05/15/110121c34226c73953bd82349b2cbc66.jpg)
Separator Generator – набор настраиваемых CSS-разделителей с возможностью легкого копирования кода.
5.4. Animista
![<a href="https://animista.net/" target="_blank" rel="noopener noreferrer nofollow">Animista</a>](https://media.proglib.io/posts/2020/05/15/57e0969c53a16839d83994f9e90d3712.jpg)
На сайте Animista можно поиграться с коллекцией готовых к использованию CSS-анимаций, настраивать их и скачивать те, что будете использовать.
5.5. Draggable – Drag&Drop-эффекты
![<a href="https://shopify.github.io/draggable/" target="_blank" rel="noopener noreferrer nofollow">Draggable</a>](https://media.proglib.io/posts/2020/05/15/97b45df115fb6b38550d7c9ae7fe2a6a.jpg)
Draggable – интересная JavaScript-библиотека для реализации drag&drop-эффектов.
5.6. Block Reveal Effects – появление блоков
![<a href="https://tympanus.net/Development/BlockRevealers/index.html" target="_blank" rel="noopener noreferrer nofollow">Block Reveal Effects</a>](https://media.proglib.io/posts/2020/05/15/2987760ac185e17af7b1532f4ae8074b.jpg)
Block Reveal Effects – красивая реализация постепенного появления блоков страницы, раскрывающихся по мере ее скроллинга (по ссылке есть демо-пример).
6. Иконки
6.1. IconStore
![<a href="https://iconstore.co/" target="_blank" rel="noopener noreferrer nofollow">IconStore</a>](https://media.proglib.io/posts/2020/05/15/9d330dc11c6fd99a90e8b32b4e8edacc.jpg)
IconStore – библиотека бесплатных векторных иконок для личных и коммерческих проектов, разработанных первоклассными дизайнерами.
6.2. CSS Icons
![<a href="https://css.gg/" target="_blank" rel="noopener noreferrer nofollow">CSS Icons</a>](https://media.proglib.io/posts/2020/05/15/74f23b862c6591abde89e6f8100f2a60.jpg)
CSS Icons – опенсорсные CSS, SVG и Figma UI иконки, доступные в SVG Sprite, styled-components, NPM и API.
6.3. Icon Transition Generator
![<a href="https://nucleoapp.com/tool/icon-transition" target="_blank" rel="noopener noreferrer nofollow">Icon Transition Generator</a>](https://media.proglib.io/posts/2020/05/15/f8ea6ded240d6c2ea23a3c4fed9a6384.jpg)
Создайте переход между двумя значками с помощью Icon Transition Generator и загрузите его в SVG. Загрузите сгенерированный код в Nucleo или импортируйте его сразу в свой проект.
6.4. Tilda Icons
![<a href="https://tilda.cc/free-icons/" target="_blank" rel="noopener noreferrer nofollow">Tilda Icons</a>](https://media.proglib.io/posts/2020/05/15/463502d7a7aba33f88a67c106730244c.jpg)
Tilda Icons – коллекция из более чем 700 бесплатных иконок, разделенных по категориям и тематикам.
6.5. Ikonate
![<a href="https://ikonate.com/" target="_blank" rel="noopener noreferrer nofollow">Ikonate</a>](https://media.proglib.io/posts/2020/05/15/ec7c53afb9beb34094fc495ce043236e.jpg)
Ресурс Ikonate позволяет настроить иконку под ваши нужды и скачать ее.
6.6. Eva Icons
![<a href="https://akveo.github.io/eva-icons/#/" target="_blank" rel="noopener noreferrer nofollow">Eva Icons</a>](https://media.proglib.io/posts/2020/05/15/30bd06b92044e6ba9244bde3adb674e3.jpg)
В пакете Eva Icons 480 опенсорсных иконок на темы действий и предметов. Можно использовать в вебе, iOS и Android.
6.7. Анимированные иконки
![<a href="https://icons8.com/animated-icons" target="_blank" rel="noopener noreferrer nofollow">Animated Icons</a>](https://media.proglib.io/posts/2020/05/15/52d12ccbdccef024a725b9d8ec2a6a74.jpg)
На ресурсе с незамысловатым названием Animated Icons вы найдете 400 бесплатных анимированных иконок.
7. Паттерны и модели
7.1. Паттерны CSS
![<a href="https://bansal.io/pattern-css#triangles" target="_blank" rel="noopener noreferrer nofollow">CSS Patterns</a>](https://media.proglib.io/posts/2020/05/15/21f224a4c96e3ae321a2b17edf636ec4.jpg)
Библиотека CSS Patterns на чистом CSS помогает заполнить пустой фон красивыми узорами.
7.2. Get Waves
![<a href="https://getwaves.io/" target="_blank" rel="noopener noreferrer nofollow">Get Waves</a>](https://media.proglib.io/posts/2020/05/15/3caf4017fad1ec32eaeedd26890b136c.jpg)
Простое веб-приложение Get Waves генерирует неповторяющиеся svg-волны – можно разнообразить границу футера.
7.3. Blob Maker
![<a href="https://www.blobmaker.app/" target="_blank" rel="noopener noreferrer nofollow">Blob Maker</a>](https://media.proglib.io/posts/2020/05/15/57f584fa7ffb71970e93dd6599d7bccf.jpg)
Blob Maker – генератор дизайна уникальных пузырчатых SVG-форм, как на картинке выше.
7.4. Генератор полигонов
![<a href="https://msurguy.github.io/rad-lines/" target="_blank" rel="noopener noreferrer nofollow">Rad Lines</a>](https://media.proglib.io/posts/2020/05/15/527360b7a281884e4b5af16a12cf3a48.jpg)
Rad Lines – векторный генератор SVG-полигонов на Vue.js.
7.5. Patterns
![<a href="https://products.ls.graphics/paaatterns/" target="_blank" rel="noopener noreferrer nofollow">Patterns</a>](https://media.proglib.io/posts/2020/05/15/50dd21c43cd94b97954bbf40706ea225.jpg)
Patterns – это узоры во всех векторных форматах, доступные для коммерческих и личных проектов. Один из шаблонов мы использовали при создании обложки этой публикации.
8. Справочные ресуры и подборки
8.1. Nucleo App
![<a href="https://nucleoapp.com/tool/icon-transition" target="_blank" rel="noopener noreferrer nofollow">Nucleo App</a>](https://media.proglib.io/posts/2020/05/15/da932ea62d013071c12dd2b91d257bd0.jpg)
Nucleo App – популярная библиотека с кучей иконок, а также мощное приложение для их сбора, настройки и экспорта.
8.2. Checklist design
![<a href="https://www.checklist.design/" target="_blank" rel="noopener noreferrer nofollow">Checklist design</a>](https://media.proglib.io/posts/2020/05/15/19bf73ae761c8e8d94989f3d6c82b623.jpg)
Checklist design – коллекция лучших практик UX и UI с пошаговым разбором того, что предпринять и как действовать.
8.3. Design System Repo
![<a href="https://designsystemsrepo.com/design-systems-recent/" target="_blank" rel="noopener noreferrer nofollow">Design System Repo</a>](https://media.proglib.io/posts/2020/05/15/c52d9b6774f68affef9bf6a7a7f31641.jpg)
Обширный и пополняемый список ресурсов, руководств по стилю и библиотек шаблонов, которые можно использовать для вдохновения – всё это Design System Repo.
8.4. CSSPeeper
![<a href="https://csspeeper.com/" target="_blank" rel="noopener noreferrer nofollow">CSSPeeper</a>](https://media.proglib.io/posts/2020/05/15/c3aa09bdca6a2cd3e9527106d5defb74.jpg)
Расширение для Google Chrome CSSPeeper позволяет выбрать объект на любом сайте и извлечь его CSS-свойства, чтобы применить их в своем проекте.
8.5. AI Image Upscaler
![<a href="https://icons8.com/upscaler" target="_blank" rel="noopener noreferrer nofollow">AI Image Upscaler</a>](https://media.proglib.io/posts/2020/05/15/bdf13633a68ffc8d5ba1a1bffbc80658.jpg)
AI Image Upscaler – инструмент, использующий мощь искусственного интеллекта для того, чтобы попытаться восстановить качество изображения с низким разрешением и увеличить его.
Заключение
Мы надемся, что вам понравился этот список инструментов и ресурсов, и подборка поможет поднять свой скилл разработки на новый уровень. Не стесняйтесь поделиться своими любимыми инструментами в комментариях к этому посту. По этой тематике у нас есть ещё вот такие популярные статьи:
- Как правильно использовать анимацию в дизайне интерфейсов
- О правильном дизайне полей с раскрывающимися списками
- Верстать быстро и красиво: 15 популярных CSS фреймворков
Комментарии