Как работает дизайнер? Неужели все идеи рождаются у него в голове? Такие вопросы часто задают люди далекие от работы веб-дизайнера. Мы же знаем: что идеи нужно черпать из разных источников, и контент для будущих сайтов или интерфесов тоже нужно где-то брать.

Я сделала подборку сайтов, которые ежедневно использую в своей работе.

Изображения и видео

Рабочий процесс

Unsplash

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


Pexels

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


Kaboompics

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


Coverr

Бесплатные видео для сайта. Для скачивания не требуется регистрация.


Freepik

Большое количество бесплатных фотографий и иллюстраций. Также на сайте доступны и другие виды контента: иконки, мокапы и прочее.


UnDraw

Обожаю этот сайт. Много бесплатных иллюстраций на разные тематики. Чтобы адаптировать одну из них под свой стиль, достаточно вписать HEX-код цвета в верхнем меню.


CleanPNG

Агрегатор PNG с прозрачным фоном. Есть как фото, так и иллюстрации на большое количество тем. Минус сайта: зачастую картинки не в самом высоком разрешении.


Еще несколько сайтов, если фотографиям или видео требуется компрессия:

TinyPNG

Compressify

Шрифты

Шрифт

Google Fonts

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

Paratype

На сайте можно найти хорошие варианты шрифтов для кириллицы. Также есть раздел с бесплатными шрифтами или демо-версиями.

Fontsquirrel

Хороший сайт, если вам нужны не совсем обычные шрифты и шрифты для логотипов. Практически все представленные в каталоге можно скачать бесплатно в один клик.

Fonts In Use

Хороший сайт, на котором можно найти примеры продуктов с использованием шрифтов, а также датами создания, регионом и историей. Больше подойдет для вдохновения.

My Fonts

С помощью этого ресурса можно легко распознать шрифт на картинке и сразу же найти его в каталоге. Много раз выручал меня, когда заказчик просит восстановить логотип или печатную продукции по картинке.

Иконки

Иконки для вебсайта

Flaticon

Один из самых популярных сайтов в этой тематике. Несмотря на наличие премиум-аккаунта, тут полно бесплатных иконок. Их можно скачать в формате png, svg, eps и psd. Для однотонных иконок существует встроенный редактор цвета, который позволяет экономить время на перекрашивание в графическом редакторе.

IconFinder

Большая база иконок в различных стилях: аутлайн, глифовые, флэт и даже 3D. Есть удобный фильтр и бесплатный контент.

The Noun Project

Более двух миллионов файлов уже на сайте. Для скачивания требуется регистрация. Я всегда захожу на этот сайт в поиске необычных иконок, которых нет нигде. Однажды на работе, нам с командой пришлось работать над e-commerce на тематику игрушек для взрослых. Так вот на этом сайте был полный перечень иконок такого рода:)

Icons8

Довольно интересные и бесплатные иконки.

Font Awesome

Шрифтовой вариант, отлично подойдет в случае, если вам нужны иконки маленького размера. Они разработаны таким образом, чтобы не терять качество линий, то есть не расплываться. Работать с этим довольно просто:

  1. Скачайте и установите у себя на компьютере соответствующие шрифты FontAwesome.
  2. С помощью поиска на сайте находите подходящие иконки.
  3. На внутренней странице иконки находиться кнопка “Сopy Unicode Glyph”. Нажмите её.
  4. Перейдите в макет и сделайте контейнер для текста.
  5. Вставьте скопированую иконку (Ctrl (Сmd) + V) и выберите из списка шрифтов Font Awesome (подходящее начертание). У вас должна отобразиться выбранная иконка.

Цвет

Покрашенный ананас

Color Adobe

Цветовой круг от Adobe для выбора различных сочетаний.

WebGradients

Потрясающий выбор готовых градиентов.

Colorhunt

Подборка интересных цветовых палитр.

Flat UI Color Picker

Хороший сайт для выбора оттенков. Можно изменить цветовой режим в настройках: CMYК, RGB, HEX и т.д.

Лендинги

Стол с ноутбуком

One Page Love

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

Landingfolio

Еще один сайт с подборкой классных лендингов на разные тематики.

Вдохновение

Вдохновение

Behance

Социальная сеть для дизайнеров всего мира. Тут можно не только искать вдохновение в работах других, но и публиковать собственные. Ресурс позволяет делать полноценные презентации и использовать ваш профиль как портфолио. Behance уже давно стал одним из способов продвижения для дизайнеров. Нередко площадку используют для поиска сотрудников HR различных компаний. Это одна из причин, почему биханс может стать важной частицей карьеры в дизайне.

Dribbble

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

Awwwards

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

Pinterest

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

Pttrns

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

UX

UX

UX-Journal

Отличный и довольно свежий ресурс о UX на русском языке.

UX Checklist

Чек-лист, который пригодиться на больших проектах. Каждая составляющая качественного user-experience подробно расписана.

Прототипирование и презентация

Анимация приложения

InVision

Ресурс для создания кликабельного прототипа или презентации уже готового сайта или приложения заказчику. Есть free аккаунт с возможностью создать один прототип бесплатно. Кроме того, для быстрой интеграции своего макета в среду InVision существует специальный плагин Craft.

MarvelApp

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

Статьи и полезное

Кофе и журнал

Medium

Полезные статьи, подборки крутого дизайна, советы и ссылки от дизайнеров со всего мира. На медиуме можно найти практически все.

Хабр

Харб – уникальный кладезь полезных статтей на русском языке. Сразу даю ссылку на тематику дизайна, хотя сам формат сайта более широкий.

Say-Hi

Хорошие статьи по дизайну и обзоры современных трендов.

Bureau

Рубрика советов на сайте Бюро Горбунова. Вы сможете найти подробные ответы на нестандартные вопросы дизайнеров.

Telegraph Design

Сайт на украинском языке от дизайн-школы Projector. Освящает не только общие темы, но и интересные события в мире украинского дизайн-комьюнити.

Подписывайтесь на меня в Instagram – @frusia.pro – будьте в курсе анонсов новых уроков, смотрите проверки домашек в сторис, задавайте вопросы, а также вас ждет множество полезных постов про дизайн.