Release 2 Web Developer / Designer Tools

Web DevelopersDesigners Tools 2

Top 12 Utilities, Plugins, and Tools For The Web Developers/Designers!

Hello, and welcome to our second released of “Web Developer/Designer Tools”. In this article, you will find about 12 online tools that will help web developer and designer make their life much easier.

Web Developers_web Designers 1

Shards (#uikit)

Free UI-kit for Bootstrap 4.0. There are a demo and documentation. The set is limited to standard controls. Although we have some questions about the readability of the main text, in general, this kit is made up-to-date and will allow quickly to tighten the visual aesthetics in any system with small forces. The feeling that the new player enters the market of ready-made UI-solutions with a free slice of a large paid pie. By the way, if you have experience in this field, we would be grateful to those who were noted in the comments.

Web Developers_web Designers 2

Vera block

Mobile and free UI kit, containing more than 140 ready screens from 7 popular categories. PS and Sketch versions are available. Under Figmu make it too lazy, but the choice and coverage of the decisions are enormous. It’s even a little surprising that the creators for their work allude only to the optional donate.

Web Developers_web Designers 3

Threed (#webtools)

The generator of 3D mockups. Works directly in the browser. Load the picture, choose the color of the device, twist as you want. There are not many effects. I hope this is so far beta and the authors will soon be pleased with the better performance and an abundance of effects.

Web Developers_web Designers 4

Sketch Viewer

Something like a public cloud for your .sketch files. In addition, they offer convenient file sharing and at the same time version control. Traditionally, they will ask for money to expand the functionality.

Web Developers_web Designers 5

Some kind person was not too lazy to study all the hotkeys of the main graphics editors and beautifully teach them on a separate site. So if you forgot how to save the file in the Sketch – go! There is even a section for developers, judging by the “disconnected” icons – soon there will be even more information

Web Developers_web Designers 6

Color palette generator

Another online generator of the palette based on the downloaded image. Loading up any picture – get 6 colors in the form of hex code. It’s simple.

Web Developers_web Designers 7

Diya (#sketch)

The plugin for Sketch, which is designed to open the possibilities of straightforward animation right in the tool environment. The creators claim that there is an export to HTML5 and a description of the animation spices. We do not know in what format the spices are given, but this is an attempt to arrange the transfer of animation from the developer’s pen to the developers.

Web Developers_web Designers 8


That’s just geek! It’s hard for me to imagine a designer who will create an image Sketch via JS-code. However, there is such a product in our days. And his Western colleagues greeted him with interest. Write the code in the console, and the Sketch draws something from this data.

Web Developers_web Designers 9

Sketch Syntax Highlighter

The code highlighter for Sketches. According to the developer: he can automatically determine the language and choose for him a color theme of 70+ available.

Web Developers_web Designers 10

IBM Plex (#fonts)

IBM also decided to participate in the font-weapon race and released its Plex font. Subjectively speaking, it turned out a kind of sci-fi grotesque. But the font deserves your attention. It is extremely unfortunate that there is no Cyrillic. The community immediately had questions about plagiarism.

Web Developers_web Designers 11


Any free font is a huge contribution to the development of the community and generally a great thing. Available 6 headsets: thin, light, regular, bold, heavy, black. Straightforward, nothing superfluous, even italic-inscriptions. Subjectively speaking, the font is not in the trend at all, but it may underline the branding of a certain product. OTF, web font.

Web Developers_web Designers 12

Bootstrap Magic (#development)

If you are one of those who believes that “designers must code” or are associated with Bootstrap everyday tasks, then take a look at the tool offering to create your own 4.0 theme directly in the browser. You start with the default colors of the bootstrap and gradually customize it in the WYSIWYG editor. A quick list of some advantages: Saas, color picker, HTML code preview, Google fonts



You can share this article. Let’s develop the design community together and support the developers, helping them distribute their useful and free/paid products.