10 new web design tools for June

[Rss Bot 1]

This month Brad Frost unveils his guide to making a successful style guide, presentation tool LiveSlides is getting a lot of attention, and Google releases Material Components, which make it easier to implement Material Design. 

01. Style Guide Guide

Brad Frost’s advice on building great style guides

There are lots of reasons why creating a style guide will make your site easier to maintain, but lots of organisations get it wrong and the style guide turns out to be more of a hindrance than a help. Style Guide Guide is a boilerplate by Brad Frost combined with some great advice that will help you build a guide that will aid designers without restricting their creativity.

02. LiveSlides

If you make presentations, definitely give LiveSlides a look

Jazz up your presentations with LiveSlides, which enables you to embed websites in PowerPoint and Keynote slides so you can include things like YouTube videos and live Twitter feeds, as well as your own sites.

03. Mini.css

An ultra-lightweight yet capable framework

As the name suggests, file size is one of the main selling points of this framework, which weighs in at under 7MB gzipped. It’s just one CSS file, and packs more functionality into that space than you might expect, with modules that will support a fairly complex site design. The documentation is detailed, and it is designed to work well on both mobile and desktop platforms. 

04. Mirr.io

Get your Sketch prototypes up and running with ease

This handy Mac app enables you to make working prototypes out of your Sketch designs without needing to leave the program or fiddle around with exporting things to external tools. It’s a smooth process that’s quick to learn, so you can get your prototype online and ready to share without any fuss.

05. Gradient Buttons

Satisfying gradient hover effects

Here’s a large free collection of gradient buttons that have cool hover effects. You can try them out on the site and copy the CSS code to use on your own site.

06. Learn CSS Grid

Get working with CSS Grid the easy way

It’s well worth your time and effort to get to grips with Grid as it’s a much more efficient way to do layouts. This resource lays out the principles simply and clearly so you can jam them into your brain swiftly and with minimal resistance.

07. Fontjoy

Interesting font pairings for your inspiration

This tool uses machine learning to generate font pairings that adhere to various criteria that ought to make them look good. It’s a great way to brainstorm if you’re stuck as it’s sure to throw some interesting ideas your way.

08. Material Components

Pixel-perfect, modular components maintained by Google

Material Components is a set of customisable UI components for Android, iOS and the web that makes it easy for you to implement Material Design on any platform. They’re maintained by Google engineers and designed to play well with the big frameworks such as React and Angular.

09. Fuse

A UX design toolkit that improves workflow and collaboration

Fuse is a UX toolkit designed to make it much quicker and easier for you to build iOS and Android interfaces, especially for more complex applications, and to do so in a way that enables you to collaborate more efficiently with the dev team. Your Android and iOS interfaces appear side-by-side so you can adjust them together, and they’re generated from a shared codebase.

10. Ambiance colour palettes

Randomly generated colour palettes

Ambiance presents a curated collection of colour palettes for you to browse through when you’re stuck for ideas or inspiration, with fun names such as Token Movie Vixen and Nice Ice. You can save palettes to your Ambience Box for later, and copy colours' HEX, RGB and HSL information.

Liked this? Then read these:

• 23 top Sketch plugins
• 7 tips to manage colour better on the web
• 12 must-have code testing tools

View the full article