Web Design and Development Tools You Should Start Using in 2017

When it comes to web design and web development, it certainly pays off to stay appraised of any new developments that might give you the edge over your competition. With that in mind, here is a short selection of some of the most interesting additions to the already abundant selection of instruments. Thanks to its growing nature, there is no shortage of web development and design tools. Most of them are being developed, patched, updated and released at almost daily basis.

Ruby on Rails

Visit Site »


Well, it took literally hundreds of contributors, thousands of commits, six months, four beta versions as well as two separate release candidates, but they have finally done it. Rails 5.0 is here and all we can say about it is – it was well worth it!

All right, that is not all we have to say about it, but the very fact the community around the Rails is as strong and tight-knit as this is truly staggering. In any case, this looks like the most comprehensive and advanced version to date, with two particularly strong suits: one is the action cable and the other is the API mode.

The former is Rails’ answer to WebSockets, and it offers a fully integrated way of managing connections, as well as a channels layer on the server side whereas the clients have their own, JavaScript layer on the other end. What it does is it enables an incredibly easy way of adding live chat, notifications and other features into almost any kind of design that you might come up with. And if you want to see for yourself, just look at Basecamp 3 or something.

Another cool feature of Rails’ Action Cable deals with a certain aspect of WebSockets. Specifically, it enables you full and unrestricted access to your very own Active Record as well as PORO domain model, alongside a new ActionController that will make short work of any templates you need to use both for WebSocket purposes and otherwise.

As for their API mode, it enables you to keep a small skeleton of your own design which is perfect if you need an app that spans beyond your usual HTML templates – specifically, if it needs to speak JSON. Of course, this feature, for all its usefulness, is far from perfect and it will undoubtedly take a lot of time and resources to get it just right, but for now it offers quite a number of possibilities where there were but a few not too long ago. For now, it is recommended to combine it with Jbuilder or some other kind of JSONAPI::Resources project if you need extra model classes.

Other than the two main strong suits, Rails 5.0 boasts a series of attributes that improve upon a number of ways. For one, it has the One Rails Command where it once had a special setup between rake and rails; it also features an advanced system that keeps track of failures that notifies you on the spot, rather than having you complete the suite and then search for what went wrong and how did it happen. The memory overloads are not as common anymore, thanks to the new ActiveRecord::Relation#in_batches.

Another serious concern that has been addressed was where you could halt the Active Record callbacks due to a false last statement, and this sort of accidents can no longer happen to you. Finally, you can design apps for iOS and Android thanks to the Turbolinks 5 which is now included into the Rails 5.0 package, although this may not necessarily sit well with some of the developers, especially those who had dealings with Turbolinks before and lived to regret it.


Creating and presenting different pattern libraries used to be a real pain and tools such as Fabricator or Pattern Lab were no longer adequate for the guys over at Cloud Four – so they built their own Drizzle out of sheer frustration. The thing about Cloud Four is that these guys are incredibly proud of being ahead of the curve on a number of things, including in-browsers that eventually made a smooth transition to holistic design systems which in turn saved themselves and their clients a ton of aspirin on headaches they managed to avoid.

But still, the sheer variety of presentation methods could spell doom for certain projects, as not all designers think alike and have their own ways of doing things. For instance, some prefer UX prototyping, whereas other opt for the existing patterns that can be produced in the shortest amount of time. This and the amount of additional resources that some designers chose to employ made tools such as Drizzle an absolute necessity for web designers.

Now, this Fabricator-spinoff is far from perfection in any form, shape or size, but it should be noted that it enables users to generate different pattern libraries as well as style guides. What started as an improvisation so that guys over at Cloud Four can incorporate different styles into their work was given a life of its own. The way this was accomplished was by using Node, Handlebars and Gulp so that it can generate a static HTML that can subsequently be hosted wherever it was needed. The latest iteration was given Gulp tasks as well as Handlebars helpers in order to make things easier and more streamlined even for beginners or people who are new to this whole Drizzle thing.

There is the style guide UI that can be adjusted easily and offers great customization potential. Speaking of which, the ‘waste not – want not’ motto applies on any patterns, pages and layout templates as they can be customized, upgraded, extended or simply reused as seen fit. Of course, any meta data and sorting can be done using the front matter, whereas Handlebars provide a perfect way to write patterns or entire pages. And of course the template helpers are about as user-friendly as you might expect, with lots of conveniently placed shortcuts.


If sketch plugins are your forte, you are in luck. Thanks to Prism you can create your own palette with any colors of your choosing to use in your web design, as well as export it in a number of different formats such as Swift or CSS.

Its main features involve the ability to create your very own palette complete with automatic naming options for your colors, as well as customize it in a number of ways. Of course, if you are not satisfied with an automatic, generic name for your colors, you can always let your inner poet go and start coming up with interesting names by yourself. Now, it may support a number of different formats but this little plugin has been built from scratch using nothing but Coffeescript and ingenuity – but mostly Coffeescript.

This brings its own share of good and bad news attached. For one, it is incredibly straightforward and easy to use. After installation, you just add your colors to the selection, run command and you are set. No nonsense, complicated procedures or anything of the sort. On the other hand, the whole affair seems a bit amateurish, which is perfectly fine if you are simply looking for an affordable way of expressing yourself. Otherwise, you might want to look elsewhere. Even their website is deliberately minimalistic and oversimplified, and this is not always such a good thing. On the more positive note, this plugin is going to feature some serious upgrades soon, especially in terms of gradients support as well as additional templates that are going to be introduced.

anime js

Just like its namesake, there are very few things that this animation library cannot accomplish. For what it’s worth, the JavaScript animation library offers an extremely versatile little package that is going to play really well with almost any kind of browser, or at least the major ones. Furthermore, it can be used in combination with CSS, SVG, JS Objects and others.

The speed at which Anime renders animations is more than acceptable but nothing to really brag about. However, the fact that it is as lightweight as it is has garnered quite a support for this animation library, and its goofy approach fits into the whole idea really well, too. For its size, it really packs a serious punch, but a lot of inexperienced users might mistake this library for a pushover. They could not be further away from the truth. Also, its added functionality is going to ensure there are plenty of updates and developments in the future.

Algolia Places

Visit Site »

algolia places

The first item on our list deals with a tool that enables its users to auto-complete the addresses on their websites. The way this is accomplished is via the OpenStreetMap’s database (don’t worry, its open source) and the ability to search the JavaScript library. The reason why designers use this type of tools is because they enhance the overall user experience.

If your website uses checkouts or user accounts, it might behoove you to try and simplify the process as much as possible, in order to avoid the hassle. However, some degree of paperwork cannot be avoided in most instances, so the only logical way around this is to simplify the process as much as possible. Now, user names cannot be autocompleted for various reasons, but other information about them, such as the place of residence, area code etc. can be autocompleted with a stunning degree of accuracy.

Just typing in the address can bring up an additional menu with the names of cities and countries which have the street and number within their registry and presto! A huge chunk of the form has been filled out with a click of a button. Besides the psychological effect this would accomplish, it would also sit really well with users by eliminating the possibility of error on their part. So, not only does that make it simpler and easier to fill out certain forms, it is also less prone to ‘typing accidents’, whether deliberate or otherwise.

This could be expanded or modified to fit any number of roles and functions, but Algolia Places seems to be fixed on enabling you to simplify the process of filling out forms for the users of your site. Just by typing in their address, your clients will have automatically added all sorts of data in the process, including their city, state, ZIP code etc. And the best part is that you, as a designer, can make the best possible selector for cities and countries according to your specific situation. After all, Toronto and Timbuktu are two very different places and if your website is related to Canada, it makes no sense to include cities outside of your area of interest. It could even serve as a filter that separates clients that are not eligible for some reason, but this is way above and beyond the call of duty.

But the possibilities do not end there. You can even link the locations of your choice on the map or visualize them in real time for maximum effect. The best part is the ability to connect two or more searches into one, so that a client needs only type in, say, a name of a city, and the search results will yield all the relevant entries related to it.

For instance, if your site is about real estate, and your clients are looking for apartments in London, they need only type in the word ‘London’ and the search results will automatically display all the real estates in the city. If you need to link a certain subject to a geographical location, this is perhaps the best way to do it, depending on your plans, of course. The reasons why people opt for Algolia involve its simplicity and its intuitive ranking algorithm. Furthermore, it is more tolerant towards typing errors than most tools of this caliber and its server network is designed for maximum speed and efficiency.


No Divide has prepared us a real treat, in the form of Astrum, its signature pattern library. The main advantages of this tool is the fact that it is quite lightweight for its purpose and scope, as well as versatile enough to cover a wide variety of actions and themes. To make matters even more interesting, it even comes with its own command line that can help you keep track and manage all sorts of components that would normally require a separate program and open up a whole array of issues and problems that no longer need to be taken into account.

Don’t get me wrong, this is a fine, discrete pattern library that is not that demanding in terms of programming or writing your own codes or anything like that. The whole point is for it to fit into your existing style rather than solicit a change so as to fit into a new pattern that would impede you creativity from reaching its fullest potential. All it does is organize certain components (such as samples and their descriptions) into groups (which can also feature optional descriptions of their own). This will in turn help you stay organized, a task whose severity only increases with the amount of work that keeps piling up as your career progresses. As you complete projects and keep loading entire pages into your Astrum pattern library, you will come to appreciate the simplicity and reliability it has to offer.

Well, for one, it helps them customize their media libraries and keep them up to speed with current as well as associated projects. Also, the intuitive nature of Astrum enables it to instantly recognize when a category or an entry is out of order or stands out from the rest, so you can be instantly notified and take action towards rectifying this situation.

If you take other matters into account, such as the user-friendly approach and simple installation process, it is not hard to see what made Astrum as popular as it is.


If you need a solid prototyping tool, then ProtoPie might actually be a good choice. It will enable you to manipulate animations in the ways you have not believed to be possible, at least not with a regular tool. The way it incorporates the sensors on the device it is installed on, and makes extensive use of sounds, multi-finger gestures and tilts is both intuitive and fun to use. This alone should add to the popularity of any web design you have in mind.

How many times have you been brought to the edge of your wits trying to explain your design to your engineers, but could not show them because coding is simply not your thing? Well, those days may be behind you, with ProtoPie. Rather than coding things by yourself, you can simply combine the available interaction pieces in a way that illustrates your point perfectly, and leave the coding to the people who are actually in charge of it.

The most revolutionary feature of ProtoPie is its ability to keep track and process several touch inputs simultaneously. In other words, it can follow up to five touch inputs at a time, allowing you to a generous number of gesture combinations in order to express yourself. You can zoom, rotate and tilt your images at the same time, and never having to worry whether your smart device will give out on you, due to software drawbacks.

Also, most smart devices employ a multitude of sensors that can process all sorts of information. You want to include a sound or a melody but you can’t remember its name? Just use the microphone on your Smartphone and incorporate the result into your program. The way in which ProtoPie shines is that it enables you to make your own prototypes to show your engineers the way something is supposed to look or sound like, and using only your everyday smart device no less! And ProtoPie, of course.

You don’t think things can get better? Guess again! Wait till you see the masking feature where you can apply masks on simple vector elements and all sorts of images for those times when you absolutely must get your Material Design right. And every single detail can now be tweaked in some way or the other. This by itself does not mean much, but when you consider that no actual coding is involved at this stage, things start to get very interesting.

Last but not least, ProtoPie enables its users to preview all sorts of transition effects and see how different pages interact with each other. This process used to be extremely complicated, especially if we are talking about a large number of complex pages, but it does not have to be so, at least not anymore. The amount if assets on individual images no longer need to give you any trouble, as you can check for any discrepancies and issues long before the actual coding phase has even begun. Building prototypes has never been easier.


Even though new tools for web designers are released and updated all the time, staying appraised of latest developments is never too much of a bother, provided you are properly motivated for the job. And if not, it does not matter much. Why? Because there will be plenty of articles and reviews for you to keep in touch without sacrificing too much of your own time – time that is better spent creating and designing modern pieces of online art.

These tools can help you stay organized as well as focused on your agenda, which can be tricky to accomplish on your own. On the other hand, the list is far from over and we can hardly wait to see what the future has in store for us.

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInShare on RedditPin on Pinterest