No one ever claimed that web design isn’t hard work. But, ideally, you want to put your effort and energy into solving problems, delighting users and creating beautiful designs. You don’t want to waste it on dull, repetitive and soul-sapping tasks.
Thankfully, new tools are being released all the time to help you simplify processes, and reduce time and effort. It can be tricky keeping track of them all, though. So in this post we round up some of our favourite new tools, all of which are making web design easier in 2017.
Normally when it comes to improving the speed of a website, nothing makes as much impact as reducing the size of images. But if you thought we’d already reached the limit of what image compression tools can do, then think again. Launched in March by Google, Guetzli (named after the Swiss word for ‘cookie’) promises to reduce the size of JPGs by a whopping 35 per cent more than current methods.
The new, open source encoder can make the size of images and web graphics significantly smaller while still maintaining compatibility with existing browsers, image processing applications and the JPEG standard. However, the tradeoff is that its algorithms take significantly longer to create compressed images than currently available methods.
You can learn more about Guetzli in this blog post.
iotaCSS is a CSS framework that’s been purposely crafted to be design-agnostic. It was created by consultant frontend architect Dimitris Psaropoulos, who found that other CSS frameworks were imposing a lot of limitations on the designers he worked with. This was forcing him to either write a lot of code on top, or ask the designer to compromise. So instead, he created his own framework, which works a little differently.
While most CSS Frameworks behave as a unit, iotaCSS is a set of individual, small and flexible modules that don’t depend on each other. You can use one independently or you can combine them to build more complicated user interfaces.
iotaCSS been quietly in development for a couple of years, with a number of early adopters using it to build high-scale products. But now it’s out of beta and confidently announcing itself to the world. You can learn more about how it works in this blog post.
03. CodePen Projects
Now CodePen has taken another big leap forward by launching its own IDE (Integrated Development Environment), CodePen Projects, which lets you build websites within your browser.
You can drag and drop your website files, organise them into tabs, and preview your site as you build it. There are templates to help you create sites more quickly if you choose, as well as built-in debugging tools.
Note that, although it works in a similar way to the Pen Editor, CodePen Projects doesn’t replace the lattter but sits alongside it. You can learn more about CodePen Projects in this blog post.
Launchpad is a tool from Anima that lets you publish websites directly from Sketch, with no coding required.
You can learn more about Launchpad in this blog post.
05. React Sketch.app
React Sketch.app provides a super-easy way to manage Sketch assets in a large design system. Built by the team at Airbnb to help bridge the gap between designers and engineers, it’s basically an open-source library that allows you to write React components that render to Sketch documents.
Because React Sketch.app uses Flexbox, its components can have the same rich layout as your real components. That means no more dragging rectangles by hand; everything works like your target layout engine.
React Sketch.app, then, makes it simple to fetch and incorporate data into your Sketch files. It also provides an easy way to build your own custom design tools on top of Sketch. You can learn more about how it works in this post.
SVGito is a free web app that cleans up your SVG files, to save you the bother of manually editing them.
Created by Peter Nowell, this neat little app automatically optimises your SVGs at the touch of a button, and will typically reduce their size and complexity without changing what they actually look like on screen.
You can learn more about SVGito in this blog post.
Sizzy is a tool that allows you to preview multiple screens at once while you’re testing out your responsive web apps.
Creator Kristijan Ristovski had previously been using react-storybook to switch between the different variations of each component. But he got annoyed having to go back and forth between so many devices. So he built Sizzy, which allows you to see all the changes simultaneously, making it much quicker and easier to spot and fix layout bugs.
You can learn more about Sizzy in this blog post.