Release 2 Web Developer / Designer Tools

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.

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.

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.

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.

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.

Shortcuts.design

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

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.

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.

P5.sketchplugin

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.

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.

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.

Vision

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.

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.

The Founder of Smart Spate. His role involves creating work to the highest standards, supporting other members of the team, and researching techniques and systems to keep SmartSpate at the forefront of digital. We spent a lot of time making sure that the topics were high quality and with the most informative approach.
He has an unhealthy love for Web Developing/Design and IT filed in general, he enjoys exploring the ever-changing world of web developing.

Find Us At:

error: This Content is Protected! All Rights belong to Smart Spate Ltd.

This website uses cookies. By continuing to use this website you are giving consent to cookies being used. For information on a cookie and how it impacts on users, you can visit our Privacy Policy and Cookie Policy.AcceptCloseRead more