10 new web design tools for July 2019

[Rss Bot 1]

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.

01. Your Undivided Attention

Learn why we need to move away from manipulative design patterns

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

Edit Sketch files in Windows

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

Recolour a set of icons using any palette you like

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

Inspect elements on any site on the fly with this browser extension

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. 

05. Sizzy

Instantly see how your design looks on multiple devices 

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

Use powerful CSS Grid features without learning the code

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. 

07. Webframe

Browse inside hundreds of apps and compare their design and features

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

Tune your marketing machine with these good templates

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. 

09. A11y_styled_form_controls

Style your form controls and stay accessible

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. 

10. iro.js

Slick colour picker made with SVG 

Iro.js 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:

• The hottest web design trends of 2019
• The best web design jobs right now
• The future of web design

View the full article