Skip to main content

10 new web design tools for July 2019

Web design tools
(Image credit:

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 (opens in new tab)of 2019 so far. You might also want to see our selection of the most underrated website design tools.

01. Your Undivided Attention

Best web design tools: Your Undivided Attention

Learn why we need to move away from manipulative design patterns (Image credit: TC)

Your Undivided Attention (opens in new tab) 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

Best web design tools: Lunacy

Edit Sketch files in Windows (Image credit: TC)

Lunacy 4.0 (opens in new tab) 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

Best web design tools: SVG Colorizer

Recolour a set of icons using any palette you like (Image credit: TC)

SVG Colorizer (opens in new tab) 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

Best web design tools: CSS Scan

Inspect elements on any site on the fly with this browser extension (Image credit: TC)

Instead of opening Dev Tools to inspect an element, you can use CSS Scan (opens in new tab) 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. 

05. Sizzy

Best web design tools: Sizzy

Instantly see how your design looks on multiple devices  (Image credit: TC)

Sizzy (opens in new tab) 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

Best web design tools: CSS Grid Generator

Use powerful CSS Grid features without learning the code (Image credit: TC)

If you’re not using CSS Grid because you think it’s complicated to learn, CSS Grid Generator (opens in new tab) 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. 

07. Webframe

Best web design tools: Webframe

Browse inside hundreds of apps and compare their design and features (Image credit: TC)

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 (opens in new tab) 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

Best web design tools: FYI

Tune your marketing machine with these good templates (Image credit: TC)

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 (opens in new tab) 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. 

09. A11y_styled_form_controls

Best web design tools: A11y

Style your form controls and stay accessible (Image credit: TC)

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 (opens in new tab) 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. 

10. iro.js

Slick colour picker made with SVG 

Slick colour picker made with SVG  (Image credit:

Iro.js (opens in new tab) is a HSV colour picker widget for JavaScript that the creator put together after becoming frustrated with existing widgets being bloated, overly dependent on other things and generally not up to scratch. Iro.js is beautifully designed and built with SVG so it looks great on any screen size. It works on all modern browsers and devices, including touchscreens, and has a small footprint with no extra detritus attached to it. It also supports hex, hsl and rgb colour formats. 

Read more:

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.