Nataly Birch June 14th, 2017

20 Tools for Web Developers and Designers from this Spring

Much of the success lies in the tools that you have at your fingertips. A well-chosen set of instruments helps to achieve your goals more efficiently. It saves you time, improves your daily routine, and can help you avoid banal mistakes. Today we have picked 20 valuable tools that were created for web developers and designers just this spring.


Shop.js is aimed to enrich your website with e-commerce functionality. It is a powerful set of universal UI components that works thanks to El.js and Hanzo. Creator: David Tai License: BSD.


SQLPad does what is said in its tagline: it allows you to run queries right inside a browser. It supports Postgres, MySQL, SQL Server, Vertica, Crate, and Presto. Creator: Rick Bergfalk License: MIT.


MiniCSS is a minimal yet robust CSS framework. It is made with both desktop and mobile devices in mind so that building fully responsive cross-device layouts of various kinds has become much easier. Creator: Angelos Chalaris License: MIT.


Tippy.js is a tiny JavaScript-powered tooltip library that has a dozen of engaging options. You can add classic, animated and modern tooltips in seconds. It is also quite friendly with touch screen devices. Creator: Atomiks License: MIT.


If you want to enhance forms with some zest then this small tool will provide you with 15 different ways how to do that. Here you will find a range of beautiful effects that embellish interaction with input fields. Creator: Natali Davydova License: MIT.


EnjoyCSS is a generator that offers tools to get the most out of CSS. It is great for newbies and those who do not want to waste their time on trivial routine. Creator: XB Software License: Declared as Free, no proper license given.


Sizzy is a basic instrument for testing responsiveness. It quickly shows a website in different dimensions including Android and Apple-powered devices and others. Creator: Kitze License: GNU General Public License v3.0.


Animista is a simple way to create animations. You can choose among the dozen of standard effects such as scale, rotate, swirl, slide etc. as well as assign an animation to text, background and even exits and entrances. Creator:Ana Travas License: Declared as Free, no proper license given.


The RAGrid promises to build intrinsic layouts that can have an offbeat structure. It is very easy to use thanks to similarities with regular image editors like Photoshop. Creator: Adam Argyle License: MIT.

App Iconizer

App Iconizer lets you escape the routine of creating pixel-perfect application icons both for Apple App Store and Google Play Store. Just choose the image that you want to convert into your piece of brand identity and upload it to the service. Creator: Exevio License: Royalty-free. is an extension for Sketch that injects some life into your designs.  Select event, transition and the artboard to compile a fantastic presentation Creator: Normally License: Declared as Free, no proper license given.


Strike the harmony in font combinations can be pretty challenging especially when it is not your sphere of expertise. Fontjoy helps you to avoid common mistakes in choosing the perfect pair of typefaces for the interface Creator: Jack Qiao License: MIT.


Need some excellent color combos? Turn to photography. Upload your beloved picture and extract the colors from it, getting a perfect color scheme ready-to-be-used in your projects. Creator: ioi0 License: Declared as Free, no proper license given.


Thumbor is all about cropping, resizing and filtering images. It applies different advanced algorithms to bring about precision, neatness and pixel perfection. Creator: Thumbor License: MIT.


Britecharts will take your visualization to the next level. It is driven by D3.js v4, another popular and powerful data-targeted JavaScript library, and offers a simple API. Creator: Eventbrite License: Apache License, Version 2.0.


Ambiance includes a collection of gorgeous handcrafted color palettes that will not only inspire you on creating something beautiful but also can be used as a base for your future designs. Creator: Sudipto Mondal License: COLOURlovers Terms of Use Agreement.


Slinky converts designs into HTML-based email templates. The only drawback is that the plugin is applicable only for SketchApp Creator: License: Apache License, Version 2.0.


LogoMak is a generator for logotypes. Describe your business through tags and activity types and the service will provide you with the fonts and colors that are inherent to your industry as well as show excellent samples. Creator: Logomak License: Declared as Free, no proper license given.


Dummy text is always on demand. In case you are a bit tired of Lipsum you can always diversify your workflow with some real data in your own language. Creator: Julien Perriere License: MIT.

Android adaptive icon templates

Create your Android O adaptive icons with this template without much trouble. It is available for Photoshop, Sketch, Illustrator, and Affinity Designer. Creator: Marc Edwards License: BSD.

Nataly Birch

Nataly is an internet entrepreneur and an amateur web designer and developer from Sevastopol, Ukraine. She is running a blog for web designers and developers where you can find some inspirational and useful stuff. In her spare time she reads books, unveils the secrets of the world and plays volleyball. Visit her blog or follow her on twitter


  1. Thank you so much for sharing this. I really am a beginner in web designing. This will prove to be very very helpful to me and I think even the pros can use these tools because it will save them a lot of time.

  2. This is a very informative article. I also agree with your post title and your really well explain your point of view. I am very happy to see this post. Thanks for share with us. Keep it up and share the more most related post.

Leave a Reply

Your email address will not be published. Required fields are marked *