Useful to the designer / developer. Fresh utilities and tools to speed up the work. Issue No. 8
In this issue you will find 34 links to fresh and useful releases, the authors of which make a significant contribution to the development of the professional community of designers and developers, as they do it for free. In today's issue there will be a summary of what I have already published on the “Useful for Designer” channel and something else ...
#fonts
Faune is a bit fabulous and interesting in style. Remotely resembles the font that the Medium blog site uses. There are 6 styles available, it can be used for commercial purposes. There is no Russification.
www.cnap.graphismeenfrance.fr/faune/en.html
#sketch
Haiku finally came out under the Mac. We are promised a cool tool for creating animations, synchronizing with the source in Sketch. There will be an export, understandable to developers and the ability to embed their work on the link. And this is only a minimum.
www.haiku.ai/blog/introducing-haiku
#css #development
Bulma :) is a fresh CSS framework based on FlexBox. 100% responsive and modular in architecture. Conveniently, you can interact with some elements already on the landing page.
bulma.io
#git #development
Git repository viewer in terminal mode. A kind of console-style template. Developers additionally offer several features: filters, auto-update, hotkeys, etc.
github.com/rgburke/grv
#sketch #react #tutorial #development
Another detailed and fascinating tutorial on organizing Sketch + Browser + React (eng)
medium.com/seek-blog/sketching-in-the-browser-33a7b7aa0526
#development #react
Some Chrome browser UI made on React. Open the preview and see the browser in the browser. Interesting experiment.
github.com/pd4d10/chrome-ui
#hints
If you are a designer or programmer who is interested in entrepreneurship or has his own business, pay attention to the “Entrepreneurial List”. It has collected a lot of resources (eng) that need to be tracked in order to be ahead of everyone in their niche.
failory.com/entrepreneurial-lists
#webtools
Browser tool for applying watermark'ov on the photo. Having loaded the image, you can add your logo, inscription. There are predefined templates, but registration is required.
www.watermark.ink
#webtools
Tool for counting words in text. The product, firstly, is designed at a high level, and secondly, it counts the most popular words; and shows the rating of their density
wordcounter.io
#development #api
Telegram meanwhile has released something more than just the Bot API and offers everyone a platform to create their own Telegram.
telegram.org/blog/tdlib
#development
And later I released a widget for authorization on the site. The widget requests a phone number, then sends a confirmation code and authorizes the browser.
telegram.org/blog/login
#webtools
Collected in one place and perfectly designed, 351 calculators of any size: from simple converters to complex calculations for finance, physics, statistics and so on.
www.omnicalculator.com
#sketch #development #tutorial
Nathan Gitter, in his mid-article (7.3K!) “Why Your Application Looks Better in Sketch,” compares the rendering of text, gradients, and other little things in iOS and Sketch. There really is a difference! And now there are fixes too, thanks to the author.
medium.com/@nathangitter/why-your-app-looks-better-in-sketch-3a01b22c43d7 ( translation )
#tutorial
Tubik Studio writes in an article on “6 features of a good flat illustration” (eng). It is clear that everything is for the sake of PR of its own services, but the illustrations are very cool.
tubikstudio.com/how-to-create-original-flat-illustrations-designers-tips
#icons #github
The famous free icons of version 5.0 are now registered in the repository!
github.com/FortAwesome/Font-Awesome
#sketch #icons
Font Awesome icons in the form of a Sketch library. I suspect that they are made in the form of symbols and can be changed through overrides. Traditionally for all free files on Gumroad - enter "$ 0" to download for free.
gumroad.com/l/QySWZ
#development #css
Tympanus puts out for free an interesting mosaic effect of the appearance of images "slice revealer". There are three variations in the archive.
tympanus.net/codrops/2018/02/06/slice-revealer
#sketch
Indentation alignment plugin for Sketch. Enter the desired values into the input, press enter, the system brings a set of elements into visual order. It automatically resizes the button body if you are editing a label, and the indentation on your system should be strictly equal to a certain value.
github.com/dwilliames/paddy-sketch-plugin
#uikit
Concern Audi is apparently going to soon publish its own design system. Some components from the Audi UI kit in CSS, Vanilla JavaScript, and HTML are already available
github.com/audi/audi-ui
#news
Here you are, another Sketch has been announced. He knows how, and this, and this, and even this will naturally be a cut above the rest. So far, only a subscription to the future “early access” is available. Naturally, they promise us another revolution among design tools. Some have already managed, having named the exact release date of their "Studio", now we will observe others. However, with such a landing is already a rather weak start.
phase.com
#figma #designsystems
An update was released to version 1.3 for the material design system in the environment of Figma. Any production-ready prototypes are now assembled even faster. Click here for a list of updates.
setproduct.com/material/changelog
#tutorial #hints #figma
Designer Ryan Morrison works in Fig and offers a way to create isometric illustrations through Group Selection. Watch the tweet with the gif!
twitter.com/ryryjmo/status/956342323675189248
#webtools
Does anyone miss the good old Winamp? Here you have the browser version! Of course, your own music is loaded as before, by clicking on the "eject" button. I immediately remembered the sound of a spinning disk in a CD-ROM'e ...
jordaneldredge.com/projects/winamp2-js
#sketch #uikit
GetCraftWork began distributing their Sketch UI kit called “Split” for free. Guidelines are not native, the library is symbolic. I'm not sure that from this set you can collect something serious, but for training it is quite.
getcraftwork.com/split
#icons
77 vector space-related icons. Drawn in handdrawn style. Available in SVG, PNG, AI, EPS format. The launch of the Tesla roadster into space leaves a mark on designers :)
goodstuffnononsense.com/hand-drawn-icons/space-icons
#app
A new unofficial Dribble client for Android has been released. So, if you spend a lot of time on this resource and you are impressed with material design - install and use.
play.google.com/store/apps/details?id=mathieumaree.rippple
#stock #css
Set of customizable SVG backgrounds. Many ornaments are available, you can change the scale, colors and immediately get the CSS code
www.svgbackgrounds.com
#css
A small collection of fresh foams on the topic of CSS oncovers. But not simple, but triggered, depending on which side the mouse cursor was on top of a block.
css-tricks.com/direction-aware-hover-effects
#development #js #api
An interesting JS add-on has been released that allows you to create stylish glitch effects (and not only) for text.
blotter.js.org
#fonts
Signato is a fresh, free handwritten font (eng), best suited to simulate a signature on documents. By default, only one headset is available.
signato.lt/en
#development #css
More advanced paralax effects in conjunction with CSS. For example, when scrolling an object, you can make it not only move in the right direction, but also add rotation or transform through CSS animation.
basicscroll.electerious.com
#mood
Another curated catalog filled with links to designer stuff. Allows you to draw inspiration from typography, architecture or viewing the work of other professional designers or studios.
gangbase.design
#fonts #stock
Woff / TTF font with high-quality traced silhouettes of people. About 30 different silhouettes are available in the kit.
github.com/propublica/weepeople
#webtools
Constructors for creating gradients are released regularly, but this one is really a constructor! Convenient, advanced, allows you to collect the gradient quickly, conveniently and export immediately to CSS
ourownthing.co.uk/gradpad.html
You can share this article. Let us together develop a design community and support developers by helping them distribute their useful and free products. Thanks for attention!
Timeline: First edition • Second edition • Third edition • Fourth edition • Fifth edition • Sixth edition • Seventh edition
By the way, if you use Figma , I recommend paying attention to our ready-made design systems . They help freelancers complete more orders per month, programmers are allowed to create beautiful applications on their own, and team leads “sprint” sprints faster using ready-made design systems for team work.
And if you have a serious project, our team is ready to deploy a design system within the organization based on our best practices and tailor it to specific tasks using Figma. Web / desktop, and any mobile. We are also familiar with React / React Native. Write to T: @kamushken
#fonts
Faune font
Faune is a bit fabulous and interesting in style. Remotely resembles the font that the Medium blog site uses. There are 6 styles available, it can be used for commercial purposes. There is no Russification.
www.cnap.graphismeenfrance.fr/faune/en.html
#sketch
Haiku for mac
Haiku finally came out under the Mac. We are promised a cool tool for creating animations, synchronizing with the source in Sketch. There will be an export, understandable to developers and the ability to embed their work on the link. And this is only a minimum.
www.haiku.ai/blog/introducing-haiku
#css #development
Bulma CSS framework
Bulma :) is a fresh CSS framework based on FlexBox. 100% responsive and modular in architecture. Conveniently, you can interact with some elements already on the landing page.
bulma.io
#git #development
Git viewer
Git repository viewer in terminal mode. A kind of console-style template. Developers additionally offer several features: filters, auto-update, hotkeys, etc.
github.com/rgburke/grv
#sketch #react #tutorial #development
Sketch> browser> React
Another detailed and fascinating tutorial on organizing Sketch + Browser + React (eng)
medium.com/seek-blog/sketching-in-the-browser-33a7b7aa0526
#development #react
Chrome React UI
Some Chrome browser UI made on React. Open the preview and see the browser in the browser. Interesting experiment.
github.com/pd4d10/chrome-ui
#hints
Entrepreneurial list
If you are a designer or programmer who is interested in entrepreneurship or has his own business, pay attention to the “Entrepreneurial List”. It has collected a lot of resources (eng) that need to be tracked in order to be ahead of everyone in their niche.
failory.com/entrepreneurial-lists
#webtools
Watermark inc
Browser tool for applying watermark'ov on the photo. Having loaded the image, you can add your logo, inscription. There are predefined templates, but registration is required.
www.watermark.ink
#webtools
Wordcounter
Tool for counting words in text. The product, firstly, is designed at a high level, and secondly, it counts the most popular words; and shows the rating of their density
wordcounter.io
#development #api
Telegram API
Telegram meanwhile has released something more than just the Bot API and offers everyone a platform to create their own Telegram.
telegram.org/blog/tdlib
#development
Telegram login widget
And later I released a widget for authorization on the site. The widget requests a phone number, then sends a confirmation code and authorizes the browser.
telegram.org/blog/login
#webtools
Omnicalculator
Collected in one place and perfectly designed, 351 calculators of any size: from simple converters to complex calculations for finance, physics, statistics and so on.
www.omnicalculator.com
#sketch #development #tutorial
Why your app looks better in sketch
Nathan Gitter, in his mid-article (7.3K!) “Why Your Application Looks Better in Sketch,” compares the rendering of text, gradients, and other little things in iOS and Sketch. There really is a difference! And now there are fixes too, thanks to the author.
medium.com/@nathangitter/why-your-app-looks-better-in-sketch-3a01b22c43d7 ( translation )
#tutorial
Flat illustrations tips
Tubik Studio writes in an article on “6 features of a good flat illustration” (eng). It is clear that everything is for the sake of PR of its own services, but the illustrations are very cool.
tubikstudio.com/how-to-create-original-flat-illustrations-designers-tips
#icons #github
Font awesome git
The famous free icons of version 5.0 are now registered in the repository!
github.com/FortAwesome/Font-Awesome
#sketch #icons
Font awesome sketch library
Font Awesome icons in the form of a Sketch library. I suspect that they are made in the form of symbols and can be changed through overrides. Traditionally for all free files on Gumroad - enter "$ 0" to download for free.
gumroad.com/l/QySWZ
#development #css
Slice revealer effect
Tympanus puts out for free an interesting mosaic effect of the appearance of images "slice revealer". There are three variations in the archive.
tympanus.net/codrops/2018/02/06/slice-revealer
#sketch
Paddy sketch plugin
Indentation alignment plugin for Sketch. Enter the desired values into the input, press enter, the system brings a set of elements into visual order. It automatically resizes the button body if you are editing a label, and the indentation on your system should be strictly equal to a certain value.
github.com/dwilliames/paddy-sketch-plugin
#uikit
Audi UI
Concern Audi is apparently going to soon publish its own design system. Some components from the Audi UI kit in CSS, Vanilla JavaScript, and HTML are already available
github.com/audi/audi-ui
#news
Phase design tool
Here you are, another Sketch has been announced. He knows how, and this, and this, and even this will naturally be a cut above the rest. So far, only a subscription to the future “early access” is available. Naturally, they promise us another revolution among design tools. Some have already managed, having named the exact release date of their "Studio", now we will observe others. However, with such a landing is already a rather weak start.
phase.com
#figma #designsystems
Figma design system
An update was released to version 1.3 for the material design system in the environment of Figma. Any production-ready prototypes are now assembled even faster. Click here for a list of updates.
setproduct.com/material/changelog
#tutorial #hints #figma
Isometric illustration tips
Designer Ryan Morrison works in Fig and offers a way to create isometric illustrations through Group Selection. Watch the tweet with the gif!
twitter.com/ryryjmo/status/956342323675189248
#webtools
Js winamp2
Does anyone miss the good old Winamp? Here you have the browser version! Of course, your own music is loaded as before, by clicking on the "eject" button. I immediately remembered the sound of a spinning disk in a CD-ROM'e ...
jordaneldredge.com/projects/winamp2-js
#sketch #uikit
Split ui kit
GetCraftWork began distributing their Sketch UI kit called “Split” for free. Guidelines are not native, the library is symbolic. I'm not sure that from this set you can collect something serious, but for training it is quite.
getcraftwork.com/split
#icons
Space icons
77 vector space-related icons. Drawn in handdrawn style. Available in SVG, PNG, AI, EPS format. The launch of the Tesla roadster into space leaves a mark on designers :)
goodstuffnononsense.com/hand-drawn-icons/space-icons
#app
Dribbble viewer
A new unofficial Dribble client for Android has been released. So, if you spend a lot of time on this resource and you are impressed with material design - install and use.
play.google.com/store/apps/details?id=mathieumaree.rippple
#stock #css
SVG backgrounds
Set of customizable SVG backgrounds. Many ornaments are available, you can change the scale, colors and immediately get the CSS code
www.svgbackgrounds.com
#css
CSS hover effects
A small collection of fresh foams on the topic of CSS oncovers. But not simple, but triggered, depending on which side the mouse cursor was on top of a block.
css-tricks.com/direction-aware-hover-effects
#development #js #api
Blotter js effects
An interesting JS add-on has been released that allows you to create stylish glitch effects (and not only) for text.
blotter.js.org
#fonts
Signato font
Signato is a fresh, free handwritten font (eng), best suited to simulate a signature on documents. By default, only one headset is available.
signato.lt/en
#development #css
CSS paralax effects
More advanced paralax effects in conjunction with CSS. For example, when scrolling an object, you can make it not only move in the right direction, but also add rotation or transform through CSS animation.
basicscroll.electerious.com
#mood
Gangbase design list
Another curated catalog filled with links to designer stuff. Allows you to draw inspiration from typography, architecture or viewing the work of other professional designers or studios.
gangbase.design
#fonts #stock
Silhouette font
Woff / TTF font with high-quality traced silhouettes of people. About 30 different silhouettes are available in the kit.
github.com/propublica/weepeople
#webtools
Grad pad
Constructors for creating gradients are released regularly, but this one is really a constructor! Convenient, advanced, allows you to collect the gradient quickly, conveniently and export immediately to CSS
ourownthing.co.uk/gradpad.html
You can share this article. Let us together develop a design community and support developers by helping them distribute their useful and free products. Thanks for attention!
Timeline: First edition • Second edition • Third edition • Fourth edition • Fifth edition • Sixth edition • Seventh edition