10 fantastic new web design tools for March 2018

[Rss Bot 1]

If you’re feeling overwhelmed by the amount of learning that’s required to keep up with new web technologies these days, the good news is there are plenty of people building amazing tools to help you. This month we look at resources for building and maintaining Progressive Web Apps, static sites, design systems and more. 

01. Layout Land

Top notch layout tuition from Jen Simmons

This fantastic YouTube channel by Mozilla designer and developer advocate Jen Simmons teaches you about very smart and interesting things you can do with layout on the web. These tutorials will give you a firm grounding in using Flexbox, Grid, CSS Shapes and Clip Path in your designs, guiding you with useful example layouts.

You’ll learn about core concepts, such as when to use Grid and when to choose Flexbox, how to make things work with Internet Explorer, and how to write resilient CSS that’s less likely to trip you up in the future. For a taste of what to expect, check out Simmons' article 6 web layout myths busted.

02. basicScroll

Use CSS variables to trigger animation based on scroll position

The lack of variables in CSS has long been a frustration for developers, but they’re finally here and you can use them to make your life much easier, and to do cool things! basicScroll is a clever tool that makes use of CSS variables to let you trigger animations based on scroll position. 

As well as CSS Custom Properties, basicScroll requires requestAnimationFrame to work, but beyond that, it’s framework independent and has a simple JavaScript API. You can do all your animation with CSS, but if you want even more control you can use JavaScript. It works on both desktop and mobile and promises “insane” performance. 

03. Xray

A new spin on the Atom code editor

Atom fans may wish to keep an eye on this project, which is an experimental text editor based on what has been learned from Atom since it launched. Essentially it is a way to experiment with some radical ideas without destabilising Atom. The project goal is to develop a fast code editor that makes it easy for users to code collaboratively and to add their own functionality to the program via powerful APIs. Web compatibility is also a priority, so editing in Xray will feel similar to editing in GitHub. 

04. Compositor Lab

Build and maintain a design system with Compositor Lab

Now that many organisations are using design systems as a means of developing their products coherently, it makes sense that tools are emerging to help you work within this framework. Compositor Lab is one such tool: it’s for building and maintaining a design system. 

Lab enables you to create production-ready React components without writing code, speed up your workflow, and makes it easier to hand-off work between designers and developers. You can export your work in a variety of formats, and publish your style guide with a single click. 

05. PWABuilder

Building Progressive Web Apps might seem daunting, but this tool makes it easy

Progressive Web Apps are the web’s answer to native mobile apps – they attempt to replicate the experience of a native app, but on the web. This means that they’re offline-first, reliable, fast and as easy to use as a native app. If you’d like to make a Progressive Web App using data from your existing site, you’re in luck: PWABuilder makes the process much easier. 

Feed in the URL and it will help you to generate the manifest, build the Service Worker and publish the finished app. If you don’t know much about Progressive Web Apps, this article is a good primer.

06. Prettier

Get your code in order effortlessly with Prettier

Keeping things tidy might feel like an extra burden, but your future self will thank you for writing well-formatted code that’s easier to navigate and maintain – as will your colleagues! Prettier is an opinionated code formatter that integrates with many editors including Atom and Sublime Text, and many languages. 

The advantage of using a tool for this is that it’s automated, so it’s much easier for you, and also that it’s done in a standardised way so there’s less room for annoying debates about how to format things. Just hit save and it formats your code. 

07. Google Speed Index Calculator

How does your site compare to the competition?

We all know that a slow mobile site means fewer conversions, but this calculator helps you to put a number on it. Enter your URL and the Speed Scorecard works out how your site compares to the competition performance-wise, then the Revenue Impact Calculator tells you how much money your slow site is costing you. 

These numbers can be helpful in giving weight to your arguments when you’re pushing to prioritise the performance of a website. This page also gives some great guidance on what options you have for speeding things up. 

08. Gatsby

Build fast sites that are easy to deploy with Gatsby

Gatsby is a static site generator for React that helps you build fast, secure sites using modern web technology. Static files are much simpler to deploy, so it’s a lot easier to scale your site – and it’s much faster, too. Getting data into your site is straightforward thanks to a great plugin ecosystem that enables you to pull in data from CMSs, APIs, databases and more using GraphQL. Gatsby sites are Progressive Web Apps, which means only the critical data is loaded so that your site is in front of your users as quickly as possible.

09. CSS Gradient

A great interface for building gradients with CSS

Why use code to build CSS gradients when you don’t have to? There’s no sense in reinventing the wheel; you might as well use a web-based tool like this one to get the job done. CSS Gradient is a simple app that provides a nice interface for creating CSS gradients – pick from one of five gradient styles and adjust the sliders until you get what you need. The code appears underneath, ready for you to copy and paste into your site. 

10. Overflow

Share your design vision effectively with user flows

Overflow was created by the people behind Proto.io as they wanted to make something to help with the process of design critiques. They found that the usual method of presenting design work left out an important element; the story of the design and the designers’ rationale behind the decisions they had made. 

The answer to this, they found, is user flows: flow diagrams that show how a user will navigate around an interface. But until now, there was no tool designed specifically for creating user flows, so they were difficult to incorporate into a workflow. Overflow is intended to meet that need. It looks exciting, and you can sign up for early access now. This blog post explains in more detail how user flows can help you. 

Read more:

• Essential image optimisation tips
• Essential TED talks for UX designers
• 5 of the best JavaScript frameworks

View the full article