eFusion 16 мая 2020

50 бесплатных ресурсов для создания веб-интерфейсов

Представляем список полезных бесплатных ресурсов для создания веб-интерфейсов: иллюстрации, фото и видео, шрифты, цветовые палитры, иконки, анимации и прочие элементы 🐕
1
14150

Для удобства подборка разбита на восемь следующих категорий:

  1. Фото и видео.
  2. Иллюстрации.
  3. Палитры.
  4. Типографика.
  5. Анимация и другие эффекты.
  6. Иконки.
  7. Паттерны и модели.
  8. Справочные ресуры и подборки.

1. Фото и видео

1.1. Coverr – фоновые видео

<a href="https://coverr.co/" target="_blank" rel="noopener noreferrer nofollow">Coverr</a>
Coverr

Coverr – это ресурс с бесплатными фоновыми видео, придающими главной странице ощущение объёма и живости. Есть поиск и разбивка по тегам. Внизу главной страницы – шпаргалка о встраивании видео в HTML, CSS и JavaScript.

1.2. Mixkit – видеоролики и музыка

<a href="https://mixkit.co/" target="_blank" rel="noopener noreferrer nofollow">Mixkit</a>
Mixkit

Потрясающие стоковые видеоклипы, музыка и шаблоны Adobe Premiere Pro. Всё совершенно бесплатно. Внизу главной страницы Mixkit разбиение блоков по тегам.

1.2. Pexels – фото и видео

<a href="https://www.pexels.com/" target="_blank" rel="noopener noreferrer nofollow">Pexels</a>
Pexels

Стильные стоковые фотографии и видео от талантливых дизайнеров. Главная страница представляет собой вдохновляющую галерею. Pexels локализован на русский язык, есть поиск по разделам.

1.3. Photo Creator – сборка изображений из изолированных фонов, моделей, объектов

<a href="https://photos.icons8.com/creator" target="_blank" rel="noopener noreferrer nofollow">Photo Creator</a>
Photo Creator

Сайт-конструктор для создания реалистичных фотографий из изолированных слоев с изображениями тысяч моделей, объектов и фонов. JPEG на Photo Creator бесплатны, PSD-файлы доступны по платной подписке.

1.4. Unscreen

<a href="https://www.unscreen.com/" target="_blank" rel="noopener noreferrer nofollow">Unscreen</a>
Unscreen

Unscreen удаляет фон с видео и гифок.

1.5. Remove Background

<a href="https://www.remove.bg/" target="_blank" rel="noopener noreferrer nofollow">Remove Background</a>
Remove Background

В Remove Background все, как и в предыдущем инструменте, только ресурс работает со статичными изображениями. У сервиса есть платный API для получения батчей полноразмерных изображений с удаленным фоном.

1.6. Generated Photos – сгенерированные портреты

<a href="https://generated.photos/faces" target="_blank" rel="noopener noreferrer nofollow">Generated Photos</a>
Generated Photos

Самый практичный способ получить качественные портреты с настройкой фона для коммерческого контента – взять лица, сгенерированные нейросетями на Generated Photos.

На этих фотографиях ненастоящие люди?
Если вас удивило описание инструмента, прочитайте наш пост «Что умеют нейросети: 10 крутых примеров». Потренироваться отличать успехи людей от торжества нейросетей можно в нашем популярном тесте «Правда или ложь».

1.7. Duotone

<a href="https://duotone.shapefactory.co/" target="_blank" rel="noopener noreferrer nofollow">Duotone</a>
Duotone

Дуотон – представление изображения в паре цветов. Сервис Duotone конвертирует любую фотографию в дуотон за считанные секунды. То есть можно настроить любые два цвета под палитру вашего ресурса и получить стильные вариации фотографии, как будто сделанные специально для вас.

2. Иллюстрации

2.1. Open Peeps – библиотека иллюстраций

<a href="https://www.openpeeps.com/" target="_blank" rel="noopener noreferrer nofollow">Open Peeps</a>
Open Peeps

Open Peeps – интересная библиотека нарисованных от руки иллюстраций.

2.2. Smash Illustrations – конструктор иллюстраций

<a href="https://usesmash.com/" target="_blank" rel="noopener noreferrer nofollow">Smash Illustrations</a>
Smash Illustrations

Крутой конструктор иллюстраций для построения сцен с красочными рисунками и персонажами. Smash Illustrations работает со Sketch, Figma, можно создавать изображения в формат svg и png.

2.3. Open Doodles – набор иллюстраций

<a href="https://opendoodles.com/" target="_blank" rel="noopener noreferrer nofollow">Open Doodles</a>
Open Doodles

Open Doodles – бесплатный набор скетч-иллюстраций и анимаций на любой случай.

2.4. Control Illustrations – конструктор сценок

<a href="https://control.rocks/" target="_blank" rel="noopener noreferrer nofollow">Control Illustrations</a>
Control Illustrations

Библиотека Control Illustrations включает 108 иллюстраций с настраиваемым стилем и типами действий. Используйте конструктор, чтобы создать сцену, которую вы ищете.

2.5. Ouch! – векторные иллюстрации

<a href="https://icons8.com/ouch" target="_blank" rel="noopener noreferrer nofollow">Ouch!</a>
Ouch!

Проект Ouch! посвящен бесплатным векторным иллюстрациям в разных стилях, которые можно применить в пользовательских интерфейсах.

2.6. Avataaars Generator – генератор аватаров

<a href="https://getavataaars.com/" target="_blank" rel="noopener noreferrer nofollow">Avataaars Generator</a>
Avataaars Generator

Avataaars Generator служит для создания иконок уникальных учетных записей. Не знаете, какой стиль вам нужен – понажимайте на кнопки, пока не найдете то, что вам подходит.

2.7. Faux Code Generator – иллюстрация кода

<a href="http://knutsynstad.com/fauxcode/" target="_blank" rel="noopener noreferrer nofollow">Faux Code Generator</a>
Faux Code Generator

Часто в иллюстрациях, связанных с программированием, полезно изобразить код, но в каком-то обобщенном виде, скрыв само содержание. 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>
Parametric Color Mixer

С Parametric Color Mixer можно настроить цветовую палитру, как с помощью звукового эквалайзера.

3.2. CSS Gradient – градиент в стилях

<a href="https://cssgradient.io/" target="_blank" rel="noopener noreferrer nofollow">CSS Gradient</a>
CSS Gradient

Помимо того, что CSS Gradient – прекрасный генератор CSS-градиентов, ресурс содержит полезный обучающий контент.

3.3. Colorsinspo – сборник цветовых палитр

<a href="https://colorsinspo.com/" target="_blank" rel="noopener noreferrer nofollow">Colorsinspo</a>
Colorsinspo

Colorsinspo – это тысячи красивых цветовых палитр и инструментов, которые можно использовать в один клик, а также гора тематического чтива и туториалов.

3.4. Color Hexa – конвертер представлений цветов

<a href="https://www.colorhexa.com/index.php" target="_blank" rel="noopener noreferrer nofollow">Color Hexa</a>
Color Hexa

Бесплатный инструмент 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>
Color Space

Color Space предоставляет множество вариантов построения цветовых схем для вашего следующего проекта.

3.6. Palettte App – цветовые палитры по кривым

<a href="https://palettte.app/" target="_blank" rel="noopener noreferrer nofollow">Palettte App</a>
Palettte App

Palettte App отличается тем, что цветовой схемы можно генерировать через наложение кривых.

3.7. Colorable – проверка контрастности текста

<a href="https://colorable.jxnblk.com/" target="_blank" rel="noopener noreferrer nofollow">Colorable</a>
Colorable

Colorable проверяет контрастность текста для заданной цветовой палитры с учетом цвета фона.

4. Типографика

4.1. Freebiesbug – свободные шрифты

<a href="https://freebiesbug.com/free-fonts/" target="_blank" rel="noopener noreferrer nofollow">Freebiesbug (free fonts)</a>
Freebiesbug (free fonts)

Freebiesbug включает в себя не только шрифты, но и массу полезного контента: картинки, мокапы, шаблоны для сайта, вдохновляющие лендинги и прочее.

4.2. Fonts Arena

<a href="https://fontsarena.com/" target="_blank" rel="noopener noreferrer nofollow">Fonts Arena</a>
Fonts Arena

Fonts Arena распространяет как бесплатные, так и платные шрифты. Для облегчения поиска есть разделение на категории .

4.3. Befonts

<a href="https://befonts.com/" target="_blank" rel="noopener noreferrer nofollow">Befonts</a>
Befonts

На Befonts можно скачать лучшие бесплатные шрифты для личного или коммерческого использования – красивый script type, профессиональный sans serif и многое другое.

4.5. Font Squirrel

<a href="https://www.fontsquirrel.com/" target="_blank" rel="noopener noreferrer nofollow">Font Squirrel</a>
Font Squirrel

В популярный среди верстальщиков ресурс Font Squirrel встроен генератор цветов, распознаватель, гора бесплатных шрифтов, форум и полезное чтиво по теме.

4.6. Fontjoy – тест сочетания шрифтов

<a href="https://fontjoy.com/" target="_blank" rel="noopener noreferrer nofollow">Fontjoy</a>
Fontjoy

Fontjoyсервис для проверки сочетаний шрифтов из Google Fonts.

4.7. Type Scale – проверка читаемости шрифта

<a href="https://type-scale.com/" target="_blank" rel="noopener noreferrer nofollow">Type Scale</a>
Type Scale

Если нужно проверить, удобно ли читать шрифт в заголовках и при разном масштабировании, Type Scale делает все необходимые вариации значения line-height и margins.

5. Анимация и другие эффекты

5.1. Генератор плавных теней

<a href="https://brumm.af/shadows" target="_blank" rel="noopener noreferrer nofollow">Smooth Shadow Generator</a>
Smooth Shadow Generator

Плавными кривыми создаем необходимый теневой рисунок, 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>
CSSeffectsSnippets

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>
Separator Generator

Separator Generator – набор настраиваемых CSS-разделителей с возможностью легкого копирования кода.

5.4. Animista

<a href="https://animista.net/" target="_blank" rel="noopener noreferrer nofollow">Animista</a>
Animista

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

5.5. Draggable – Drag&Drop-эффекты

<a href="https://shopify.github.io/draggable/" target="_blank" rel="noopener noreferrer nofollow">Draggable</a>
Draggable

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>
Block Reveal Effects

Block Reveal Effects – красивая реализация постепенного появления блоков страницы, раскрывающихся по мере ее скроллинга (по ссылке есть демо-пример).

6. Иконки

6.1. IconStore

<a href="https://iconstore.co/" target="_blank" rel="noopener noreferrer nofollow">IconStore</a>
IconStore

IconStore – библиотека бесплатных векторных иконок для личных и коммерческих проектов, разработанных первоклассными дизайнерами.

6.2. CSS Icons

<a href="https://css.gg/" target="_blank" rel="noopener noreferrer nofollow">CSS Icons</a>
CSS Icons

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>
Icon Transition Generator

Создайте переход между двумя значками с помощью 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>
Tilda Icons

Tilda Icons – коллекция из более чем 700 бесплатных иконок, разделенных по категориям и тематикам.

6.5. Ikonate

<a href="https://ikonate.com/" target="_blank" rel="noopener noreferrer nofollow">Ikonate</a>
Ikonate

Ресурс Ikonate позволяет настроить иконку под ваши нужды и скачать ее.

6.6. Eva Icons

<a href="https://akveo.github.io/eva-icons/#/" target="_blank" rel="noopener noreferrer nofollow">Eva Icons</a>
Eva Icons

В пакете Eva Icons 480 опенсорсных иконок на темы действий и предметов. Можно использовать в вебе, iOS и Android.

6.7. Анимированные иконки

<a href="https://icons8.com/animated-icons" target="_blank" rel="noopener noreferrer nofollow">Animated Icons</a>
Animated Icons

На ресурсе с незамысловатым названием Animated Icons вы найдете 400 бесплатных анимированных иконок.

7. Паттерны и модели

7.1. Паттерны CSS

<a href="https://bansal.io/pattern-css#triangles" target="_blank" rel="noopener noreferrer nofollow">CSS Patterns</a>
CSS Patterns

Библиотека CSS Patterns на чистом CSS помогает заполнить пустой фон красивыми узорами.

7.2. Get Waves

<a href="https://getwaves.io/" target="_blank" rel="noopener noreferrer nofollow">Get Waves</a>
Get Waves

Простое веб-приложение Get Waves генерирует неповторяющиеся svg-волны – можно разнообразить границу футера.

7.3. Blob Maker

<a href="https://www.blobmaker.app/" target="_blank" rel="noopener noreferrer nofollow">Blob Maker</a>
Blob Maker

Blob Maker – генератор дизайна уникальных пузырчатых SVG-форм, как на картинке выше.

7.4. Генератор полигонов

<a href="https://msurguy.github.io/rad-lines/" target="_blank" rel="noopener noreferrer nofollow">Rad Lines</a>
Rad Lines

Rad Linesвекторный генератор SVG-полигонов на Vue.js.

7.5. Patterns

<a href="https://products.ls.graphics/paaatterns/" target="_blank" rel="noopener noreferrer nofollow">Patterns</a>
Patterns

Patterns – это узоры во всех векторных форматах, доступные для коммерческих и личных проектов. Один из шаблонов мы использовали при создании обложки этой публикации.

8. Справочные ресуры и подборки

8.1. Nucleo App

<a href="https://nucleoapp.com/tool/icon-transition" target="_blank" rel="noopener noreferrer nofollow">Nucleo App</a>
Nucleo App

Nucleo App – популярная библиотека с кучей иконок, а также мощное приложение для их сбора, настройки и экспорта.

8.2. Checklist design

<a href="https://www.checklist.design/" target="_blank" rel="noopener noreferrer nofollow">Checklist design</a>
Checklist design

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>
Design System Repo

Обширный и пополняемый список ресурсов, руководств по стилю и библиотек шаблонов, которые можно использовать для вдохновения – всё это Design System Repo.

8.4. CSSPeeper

<a href="https://csspeeper.com/" target="_blank" rel="noopener noreferrer nofollow">CSSPeeper</a>
CSSPeeper

Расширение для 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>
AI Image Upscaler

AI Image Upscaler – инструмент, использующий мощь искусственного интеллекта для того, чтобы попытаться восстановить качество изображения с низким разрешением и увеличить его.

Заключение

Мы надемся, что вам понравился этот список инструментов и ресурсов, и подборка поможет поднять свой скилл разработки на новый уровень. Не стесняйтесь поделиться своими любимыми инструментами в комментариях к этому посту. По этой тематике у нас есть ещё вот такие популярные статьи:

Источники

РУБРИКИ В СТАТЬЕ

МЕРОПРИЯТИЯ

Комментарии 1

ВАКАНСИИ

ЛУЧШИЕ СТАТЬИ ПО ТЕМЕ

BUG