ypx
INTENSIVE
Попробуй себя в UX/UI-дизайне UX/UI-дизайн бесплатно
7 дней
5 проектов в портфолио
проверка дз
banner-circle
INTENSIVE
Попробуй себя во Frontend разработке Frontend бесплатно
7 дней
1 полноценный проект
проверка дз
banner-circle
Подборка сайтов с бесплатными анимациями и иллюстрациями
Сегодня не так часто встречаются дизайнеры-иллюстраторы или веб-дизайнеры, которые отлично знают моушн-дизайн. Но иногда так нужны качественные картинки или анимации для проекта. Эта подборка поможет решить проблему.
Веб-дизайн
5341

При реализации дизайн-проекта часто нужны качественные иллюстрации для фона, выделения определенных блоков или просто для красоты, и анимации для вовлечения. И не каждый дизайнер умеет рисовать (да и не должен уметь, так как у него другие задачи) или знает принципы моушн-дизайна (если знает — отлично, а если нет — ничего страшного). В таком случае спасают специальные ресурсы, где собраны авторские картинки, анимации. Вам достаточно только выбрать нужные, скачать и использовать. И мы подготовили подборку таких сайтов с бесплатными иллюстрации и анимациями.



Сайты с анимациями


GSAP


Библиотека анимаций, разработанных на JavaScript и совместимых со всеми современными браузерами. Есть как сложные элементы, так и очень простые, шаблонные. Библиотека работает с SVG и объектами jQuery.

Animate CSS


Ресурс с открытым исходным кодом. Нужен для добавления анимаций CSS3 на нужный сайт. Ценен тем, что предлагает протестировать стили анимированных объектов, их механику, оценить «конструкцию» в целом.

Tuesday


Ресурс не очень популярен, но в нем есть отличные анимации. По стилю они очень простые и подойдут для сайтов, оформленных в стиле минимализм. Библиотека функционирует на чистом CSS. А ресурс сделан так, что на нем вы можете увидеть, как появляются или исчезают анимации с сайта.

Mo.js


Одна из лучших библиотек JavaScript, где можно сделать графику, которая будет двигаться поверх анимации. А еще внутри много функций, которые упрощают работу с анимированными объектами.


Сайты с иллюстрациями


Iconspace Library


Сайт, где можно не просто подобрать качественные иллюстрации, но и изменять основные, второстепенные цвета на нужные. Искать картинки удобно через ключевые слова или выбор тематики. А кроме изображений, доступны иконки в авторском, оригинальном стиле.

Woobro


Иллюстрации с градиентами и похожими героями для платных проектов. Можно загрузить в форматах PNG, SVG, Sketch, AI.

Storytale


Картинки разделены по тематикам:

  • e-commerce;
  • эко-жизнь;
  • стартапы;
  • работа, бизнес;
  • отдых;
  • медицина;
  • люди;
  • интерфейсы;
  • дом;
  • другое.

Иллюстрации сделаны в разных стилях, но в рамках одной тематики. Часть картинок бесплатная, часть — платная.

Ouch!


Библиотека с PNG-картинками, разделенных по категориям. Есть иллюстрации о бизнесе, здоровье, выходных, людях, транспорте, спорте и т.д. Кстати, картинки можно скачать и в формате SVG, но это платная опция.

Smash Illustrations


Иллюстрации в разных стилях:

  • 3D;
  • контурные;
  • частично контурные, а частично 3D;
  • плоские;
  • без контуров, другое.

Практически на каждой картинке присутствуют люди. Темы разные — танцы, дом, стартапы, любовь, обыденная жизнь в разных ее проявлениях.

IRA Design


Не просто сайт с иллюстрациями, а целый конструктор, где вам сначала предлагают выбрать нужный градиент для каждого основного элемента (вообще их 4 и для каждого доступно 5 цветов). Затем нужно определиться с самими картинками. Они разделены на 3 основные категории — задний фон, люди, объекты.

Phonies


Иллюстрации стилизованные, но есть один нюанс — на каждой есть телефон или другой гаджет. По стилю тоже есть из чего выбрать — можно найти картинки просто черно-белые, объемные и разноцветные под лендинги, небольшие блоки, многостраничники. Бесплатно разрешено загружать рисунки в SVG-,PNG-,AI-,PDF-форматах.

unDraw


На этом ресурсе в иллюстрации реально менять только основной цвет. Очень удобно, что он может быть любым из основной палитры. Картинки в нескольких похожих стилях, но в них сочетается контурная графика с объемной.

Freellustrations


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

Humaaans


Ресурс с картинками людей, нарисованных в интересной технике и без лиц. Вы можете менять основные элементы — прическу, одежду (как сверху, так и снизу), а еще расположение ног (что в общем повлияет на позу человека). А еще фон можно экспериментировать с фоном — оставить, изменить или убрать и использовать чисто иллюстрации с людьми.

Delesign


На сайте представлена векторная графика, в которой можно частично изменять цветовую гамму и сохранять картинки в формате SVG или PNG. Изображения поданы не в формате разделенных на категории, а рандомной лентой. Но вы всегда можете сразу найти то, что нужно, благодаря поисковой строке и ключевым словам. А кроме картинок, на сайте еще есть иконки на разные темы.

Pof-Pof! Illustration Kit


Сайт наполовину бесплатный, так как картинки в SVG-формате можно скачать только платно, а вот в PNG — без какой-либо оплаты. Есть иллюстрации в разных стилях, а среди основных персонажей — люди с необычными пропорциями в разных жизненных ситуациях.


Open Doodles


Если для вашего проекта нужны контурные иллюстрации с милыми героями, вам на этот ресурс. Здесь картинки в виде скетчей и разными персонажами — парнем, собакой, девушкой. Есть как одиночные иллюстрации, так и целые композиции с 2-3 героями.

Isometric Love


Ресурс с подборкой изометрических изображений на разные темы — от простенький иллюстраций с деревьями до полноценных композиций с множеством объектов. Одна из особенностей — кроме статичных картинок, есть и анимированные.

Illlustrations


Сайт, где собраны лучшие работы с челленджа «100 дней иллюстраций». Они небольшие и больше напоминают иконки, чем полноценные иллюстрации, но для некоторых категорий и тематик сайтов подойдут (например, для продажи услуг, которые касаются развлечений детей).
Понравилась статья? Сохраните её в своих соц. сетях!
обучайся с нами профессии
UX/UI-дизайнер
Подробнее о курсе
Читайте другие статьи
Визуализация данных: что надо знать UX/UI-дизайнеру?
Разбираемся, как спроектировать дизайн интерфейса IT-продукта, содержащего большое количество данных. Узнайте, какой должна быть визуализация данных, чтобы пользователь легко и быстро нашел нужную информацию.
Веб-дизайн
1086
Как разместить текст на фотографии: советы дизайнерам
Умение грамотно разместить текстовую надпись на фото или иллюстрации — один из ценнейших навыков в арсенале UX/UI-дизайнера. Внутри статьи вы найдете 10 приемов, которые помогут «подружить» тексты с изображениями.
Веб-дизайн
5696
Собираем библиотеку дизайнера: 10 лучших книг для начинающих
Наша подборка пригодится тем, кто учится или уже строит карьеру UX/UI-дизайнера. Также она будет интересна всем, кто лишь недавно заинтересовался темой дизайна и хочет узнать о ней больше.
Веб-дизайн
2826
Получайте первыми свежие статьи из нашего блога прямо на вашу почту
Введите корректный e-mail
Никакого спама. Только ценные и полезные статьи для вас!