Главное Авторские колонки Вакансии Образование
203 0 В избр. Сохранено
Авторизуйтесь
Вход с паролем

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

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

#sketch

SketchGIF

Разработчик плагина Gifme для Скетча перезапустил дизайн сайта. Ну а сам плагин позволяет вместо статичных img-плейсхолдеров вставлять видео или GIF и проигрываться они будут прямо в workflow.

www.sketchgif.me

8dqxkqwepzjdrzmzdtta7mvngbs.png

#icons

Iconfinder 2017 summary

Iconfinder опубликовал свое саммари за 2017ый год: рейтинг самых популярных iconset'ов, топовые поисковые запросы, топовые icon-дизайнеры ресурса и прочая достаточно любопытная статистика.

www.iconfinder.com/2017-in-review

sl3-yogdg-i55fiir-1fio52dym.png

#development

Developers' Roadmap

Мощнейший roadmap для веб-девелопера на 2018-й год. Основной прогноз, что код будет сближаться с дизайном, поэтому многие дизайнеры начинают проявлять интерес к разработке. На этих схемах можно изучить рекомендованный путь в соответствии с интересами: front, back или же devops.

github.com/kamranahmedse/developer-roadmap/blob/master/README.mdotxvfxrin5tqh90p3e15mcdzdjg.png

#css

CSS background patterns

Freebie Supply собрал в одном месте интересную коллекцию чисто CSS-ных фонов, взятых с Codepen.

freebiesupply.com/blog/css-background-patterns

uz8jmc-xn3mabgfjtm8xqjprxwo.png

#webtools

HD Rainbow

Более продвинутый цветогенератор на основе загруженного изображения. Во-первых, цвет можно скопировать в буфер по клику. Во-вторых, можно переключаться между RGB, HEX, HSL. И в-третьих, есть возможность скачать палитру отдельным PNG-файлом.

www.hdrainbow.com

4rlbulzzyhmgdqy77c1cdhbbnda.png

#fonts

Archetype App

Еще один веб-инструмент для подбора шрифтовых пар. Доступны все шрифты google fonts и не только. Удобно, что превью гарнитуры появляется сразу при наведении курсора на шрифт. Есть контролы, чтобы быстро сделать инверсию цветов. Можно изменять межстрочные и межбуквенные интервалы. Продукт оформлен стильно и удобно. Есть даже экспорт шрифтовго лейаута сразу в Sketch!

archetypeapp.com

jovoejqp2rjsrvumuhc7135upmy.png

#webtools

Shout

Shout — это вебтулза, позволяющая быстро сгенерировать Gif-анимашку из текста и фонового изображения прямо в браузере. Конструктор напоминает создание цветных постов в Facebook. Мне не хватило возможности изменять delay анимации.

grahammacphee.com/shout

4es5zu0li4ziydj-wn20z3ylkfu.png

#development

Rainglow

Если вы пишете код и хотите немного разнообразить стандартную тёмную схему вашей среды, то посмотрите предлагаемые ресурсом RainGlow темплейты. На ваш выбор 50+ различных вариантов как тёмных так и светлых тем для самых распростаненных сред разработки.

rainglow.io/preview

pknc2vbdg9uxibdb5a7rxbqmaa8.png

#webtools

CSS Gears

Еще один генератор градиентов в браузере. Слайдерами можно менять близость цвета к соседнему. Хинт: цвет копируется в буфер по клику на HEX код, а если до этого кликнули иконку редактирования, то откроется попап с палитрой. Доступен функционал копирования сразу в CSS. Не хватает возможности менять угол поворота градиента.

gradients.cssgears.com

fmuragx9aff6gmcwjbapqvprefi.png

#fonts

Fontsquirell

Все новогодние каникулы работал над собственным продуктом и когда встал вопрос оформления посадочной, долгое время выбирал шрифт. В дни типографического дизайна шрифт — это все! А если ваш продукт (читайте — мой) нацелен на западную аудиторию, то нужно соответствовать актуальным трендам. Я выбирал между Renner и Aileron. Оба шрифта бесплатны, распространяются по лицензии OFL, есть WOFF версии. Победил второй, т.к. неогротеск в наши дни для девелоперского продукта подходит больше, но Renner я держу прозапас. Его современная и сбалансированная Futur-ичность меня тоже зацепила.

www.fontsquirrel.com/fonts/rennerwww.fontsquirrel.com/fonts/aileron

oswmklwmnbbq9yo8w6d-e4vrpju.png

#development

386 Bootstrap Theme

Необычная bootstrap тема в стиле MS DOS, напоминающая эпоху 386-ых ЭВМ. Особенно доставляют ansi-шные надписи в стиле warez-групп того далёкого периода. Отличная эмитация атмосферы BBS'ок и прочего фидонета :)

github.com/kristopolous/BOOTSTRA.386

uabhxkahhaurcso0ekyfnli2toe.png

#sketch

Frames For Sketch

Свежий проект на тему всякой всячины для Sketch: темплейты, примеры, туториалы, хинты и руководства. Файлы лежат на Gumroad, для бесплатного скачивания потребуется ввести почту и «0» в текстовое поле попапа скачивания.

framesforsketch.com/freebiescnxmvome0lk6tgw2754u157mbas.png

#icons

Heroicons 104 SVG

Hero Icons — это бесплатный набор из 104 SVG-иконок с интенсивной обводкой

github.com/sschoger/heroicons-uipf1ehbrxndjiew1hzdz9pqcv8sa.png

#tools

Inboxer Gmail Client

Неофициальный Gmail-клиент в виде exe-файла. Доступен под Win/Linux/macOS. Я знаю, что для ряда дизайнеров почта все еще основной способ связи с клиентом. Тем более мне всегда нравятся приложения, которые выполнены в стиле material, но с позитивными отступлениями от регламентированных гайдлайнов.

denysdovhan.com/inboxerpcjpsvr8jcidiefvecwmyus6zwy.png

#sketch

Sketch Forma Library

Небольшая символьная дизайн-системка для Sketch от разработчика Amr Kamal. Позволит быстро сконструировать нужный набор форм в вашем макете. Есть даже небольшой набор правил.

dribbble.com/shots/4085830-Forma-Library-v1-0

lmn1wokgm7yszmkcxloxodv1m1u.png

#development

Reactive Search UI Components

Open source библиотека react-компонентов для организации поискового функционала для вашего web-продукта. Позволяет организовать выдачу в виде карточек, к которым применима фильтрация.

opensource.appbase.io/reactivesearch

ysejrrkmuxyq3kejdohsjg0okwi.png

#mockups

Simple Mockups by LStore

Студия LStore выпустила серию очередных стильных мокапчиков в разных цветах, как десктопных девайсов, так и мобильных. Версии для PS / Sketch. Безусловно вас хотят зацепить бесплатной версией, но продать в итоге вам полный набор за $49.

lstore.graphics/simplemockups

zi8-ra9skrt-go3dazp_4bnr3wo.png

#mood

Gradient Folders

Интересный UX-набор из градиентных папок вместо дефольных для Win/macOS. Можно таким образом сделать заметнее самые важные папки на рабочем столе.

una.im/gradient-folders

v0fghwkvh9owylmumutl2plcrpk.png

#sketch

Sketch Icon Library

Плагин к Скетчу для генерации символьной библиотеки иконок. Импортируете список из SVG-файлов, плагин соберёт их вместе по заданным критерям, конвертирует в символы и вынесет цвет на первый уровень.

github.com/AMoreaux/Sketch-Icons

j3flsm6myd3tf72de1xr_jkzrfa.png

#css

CSS arrows

Подборка чисто CSS-ных стрелок с Codepen на любой вкус и цвет. Для многих уже проработана анимация, некоторые позволят привлечь больше внимания, некоторые агрессивнее намекнут на scroll down, некоторые отлично подойдут под слайдер на посадочную.

freebiesupply.com/blog/css-arrows

szc70j2ob8a_cydn1b63dgmjrxq.png

#uikit

Material Design System for Figma

Вышла компонентная material дизайн-система для Фигмы. Содержит более 240 constrained элементов для прототипирования приложений как web так и мобайл под react-фреймворком material-ui-next.com или ангулярным material.angular.io

setproduct.com/material

olhuuexl-jkj0wtnmxtarvxrbdc.png

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

Новые ссылки появляются на канале "Полезное дизайнеру" ежедневно. Подписывайтесь: https://t.me/podesign

0
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Комментарии
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать

Spark использует cookie-файлы. С их помощью мы улучшаем работу нашего сайта и ваше взаимодействие с ним.