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阅读原文】。感谢您的支持!


网站设计那些事儿 互联网的发展,由web1.0的门户网站时代过渡到了web2.0的搜索时代,再过渡到如今的移动互联网时代。技术的迭代更新让人们认识世界的方式发生了极大的改变,但网站则在这数十年的发展变化中,一直发挥着它独特的作用。不同的产品形态(web...
Unique Ways to Integrate Social Media into Web Des... There’s something very special about social media marketing and how it compels consumers to engage with it. The Hoots...
16种网站设计好看的几何&多重纹理背景... 你是否正在为你的网站设计寻找一些“高端大气”的多边形纹理背景?如果刚好就是这么巧,我觉得你会喜欢今天这个有关于几何和多重背景纹理的集合。 不规则多边形和几何元素的背景现在已经成为今年最流行的设计趋势之一。它们被用于平面和网站设计中,使设...
响应式网站设计指南 最近又把自己的博客从 Hexo 迁移到了 WordPress。最大的动力在于感觉 WordPress 平台可以在手机上更好更新博客。迁移过来后,第一件事情就是重新写了一个 WordPress 主题,这次主题的设计采用了响应式的网站设计,于是...
The Brutalist Web Design Trend The brutalist web design trend comes from a school of design that is at once fascinating and very bare bones. If you’...