10 new web design tools for June
Top resources to help you with font combinations, colours, UX design, style guides, CSS Grid and much more.
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
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
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
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
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
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
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.
Get top Black Friday deals sent straight to your inbox: Sign up now!
We curate the best offers on creative kit and give our expert recommendations to save you time this Black Friday. Upgrade your setup for less with Creative Bloq.
07. Fontjoy
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
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
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
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:
Thank you for reading 5 articles this month* Join now for unlimited access
Enjoy your first month for just £1 / $1 / €1
*Read 5 free articles per month without a subscription
Join now for unlimited access
Try first month for just £1 / $1 / €1
Tanya is a writer covering art, design, and visual effects. She has 16 years of experience as a magazine journalist and has written for numerous publications including 3D World, 3D Artist, ImagineFX, Computer Arts, net magazine, and Creative Bloq. For Creative Bloq, she mostly writes about web design, including the hottest new tools, as well as 3D artwork and VFX.