Top 15 Web Design Tools For 2017

Louis Lazaris presents his pick of the hottest new tools for web professionals. Whether you’re a designer or frontend developer, you’ll find lots of stuff worth looking into for 2017.

The web design and development tools landscape is booming. That might be the understatement of the year, every year! It’s great to have plenty of options, but it does make it difficult to weed through everything and figure out what isn’t very useful and what has quality and staying power.

In this feature I’ve carefully selected a list of tools that I feel are not only practical and useful, but also pleasantly diverse. These options cover many aspects of the design and development process, from the planning stages of a prototype to the final code written on the frontend.

With that, let’s get right into 15 of the best web design and development tools that you can try out today.

01 ANIME www.anime-js.com

Although web page animations have at times got a bad rap, developers are always looking for ways to make things easier. CSS animations and transitions have been a huge step forward, but more complex interactions often require a library. Anime is a new animation engine you’ll want to take a look at if you need to add complex animated components to your apps.

Here’s an example to demonstrate the super-simple API: 

var myanimation = anime({ targets: ['.box1', '.box2'], translateX: '5rem', rotate: 180, duration: 3000, loop: true });

This code defines the objects you want to animate, along with specifics of the animations. The API allows you to target elements using CSS selectors, DOM elements or even JavaScript objects.

The author, Julian Garnier, has provided a CodePen collection (netm. ag/anime-289) that demonstrates what the library can do, as well as thorough documentation on GitHub (github.com/ juliangarnier/anime).

02 FIGMA  www.figma.com