10 best new web design tools for March 2017

The major excitement this month is CodePen Projects, which is an IDE built by the CodePen people. It's a very slick, comfortable way to work on your web projects from within the browser. 

Elsewhere, there's a service that speeds up your WordPress sites, an excellent guide to colour theory for the web, and a friendly app-building community. Read on to find out the web design tools getting us excited this month... 

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 colour theory principles

Want to learn advanced colour 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 frontend 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 colour 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 per cent

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 colour fonts

What are colour 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, colour fonts are font files that can contain colours, 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 colour combinations are accessible, but this one is designed to work with whole colour systems, so you can put in your full palette in one go. 

10. CodePen Projects

A browser-based development environment from CodePen

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 organise 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.

Related articles:

Topics