10 Web Design Tools for 2017

01. Glitch - A friendly app-building community

Glitch is a free online community where you can build web apps by reworking pre-made examples on the site. There's a built-in code editor, hosting and instant deployment  – anyone can get an app up and running with this one tool.

02. Animista - A collection of CSS animations for you to tweak and re-use

Animista is a collection of CSS animations that you can customise, tweak and play around with until you find something that suits your purposes. It works as a kind of organised dashboard for making and refining animations without having to start from scratch. 

03. Practical color theory for people who code - Interesting color theory principles

Want to learn advanced color theory really fast? This fantastic site by Natalya Shelburne will get you there. Its creator has a fortuitous combination of skills: she's a classically trained fine artist and also a front-end developer, so she's uniquely qualified in this area. Her site guides you through the process of designing and coding a great colour scheme in accordance with the principles of color theory.

04. Shifter - Supercharge your WordPress site

Shifter transforms your WordPress site into a series of static files and delivers them at high speed via its content delivery network. Static files have the advantage of being much faster to deliver and you won't have to worry about security problems with your server, WordPress plugins or PHP.

05. Guetzli - Shrink your images by another 20-30%

Keeping your page weight down is an important part of building performant sites that are accessible in poor network conditions, so new compression algorithms like this one from Google are always welcome. Guetzli shrinks JPGs 20-30 per cent more than libjpeg, so using it is an easy way to slash your page weight without changing your images. Read more about it here.

06. Bumpr - Choose where to open links

This Mac app has one simple function: when you click on a link it lets you choose which program to open it with. URLs get you a choice of browsers, and email links will pop up a selection of email clients. 

07. colorfonts.wtf - Everything you need to know about color fonts

What are color fonts? How can I use them? Where do I find some good ones? These questions and more are answered on this great site that explains the whole situation. If you've not heard of them at all, color fonts are font files that can contain colors, textures, transparency, vector shapes and even bitmap images. Check out the site to see what you can do with them. 

08. Subform - A design tool built especially for UI/UX designers

Subform is a design tool built especially for UI/UX designers. It solves the workflow issue of wrestling with multiple artboards for different screen sizes, and helps you to create responsive layouts while working with real content. Overall, you'll find its feature set is focused on your needs, rather than those of a print designer. 

09. Hex Naw - Check the accessibility of your colour system

There are a few tools out there for making sure your color combinations are accessible, but this one is designed to work with whole color systems, so you can put in your full palette in one go. 

10. CodePen Projects - A browser-based development environment

The people behind CodePen have built an IDE (integrated development environment) that runs in your browser. It contains a file management system that enables you to drag and drop your website files and organize them into tabs. You can preview your site as you build it, and there's built-in debugging. There's a blog post about it here.