10 new web design tools for April 2018

产品设计 2018-04-16 阅读原文

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

Creative Bloq

责编内容by:Creative Bloq阅读原文】。感谢您的支持!


网页设计中常用的8款字体 字体在网站中扮演了相对重要的一个角色,所以在网站中,选用什么样的字体也是一个相对比较重要的工作。今天跟大家分享下在网站当中常用的8款字体。 都知道,字体主要分为称线字和无称线字。其实细分的话还有等宽字体、梦幻字体和花体字。但今天我们主要针对常用的称线字和非称线字来讲。 称线字和非称线字...
网页设计需要学什么?学网页设计好就业吗?... 网页设计需要学什么?学网页设计好就业吗?网页设计发展趋势有哪些? 一、美术部分: 结构素描、光影素描、速写、设计素描、户外写生 色彩原理、色彩配色、设计色彩、色调小稿训练、色彩长期作业 30秒测试适不适合做设计: http://www.tianhusj.com/lis...
Web Design Weekly #314 Headlines Progressive Web Apps on iOS are here With iOS 11.3, Apple has silently added support for the basic set of new technologies be...
Web Design Weekly #269 Headlines Base64 Encoding & Performance In this article Harry Roberts shares some insights into why you should’t use base64 in CSS and...
How Web Design Can Help In Marketing And Communica... How Web Design Can Help In Marketing And Communication When you start a business and you create a website for letting people know about your busines...