Brand new web design tools and resources can help us to work smarter and faster, so its vital that we stay on top of the hottest new releases and updates. This month, we've got a varied list that is sure to serve up something to improve your workflow or get you learning something new.
Inspect elements with a pop-up box that appears on hover, use CSS Grid features without learning how to code it, edit Sketch files in Windows, browse hundreds of webapps without signing up... the means to do all of this and more are below.
If you'd like even more options than those found here, check out our bumper piece on the best web design tools of 2019 so far. You might also want to see our selection of the most underrated website design tools.
01. Your Undivided Attention
Your Undivided Attention is a fascinating podcast. This episode scrutinizes the use of design patterns that manipulate human psychological vulnerabilities to hijack your attention. The hosts consider how technology is used to manipulate our choices, and upcoming episodes will have experts on election hacking and the dynamics of cults. There’s currently an episode with a former CIA officer and White House advisor who, noticing the increasingly polarised nature of US politics, joined Facebook to see if she could help improve public discourse. “Things didn’t go as planned.”
02. Lunacy 4.0
Lunacy 4.0 is a free, native Windows graphic design application that works offline and supports .sketch files – it’s billed by the creators as "Sketch for Windows with design assets”.
Assets include thousands of icons in 22 different styles, illustrations from top Dribbble artists and a huge library of photographs. If you need to work on Sketch files but don’t use a Mac, this could be for you.
03. SVG Colorizer
SVG Colorizer is a really useful tool that enables you to recolour icon sets with another palette so that they match your interface. You can upload your own icons and create your own palettes, or you can use icons and palettes that are already built in to the tool. If a colour within the icons needs to stay, you can lock it using the palette running along the bottom. The tool recolours your icons by matching the lightness and darkness in the original colouration so that your new colour scheme makes sense.
04. CSS Scan 2.0
Instead of opening Dev Tools to inspect an element, you can use CSS Scan to view the CSS of any element you hover over – it appears in a pop-up view and you can copy all its rules with one click. CSS Scan is a browser extension that works on any website you visit in Chrome or Firefox (Safari support coming soon) and it’s great for finding out how your favourite sites are styled. You can use it to copy particular elements from themes or templates to adapt for your own use, and it’s great for debugging your own code.
Sizzy is a browser for web designers and developers working on responsive designs – it simulates lots of different devices so your code edits will appear instantly across lots of screens. The interface is highly customisable so you can choose which devices are displayed and rearrange them as you like. You can search for a particular selector and all the screens will immediately scroll to it, and you can make full-site screenshots from all devices, or just particular ones. Another useful feature is the sync setting which lets you scroll through all the devices at once.
06. CSS Grid Generator
If you’re not using CSS Grid because you think it’s complicated to learn, CSS Grid Generator is a great way to dip your toe in the water. It allows you to use Grid features without having to learn how it all works.
Set the numbers and units of your columns and rows, drag in the boxes to add your divs and this tool will generate the code for you. Your basic grid will be up and running quickly, and if you choose to explore the more advanced features of CSS Grid you can do so at your own pace. Click 'What does this project do?' on the bottom right to see some resource recommendations from the creator.
For many people the first stage of building a web app is browsing around similar tools to see how things have already been done, which can be time-consuming as you often need to sign up before you can start exploring.
Webframe gives you a faster way to do this. It’s a repository of screenshots from over 800 webapps that are organised into categories such as Landing, Pricing, Onboarding, Dashboards and so on, so you can see at a glance how other apps are handling these common features. Much of the material is usually only accessible after a sign-up, so it’s a big time-saver.
08. FYI product management resources
If you’re a product maker, at some point you’re going to end up doing some kind of marketing to get what you’ve made in front of an audience. The creators of FYI product management resources have explored document apps such as Trello, Coda and Miro and selected the best templates and other resources to help you tune your marketing machine to perfection. Whatever software you’re using, there will be something for you, and they’re organised into categories so you can find just the right thing for the process you need to work on.
Styling form controls such as radio buttons, checkboxes, range sliders etc. can be tricky, and the task is made even trickier if you want to keep things accessible for users of assistive technologies (you do). This repository of styled form controls can be used as a base for making things more stylish without messing up how your site is announced by screen readers or creating extra problems for any of your users. Each piece of code comes with a demo page and documentation that explains its use.