Свежие утилиты, плагины и инструменты для продуктивности дизайнера. Выпуск № 4

b3nhk4613k9v7qiqpmdgeurnll8.png

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

#sketch


Color Timesaver
blog.prototypr.io/color-timesaver-ui-sketch-f973dbcb498a
Color Timesaver — это sketch-файл, который позволит быстро протестировать выбранную цветовую гамму в разных grid’ax. 5 цветовых ячеек, после редактирования символов приобретают нужный окрас и можно быстро оценить совместимость нескольких цветов.

sueoj5xfbndnrsw0lredvsrr3bm.png

Merge duplicate symbols
github.com/oodesign/merge-duplicate-symbols
Sketch плагин для очистки исходника от символов-дубликатов. Хорошее решение, если вы начали делать дизайн-проект, но где-то в глубине остались элементы, которые вовремя не были вынесены на symbol-уровнь. Плагин просканирует все артборды, найдет похожие и спросит, какие действия к ним применить.

cobbp6nl0bdlf_-h7uysryvwv4q.png

#icons


Iconbros
www.iconbros.com
Новый игрок на рынке иконбанков. В этой коллекции можно найти 835+ иконок, доступных в форматах SVG / PNG. В базе есть и тонкие и более интенсивные иконки. Некоторые немного выбиваются из стиля, лицензия позволяет использовать и в коммерческих целях. Библиотека постоянно пополняется.

ss6zakczfemj_h9qbubg4uwlzig.png

TW Fonts
tylerewillis.com/tw-fonts
Независимый девелопер Tyler Willis как-то решил попробовать сделать собственный бесплатный иконочный шрифт а-ля Font Awesome. Для первого раза у него отлично получилось: вы сможете найти 100+ пиктограмм в виде шрифта, которые можно подключить к собственному сайту.

uxmts6w5_vdkctownm08gno9elw.png

#stock


Low Polygon Art
www.lowpolygonart.com
Достаточно обширная коллекция градиентно-полигонных фонов. Попытки дать вторую жизнь уже устаревшей фишке через призму модных сейчас горизонтальных градиентов. Ставлю минус за то, что не вижу версий в высоком разрешении, но автор уже получает пожелания в комментариях к проекту и скорее всего отреагирует.

rpdt0pfnk54zxrv5dcgwf5v6vsq.png

#ux


Product Manual
www.productmanual.co
«Ресурсы для специалистов по продуктам». Это был дословный перевод. По факту — это огромная библиотека материалов по всем темам создания продукта: Фундаментальные принципы, дизайн-мышление, пользовательские исследования, определение проблем и так далее вплоть до прототипирования и дизайн-систем (eng).

x0u4mum1q42o2y44pgcksizmcmk.png

#development


Instagram.CSS
picturepan2.github.io/instagram.css
Возможность применять к изображениям на сайте Instagram’ные фильтры на чистом CSS.

ytetu3puh5f0npm8k-xjwogukae.png

Fluid slider by Ramotion
github.com/Ramotion/fluid-slider
Ramotion выдали готовый анимированный numeric-slider под iOS. При касании экрана, счётчик шустро выпрыгивает из под пальца, чтобы вы видели значение. Решение интересное, вопрос только в том насколько гибко кастомизируется, чтобы внедрить в свой набор компонентов и подогнать по стилю.

4sfalflg69nwc_vl1pvhjoze02y.png

Popular codepens of 2017
codepen.io/2017/popular/pens
Codepen с небольшим опозданием выложили хит-парад из 100 самых интересных pen’ов за 2017ый год. Есть много чего интересного, особенно для кодящих дизайнеров. В списке только те работы, которые собрали больше всего лайков в ушедшем году.

lgjpzo-ec50lyjy5zojrolpxk0y.png

Bootstrap.Build
bootstrap.build
Новый редактор тем для Bootstrap непосредственно в браузере. По принципу WYSIWYG можно кастомизировать любую тему с возможностью экспортировать в SAAS или сразу собрать билд. Фич достаточно много: open source, color picker, google fonts, code editor и так далее.

scgidoc9xf0x1oilsxwfk8ufetg.png

#webtools


IMAGinators
imginators.com
Свежий продукт на тему онлайн-презентаций. Для дизайнеров может рассматриваться как кейс-билдер. Внизу лендинга сможете найти примеры готовых кейсов. Если разбираетесь в анимации, то можно хорошо манипулировать вниманием читающего ваш кейс. Лично мне не хватило на посадочной быстрой демки самого конструктора. Обещают удобный drag’n'drop, а чтобы его посмотреть, нужно зарегистрироваться и заполнять много полей. За это небольшой минус.

auoju6i3bcl5pnn14qhqyypotie.png

Usetracy
www.usetracy.com
Браузерный инструмент для мгновенной конвертации в SVG рисунков от руки. Система отличает черное от белого и обводит контуры рисунка, далее просто скачиваете векторный файл. Очень удобно какие-то базовые концепты с бумаги сразу конвертировать и начинать обработку. Для будущих шрифтов, логотипов или иконок подходит оптимально.

vqmp3lzn1-q2hexvuamqxyijab4.png

#tools


Gifable
gifable.co.uk
Gifable — это очень простая утилита, которая записывает видео с экрана сразу в gif-файл. Как жаль, что доступна только macOs-версия. Я часто записываю какие-то микроитерации из своих наработок, но сначала это приходится снимать с экрана в видео файл, а потом уже конвертить в GIF. Безусловно записывать сразу в гифку было бы быстрее.

dj5j_y_7dfxybzvhykfuys1gxwm.png

#mood


SpotMenu for macOS bar
kmikiy.github.io/SpotMenu
Согласитесь, сложно недооценивать влияние музыки на дизайнерский рабочий процесс. Венгерский девелопер Miklos Kristyan считает точно также, поэтому пользователям мака дарит на Новый Год примочку, выводящую ITunes & Spotify прямо в верхнее macOS меню. Мгновенный доступ к плейлисту!

s2eddngoayoufk4i-dkjr00tlwa.png

#hints


Vertical onboarding
dribbble.com/shots/4058247-Vertical-Onboarding
Продуктовый дизайнер Maitrik Kataria смело экспериментирует с onboarding для приложения и предлагает экспериментально делать его вертикальным! Вместо горизонтального свайпа влево-вправо получаются смахивания тура на следующий. Интересно, догадаются ли пользователи как вернуться на предыдущий? Но идея определенно заслуживает внимания.

dubchfhqc-rzc-j59zhvp_1mdgs.png

#news


Designer’s survey of 2017
uxtools.co/survey-2017
Taylor Palmer провёл опрос среди почти 2000 западных дизайнеров и наконец-то выложил итоги. По ссылке статистика самых востребованных инструментов для: дизайна, прототипирования, анимирования, дизайн-спексов и так далее. Спойлер: Скетч всё еще впереди, но конкуренты не отстают.

plqyvg9p8yfot6u74zaolm7heva.png

Вы можете поделиться этой статьей. Давайте вместе развивать дизайн-сообщество и поддерживать разработчиков, помогая им распространять их полезные и бесплатные продукты. Спасибо за внимание!

Хронология: первый выпуск • второй выпуск • третий выпуск

© Habrahabr.ru