Как использовать иллюстрации в веб-дизайне? Более 20 примеров
Иллюстрации — эффективный способ передать тон и стиль вашего бренда и веб-сайта. Узнайте, зачем и когда их использовать, а также какие разновидности иллюстраций существуют.
Брендинг — не просто отражение чьих-то личных вкусов или предпочтений. Процесс разработки визуального брендинга предполагает большое количество исследований и анализа.
Когда мы разрабатываем визуальный стиль бренда, необходимо разобраться с целым рядом компонентов — логотип, цветовая палитра, типографика. Еще один важный элемент — изображения. Это понятие охватывает все — от фотографий, которые используются на сайте, до графики, которая появляется в рассылке компании, блогах и социальных сетях.
Но как решить, какой визуал лучше всего подходит бренду — фото и видео или иллюстрации?
Сегодня мы сосредоточимся на изображениях как одном из компонентов брендинга и, в частности, на том, зачем и когда вы можете использовать иллюстрации.
Мы рассмотрим преимущества применения иллюстраций в веб-дизайне, а также различные стили, на которые стоит обратить внимание.
Какую роль играют иллюстрации в веб-дизайне?
Хотя иногда возникает соблазн отодвинуть иллюстрации на второй план, они могут служить более важной и универсальной цели. Давайте разберемся, почему они зачастую предпочтительнее других типов изображений.
1. Передайте тон и стиль
Визуальные элементы могут многое рассказать пользователям о стиле бренда. Однако есть некоторые ограничения — не все можно передать через статичную фотографию или короткий видеоклип.
С помощью иллюстраций вы можете более открыто, чем с помощью реальных изображений (иногда гипертрофированно), выразить свой стиль и тон. Возьмем, к примеру, главную страницу Sour Patch Kids:
Конфетные «дети» сами по себе кажутся милыми и забавными. Однако простые фото жевательных конфет не передают тон и посыл, который пытается донести бренд. Иллюстрации на этом сайте (и в их дерзких маркетинговых кампаниях) отлично справляются с указанной задачей.
Иллюстрации помещают детей в различные сценарии — катание на велосипеде, попадание стрелы Купидона и выскакивают из-за каждого угла. Это демонстрирует игривую, озорную сторону бренда.
Тот или иной тип иллюстраций может добавить в интерфейс дополнительный контекст или представить отдельные компоненты вашего сайта в более правильном свете. Однако иллюстрации далеко не всегда легкомысленны — они также могут придать дизайну загадочность и глубину.
2. Выделяйтесь с помощью уникальных творений
Даже если вы не рисуете собственные иллюстрации с нуля, в них есть нечто более творческое, чем в фотографиях или видео людей, пейзажей и товаров. Иллюстрации позволяют выразить различные креативные идеи.
Например, дизайн, в котором используются плоские геометрические формы и линии, подходит компаниям, чья деятельность связана с наукой, математикой и технологиями. Подобный логичный и структурированный дизайн — это такой же вид творчества, как и любое произведение искусства.
Просто загляните на сайт иллюстраторского агентства, например, Inky, и вы увидите, какими разнообразными могут быть художественные творения:
Иллюстрации — независимо от их стиля и того, насколько широко они используются в дизайне — могут улучшить внешний вид вашего цифрового продукта. Они также позволяют дизайнерам экспериментировать с персонажами, предметами и пейзажами, которых не существует в реальном мире.
3. Добавьте в интерфейс узнаваемый маскот бренда
Как цифровые, так и физические бренды, могут использовать вместо логотипа маскот, который будет представлять их во всех маркетинговых каналах и каналах продаж. Эту задачу можно решить только с помощью иллюстраций.
Есть несколько способов применить маскот на сайте. Один из них — создать карикатурное изображение (как у Sour Patch Kids), которое будет следовать за посетителем во время его путешествия по сайту. Другое решение — взять графический знак из логотипа — или его вариацию — и использовать в дизайне, на фотографиях и страницах как водяной знак.
Последнее можно увидеть на сайте Olive Garden:
Изображение оливковой ветви очень деликатно появляется в интерфейсе то тут, то там. На скриншоте мы видим три таких случая:
- На иконке сумки над надписью «Кейтеринг»
- На карточке над надписью «Подарочные карты»
- В качестве текстурированного фона в футере
Она также используется в плейсхолдерах, когда изображения не полностью загружены в меню сайта:
Это отличный пример того, как сделать так, чтобы ваш иллюстрированный «маскот» следовал за посетителями — либо привлекая их внимание к ключевым областям страницы, либо просто усиливая брендинг.
4. Создавайте цифровые миры, которые ваши посетители никогда не видели раньше
Создать какой-то новый мир с помощью одних лишь фотографий практически невозможно. В этом нет ничего плохого, если изображения должны всего лишь дополнять основной контент сайта.
Если же вы хотите рассказать историю и создать свой собственный мир с помощью визуальных образов, иллюстрации — это то, что вам нужно.
Ваш мир не обязательно должен быть полностью иммерсивным или фантастическим. Иллюстрации способны показать мир, похожий на наш, только цифровой.
Главная страница сайта Yoast отлично поддерживает баланс между этими двумя идеями:
Поисковая оптимизация — непростая тема для визуализации. Yoast мог бы просто добавить на сайт кучу скриншотов своего плагина для WordPress. Вместо этого компания использовала иллюстрации, чтобы нарисовать абстрактный образ того, каково это — побеждать в SEO-игре.
5. Оживите сложные концепции или длинные истории
Иллюстрации также полезны, когда нужно объяснить посетителям сайта что-то сложное — например, общую концепцию бренда, его историю, этапы процесса и так далее. Все это можно изложить в тексте, но посетителям будет гораздо проще усвоить информацию через визуальные образы.
Один из способов применения иллюстраций — объясняющая анимация или видеоролики. Как, например, этот на главной странице Relish:
Хотя концепция коучинга отношений не слишком сложна для понимания, короткое и простое видео быстро резюмирует проблемы пользователей и решение, предлагаемое приложением.
Иллюстрации также можно использовать для визуализации данных, создания пошаговой графики, временных шкал и т.д. Если вам или вашим клиентам трудно донести идею или рассказать историю с помощью только текста или фотографий, иллюстрации — именно то, что вам нужно, чтобы спасти положение.
Как использовать иллюстрации в веб-дизайне: пошаговое руководство
Прежде чем вы начнете использовать иллюстрации в своем дизайне, необходимо выполнить несколько шагов.
Шаг 1: Понять зачем
Есть ли у вас четкое понимание того, почему вы решили использовать иллюстрации, а не фотографии или интересную типографику? Если вы не уверены или просто пытаетесь применить новый тренд, еще раз просмотрите раздел выше и убедитесь, что иллюстрации служат определенной цели.
Шаг 2: Найти свой стиль
В интерфейсах можно использовать различные типы иллюстраций. Мы уже рассмотрели несколько примеров выше, но это лишь верхушка айсберга.
Прежде чем перейти к следующему разделу и изучить эти типы, а также способы их использования, убедитесь, что вы определились со стилем и индивидуальностью вашего бренда.
Как только вы поймете, какие облик и тон вам нужны, подобрать стиль иллюстраций будет проще.
Шаг 3: Определить, какая часть сайта будет заполнена иллюстрациями
Сайт не обязательно должен быть полностью покрыт изображениями — это относится как к фотографиям, так и к иллюстрациям. Тем не менее, вы должны определить, сколько иллюстраций вам на самом деле требуется.
Например, хотите ли вы создать захватывающий цифровой мир? Если да, то большую часть визуала будут составлять иллюстрации. С другой стороны, если вы используете иллюстрации, чтобы помочь людям ориентироваться на сайте, а не в качестве элемента повествования или компонента собственного мира, их лучше добавлять в дизайн в умеренных количествах.
Шаг 4: Собрать свой набор инструментов для работы с иллюстрациями
Если вы планируете создать что-то по-настоящему уникальное, вам, возможно, придется нанять иллюстратора, который поможет вам с этой работой. Однако существует множество инструментов, которые помогут вам самостоятельно создавать иллюстрации и добавлять их на свой сайт.
Например, вы можете создавать иллюстрации с помощью таких программ, как Adobe Illustrator:
У вас также есть возможность скачать стоковые векторные изображения на специальном сайте, например, Shutterstock:
16 отличных примеров иллюстраций для сайтов
Далее мы рассмотрим 16 примеров иллюстраций для сайтов (в дополнение к пяти рассмотренным ранее). Мы разбили их на четыре типа, чтобы помочь вам найти вдохновляющие изображения в конкретном стиле:
1. Плоские иллюстрации
Плоский дизайн — это полностью двумерные интерфейсы.
Плоские иллюстрации, как правило, привлекают внимание, но при этом выглядят минималистично и непритязательно. Это означает, что вы можете использовать их в качестве дополнения к своему контенту, не перегружая посетителей слишком яркими визуальными образами. Более того, векторные иллюстрации остаются четкими в любом масштабе, что очень удобно, если вы создаете отзывчивый дизайн.
Давайте рассмотрим несколько примеров:
1.
The New Yorker
Первая иллюстрация из журнала The New Yorker:
Этот журнал давно известен своими карикатурами, а также иллюстрациями, сопровождающими статьи. Поэтому нет ничего удивительного в том, что у бренда имеется маскот по имени «Юстас», который периодически появляется в цифровой и печатной версиях журнала.
2. Copper
Еще один отличный пример того, как бренд может использовать иллюстрации, — это Copper. Каждый пост в CRM-блоге сопровождается уникальными изображениями:
Очевидно, иллюстрации разработаны на основе руководства по стилю бренда. Розовый цвет доминирует в (большинстве) изображений, и на всех мы видим однотипные мультяшные фигуры.
3. Goddard School
Если вы хотите использовать иллюстрацию в качестве фона, обратите внимание на сайт Goddard Family of Schools — хороший пример того, как сделать это правильно:
Цвета достаточно светлые, и на первый взгляд кажется, что перед нами просто текстурированный фон.
При ближайшем рассмотрении становится очевидно, что этот плоский дизайн содержит иконки, связанные с детским образованием, что вполне соответствует цели сайта.
4. CrowdHealth
CrowdHealth — еще один бренд, который использует плоскую графику эффективно:
Этот мультяшный видеоролик отлично демонстрирует болевые точки пользователей и объясняет преимущества альтернативного варианта медицинского страхования.
2. Полуплоские и трехмерные иллюстрации
Абсолютно плоский интерфейс может быть причиной проблем с юзабилити. Когда измерений не 3, а 2, некоторым пользователям трудно определить, с какими частями сайта можно взаимодействовать, а с какими — нет.
В последние годы для решения этой проблемы был создан плоский дизайн 2.0. Его нельзя назвать по-настоящему трехмерным. Это скорее “полуплоский” дизайн: большая часть интерфейса остается плоской, однако ключевые элементы будто выступают из него. Такой эффект достигается за счет теней, бликов, градиентов и других текстур.
Эти “неплоские” техники можно использовать и в иллюстрациях. Вот несколько примеров:
5. Chuck E. Cheese
На сайте Chuck E. Cheese нас встречает сочетание плоских и 3D-иллюстраций. Фон и декоративные элементы плоские, а мышь, маскот бренда, — трехмерная:
Учитывая, что у маскота есть реальный прототип, такое 3D-изображение работает довольно хорошо. Кроме того, это придает бренду более живой и интерактивный характер, чем плоское изображение мыши.
6. 23 and Me
23 and Me использует иллюстрации, чтобы продемонстрировать особенности и функционал своего программного обеспечения:
Скриншоты, представленные на сайте, — то, что видят пользователи 23 and Me, когда взаимодействуют с приложением. Дизайнер добавил плоские иллюстрации, которые как бы выскакивают с экрана, чтобы расставить акценты и подчеркнуть преимущества генетического тестирования.
7. Compose.ly
Compose.ly — еще одна компания, которая использует иллюстрации, чтобы визуально представить преимущества своего цифрового продукта:
Бренд не использует анимации, чтобы создать ощущение трехмерного пространства.
Вместо этого плоскости расположены под углом 90 градусов друг к другу. Тени создают иллюзию, что над людьми на графике есть источник света.
8. Barkbox
Сайт Barkbox — хороший пример ненавязчивого полуплоского дизайна:
Собаки-маскоты, сопровождающие покупателей повсюду — от сайта до коробки, которую они получают каждый месяц, — нарисованы в плоском стиле. Однако под ними есть текстурированная, будто поцарапанная поверхность, которая создает ощущение трехмерности (сейчас дизайн изменился, все иллюстрации заменили на фото собак).
3. Интерактивные иллюстрации
Хотите сделать сайт более живым? 3D-графика, безусловно, — один из самых эффективных способов решения этой задачи. В зависимости от ваших навыков работы с иллюстрациями и бюджета проекта, вы можете пойти еще дальше и заанимировать свои изображения.
Это позволит вам создать множество вещей:
- интерактивный первый экран
- Lottie-анимации
- полноценные обучающие видеоролики и т.
д.
д.Мы уже видели примеры интерактивных иллюстраций. Давайте рассмотрим еще несколько:
9. Updata One
Updata One — сообщество бизнес-аналитиков. Как говорится на главной странице: «Мы придаем информации смысл». Это не самая простая идея, которую можно передать с помощью фотографий или видео — по крайней мере, визуально интересным способом.
Вот почему эти абстрактные анимированные иллюстрации работают так хорошо:
Хотя контент организован вокруг иллюстраций, они служат скорее элементом навигации, побуждая посетителей продолжать прокрутку, чтобы узнать больше.
10. BetterUp
Мы все чаще видим, как компании отказываются от загружаемых отчетов в формате PDF в пользу цифровых. Или же они поступают так, как это сделала компания BetterUp — создают страницу с основными выводами, которая предваряет полный отчет:
Одним из преимуществ такого лендинга является возможность использовать анимированные иллюстрации для создания уникальных визуализаций данных.
11. Recurrency
Recurrency — хороший пример того, как можно отказаться от видеообъяснения и вместо этого более кратко описать вашу деятельность:
На первом экране мы видим, как работает процесс распределения товаров с помощью искусственного интеллекта в один клик. Это упрощает понимание технологии, поскольку мы используем понятные посетителям визуальные образы.
12. Цифровое агентство MeanPug
Последний пример интерактивной иллюстрации, на который нам стоит обратить внимание, представлен на сайте цифрового агентства MeanPug:
Первый экран имеет очень простой дизайн. Вместо того чтобы загромождать его фотографиями, дизайнер решил сохранить минималистичную стилистику. Несколько Lottie-анимаций появляются на экране, а затем исчезают, что добавляет забавный, креативный штрих, не перегружая дизайн.
4. Иллюстрации, нарисованные от руки
Если вы являетесь иллюстратором или хотите попробовать свои силы в создании собственных изображений для будущего сайта, у вас есть множество вариантов.
Линейные рисунки. Скетчи. Карикатуры. Примеры ниже демонстрируют некоторые из этих возможностей:
13. Marlow
Marlow — это компания, которая производит подушки. Хотя посетители найдут на сайте реальные фотографии подушек, они также будут периодически натыкаться на эти “сонные” иллюстрации:
На первый взгляд такая графика может показаться не слишком содержательной. Однако эти рисунки напоминают мне мемы, высмеивающие позы людей во сне, которые можно увидеть в социальных сетях. По сути, они говорят посетителям, что подушки понравятся любому — и тому, кто спит на боку, и тому, кто спит на спине и людям, которые любят спать в более оригинальных позах.
14. Misfits Market
Misfits Market — еще одна компания, чьи иллюстрации на первый взгляд могут показаться бессмысленными, но на самом деле многое говорят посетителям о бренде:
Misfits Market продает коробки с продуктами. Причина низких цен — все продукты деформированы или выглядят непривлекательно, поэтому в противном случае они были бы выброшены.
Если вы внимательно посмотрите на несовершенные детали иллюстраций слева и небрежный круглый штрих справа, вы поймете, что эти изображения отражают предложение бренда.
15. Airbnb
Большинство людей знакомы с Airbnb. Компания помогает арендовать жилье и бронировать “впечатления”, поэтому сайт наполнен фотографиями. Однако на главной странице есть раздел «Вдохновение для вашего следующего путешествия», который выбивается из общего ряда (прим. — недавно Airbnb провел редизайн, теперь все по-другому):
Возможно, дизайнер посчитал, что иллюстрации сильнее вдохновят пользователей на путешествия. В этом действительно есть смысл. Они выглядят как идиллические версии каждой локации.
16. Cleo
Сайт приложения для управления финансами Cleo выглядит так, как будто вы просматриваете причудливый мультфильм из 90-х:
Все кажется таким странным и необычным, но в этом и заключается очарование бренда. Интерфейс приложения то ругается на пользователей, то расхваливает их.
Простой сайт с фотографиями или видео никогда не сможет так же точно передать, с чем столкнутся пользователи внутри приложения.
Сделайте свой сайт заметным с помощью иллюстраций
Когда вы разрабатываете брендинг или сайт для нового клиента, один из первых вопросов, на который нужно ответить, — какую графику вы будете использовать? Фотографии и другие реалистичные изображения? Или иллюстрации?
Фото и видео встречаются повсеместно, и это одна из причин, почему иллюстрации часто помогают бренду выделиться из толпы. Но это еще не все. Иллюстрации также могут быть очень эффективным инструментом сторителлинга и позволяют создавать целые цифровые миры.
Собираетесь ли вы создать новый или обновить существующий сайт, возможно, пришло время поэкспериментировать с иллюстрациями.
50 онлайн-инструментов для дизайна: веб-сайты и мобильные приложения
Рано или поздно инди-команды и соло-разработчики завершают проекты и наступает этап, когда нужно создать для продукта красивую упаковку.
Предлагаем вашему вниманию большую подборку веб-сайтов и мобильных приложений, с помощью которых можно без специальных знаний и за короткий срок создать дизайн сайта, плакат, обложку и тому подобные вещи.
1. Стоковые изображения
1.1. Pexels
pexels.com | лицензия
Фотографы и видеографы выкладывают в Pexels свои работы для бесплатного скачивания. Ссылка на источник фото не нужна. Указывать автора снимка необязательно. Редактировать фото и видео разрешено.
1.2. StockSnap
stocksnap.io | лицензия
Изображения на платформе StockSnap распространяются под лицензией Creative Commons CC0, то есть разрешается делать следующее:
- скачивать файлы;
- публиковать, копировать, изменять и делиться изображениями;
- использовать изображения в личных и коммерческих целях.
1.3. Landing Stock
landingstock.com | бесплатно
Landing Stock предоставляет бесплатные высококачественные лендинг-изображения для личного и коммерческого использования.
1.4. icons8
icons8.com/creator | платная и бесплатная лицензии
Photo Creator позволяет комбинировать разные стоковые картинки для создания собственного уникального изображения. При бесплатном использовании изображение скачивается в низком разрешении и обязательна ссылка на источник.
1.5. ShotStash
shotstash.com | лицензия
Бесплатные фотографии распространяются на ресурсе ShotStash под лицензией CC0 license, вы можете использовать их в личных и коммерческих проектах.
1.6. Unsplash
unsplash.com | лицензия
В Unsplash фотографии выкладываются для свободного использования.
Разрешено:
- бесплатно скачивать;
- бесплатно использовать в личных и коммерческих целях.
Запрещено:
- продавать фотографии без внесения существенных изменений;
- копировать фотографии для размещения на аналогичных стоковых ресурсах.
1.7. Brust
burst.shopify.com | лицензия
Brust – бесплатная фотоплатформа с тысячами снимков в высоком разрешении. Фотографии может без атрибуции использовать кто угодно: блогеры, дизайнеры, разработчики, предприниматели.
2. Иллюстрации
2.1 DrawKit
drawkit.io | лицензия
DrawKit – коллекция бесплатных SVG-иллюстраций для коммерческого и личного использования в печатной и цифровой продукции. Ссылка на DrawKit необязательна. Запрещено перепродавать оригинальные иллюстрации.
2.2. Humaaans
humaaans.com | лицензия CC0
Пабло Стэнли выложил в открытый доступ набор иллюстраций, изображающих людей. Можно настроить их положение, одежду, цвета и прическу.
2.3. unDraw
undraw.co | лицензия
unDraw – бесплатные SVG-иллюстрации Катерины Лимпицуни для любых целей. Атрибуция не требуется.
2.4. freepik
freepik.com | лицензия
На freepik вы можете бесплатно использовать изображения для личных и коммерческих целей со ссылкой на источник, но есть ограничение на скачивание – 100 файлов в день.
В премиум-версии доступно больше иллюстраций без необходимости атрибуции.
2.5. IRA Design
iradesign.io | лицензия MIT
IRA Design позволяет прямо на сайте создавать иллюстрации с использованием готовых компонентов. Каждый из них имеет пять различных стилей градиента. Иллюстрации можно скачать в формате SVG, AI или PNG, распространяются они под лицензией MIT, то есть для бесплатного использования в личных и коммерческих целях.
2.6. Manypixels
manypixels.co/gallery | бесплатно
Все изображения, опубликованные на ManyPixels предоставляются для бесплатного использования в некоммерческих и коммерческих целях. Делать ссылку на автора или на сайт ManyPixels не нужно.
2.7. Freebie Supply
freebiesupply.com | лицензия в зависимости от ресурса
Freebie Supply – агрегатор бесплатных мокапов (от англ.
mock-up – макет), UI, иконок, дизайнов мобильных приложений для Photoshop и Sketch, а также шаблоны для WordPress, Figma, PowerPoint и Google Slides.
2.8. OUCH
icons8.com/illustrations | платная и бесплатная лицензии
На OUCH доступны бесплатные PNG- и SVG-иллюстрации от лучших художников с платформы Dribbble. При бесплатном скачивании нужно указывать автора и давать ссылку на сайт. Тематика иллюстраций широкая: от животных, еды, объектов до транспорта, веб-элементов (ошибка 404 и так далее) и людей.
2.9. Vecteezy
vecteezy.com | бесплатные и платные планы
Миллионы бесплатных векторных изображения размещены на Vecteezy. Еще больше изображений доступны за $9 в месяц.
3. Иконки
3.1. Vivid.js
webkul.
github.io/vivid | лицензия MIT
Vivid.js – это библиотека настраиваемых SVG-иконок, которая даст новую жизнь дизайну вашего сайта. В общей сложности есть более 90 иконок на выбор.
3.2. UI Store Design
uistore.design | бесплатно
557 бесплатных интерфейсов, иконок, лендингов для Sketch, Adobe XD, Figma, Photoshop, Illustrator, InVision и Webflow.
4. Пиксельная графика
4.1. Pixelart
pixilart.com | Google Play | App Store | бесплатно
Pixelart – редактор пиксельной графики и анимированных спрайтов.
4.2. Piskel
piskelapp.com | бесплатно
Piskel – бесплатный онлайн-редактор анимированных спрайтов и пиксельного графики.
5. Генераторы цветовых схем
5.1. Coolors
coolors.co | бесплатно
Coolors – генератор цветовых схем и градиентов с возможность сохранения удачных выриантов.
5.2. Colourco
colourco.de | бесплатно
Colourco позволяет генерировать монохромные, триадные и четырехцветные цветовые схемы.
6. Онлайн-редакторы изображений
6.1. Photopea
photopea.com | бесплатно с рекламой
Photopea – бесплатный онлайн редактор изображений, поддерживающий форматы PSD, XCF, Photoshop, Gimp, Sketch, JPG, GIF, SVG, PNG, PDF.
6.2. Pixlr
pixlr.com | Google Play | App Store | бесплатно или 4.9/14.99$ в месяц
В Pixlr можно удалить фон, наложить стикеры и иконки, добавить декоративный текст.
Есть приложения для Windows и MacOS, Android и iPhone.
6.3. fotor
fotor.com | бесплатно с ограничениями
Функции fotor – редактирование изображений (можно обрезать, поворачивать, изменять размер и добавлять эффекты) и создание коллажей.
7. Создание макетов
7.3. Paletton
paletton.com | бесплатно
Paletton – инструмент для создания цветовых палитр. Также есть готовые пресеты для комплиментарных сочетаний, триад, аналогичных сочетаний и тетрад.
7.4. Shotsnapp
app.shotsnapp.com | бесплатно с ограничениями или $36 за PRO-пакет на год
Создавайте макеты устройств за считанные секунды с помощью бесплатного инструмента Shotsnapp. Выберите устройство, добавьте изображение своего дизайна или скриншот, сделайте нужную настройку, а затем скачайте макет в JPG или PNG.
7.5. Screely
screely.com | бесплатно
Screely позволяет мгновенно превратить скриншот в макет без необходимости использования шаблонов Sketch или Photoshop. Просто загрузите изображение, и приложение сделает все остальное.
7.6. Screenpeek
screenpeek.io | бесплатно с ограничениями или $12 за пожизненную лицензию
Вставьте URL в Screenpeek, и он сгенерирует макет всего за 10 секунд. Макеты оптимизированы под устройства Apple.
7.7. SmartMockups
smartmockups.com | пробный период 7 дней
С помощью SmartMockups можно создать мокапы устройств, социальных сетей, полиграфии, упаковки, одежды и декора. На выбор есть 1400 вариантов макетов.
7.8. MockupWorld
mockupworld.
co | бесплатно
На MockupWorld размещены более 2500 бесплатных макетов: Apple Watch, iPad, iPhone, iMac, MacBook и так далее.
8. Бесплатные шрифты
8.1. Google Fonts
fonts.google.com – много кириллических и латинских шрифтов с открытыми лицензиями.
8.2. awwwards
awwwards.com – более 200 бесплатных шрифтов.
8.3. fonts-online
fonts-online.ru – комические, компьютерные и рукописные шрифты, а также шрифты LCD. Всего около 5500 штук.
9. Приложения для создания дизайна
С их помощью можно создавать плакаты, презентации, логотипы, флаеры, красивые фоны, анимацию, видеоролики и так далее.
9.1. Canva
canva.com | Google Play | App Store | бесплатно либо 899 руб/мес.
В бесплатной версии доступно более 250 тыс.
шаблонов, 100 типов дизайна, сотни тысяч бесплатных фотографий и графики. Для пользователя выделяется 5 ГБ в облачном хранилище.
9.2. Crello
crello.com | Google Play | App Store | бесплатно либо $7.99/мес.
Ограниченный план дает доступ к 30 тыс. шаблонов, 650 тыс. изображений, 32 тыс. клипов в формате FullHD, а также возможность 5 раз в месяц скачивать дизайн.
9.3. Supa
supa.ru | бесплатно с ограничениями
С помощью видеоконстркутора Supa пользователи создают короткие видео для социальных сетей, анимированные тексты, инфографику, слайд-шоу. В бесплатной версии количество роликов не ограничено, но на изображении будет присутствовать водяной знак «Supa», а лимит по продолжительности ролика равен 40 секундам.
9.4. pixteller
pixteller.
com | бесплатно с ограничениями
Функциональность pixteller: создание изображений для социальных сетей (YouTube-баннеры, рекламные картинки, обложки для Facebook), логотипов, постеров, флаеров, коллажей, мокапов, видеороликов и анимации.
9.5. easily
easil.com | бесплатно с ограничениями
На easily в основном делают постеры. Бесплатный план предлагает: 2500 шаблонов, 1 млн. стоковых изображений, текстовые эффекты, а также загрузку собственных картинок.
9.6. BeFunky
befunky.com | Google Play | App Store | бесплатно с ограничениями
BeFunky – онлайн-платформа «все-в-одном» подходит для редактирования фотографий, создания графических дизайнов и фото-коллажей.
10. Генераторы кода HTML
10.1. webcode
webcode.
tools – генратор HTML5 (поля ввода, аудио, видео, изображения, текст и так далее) и CSS-кода.
10.2. csstemplater
csstemplater.com – генаратор шаблонов HTML+CSS с одним или двумя сайдбарами, регулировкой ширины макета, высоты шапки и подвала.
11. Конструкторы сайтов
11.1. Tilda
tilda.cc | бесплатно с ограничениями
Ограничения бесплатного тарифа: 50 МБ, 50 страниц, один сайт и домен второго уровня domain.tilda.cc.
11.2. Wix
ru.wix.com | бесплатно с ограничениями
В бесплатной версии доступны стандартные шаблоны страниц «О нас», «Новости», «Контакты», «Пресс-кит», «События» и «Вопросы-ответы».
11.3. Nethouse
nethouse.ru | бесплатно с ограничениями
На бесплатном тарифе Nethouse предоставляется неограниченный трафик, SSL-сертификат, 10 товаров и 20 фотографий.
11.4. Ucoz
ucoz.ru | бесплатно с ограничениями
Возможности платформы Ucoz: 400 МБ под файлы, доступ по FTP и автопостинг в соцсети.
11.5. Ucraft
ucraft.ru | бесплатно с ограниченными возможностями
Ucraft позволяет безвозмездно подключить свой домен, создать 15 страниц и защитить их паролем.
11.6. Site123
ru.site123.com | бесплатно с ограничениями
На ограниченном тарифе выделяется 250 МБ под файлы и всего 250 МБ трафика.
Многие предоставляющие услуги виртуального хостинга компании обзавелись своими конструкторами сайтов. Цены на их услуги в несколько раз ниже, чем у вышеперечисленных сервисов, а ресурсов предоставляется больше.
12. Идеи и вдохновение
Можно воспользоваться методом «кради как художник»: вдохновляемся работой профессиональных дизайнеров, помещаем найденное на артборд (это такая папка, в которую складируется удачные макеты, иконки, изображения, тексты, видео), а потом из всего этого собираем собственный дизайн.
Где черпать вдохновение:
12.1. Pinterest
На Pinterest есть миллионы первоклассных дизайнов сайтов, векторная графика, плакаты, постеры и так далее.
12.2. Dribble
Dribbble – это платформа, на которой размешают портфолио профессиональные дизайнеры.
***
Часто случается, что действительно стоящие проекты остаются незамеченными из-за недружелюбного интерфейса, скучного дизайна или неэффективного маркетинга. Надеемся, наша подборка из 50 ресурсов поможет создать привлекательный ресурс и привлечь пользователей. Удачи!
4 лучших веб-сайта со стоковыми фотографиями для графических дизайнеров
Перейти к основному содержанию
Центр графического дизайна/
4 лучших веб-сайта со стоковыми фотографиями для графических дизайнеровСодержание
Визуальный контент критичен.
Вы даже можете возразить, что картинки важнее слов. Согласно одному отчету, две трети онлайн-покупателей оценивают высококачественные изображения как «очень важные» для их решения о покупке — выше «информации о продукте», «длинных описаний» и «обзоров и рейтингов».
Спрос на визуальный контент никуда не исчезнет в ближайшее время, и это хорошая новость для графических дизайнеров. Но угнаться за производством бывает непросто. Вот где в игру вступает стоковая фотография.
Что такое стоковая фотография?
Стоковая фотография — это изображения, которые снимаются для продажи и использования в различных целях. Это то, к чему обращаются компании, когда им нужны изображения, но нет ресурсов для организации собственной фотосессии. Некоторые стоковые фотографии можно использовать бесплатно для любых целей, в то время как другие стоковые фотографии имеют ограничения. Возможно, вам придется заплатить за лицензию, иметь ограниченное время для ее использования или быть ограниченным в бизнесе по сравнению с личным использованием.
Однако эти ограничения, как правило, намного проще и дешевле обойти, чем нанимать профессионала для съемки ваших собственных изображений.
У стоковой фотографии есть время и место. Например, в одном тесте от Marketing Experiments настоящие фотографии сравнивались со стоковыми, чтобы увидеть влияние на конверсию. Пользователи, которые видели изображения реальных клиентов, конвертировались на 35% чаще, чем те, кто видел стоковые изображения.
И это исследование отслеживания взгляда, проведенное Nielsen Norman Group, показало, что пользователи отдают предпочтение визуальному контенту, в котором представлены изображения реальных людей, а не стоковым фотографиям — последние являются «чистым наполнителем».
Стоковая фотография также полезна для использования вместо индивидуального дизайна, когда вам нужно уложиться в сжатые сроки для клиентов.
Вы не захотите использовать стоковые фотографии в качестве основного изображения продукта, но они особенно полезны для маркетинга и визуализации веб-сайтов.
Многие компании стремятся к здоровому сочетанию стандартных и нестандартных снимков.
Совет: Членские взносы и покупки стоковых фотографий можно отнести к расходам офиса при ведении бухгалтерского учета малого бизнеса.
Сведения о лицензировании стоковой фотографии
Каждая стоковая фотография сопровождается лицензионным соглашением. И условия в этих лицензионных соглашениях сильно различаются.
Для стоковых фотографий может потребоваться указание авторства фотографа, а иногда также ссылка. Другие фотографии не требуют такой атрибуции и предлагают более гибкие условия использования.
По сути, стоковые фотографии классифицируются одним из трех способов:
- Общественное достояние: Фотографии, являющиеся общественным достоянием, имеют наименьшее количество ограничений. Вам не нужно указывать авторство, и вы можете использовать его столько раз, сколько захотите, на любых носителях, которые вы выберете. Из-за доступности этих изображений они часто широко используются и могут ослабить ваш бренд и его влияние.
- Роялти-фри: На шаг выше общедоступных стоковых фотографий и изображений без лицензионных отчислений, за использование которых взимается плата. Вы платите за лицензию на изображение, а затем можете использовать его несколько раз, пока действует лицензия.
- Управляемые права: Этот тип фото идеально подходит для поиска. С лицензированной фотографией с управляемыми правами вы можете лицензировать эксклюзивный доступ к изображению. Это означает, что ваша фотография с меньшей вероятностью будет использоваться в другом контексте, не связанном с вашим брендом. Имейте в виду, что вы можете использовать фотографию только один раз с этим типом лицензии. Если вы хотите использовать его в электронном письме, а затем в рекламе на Facebook, вам потребуется повторно лицензировать рекламу на Facebook.
Из-за доступности этих изображений они часто широко используются и могут ослабить ваш бренд и его влияние. Если вы не уверены, проверьте веб-сайт, который вы просматриваете.
Должна быть подробная страница с описанием лицензионных требований и рекомендаций.
Спасибо! Ваша заявка принята!
Ой! Что-то пошло не так при отправке формы.
Лучшие веб-сайты со стоковыми фотографиями для графических дизайнеров
На этих веб-сайтах размещены бесплатные фотографии с регулируемыми правами, которые вы можете загрузить для использования в своем бизнесе графического дизайна:
Shutterstock
Shutterstock специализируется на бесплатных стоковых фотографиях для всех видов брендов и предприятий. Вы также можете просматривать не только стоковые фотографии. Shutterstock также предлагает бесплатные векторы, иллюстрации, кадры, видео и музыку, которые помогут вам развить все свои творческие ресурсы. Вы можете найти 3D-изображения, рефераты, образ жизни, фоны и многое другое. Просмотрите коллекцию, создателя, тему и другие фильтры, чтобы найти контент, соответствующий вашим потребностям.
Цена Shutterstock: Подписки начинаются с 49 долларов в месяц за 10 загрузок или в пакетах по 2, 5 и 25 за 29, 49 и 229 долларов соответственно.
Вы можете скачать 10 изображений Shutterstock бесплатно, чтобы сначала попробовать.
Getty Images
Getty Images — еще один сайт стоковых фотографий, не требующий лицензионных отчислений, — содержит материалы, предназначенные для творческого, редакционного, видео-, музыкального и блогового контента. Они предлагают надежную юридическую защиту с простым лицензированием, обещая «неограниченную компенсацию». Вы также можете запросить Премиум-доступ для получения фотографий iStock.
Если вы ищете что-то более конкретное, вы также можете воспользоваться опциями пользовательского контента Getty. Getty Images использует ресурсы глобальной команды создателей для выполнения вашего творческого задания, и вы получаете эксклюзивный доступ к совершенно уникальным фотографиям.
Цена Getty: Стоимость загрузки изображений начинается от 150 долларов за упаковку из 10 штук, и цены растут по мере уменьшения объема. Планов ежемесячной подписки нет.
Adobe Stock
Компания Adobe хорошо известна в индустрии дизайна своим мощным набором инструментов для графического дизайна, включая Photoshop и Illustrator.
С Adobe Stock вы можете легко искать стоковые фотографии, используя их программное обеспечение Creative Cloud. Вы можете получать изображения, фотографии, иллюстрации, векторы, видео, аудиоклипы, шаблоны и 3D-ресурсы, не покидая платформу. У них также есть несколько бесплатных стоковых фотографий, которые вы можете использовать бесплатно.
Если вам нужно добавить текст к изображениям, вы также можете воспользоваться Adobe Fonts, чтобы найти идеальный шрифт для своего дизайна.
Цена Adobe: Стоимость подписки начинается от 29 долларов США в месяц за 10 стандартных загрузок ресурсов. Вы также можете приобрести пакеты кредитов для одноразового использования.
Unsplash
На сайте Unsplash есть «фотографии для всех» — их более 2,5 миллионов. Есть целый ряд стоковых фотографий, включая все, от обоев до природы и рефератов. У них есть обширный выбор бесплатных изображений, и хотя указание авторства не требуется, оно приветствуется.
Unsplash постепенно запускает новые функции и инструменты, ориентированные на бизнес, поэтому стоит следить за этим веб-сайтом со стоковыми фотографиями.
Цена Unsplash: Действительно бесплатно!
Движение вперед с вашими фотографиями
Поиск правильного сочетания стоковых и нестандартных фотографий — это практика, позволяющая сбалансировать бюджет, качество обслуживания клиентов и философию дизайна. В то время как все всегда идеально, стоковая фотография полезна для сокращения бюджета, быстрого создания и расширения ваших собственных дизайнерских возможностей. На этих четырех фотосайтах есть высококачественные бесплатные изображения, идеально подходящие для графических дизайнеров.
Вам также может понравиться этот контент
Статья
Зарплата веб-дизайнера (и информация о продвижении по службе) за 2023 год
Статья
Кто такой иллюстратор (и как им стать)?
Статья
Зарплата иллюстратора: что вы можете заработать в 2023 году (и как заработать больше денег)
Статья
Как создать идеальное портфолио иллюстратора-фрилансера подписывайтесь на инстаграм
Статья
60 лучших ресурсов для иллюстраторов-фрилансеров, где они могут учиться, вдохновляться и общаться
Статья
18 лучших бесплатных инструментов для графического дизайна
Статья
8 потрясающих примеров графического дизайна и художников, стоящих за ними
Артикул
Как дизайнеру распоряжаться своим временем
10 лучших сайтов с бесплатными стоковыми изображениями для дизайнеров
Любой, кто когда-либо писал, проектировал или иным образом участвовал в создании веб-сайта или блога, знает, что наличие высококачественных изображений, доступных для вашего контента, абсолютно необходимо.
ключевой. Хорошо расположенное изображение может сделать для вас больше, особенно для взаимодействия с социальными сетями, чем любое количество SEO-оптимизации, спонсируемых постов или четких копий.
Любой порядочный веб-дизайнер или создатель контента тратит значительную часть своей жизни на поиски идеальных изображений для своих сайтов. Доступ к высококачественным стоковым фотографиям можно легко получить в Интернете, но часто эти изображения стоят очень дорого, что может стать препятствием для тех, кто работает с ограниченным бюджетом (или вообще без бюджета).
К счастью, если вы знаете, где искать, вы можете использовать множество бесплатных изображений превосходного качества.
Большинство этих изображений подпадают либо под классификацию Public Domain, что означает, что они никому не принадлежат и могут использоваться свободно, либо под защитой Creative Common License, что означает, что вам разрешено использовать изображение бесплатно, но обязаны приписывать изображение их создателю или владельцу.
Если вы хотите изменить изображение, подпадающее под действие Creative Common License, вам необходимо еще раз убедиться, что его лицензия позволяет вам это сделать.
Чтобы избавить вас от работы для следующей дизайнерской работы, мы составили список из 10 наших лучших бесплатных веб-сайтов с изображениями, готовых удовлетворить все ваши потребности в изображениях.
Эта страница — настоящая мечта любого веб-дизайнера. Он содержит множество блестящих фотографий высокого разрешения, векторов и иллюстраций, в нем легко ориентироваться с помощью высокофункциональных функций поиска, и, что самое главное, он абсолютно бесплатный. У вас есть возможность либо просматривать сайт в качестве гостя, либо получить бесплатное членство, которое позволит вам обойти капчу. Большинство изображений не требуют указания авторства, но обязательно проверяйте каждое из них, поскольку есть несколько исключений.
Доступен для поиска: Да // Атрибуты: Нет (почти для всех изображений)
Unsplash также является веб-сайтом с множеством изображений высокого разрешения, которые можно бесплатно использовать в личных или коммерческих целях без указания авторства.
Их огромный выбор великолепных фотографий можно сузить до таких категорий, как «люди», «технологии» или «природа». Вы также можете оформить подписку и каждые 10 дней получать 10 новых фотографий прямо в свой почтовый ящик. Так удобно!
Доступно для поиска: Нет // Атрибуты: Нет (лицензия Creative Commons Zero)
Думайте об этом ежемесячном электронном письме со стоковыми фотографиями как о лучшем спаме, о котором вы только могли мечтать. Зарегистрироваться легко и бесплатно — просто укажите свой адрес электронной почты, и все готово. Вы даже сразу получите бесплатный пакет фотографий в качестве специального приветственного подарка! На первый взгляд эти фотографии могут показаться немного общими, но темы и стили изображений делают их идеальными для использования в качестве фоновых изображений на веб-сайтах. Единственным реальным недостатком является то, что у вас нет возможности найти именно то, что вы ищете, поэтому будьте готовы к некоторому поиску, если вам нужно что-то конкретное.
Доступен для поиска: Нет // Атрибуты: Нет
IM Creator — это онлайн-инструмент для создания веб-сайтов, но они также собирают небольшую библиотеку фотографий премиум-класса для использования в ваших проектах. Их хорошо организованные коллекции содержат изображения того же, если не лучшего качества, что и платные стоковые изображения, и их можно бесплатно использовать в личных и коммерческих целях. Обратите внимание, что для изображений с этого сайта требуется указание авторства, но их исключительное качество того стоит.
Доступен для поиска: Да // Атрибуции: Да (под лицензией Creative Commons)
Большинство этих бесплатных изображений подпадают под действие лицензии Creative Commons, поэтому помните о правильном указании авторства при их использовании на своем веб-сайте. . Если вы хотите использовать эти изображения в своих собственных оригинальных проектах, убедитесь, что вы выяснили, разрешены ли изменения, и нужно ли указывать какие-либо изменения, которые вы внесли.
Также относитесь с уважением к зарегистрированным товарным знакам, так как они подчиняются другим правилам, чем лицензии Creative Commons. Хотя функция прямого поиска отсутствует, изображения очень хорошо классифицируются и даже указывают стили, шаблоны дизайна и камеру, которая использовалась для захвата изображения.
Доступен для поиска: Нет // Атрибуты: Да (лицензия Creative Commons)
Эта огромная и постоянно пополняющаяся коллекция изображений создателя Виктора Ханачека проста в навигации и содержит бесплатные стоковые фотографии, которые в большинстве своем не требуют атрибуции. Сайт полностью финансируется за счет рекламы, что позволяет ему продолжать работать, а Виктору путешествовать по миру и фотографировать. Этот сайт особенно хорош для снимков еды, поэтому, если вы ведете бизнес или ведете блог, связанный с едой, это может быть ответом на ваши молитвы.
Доступен для поиска: Да // Атрибуты: Нет (почти для всех изображений)
Вы можете поблагодарить добрых людей из канадского рекламного агентства Leeroy и его сеть фотографов за эту коллекцию изображений в высоком разрешении, являющуюся общественным достоянием, потому что они жертвуют всем.
Ограничений по авторскому праву нет, сайт обновляется еженедельно, и у них даже есть ссылка на похожий сайт с бесплатными стоковыми видео! Разве ты не любишь, когда люди добры?
Доступно для поиска: Нет // Атрибуты: Нет
Основная цель этого веб-сайта — продемонстрировать и открыть для себя сокровища великих фотографов, поэтому, если вы ищете стандартные изображения «Shutterstock», вы будете разочарованы. Вместо этого вы получаете коллекцию 100% бесплатных винтажных и современных фотографий высочайшего качества. Не плохо!
Доступно для поиска: Нет // Атрибуты: Нет
В этой коллекции стоковых фотографий в основном представлены просторные пейзажи и изображения, которые отлично создают особую атмосферу. Без указания авторства это может быть отличным инструментом для веб-дизайнеров. Если вы не найдете то, что ищете, зайдите в следующий четверг, когда каждую неделю будет загружаться 7 новых фотографий.
Хотя у вас нет функции поиска по подкатегориям, вы получаете доступ к архиву с меньшей сеткой, что позволяет быстро сканировать изображения, которые могут соответствовать вашим целям.
Доступно для поиска: Нет // Атрибуты: Нет
Эти 100 % бесплатные стоковые изображения — подарок вам от фотографа Райана Макгуайра. Без функции поиска вам придется немного прокрутить страницу, чтобы найти то, что вы ищете, однако, поскольку многие изображения имеют оттенок юмора, вам не так легко будет скучно. Вы также можете выбирать между различными категориями, чтобы ускорить поиск. Этот сайт работает по системе вежливости — ни указание авторства, ни оплата не требуются, но похвалы приветствуются, а пожертвования в его кофейный фонд с благодарностью используются, потому что он делает «лучшие снимки, когда принимает кофеин».
Доступно для поиска: Нет // Атрибуты: Нет
Бонус PikWizard содержит потрясающую библиотеку из более чем 1 миллиона стоковых изображений и видео.
Что отличает PikWIzard, так это то, что вы можете взять каждое изображение и отредактировать его в программе для графического дизайна Design Wizard. И образы людей тоже великолепны! Указание авторства не требуется, то есть вы можете использовать каждое изображение и видео по своему усмотрению. На веб-сайте есть изображения, спонсируемые Adobe и Shutterstock, но они четко помечены, когда вы наводите курсор на изображение.
Поиск: Да // Атрибуты: Нет
Поиск идеального изображения для вашего проекта может стать настоящей проблемой и отнять огромное количество времени, энергии и денег. Надеемся, что с этими сайтами вы сможете без проблем работать над своими проектами!
Комментарий к этой статье:
Согласны с нашим выбором? Вы используете бесплатную библиотеку изображений, которую мы не упомянули? Пожалуйста, поделитесь им с нами в комментариях!
Хотите больше?
Ищете интересные советы и рекомендации для дизайнеров? Почему бы не прочитать эти статьи:
Психологический подход к цвету бренда
Шесть способов подняться на вершину в следующем конкурсе дизайна
12 инструментов для современного веб-дизайнера и предпринимателя
