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.
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.
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.
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.
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.
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.
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 the Creative Bloq Newsletter
Daily design news, reviews, how-tos and more, as picked by the editors.
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.
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.
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.
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.
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.
