В этом выпуске Вы найдете 34 ссылки на свежие и полезные релизы, авторы которых вносят значительный вклад в развитие профессионального сообщества дизайнеров whи разработчиков, так как делают это безвозмездно. В сегодняшнем выпуске будет summary того, что я уже публиковал на канале «Полезное дизайнеру» и кое-что еще…
![](https://habrastorage.org/webt/7l/hm/yi/7lhmyit4subhbzcf_zenokmeh7q.png)
#fonts
Немного сказочный и интересный по стилистике display-шрифт Faune. Отдаленно напоминает шрифт, который использует блог-площадка Medium. Доступно 6 начертаний, использовать можно в коммерческих целях. Русификации нет.
www.cnap.graphismeenfrance.fr/faune/en.html
![](https://habrastorage.org/webt/2l/is/ys/2lisysjwk5s_dt8ynlx7n-vk9a8.png)
#sketch
Наконец-то вышел Haiku под Mac. Нам обещают крутой инстумент для создания анимации, синхронизируясь с исходником в Скетче. Будет экспорт, понятный разработчикам и возможность ембедить свои работы по ссылке. И это лишь минимум.
www.haiku.ai/blog/introducing-haiku
![](https://habrastorage.org/webt/se/gg/9k/segg9kibqca3csrugyd_umnag-w.png)
#css #development
Бульма :) — это свежий CSS фреймворк, основаный на FlexBox. 100% адаптивный и имеющий модульную архитектуру. Удобно, что с некоторыми элементами можно взаимодействовать уже на лендинге.
bulma.io
![](https://habrastorage.org/webt/zk/kt/m1/zkktm1vcmaflfqonop66rt-vglc.png)
#git #development
Просмотрщик Git репозиториев в терминальном режиме. Эдакий консольный по стилю темплейт. Разработчики дополнительно предлагают несколько фич: фильтры, автоапдейт, хоткеи и т.п.
github.com/rgburke/grv
![](https://habrastorage.org/webt/zr/c4/vc/zrc4vchugok2q_aogxr9rmqi_1o.png)
#sketch #react #tutorial #development
Очередной подробный и увлекательный туториал по организации связки Скетч + Браузер + React (eng)
medium.com/seek-blog/sketching-in-the-browser-33a7b7aa0526
![](https://habrastorage.org/webt/c3/4m/lw/c34mlwhndwty5xeazc6th6sk48i.png)
#development #react
Некоторый UI браузера Chrome сделанный на React. Открываете превью и видите браузер в браузере. Занятный эксперимент.
github.com/pd4d10/chrome-ui
![](https://habrastorage.org/webt/qp/dj/yn/qpdjynz6sn2o7clzljrld-tov6c.png)
#hints
Если Вы дизайнер или программист, который интересуется предпринимательством или имеет собственное дело, обратите внимание на «Предпринимательский Список». В нем собрано много ресурсов (eng), которые необходимо отслеживать, чтобы быть впереди всех в своей нише.
failory.com/entrepreneurial-lists
![](https://habrastorage.org/webt/7h/lh/xj/7hlhxjhr07ukn37e0o4rtt7qnca.png)
#webtools
Браузерный инструмент для нанесения watermark'ов на фотографию. Подгрузив изображение, можно добавить свой логотип, надпись. Есть предустановленные темплейты, но потребуется регистрация.
www.watermark.ink
![](https://habrastorage.org/webt/97/-d/v7/97-dv7nutu_a6ehe8gla2ksbwee.png)
#webtools
Инструмент для подсчета слов в тексте. Продукт, во-первых, оформлен на высоком уровне, а во-вторых подсчитывает наиболее популярные слова; и показывает рейтинг их плотности
wordcounter.io
![](https://habrastorage.org/webt/rk/zy/j4/rkzyj4ndcwgpe29qq2uazdp8vhe.png)
#development #api
Телеграм тем временем выпустил нечто больше, чем просто API Бота и предлагает каждому площадку для создания своего «Телеграма».
telegram.org/blog/tdlib
![](https://habrastorage.org/webt/ib/zr/hx/ibzrhxpap6kkj0-f63vqv1p72fw.png)
#development
А позднее зарелизил виджет для авторизации на сайте. Виджет запрашивает номер телефона, затем высылает код подтверждения и авторизирует браузер.
telegram.org/blog/login
![](https://habrastorage.org/webt/au/1u/q2/au1uq2aqmns1jqrkcrhwxvybctc.png)
#webtools
Собранные в одном месте и отлично оформленные 351 калькулятора любых величин: от простых конверторов до сложнейших подсчетов по финансам, физике, статистике и так далее.
www.omnicalculator.com
![](https://habrastorage.org/webt/g5/g5/w6/g5g5w6tjic7edbcnt3zv0y98h7e.png)
#sketch #development #tutorial
Nathan Gitter в своей medium-статье (7.3K!) «Почему ваше приложение выглядит лучше в Скетче» сравнивает рендеринг текста, градиентов и прочих мелочей в iOS и Sketch. Разница действительно есть! И фиксы тоже теперь есть, спасибо автору.
medium.com/@nathangitter/why-your-app-looks-better-in-sketch-3a01b22c43d7 (перевод)
![](https://habrastorage.org/webt/js/iz/23/jsiz23hlmltne2sljfsb-qysa2a.png)
#tutorial
Студия Tubik пишет в статье о «6 особенностях хорошей flat-иллюстрации» (eng). Понятно, что все ради пиара собственных сервисов, но иллюстрашки очень крутые.
tubikstudio.com/how-to-create-original-flat-illustrations-designers-tips
![](https://habrastorage.org/webt/qm/sa/7d/qmsa7d0bpa606qwfmeruf_7eohc.png)
#icons #github
Знаменитые бесплатные иконки версии 5.0 теперь прописались в репозитории!
github.com/FortAwesome/Font-Awesome
![](https://habrastorage.org/webt/wm/gr/s0/wmgrs0zozdrxt2ptnljngzv4kxi.png)
#sketch #icons
Font Awesome иконки в виде Скетч-библиотеки. Подозреваю, что выполнены в виде символов и менять можно через overrides. Традиционно для всех free файлов на Gumroad — вводим «0$», чтобы скачать бесплатно.
gumroad.com/l/QySWZ
![](https://habrastorage.org/webt/dq/ze/cg/dqzecg2pc70okbg7yua0_ej6vds.png)
#development #css
Tympanus выкладывает бесплатно интересный мозаичный эффект появления изображений «slice revealer». В архиве три вариации.
tympanus.net/codrops/2018/02/06/slice-revealer
![](https://habrastorage.org/webt/pc/cg/n1/pccgn1v5md8y8sw9y5ceapmd3x4.png)
#sketch
Плагин-выравнивалка отступов для Sketch. Вводите нужные значения в инпут, нажимаете enter, система приводит в визуальный порядок набор элементов. Ресайзит автоматом тело кнопки, если вы редактируете label, а отступы по вашей системе должны быть строго равны определенному значению.
github.com/dwilliames/paddy-sketch-plugin
![](https://habrastorage.org/webt/a3/cj/az/a3cjazokrmn31lprynjdfkidtxi.png)
#uikit
Концерн Audi видимо собирается в скором времени издать собственную дизайн-систему. Уже сейчас доступны некоторые компоненты из Audi UI kit в CSS, Vanilla JavaScript, и HTML
github.com/audi/audi-ui
![](https://habrastorage.org/webt/ji/zf/8h/jizf8hpqdi-kbdbma0belslbcne.png)
#новости
Вот пожалуйста, анонсировали еще один «Скетч». Умеет и то, и вот это, и даже это и естественно будет на голову лучше остальных. Доступна пока что лишь подписка на будущий «early access». Естественно нам обещают очередную революцию среди дизайн-инструментов. Одни уже обделались, назвав точную дату релиза своего «Студио», понаблюдаем теперь за другими. Однако, с таким лендингом уже слабоватый старт.
phase.com
![](https://habrastorage.org/webt/fs/ep/ea/fsepeasoxcdcfu4kmy-jx7yvv8w.png)
#figma #designsystems
Вышло обновление до версии 1.3 для material дизайн-системы в среде Figma. Любые production-ready прототипы теперь собираются еще быстрее. По ссылке можно ознакомиться с составом обновлений.
setproduct.com/material/changelog
![](https://habrastorage.org/webt/cp/w5/sv/cpw5svtas9e3hgdckmnjkdem4au.png)
#tutorial #hints #figma
Дизайнер Ryan Morrison работает в Фигме и предлагает способ создания изометрических иллюстраций через Group Selection. Смотрите твит с гифкой!
twitter.com/ryryjmo/status/956342323675189248
![](https://habrastorage.org/webt/cb/wp/jv/cbwpjvw3k5mntnkx4sqengmejn0.png)
#webtools
Тут кто-нибудь скучает по старому доброму Winamp'y? Вот вам браузерная версия! Разумеется своя музыка подгружается также как и раньше, по клику на кнопку «eject». Сразу как-то вспомнился звук раскручивающегося диска в CD-ROM'e…
jordaneldredge.com/projects/winamp2-js
![](https://habrastorage.org/webt/on/kv/vq/onkvvqbm2swupltxujo1-vnwwdq.png)
#sketch #uikit
GetCraftWork начали бесплатно раздавать свой UI kit для Скетча под названием «Split». Гайдлайны не нативные, библиотека символьная. Не уверен, что из этого набора можно собрать что-то серьезное, но для обучения вполне.
getcraftwork.com/split
![](https://habrastorage.org/webt/1w/fi/jw/1wfijwkwb7sgaotifscly1urk7o.png)
#icons
77 векторных иконок на космическую тематику. Отрисованы в handdrawn стиле. Доступны в формате SVG, PNG, AI, EPS. Запуск родстера Теслы в космос откладывает отпечаток и на дизайнерах :)
goodstuffnononsense.com/hand-drawn-icons/space-icons
![](https://habrastorage.org/webt/wm/nk/lx/wmnklxkimulk4gvvajzwgwr9nng.png)
#app
Вышел новый неофициальный дрибббловский клиент под Android. Так что, если вы проводите много времени на этом ресурсе и вам импонирует material design — устанавливайте и пользуйтесь.
play.google.com/store/apps/details?id=mathieumaree.rippple
![](https://habrastorage.org/webt/sn/fa/nm/snfanm0af0hjyc4b0z2h5blswnu.png)
#stock #css
Набор кастомизируемых SVG фонов. Доступно множество орнаментов, можно изменять масштаб, цвета и сразу получить CSS-код
www.svgbackgrounds.com
![](https://habrastorage.org/webt/m3/kl/b3/m3klb3gt2qdlkevp6nmcsjr70p8.png)
#css
Небольшой сборник свежих пенов на тему CSS онховеров. Но не простых, а срабатывающих в зависимости от того, с какой стороны курсор мыши оказался поверх того или иного блока.
css-tricks.com/direction-aware-hover-effects
![](https://habrastorage.org/webt/vu/mp/ug/vumpugdn-vzs71134dgcmvbjb6a.png)
#development #js #api
Вышла интересная JS-надостройка позволяющая создавать стильные glitch-эффекты (и не только) для текста.
blotter.js.org
![](https://habrastorage.org/webt/ey/n8/ek/eyn8ekrixc6u4za12eaz3h0511w.png)
#fonts
Signato — это свежий бесплатный рукописный шрифт (eng), оптимально подходящий для имитации подписи к документам. По умолчанию доступна лишь одна гарнитура.
signato.lt/en
![](https://habrastorage.org/webt/vg/xv/ym/vgxvymp1qfhtgsgb-pxlpulqalm.png)
#development #css
Более продвинутые paralax эффекты в связке с CSS. Например, при скролле объект можно сделать не только смещающимся в нужную сторону, но и добавить вращение или трансформ через CSS анимацию.
basicscroll.electerious.com
![](https://habrastorage.org/webt/i5/li/m0/i5lim0okz_adn28p909glbdvvn4.png)
#mood
Очередной курируемый каталог наполненный ссылками на дизайнерскую всякую всячину. Позволит почерпнуть вдохновение по типографике, архитектуре или просмотром работ других профессиональных дизайнеров или студий.
gangbase.design
![](https://habrastorage.org/webt/or/78/ri/or78ri2v0c3a7_eowfiromqxtp8.png)
#fonts #stock
Woff / TTF шрифт с качественно прорисованными силуэтами людей. Около 30 разнообразных силуэтов доступно в наборе.
github.com/propublica/weepeople
![](https://habrastorage.org/webt/9e/zv/im/9ezvimhcamskozbju8d1xw-bawm.png)
#webtools
Конструкторы для создания градиентов выпускаются регулярно, но вот этот действительно конструктор! Удобный, продвинутый, позволяет собирать градиент быстро, удобно и экспортировать сразу в CSS
ourownthing.co.uk/gradpad.html
![](https://habrastorage.org/webt/tk/yz/j_/tkyzj_nwzqngotecq2pxyuprmbe.png)
Вы можете поделиться этой статьей. Давайте вместе развивать дизайн-сообщество и поддерживать разработчиков, помогая им распространять их полезные и бесплатные продукты. Спасибо за внимание!
Хронология: первый выпуск • второй выпуск • третий выпуск • четвертый выпуск • пятый выпуск • шестой выпуск • седьмой выпуск
![](https://habrastorage.org/webt/7l/hm/yi/7lhmyit4subhbzcf_zenokmeh7q.png)
#fonts
Faune Font
Немного сказочный и интересный по стилистике display-шрифт Faune. Отдаленно напоминает шрифт, который использует блог-площадка Medium. Доступно 6 начертаний, использовать можно в коммерческих целях. Русификации нет.
www.cnap.graphismeenfrance.fr/faune/en.html
![](https://habrastorage.org/webt/2l/is/ys/2lisysjwk5s_dt8ynlx7n-vk9a8.png)
#sketch
Haiku for Mac
Наконец-то вышел Haiku под Mac. Нам обещают крутой инстумент для создания анимации, синхронизируясь с исходником в Скетче. Будет экспорт, понятный разработчикам и возможность ембедить свои работы по ссылке. И это лишь минимум.
www.haiku.ai/blog/introducing-haiku
![](https://habrastorage.org/webt/se/gg/9k/segg9kibqca3csrugyd_umnag-w.png)
#css #development
Bulma CSS framework
Бульма :) — это свежий CSS фреймворк, основаный на FlexBox. 100% адаптивный и имеющий модульную архитектуру. Удобно, что с некоторыми элементами можно взаимодействовать уже на лендинге.
bulma.io
![](https://habrastorage.org/webt/zk/kt/m1/zkktm1vcmaflfqonop66rt-vglc.png)
#git #development
Git viewer
Просмотрщик Git репозиториев в терминальном режиме. Эдакий консольный по стилю темплейт. Разработчики дополнительно предлагают несколько фич: фильтры, автоапдейт, хоткеи и т.п.
github.com/rgburke/grv
![](https://habrastorage.org/webt/zr/c4/vc/zrc4vchugok2q_aogxr9rmqi_1o.png)
#sketch #react #tutorial #development
Sketch > browser > React
Очередной подробный и увлекательный туториал по организации связки Скетч + Браузер + React (eng)
medium.com/seek-blog/sketching-in-the-browser-33a7b7aa0526
![](https://habrastorage.org/webt/c3/4m/lw/c34mlwhndwty5xeazc6th6sk48i.png)
#development #react
Chrome React UI
Некоторый UI браузера Chrome сделанный на React. Открываете превью и видите браузер в браузере. Занятный эксперимент.
github.com/pd4d10/chrome-ui
![](https://habrastorage.org/webt/qp/dj/yn/qpdjynz6sn2o7clzljrld-tov6c.png)
#hints
Entrepreneurial List
Если Вы дизайнер или программист, который интересуется предпринимательством или имеет собственное дело, обратите внимание на «Предпринимательский Список». В нем собрано много ресурсов (eng), которые необходимо отслеживать, чтобы быть впереди всех в своей нише.
failory.com/entrepreneurial-lists
![](https://habrastorage.org/webt/7h/lh/xj/7hlhxjhr07ukn37e0o4rtt7qnca.png)
#webtools
Watermark Ink
Браузерный инструмент для нанесения watermark'ов на фотографию. Подгрузив изображение, можно добавить свой логотип, надпись. Есть предустановленные темплейты, но потребуется регистрация.
www.watermark.ink
![](https://habrastorage.org/webt/97/-d/v7/97-dv7nutu_a6ehe8gla2ksbwee.png)
#webtools
Wordcounter
Инструмент для подсчета слов в тексте. Продукт, во-первых, оформлен на высоком уровне, а во-вторых подсчитывает наиболее популярные слова; и показывает рейтинг их плотности
wordcounter.io
![](https://habrastorage.org/webt/rk/zy/j4/rkzyj4ndcwgpe29qq2uazdp8vhe.png)
#development #api
Telegram API
Телеграм тем временем выпустил нечто больше, чем просто API Бота и предлагает каждому площадку для создания своего «Телеграма».
telegram.org/blog/tdlib
![](https://habrastorage.org/webt/ib/zr/hx/ibzrhxpap6kkj0-f63vqv1p72fw.png)
#development
Telegram login widget
А позднее зарелизил виджет для авторизации на сайте. Виджет запрашивает номер телефона, затем высылает код подтверждения и авторизирует браузер.
telegram.org/blog/login
![](https://habrastorage.org/webt/au/1u/q2/au1uq2aqmns1jqrkcrhwxvybctc.png)
#webtools
Omnicalculator
Собранные в одном месте и отлично оформленные 351 калькулятора любых величин: от простых конверторов до сложнейших подсчетов по финансам, физике, статистике и так далее.
www.omnicalculator.com
![](https://habrastorage.org/webt/g5/g5/w6/g5g5w6tjic7edbcnt3zv0y98h7e.png)
#sketch #development #tutorial
Why your app looks better in Sketch
Nathan Gitter в своей medium-статье (7.3K!) «Почему ваше приложение выглядит лучше в Скетче» сравнивает рендеринг текста, градиентов и прочих мелочей в iOS и Sketch. Разница действительно есть! И фиксы тоже теперь есть, спасибо автору.
medium.com/@nathangitter/why-your-app-looks-better-in-sketch-3a01b22c43d7 (перевод)
![](https://habrastorage.org/webt/js/iz/23/jsiz23hlmltne2sljfsb-qysa2a.png)
#tutorial
Flat illustrations tips
Студия Tubik пишет в статье о «6 особенностях хорошей flat-иллюстрации» (eng). Понятно, что все ради пиара собственных сервисов, но иллюстрашки очень крутые.
tubikstudio.com/how-to-create-original-flat-illustrations-designers-tips
![](https://habrastorage.org/webt/qm/sa/7d/qmsa7d0bpa606qwfmeruf_7eohc.png)
#icons #github
Font Awesome git
Знаменитые бесплатные иконки версии 5.0 теперь прописались в репозитории!
github.com/FortAwesome/Font-Awesome
![](https://habrastorage.org/webt/wm/gr/s0/wmgrs0zozdrxt2ptnljngzv4kxi.png)
#sketch #icons
Font Awesome Sketch library
Font Awesome иконки в виде Скетч-библиотеки. Подозреваю, что выполнены в виде символов и менять можно через overrides. Традиционно для всех free файлов на Gumroad — вводим «0$», чтобы скачать бесплатно.
gumroad.com/l/QySWZ
![](https://habrastorage.org/webt/dq/ze/cg/dqzecg2pc70okbg7yua0_ej6vds.png)
#development #css
Slice revealer effect
Tympanus выкладывает бесплатно интересный мозаичный эффект появления изображений «slice revealer». В архиве три вариации.
tympanus.net/codrops/2018/02/06/slice-revealer
![](https://habrastorage.org/webt/pc/cg/n1/pccgn1v5md8y8sw9y5ceapmd3x4.png)
#sketch
Paddy Sketch plugin
Плагин-выравнивалка отступов для Sketch. Вводите нужные значения в инпут, нажимаете enter, система приводит в визуальный порядок набор элементов. Ресайзит автоматом тело кнопки, если вы редактируете label, а отступы по вашей системе должны быть строго равны определенному значению.
github.com/dwilliames/paddy-sketch-plugin
![](https://habrastorage.org/webt/a3/cj/az/a3cjazokrmn31lprynjdfkidtxi.png)
#uikit
Audi UI
Концерн Audi видимо собирается в скором времени издать собственную дизайн-систему. Уже сейчас доступны некоторые компоненты из Audi UI kit в CSS, Vanilla JavaScript, и HTML
github.com/audi/audi-ui
![](https://habrastorage.org/webt/ji/zf/8h/jizf8hpqdi-kbdbma0belslbcne.png)
#новости
Phase design tool
Вот пожалуйста, анонсировали еще один «Скетч». Умеет и то, и вот это, и даже это и естественно будет на голову лучше остальных. Доступна пока что лишь подписка на будущий «early access». Естественно нам обещают очередную революцию среди дизайн-инструментов. Одни уже обделались, назвав точную дату релиза своего «Студио», понаблюдаем теперь за другими. Однако, с таким лендингом уже слабоватый старт.
phase.com
![](https://habrastorage.org/webt/fs/ep/ea/fsepeasoxcdcfu4kmy-jx7yvv8w.png)
#figma #designsystems
Figma design system
Вышло обновление до версии 1.3 для material дизайн-системы в среде Figma. Любые production-ready прототипы теперь собираются еще быстрее. По ссылке можно ознакомиться с составом обновлений.
setproduct.com/material/changelog
![](https://habrastorage.org/webt/cp/w5/sv/cpw5svtas9e3hgdckmnjkdem4au.png)
#tutorial #hints #figma
Isometric illustration tips
Дизайнер Ryan Morrison работает в Фигме и предлагает способ создания изометрических иллюстраций через Group Selection. Смотрите твит с гифкой!
twitter.com/ryryjmo/status/956342323675189248
![](https://habrastorage.org/webt/cb/wp/jv/cbwpjvw3k5mntnkx4sqengmejn0.png)
#webtools
JS Winamp2
Тут кто-нибудь скучает по старому доброму Winamp'y? Вот вам браузерная версия! Разумеется своя музыка подгружается также как и раньше, по клику на кнопку «eject». Сразу как-то вспомнился звук раскручивающегося диска в CD-ROM'e…
jordaneldredge.com/projects/winamp2-js
![](https://habrastorage.org/webt/on/kv/vq/onkvvqbm2swupltxujo1-vnwwdq.png)
#sketch #uikit
Split UI kit
GetCraftWork начали бесплатно раздавать свой UI kit для Скетча под названием «Split». Гайдлайны не нативные, библиотека символьная. Не уверен, что из этого набора можно собрать что-то серьезное, но для обучения вполне.
getcraftwork.com/split
![](https://habrastorage.org/webt/1w/fi/jw/1wfijwkwb7sgaotifscly1urk7o.png)
#icons
Space icons
77 векторных иконок на космическую тематику. Отрисованы в handdrawn стиле. Доступны в формате SVG, PNG, AI, EPS. Запуск родстера Теслы в космос откладывает отпечаток и на дизайнерах :)
goodstuffnononsense.com/hand-drawn-icons/space-icons
![](https://habrastorage.org/webt/wm/nk/lx/wmnklxkimulk4gvvajzwgwr9nng.png)
#app
Dribbble viewer
Вышел новый неофициальный дрибббловский клиент под Android. Так что, если вы проводите много времени на этом ресурсе и вам импонирует material design — устанавливайте и пользуйтесь.
play.google.com/store/apps/details?id=mathieumaree.rippple
![](https://habrastorage.org/webt/sn/fa/nm/snfanm0af0hjyc4b0z2h5blswnu.png)
#stock #css
SVG backgrounds
Набор кастомизируемых SVG фонов. Доступно множество орнаментов, можно изменять масштаб, цвета и сразу получить CSS-код
www.svgbackgrounds.com
![](https://habrastorage.org/webt/m3/kl/b3/m3klb3gt2qdlkevp6nmcsjr70p8.png)
#css
CSS hover effects
Небольшой сборник свежих пенов на тему CSS онховеров. Но не простых, а срабатывающих в зависимости от того, с какой стороны курсор мыши оказался поверх того или иного блока.
css-tricks.com/direction-aware-hover-effects
![](https://habrastorage.org/webt/vu/mp/ug/vumpugdn-vzs71134dgcmvbjb6a.png)
#development #js #api
Blotter JS effects
Вышла интересная JS-надостройка позволяющая создавать стильные glitch-эффекты (и не только) для текста.
blotter.js.org
![](https://habrastorage.org/webt/ey/n8/ek/eyn8ekrixc6u4za12eaz3h0511w.png)
#fonts
Signato font
Signato — это свежий бесплатный рукописный шрифт (eng), оптимально подходящий для имитации подписи к документам. По умолчанию доступна лишь одна гарнитура.
signato.lt/en
![](https://habrastorage.org/webt/vg/xv/ym/vgxvymp1qfhtgsgb-pxlpulqalm.png)
#development #css
CSS paralax effects
Более продвинутые paralax эффекты в связке с CSS. Например, при скролле объект можно сделать не только смещающимся в нужную сторону, но и добавить вращение или трансформ через CSS анимацию.
basicscroll.electerious.com
![](https://habrastorage.org/webt/i5/li/m0/i5lim0okz_adn28p909glbdvvn4.png)
#mood
Gangbase design list
Очередной курируемый каталог наполненный ссылками на дизайнерскую всякую всячину. Позволит почерпнуть вдохновение по типографике, архитектуре или просмотром работ других профессиональных дизайнеров или студий.
gangbase.design
![](https://habrastorage.org/webt/or/78/ri/or78ri2v0c3a7_eowfiromqxtp8.png)
#fonts #stock
Silhouette font
Woff / TTF шрифт с качественно прорисованными силуэтами людей. Около 30 разнообразных силуэтов доступно в наборе.
github.com/propublica/weepeople
![](https://habrastorage.org/webt/9e/zv/im/9ezvimhcamskozbju8d1xw-bawm.png)
#webtools
Grad Pad
Конструкторы для создания градиентов выпускаются регулярно, но вот этот действительно конструктор! Удобный, продвинутый, позволяет собирать градиент быстро, удобно и экспортировать сразу в CSS
ourownthing.co.uk/gradpad.html
![](https://habrastorage.org/webt/tk/yz/j_/tkyzj_nwzqngotecq2pxyuprmbe.png)
Вы можете поделиться этой статьей. Давайте вместе развивать дизайн-сообщество и поддерживать разработчиков, помогая им распространять их полезные и бесплатные продукты. Спасибо за внимание!
Хронология: первый выпуск • второй выпуск • третий выпуск • четвертый выпуск • пятый выпуск • шестой выпуск • седьмой выпуск
Новые ссылки ежедневно в телеграм-канале
Подпишитесь на канал «Полезное Дизайнеру» в Telegram, чтобы получать интересные ссылки каждый день!
Комментарии (5)
KeySVG
16.02.2018 09:59«Нaiku» еще на прошлой недели скачал. Сыроватый конечно еще, авторы в принципе и подчеркивают что будут развивать еще дальше. Инструментарий анимационный к которому надо привыкать конечно. Я бы кстати не стал бы его привязывать конкретно к скетчу, хотя интеграция со скетчем конечно же приветсвуется.
w32blaster
16.02.2018 13:09спасибо за подборку, только не «Github viewer», а «Git viewer». Он к гитхабу не имеет отношения, просматривать можно любые гит-репозитрии. И спасибо за ссылку, я его установил, наверно даже буду пользоваться, прикольная штука :)
Oleh_M
Спасибо за подборку!
Статья про различие в скетче на русском — designpub.ru/%D0%BF%D0%BE%D1%87%D0%B5%D0%BC%D1%83-%D0%BF%D1%80%D0%B8%D0%BB%D0%BE%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F-%D0%BD%D0%B0-%D0%BC%D0%B0%D0%BA%D0%B5%D1%82%D0%B0%D1%85-%D0%B2%D1%8B%D0%B3%D0%BB%D1%8F%D0%B4%D1%8F%D1%82-%D0%B8%D0%BD%D0%B0%D1%87%D0%B5-136a02ae3dcd
kamushken Автор
Добавил. Спасибо Вам!