10 best new web design tools in August 2016

Supercharge Sketch with some extra productivity features; get to grips with element queries; put together a great modular design workflow and much more!

The two major launches this month are Pattern Lab 2, which is a tool for building atomic design systems, and Fractal, a tool for building web component libraries. 

Beyond that, there's the usual roundup of cool new utilities that help to make life easier. 

01. Pattern Lab 2

Build interfaces with atomic design principles

Creators Dave Olsen, Brian Muenzenmeyer and Brad Frost have totally overhauled Pattern Lab, a suite of tools that exists to help you build sites using the principles of atomic design. This post explains what new, and how to use this excellent resource.

02. Fractal

Build and document web component libraries

In a similar vein, this month also sees the launch of Fractal, Clearleft’s tool for building and documenting web component libraries. Fractal allows you to use whatever languages and tools you like and helps you to integrate your component library seamlessly into your project. 

03. Browser Calories

Instantly get the page weight of any site

The blurb for this tool kicks off with a great fact: for the top 1 million sites, median page weight is now bigger than SimCity 2000. That’s weighty! This browser extension puts a donut next to the address bar that, when clicked, tells you the page weight of whatever’s in the active tab, broken down by resource type if you like. It’s a neat, quick way to check out the sizes of pages similar to whatever you’re building. 


A CSS extension for element queries

Element queries enable you to adapt your page according to more than just the width and height of the browser, enabling you to build better responsive sites. EQCSS is a JavaScript plugin that lets you write element queries inside CSS today. The website explains provides a thorough tutorial on getting started.

05. Dummi

Generate dummy data for your designs

Craft is a prototyping app that lets you pull in data from a JSON file for use in your designs. But you need to get that data from somewhere, and that’s where Dummi comes in – it helps you to generate data and put it in a JSON file that you can use with Craft. Handy! Check out this post for an introduction.

06. Sketch Focus

Supercharge Sketch with this plugin

Boosting productivity is the aim of this Sketch plugin that adds some useful features: it enables you to add notes and tasks to your documents; link layers to items; sort items by date or alphabetically, and lots more!

07. Stitch

Consolidate data from multiple sources

Stitch helps you to consolidate data from multiple sources without having to write lots of messy scripts. Integrates with dozens of services, see here.

08. Lightgallery.js

A great JavaScript lightbox

This JavaScript lightbox gallery has loads of useful features: it supports touch and swipe navigation as well as mouse drag for desktops; it works with YouTube, Vimeo and lots of video formats and it’s highly customisable. As well as all this, it’s responsive and uses a CSS-only method for resizing, making it faster and more flexible. 

09. Mural

Mural, a tool for collaborative remote working

Mural is a tool to help designers working remotely to collaborate. There’s a flexible canvas where you can place any kind of image or document, creating a record of your ideas that anyone can follow. There are virtual Post-it notes and a live chat functionality to make it easier to share your work, just as you might in a real office. 

10. Highly

Save and share highlights

Highly is an app and browser extension that enables you to save and share highlighted text within articles on the web. It’s great for keeping track of all your favourite writings on Medium, and for pulling people into the conversation from elsewhere. 


Tanya Combrinck is digital editor on net magazine.