New year, new tools. That's what they say. Isn't it? Anyway, regardless of who says what, we've rounded up some of the niftiest web design tools that have generated a bleep on our radar recently.
There's a range of interesting utilities here to help you get to grips with Material Design; work with SVG; develop web apps; communicate with colleagues; and make colour palettes, backgrounds, UI elements and plenty more. There's bound to be at least one tool here that will help you to do something in a quicker, simpler way. Dive in!
01. Material Palette (opens in new tab)
Last summer one of the big announcements to come out of Google I/O was Material Design, a methodology for making web app designs work across desktop, tablet and mobile. You can find the guidelines for using Material Design principles here (opens in new tab).
Material Palette is a tool for creating colour palettes in the Material style. Just pick two colours around which to base your palette and the tool generates suitable colours for primary text, secondary text, dividers and an accent colour.
An example interface is built to show you how the palette looks in action, and it is downloadable in CSS, SASS, LESS, SVG, XML and PNG. It was built by Matt Aussaguel (opens in new tab), who also runs Material Up (opens in new tab), 'a showcase of the best Material Design websites and apps'.
02. Pilgrim* (opens in new tab)
IRC has long been a favourite haunt for developers to chat and discuss their work, but designers have tended to steer clear. Think of Pilgrim* as a beautified, simpler IRC.
In place of an interface that looks much like a text editor there's pleasing typography and colour, as well as atmospheric sound effects and an animated indicator to let you know when someone is typing.
It's all beautifully executed so it's no wonder designers enjoy using Pilgrim*, but the main draw is the ease of setting up a channel to instantly communicate with one or more people without any signups or installations. Simply head to pilgrim.io, start a channel and then share the link to instantly start chatting.
Creator Murat Pak (opens in new tab) tells us that a number of design studios are using Pilgim* already for some of their internal communications, attracted by the ease of getting started instantly: “I was not expecting this much interest from studios or agencies but they seem to be looking for a Slack (opens in new tab) or Skype alternative that just lets them to communicate easily without any additional effort.”
Pak has also seen Pilgrim* spawning some interesting online social behaviours. "Some channels were similar to 'I am bored' or 'lets chat'. The creators share the channel link on their social media accounts.
As a result, they're sure that whoever visits the channel has the access to the link, therefore, related to them (fan or friend). This way they can have a common conversation without borders of social necessities, such as identity."
Pak is putting together a team to develop Pilgrim* further, with plans to create a saved history so that conversations have some persistence.
03. Progressbar.js (opens in new tab)
Progressbar.js by Kimmo Brunfeldt (opens in new tab) enables you to create animated progress bars with SVG paths. The results are responsive and work in all major browsers including IE9+.
04. CSS Gradient Animator (opens in new tab)
Ian Forest (opens in new tab)'s fantastic CSS Gradient Animator puts together beautiful animated gradient backgrounds for you with just a few clicks. Just specify the angle, the speed of the animation and the colours and this tool generates the CSS necessary to do the job.
The result is a subtly shifting coloured gradient that works as a great website background. You can grab the code straight from the screen or save it out as a Gist.
05. snabbt.js (opens in new tab)
It's brand new and still in beta but it looks promising: Daniel Lundin's snabbt.js is a high performing, minimalist animation library. He promises speed in a lightweight package; the library is less than 4kb minified and gzipped and can produce 60fps, even on mobile.
“The goal is to make a library that will let the user make smooth animations without needing to know too much about browser rendering,” he writes on the snabbt.js page.
Next page: 5 more web tools