15 Essential Web Design and Development Tools You Should Know

The web design and development tools landscape is booming. It’s great to have plenty of options, but it does make it difficult to weed through all the web design inspiration 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.

Anime

Spice up your apps with this animation engine

Spice up your apps with this animation engine

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 that demonstrates what the library can do, as well as thorough documentation on GitHub.


Figma

Realtime collaboration web app Figma has been winning over critics

Realtime collaboration web app Figma has been winning over critics

Figma recently burst onto the design tools landscape claiming to be ‘the first interface design tool with realtime collaboration’. It’s a web app that has some key differences from other design tools. Here are some of its outstanding features:

  • Drag Sketch files into the app and Figma will convert them
  • Set precise constraints on elements to build fluid, multi-device layouts
  • A pen tool that promises to be simpler and more powerful than other ones you’ve used
  • Make collaboration notes right inside your design files
  • Share projects in real time with others, with the ability to control permissions on the files
  • File version history
  • A file browser to organise your projects

Some of the early reviews on Figma have been positive. Designer Meng To raved: “Everything is extremely responsive, works as expected and the software is almost every bit as powerful as its native counterpart Sketch”.


Type Nugget

Type Nugget gives you greater control over your typesets

Type Nugget gives you greater control over your typesets

Type Nugget addresses a need you’ll have on just about every frontend project: dealing with CSS typography. Still in beta with more features in the works, it’s an online typesetting tool that gives you fine control of type styles. The tool displays a diverse set of text samples on the page, which can be live-tweaked in a panel on the right. The panel lets you select font size, weight, style, colour, letter spacing, text decoration and more for individual aspects of the page (global styles, headings, paragraphs, links and HTML lists).

Usefully, this tool allows you to register for an account, log in and save your progress. After specifying all your settings, you can hit the ‘Generate Code’ button and Type Nugget will produce a link to a style sheet hosted on its CDN. If you find CSS typography tedious and repetitive, you’ll benefit greatly from adding this tool to your workflow.


Vue.js

Not used to complex JavaScript libraries? Vue.js is perfect for you

Not used to complex JavaScript libraries? Vue.js is perfect for you

What would a list of new web tools be without the hottest new JavaScript framework? Vue.js, like React, is a framework for building user interfaces, and utilises a virtual DOM. As the name suggests, Vue’s core library is focused on the view layer.

Look at a code example, taken from Vue’s docs, that utilises user input and demonstrates the library’s elegance. We’ll start with the HTML:

<div id="example">
 <p>{{ message }}</p>
 <button
v-on:click="reverseMessage">Reverse
Message</button>
</div>

Notice the custom v-on handler that calls the reverseMessage method. Here’s the JavaScript:

var myApp = new Vue({
 el: '#example',
 data: {
  message: 'Hello Vue.js!'
 },
 methods: {
  reverseMessage: function () {
   this.message = this.message.split('').
reverse().join('')
  }
 }
});

In that example, I’m populating the paragraph with data and defining the reverseMessage method. Vue is great for those less experienced with complex libraries, but also has a number of plugins to help with development of complex single-page web apps.


Scout-App

Scout-App touts itself as the

Scout-App touts itself as the “simplest Sass processor”

There are a number of good preprocessor GUI workflow tool options. Progress on Scout-App had gone stagnant, but Jared Wilcurt and the development team recently relaunched the project and it’s going strong once again.

As with many such tools, Scout- App allows you to compile your ‘.sass’ and ‘.scss’ files without touching the command line. It’s advertised as ‘the simplest Sass processor’ , which is a great draw for those who aren’t comfortable with the command line.

This app is so simple that you don’t need to install anything else on your OS; you just run Scout-App, choose your input/output folders and write your code. If you love the simplicity of writing Sass inside something like CodePen or JS Bin, then you’ll love this.


Adobe Experience Design

Adobe dips a toe into the world of prototyping with XD

Adobe dips a toe into the world of prototyping with XD

Adobe XD, one of the newest additions to Creative Cloud, is Adobe’s splash into the prototyping market. It’s currently in a Preview release for Mac, with Windows on the way.

XD includes drawing tools, tools that enable you to define non-static interactions, mobile and desktop previews, and sharing tools for giving feedback on designs. It allows you to select a device-specific artboard size for starting a project, and you can even import a popular UI kit, for example Google’s Material Design.

As mentioned, XD is still in relatively early development but Adobe has set up a page detailing new features as they’re rolled out. Some of the most recent ones include zoom to selection, animations, linear gradients, and hex shorthand for colours. If you’d like a quick primer on XD’s basics, Lukas Steyer has written a multi-part article series, or you can check out this tutorial from Demian Borba.


ProtoPie

This code-free prototyping tool lets users interact easily

This code-free prototyping tool lets users interact easily

ProtoPie, currently a native Mac app with a Windows version in the works, is a code-free prototyping tool. It’s aimed at designers that want to communicate complex mobile interactions to the developers on their team without having to write any code. The app has many of the features you’d expect to see in any prototyping tool. However, its most compelling detail is the interaction panel, which lets you build sophisticated interactions that would normally only be possible via programming.

Another related feature is the ability to test your interactions on a mobile device using the ProtoPie Player, which can be connected via Wi-Fi to the ProtoPie app. Other useful features include the ability to divide the interactions into ‘scenes’ for simpler communication of ideas, a timeline interface that enables you to make fine-grained changes, and the ability to include interactions that use multi-finger gestures.


Quill

Quill is a flexible rich text editor with a powerful API

Quill is a flexible rich text editor with a powerful API

Quill is billed as a WYSIWYG rich text editor ‘for the modern web’. There are lots of different contexts in applications where a rich text editor is needed, so it’s no wonder Quill has exploded in popularity since its version 1.0 beta release in mid-2016.

Now a stable product, Quill lets you convert a basic div element into a powerful rich text editor with a few lines of JavaScript:

var quill = new Quill('#editor', {
 theme: 'snow'
});

But the most powerful features in Quill are its flexibility and extensibility by means of modules and a powerful API. Quill offers themes and modules that include toolbar, keyboard, clipboard and history. You can test-drive many of these features in the Quill playground and of course the documentation is a must-read if you intend to use its advanced features.


Bulma

Create custom layouts easily with Flexbox

Create custom layouts easily with Flexbox

Now that Flexbox has strong support in all modern browsers, more and more CSS frameworks are starting to incorporate it as a primary feature. Bulma is one of the latest to do this.

Bulma is a Sass-based framework and it’s modular, which allows you to use @import directives to include only the components you want in any given project. Alternatively, you can just drop the entire bulma.css file into your project and go nuts.

Out of the box, the grid features are Flexbox-based, so it’s easy to create custom layouts with an intuitive class-based system. Additionally, there are dozens of CSS-only elements (button, icon and so on) and components (media object, modal) that can be dropped into your projects using just HTML.


Yarn

Fast, secure and reliable, Yarn has it all

Fast, secure and reliable, Yarn has it all

Developers at Facebook have built an alternative to npm, the popular JavaScript package manager. Yarn promises to be ultra-fast, mega-secure and super-reliable. It still allows access to the npm registry but has quicker package installation and a more consistent dependency management workflow across machines, including offline.

In its introductory post, the Facebook team has detailed many of the problems Yarn attempts to solve. One of the issues addressed is related to dependency directories differing across machines, which can cause bugs that are hard to track down.

You can download and install Yarn for Windows, Mac or Linux. The usage and workflow guides are great places to start to get Yarn up and running.


Bootstrap

Old favourite Bootstrap has some powerful new updates

Old favourite Bootstrap has some powerful new updates

Bootstrap is certainly not a new tool, so it might seem a little out of place in this list. But the fourth version of the world’s most popular frontend framework is tabbed as ‘a major rewrite of almost the entire project’ , so I think it warrants a mention. Some notable changes include the following:

  • Dropped support for IE8 and iOS6
  • CSS source files move from Less to Sass (‘.scss’)
  • Switched from px to rem for primary CSS units
  • Increased the global font size to 16px from 14px
  • Added support for Flexbox in the grid
  • A new, all-encompassing ‘cards’ component to replace older components
  • Nearly all components refactored to use classes without child selectors

Bootstrap has revolutionised development and there’s no doubt the ubiquitous framework will continue to shape how we build stuff on the web.


ally.js

Don't overlook accessibility - use ally.js

Don’t overlook accessibility – use ally.js

No list of web development tools would be complete without at least one accessibility tool. Accessibility is one of those often-neglected aspects of design and development, and ally.js can simplify it for you.

Now a stable product, ally.js is a JS library that gives you fine control over focusable and non-focusable elements. For example, using its API you can prevent elements outside a modal window from receiving focus until the modal is closed. You can also find out exactly which elements are focusable or tabbable, and identify focus changes within the shadow DOM.

Two other powerful features are the ability to determine in what manner focus has changed (keyboard, mouse, etc.) and when an element is focusable and physically visible on the screen (this can help to avoid page scroll).


Mobi.css

Mobi.css is an easy-to-use CSS framework

Mobi.css is an easy-to-use CSS framework

A neat little project from Chinese developer Xcat Liu, Mobi.css is a lightweight CSS framework that utilises Flexbox, with a special focus on mobile and mobile-first styles. This tool simplifies mobile-first layouts and provides easy-to-use styles for components, including a Flexbox-based grid system, typography, HTML tables, forms and utility classes.

Many of the styles for these features work straight out of the box – similar to something like Normalize.css – but the focus with Mobi.css is on making things simple and attractive on mobile devices. The docs offer a full overview and there’s also a full component reference.


Origami Studio

Facebook uses prototyping tool Origami Studio to build its own products

Facebook uses prototyping tool Origami Studio to build its own products

Origami Studio is a prototyping and design tool for Mac that is used by the Facebook team to build its own products. Origami allows you to work in layers (which you can also import from Sketch). It includes pre-built components from Material Design and iOS, and lets you build interactive components in its Patch Editor panel. Your interactive creations are live-updated in a preview window for fast testing.

Origami offers countless ways to create, test and customise your prototypes. For example, there are animation options, custom device settings, mobile interactions (double tap, long press, and so on), and the ability to add sophisticated logic and maths to your interactions.


Foundation for Emails 2

Create responsive HTML emails with Foundation for Emails 2

Create responsive HTML emails with Foundation for Emails 2

Foundation for Emails is a framework from ZURB formerly known as Ink. It is used for creating responsive HTML emails that work on just about every platform and service, bundling together email coding best practices. The latest iteration uses a Sass codebase that gives you access to a settings file, wherein you can define all sorts of defaults to suit your needs.

As well as the framework itself, ZURB has provided the ZURB Email Stack, an all-in-one workflow that includes:

  • Use of gulp
  • The Inky templating language for complex table layouts
  • A styles inliner as part of the build process
  • Automatic image compression

The Getting Started guide will help walk you through how to get the stack up and running should you choose to take advantage of all the features.

  • This article was originally published in net magazine issue 289. Buy it here.

You may also like...

Read previous post:
Web Browsers to Try
8 Alternative Web Browsers You Should Try

There are many other web browsers with plenty of unique features available in the market. The big boys - Chrome,...

Close