10 new web design tools for April 2018

[Rss Bot 1]

The theme of our roundup this month is speed and efficiency: a few of these tools will do amazing things for your workflow by cutting out tedious, frustrating tasks that have nothing to do with design. Take Stackswell – it automates all the annoying bits of doing responsive design in Sketch. Another of our tools speeds things up for you by extracting and organising all the assets from a .sketch file. 

On top of that there’s a cool new billing product from Stripe, a great networking tool for creatives by Tina Roth Eisenberg and a fantastic tool for measuring things on your screen in pixels. 

01. Design Systems Repo

Everything you need to approach any aspect of working with a design system

If you’ve been tasked with working on some of the ingredients for your organisation’s design system, or perhaps even building or codifying the system itself, you’ll want to get up to speed with the latest resources on the topic. 

For this, Design Systems Repo is your friend. It’s a collection of books, articles, talks, websites, tools, design systems, pattern libraries and style guides that you can use to get an understanding of how top organisations and leading thinkers are doing things.

02. PixelSnap

Measuring things on your screen is no longer slow and annoying

PixelSnap is a very nifty app that makes measuring things on your screen much, much less annoying. Put your cursor between two elements such as an image and a heading, and it automatically tells you the number of pixels between them. Draw a rectangle around an element and it snaps around it and tells you its dimensions. Yes. You can measure things that quickly. 

Check out the video on the homepage to get the idea. The app is priced at $15, and the only drawback is that it’s only available as a Mac app for now. But if you’re a Mac user, it’s a great thing. 

03. Sketch.The.Ripper

Get all the assets out of a Sketch file with a single click

Exporting and preparing assets from Sketch to hand over to another team can be a real drag, so the prospect of a tool that does it for you with one click is rather exciting. Sketch.The.Ripper extracts and organises the screens, copy and raster images from all the artboards in a .sketch file, and presents them in a convenient manner. You can see an example of the output from a ripped file here. 

This tool is web-based so it works on any OS, which can remove some friction from your workflow if people are using different systems. It’s made by Icons8, and you can read more about it here.

04. Stackswell

Automate the boring aspects of creating a responsive design in Sketch

Stackswell speeds up your responsive design workflow by bringing media queries into Sketch, and automating the process of updating type styles and symbols for each breakpoint. Instead of doing this work manually, when you adjust the width of an artboard the styles automatically update. 

Stackswell also spares you the work of having to check your vertical spacing for each breakpoint, so you get consistent spacing with minimal hassle. You can read more about it in this article. 

05. Variable Fonts

Discover and experiment with variable fonts 

Variable fonts enable you to use many different font weights and widths without having to include a separate file for each: you include one file and then modify the font using CSS. It’s a great situation because it enables you to use typography to its best effect in your designs, without having to increase your page weight. 

Not all variable fonts are equal though; some are more flexible than others. This tool enables you to find different fonts and experiment with them to see if they suit your needs. For further information on variable fonts and to get an idea of what can be achieved, try this demo.

06. Stripe Billing

Build your own flexible billing system using the Stripe Billing API

Stripe’s new billing product for online businesses offers a third way for companies considering the dilemma of whether to build or buy a billing system (for more on this, take a look at our article on online shop solutions). The Stripe Billing API integrates easily into an existing site and enables you to use building blocks to create a flexible system tailored to your needs.

When your system is set up, everything is managed from a dashboard where you can keep on top of subscriptions, invoices and financial reports. You also get powerful features such as Stripe’s global payments system, which handles different currencies and credit cards, and the flexible billing components that let you experiment with pricing.

07. CreativeGuild

A directory of creative companies, individuals and jobs LinkedIn for creatives

CreativeGuild is a spin-off of CreativeMornings, a free monthly lecture series founded by Tina Roth Eisenberg in Brooklyn a decade ago. The concept was a hit and there are now CreativeMornings chapters in over 185 cities all over the world, each with its own vibrant community that nurtures and inspires its members.

CreativeGuild is intended to bring some of the community aspect online so that it’s accessible to more people. You can think of it as being a bit like LinkedIn, but for creatives. There’s a directory of creative companies, individuals and jobs, and you can search by location to find opportunities in your city. 

08. Mobbin

Browse mobile design patterns to find inspiration for your own projects 

Mobbin is a gallery of mobile app designs that you can use to get ideas for your own projects – instead of installing lots of apps, you can browse them in one place to see how others are solving design problems. Six screens for each app are displayed so you can get an idea of the user journey and design pattern for each one. There’s also a sidebar displaying job listings.

09. HueSnap

Generate colour palettes from photos by taking or uploading images

You never know when inspiration will strike; perhaps the decor of a hotel or the light in the park will feel like the right colour scheme for your work. If that happens, you can snap a photo and use HueSnap to extract the colours from the image and make them into a palette. 

The app is aimed at mobile usage so works best on your phone, and you can save and share your palettes with others. There are various features to help you modify a palette, such as options to choose complementary and compound colours. Your palettes can have up to six colours each. 

For more, take a look at our roundup of the best colour tools for web designers.

10. Eggradients

Nice gradients with weird names in egg-shaped containers

Whoever put together this collection of beautiful gradients has a great eye for colour and an interesting sense of humour. Each gradient is displayed in an egg-shaped container and given a name which may or may not relate to the colours in some way. If there is a relation, we haven't been able to decipher it. 

Example names include 'Successful Immigrant' for a turquoise gradient, 'Wozniak’s Broken Heart' for a pale blue and 'Merciful Enemy' for a yellow to green transition. 

Get your ticket to Generate New York

Leading web design event Generate New York is back. Taking place between 25-27 April, headline speakers include SuperFriendly’s Dan Mall, web animation consultant Val Head, full-stack JavaScript developer Wes Bos and more. There’s also a day of workshops and top networking opportunities – don’t miss it. Get your Generate ticket now.

Read more: 

• 22 free ebooks for designers and artists
• Could Craft 3 become your go-to CMS?
• How to make it in the web design industry

View the full article