10 best new web design tools in August 2016

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

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

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

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. 

4. EQCSS

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

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

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

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

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

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.