Иконки, вайрфреймы, фотостоки: подборка из 18 ресурсов

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

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

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

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

• Font Awesome — 68 категорий иконок. Их можно добавлять на сайты с помощью кода, применять в дизайнерских программах типа Figma или Illustrator. Есть дополнительные плагины, платная версия. Можно легко кастомизировать готовые иконки: изменять размер, стиль и даже добавлять анимацию.
• Iconfinder — иллюстрации, 3D-иллюстрации, 6 миллионов иконок, стикеры. Сортировка по стилям, тематике, коллекциям. Дается неделя пробной бесплатной версии, платная версия от 5 до 49 долларов в месяц в зависимости от пакета. Есть раздел с бесплатными иконками, там их тоже немало – 340 000+ вариантов.
• Fontello — очень простой инструмент, ничего лишнего, только простые иконки, которые легко сортировать. Бесплатный доступ.
• Nucleo — 32+ тысяч иконок, 6 размеров сетки (12, 16, 24, 32, 48, 64 пикселей), 3 стиля (контур, заливка, цвет). Приложение работает как органайзер, легко сортировать свои иконки и расставлять их удобно. Есть бесплатный образец, полная версия – единоразовый платеж с бесконечным доступом обойдется тебе в $99.
• Noun Project — 5 миллионов иконок от создателей из более чем 120 стран. Тут очень много интересных решений, если тебе нужны не базовые значки, а сюжеты. Найдется все от космонавтов и событий до зебр и футуристических технологий. Файлы в формате PNG или SVG. Иконки бесплатны, но нужно купить подписку, чтобы использовать их без указания авторства, получить опцию изменения цвета, фона и формы, убрать рекламу с сайта и открыть командный доступ. При годовой подписке цена в месяц $3,33, при разовой оплате на месяц – $9,99. На этой же платформе еще есть фотосток.
• Svgsus — конструктор + органайзер SVG-иконок на macOS. Широкий выбор программного обеспечения, совместимого с приложением. Можно использовать готовые библиотеки или загружать свои. Используется для организации, очистки и преобразования SVG в код, поэтому удобно и для дизайнера, и для верстальщика. В настоящее время также поддерживается векторный формат Swift, Pug (jade) и Android. Цена: $3.49.
• IconJar — приложение для macOS, которое представляет собой органайзер иконок. Очень удобная штука с обширным функционалом. Тут ты собираешь и сортируешь крутые значки, а при надобности легко переносишь их в рабочий инструмент для дизайна, в редактор кода, ПО для презентаций. Есть массовый экспорт и поштучный, готовые пресеты и возможность создавать собственные. Умный функционал позволяет создавать коллекции, собирать часто используемые иконки, помечать любимые, чтобы быстро найти их при необходимости. Приложение можно использовать бесплатно 2 недели, после окончания триала придется выбрать тариф: 24,99 евро в год или единоразово 74,99 евро с пожизненным доступом. Регистрироваться каждый раз с новой почты для получения бесплатного пробного периода бессмысленно – удобство приложения заключается в твоих настройках и коллекциях, которые ты постоянно улучшаешь.

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

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

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

• ScreenSpace — очень крутые интерактивные презентации, которые создаются без знания кода. Загружаешь сюда свой файл и дотягиваешь разными настройками до идеала. Приложение создано для в2в, помогает компаниям получить больше клиентов и покорять их с первого взгляда. Действительно обширный функционал. Есть бесплатная версия.
• Rotato — с помощью этого приложения легко создавать и настраивать реалистичные 3D-анимации и презентации. Автономный 3D-движок Rotato создан на основе достижений в области дополненной реальности и экстремальных игр, что дает нам быструю визуализацию студийного уровня. На выходе получаются файлы png, mov и hevc с прозрачным фоном. Это крутая штука для агентств, фрилансеров, разработчиков приложений, маркетологов, для создания портфолио UX-дизайнера. Неограниченная бесплатная пробная версия.
• Cleanmock — шаблоны для разных экранов и гаджетов. Загружаешь изображение, меняешь фоны, подбираешь оттенки. Есть бесплатная версия и платная ($4 в месяц). Простенько и со вкусом.
• Screely — просто перетащи файл и мгновенно превращай скриншот в вайрфрейм браузера. Можно легко редактировать изображение, поворачивать его, отразить или наклонить. Легко добавить фигуры, комментарии, рисунки, менять фон, настроить отступ вокруг изображения, а потом просто скачать.
• Smartmockups — подойдет не только для создания мокапов, но и позволяет делать простые рендеры без сложных программ. Это удобно в первую очередь при разработке айдентики. Если надо показать, как будет выглядеть сайт, логотип и футболка с этим логотипом, то это отличный инструмент. Есть мокапы для устройств, для социальных сетей, для полиграфии, упаковки, товаров для дома и декора, одежды и много чего еще.

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

• FreePhotos.cc — библиотека не огромная, но есть много нестандартных фото, которые не встретишь на других стоках. И еще тут есть встроенный редактор изображений, очень удобно. Бесплатно для коммерческого использования.
• Burst — бесплатный сервис на платформе Shopify. Изображения в высоком разрешении, постоянное расширение базы и новых категорий. Цель сервиса — создать лучшую бесплатную библиотеку изображений для предпринимателей, учитывающую текущие тенденции в электронной коммерции и розничной торговле. Фотографии можно использовать в любых целях, редактировать, обрезать или иным образом изменять их по своему усмотрению. Не требуются лицензионные отчисления и указание авторства.
• PxHere — фотобанк с простым интерфейсом и довольно хорошим выбором изображений. Есть сортировка по популярным и по новым – очень удобно, можно первым схватить крутую фотку для своего проекта.
• Zoommy — агрегатор изображений из 50 источников. 200 000+ бесплатных фото в базе для личных и коммерческих целей, без указания авторства. Поиск фотографий по ключевым словам и иконкам, по форме и цвету, по соотношению сторон. Фотографию можно добавить в избранное, скачать в высоком разрешении, сохранить в коллекцию.
• Flickr.com — десятки миллиардов фотографий. Интересные категории, коллекции, много необычных фото людей, портретов, профессий, событий.
• Unsplash — этот сток не новость для тебя, он достаточно известен. Но стоит включить его в эту подборку, потому что мы его любим и используем, поэтому от души рекомендуем.

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

Материал подготовлен командой образовательной платформы WAYUP