50 web design tools to help you work smarter in 2022

This next selection of web design tools covers more specialised options. These are tools to streamline your workflow and address specific problems, depending on your particular needs. There are sections on working with images, tools for animation, testing, handing over to clients or devs, exploring VR and AR, working with typography, and more. 

Images

24. Orion Icon

Orion Icon screenshot

This library offers a range of different versions of each icon (Image credit: Orion Icon)

Brilliant icon sets can always be hard to find, even using the best stock libraries. That's where Orion Icon (opens in new tab) comes in. It makes it to find the right icons and you can then manipulate the style of your icon, including choices of solid, line, colour and flat icons. Every icon comes in SVG and vector format with a bunch of controls to build your perfect set. Another nice feature is that you can build collections for different projects, ensuring you never forget which icons you used and how they were styled.

Also see our roundup of the best free icon sets around.

25. SVGito

This free app saves you having to manually edit SVG files [Image: SVGito] (Image credit: Peter Nowell)
(opens in new tab)

SVGito (opens in new tab) is a free web app that cleans up your SVG files, to save you the bother of manually editing them. This neat little app automatically optimises your SVGs at the touch of a button, and will typically reduce their size and complexity without changing how they actually look on screen.

26. Squoosh

Google's tool makes it easier to compress images to the appropriate level
(opens in new tab)

Squoosh (opens in new tab) is a free app from Google that’s aimed at helping web designers compress their images without sacrificing quality. You drag and drop your image into the app and use a slider to play with the amount of compression, so you can quickly find a good balance between picture quality and file size.

The app works both online and offline, and overall it’s a win-win: web designers save time, and Google gets a faster web that still looks good. 

Animation

27. Principle

Principle (opens in new tab) is great for interaction design – for mobile applications in particular. Tweaking and polishing animated interactions is a breeze with Principle. You can look at individual assets and how they independently animate, right down to timings and easing. This is another Mac-only app.

28. Anima

Anima interface

(Image credit: Anima)

Anima (opens in new tab) is an awesome plugin if you want to start using Sketch, Figma or Adobe XD for more sophisticated prototyping. For many Sketch users, this can be the missing piece to create really nice transitions and more complex interface animations. 

29. Anime.js

Spice up your apps with this animation engine (Image credit: Animejs)
(opens in new tab)

Although web page animations often get a bad rap, used judiciously they can make a website easier to navigate. CSS animations and transitions have been a huge step forward, but more complex interactions often require a library. Anime.js (opens in new tab) is an animation engine you’ll want to take a look at if you need to add complex animated components to your apps.

30. Hype Professional

Hype Professional screenshot

Export stunning animated HTML5 layouts (Image credit: Hype)

Hype Professional (opens in new tab) is an application that will allow you to export stunning interactive and animated HTML5 layouts. Animate elements with natural movements and collisions without keyframes or code. This incredibly easy editor provides you with the tools to breathe life into your designs, and leave static interfaces behind. 

Testing

31. Tobii Pro

Tobii Pro interface example

Track a user's gaze when reading your web page designs with Tobii Pro (Image credit: Tobii Pro SDK)

Tobii Pro (opens in new tab) is a software development suite for eye trackers and analysis. It helps you conduct online eye tracking studies on subjects as they navigate a website layout, ideal for figuring out, say, how to use logos for web design with perfect placement. Similar testing can be done with the tool for online banking portals, streaming services and work portals, offering a more authentic view on online behaviour and the reasons behind particular actions on your web designs. That insight can then be used to optimize a site for user friendliness and engagement.

32. Sizzy

Sizzy preview screens interface

Sizzy allows you to preview multiple screens during app testing (Image credit: Sizzy)

Sizzy (opens in new tab) is a tool that allows you to preview multiple screens at once while you’re testing out your responsive web apps. Creator Kristijan Ristovski (opens in new tab) had previously been using react-storybook to switch between the different variations of each component. But he got annoyed having to go back and forth between so many devices. So he built Sizzy, which allows you to see all the changes simultaneously, making it much quicker and easier to spot and fix layout bugs. 

33. Linksplit 

Linksplit makes it quick and simple to set up A/B testing [Linksplit]
(opens in new tab)

The most effective way to make your website better is through A/B testing: splitting traffic between two or more different versions and seeing which performs better. And Linksplit (opens in new tab) makes it a lot easier to set up. It’s free for the first 10,000 clicks, and you don’t even have to sign up to get started. Head to the site, enter your destination URLs and you’re given a single, short test URL to share with your audience. If you like, you can set up rules. For example, if you want people in the UK using Chrome on iOS to end up in a different place to people in the US, that’s pretty easy to set up.

34. Verifier

Fake email addresses registered to disposable domains are the scourge of online communities, and this simple tool can be your site's Batman. Verifier (opens in new tab) can be dropped into the email sign-up on your site, where it checks through a list of over 18,000 disposable domains in an instant and lets the user know if they need to provide a real address to sign up. It also checks that the domain of the address is valid and exists, and that the syntax is correct. 

With a free forever API key, Verifier could be an important step in crushing the spammer blight in online communities – something that its creator is very passionate about. The Sisyphean task of cleaning up the web starts right here.

Exporting and converting

35. Lunacy

lunacy interface screenshot

Lunacy makes it easy for non-Mac users to edit Sketch files [Image: icons8] (Image credit: icons8)

Lunacy (opens in new tab) solves the problem of .sketch files being "stuck" on Macs; now you can open, edit and save them with this free Windows software. It’s a fast program: it will open large files without grinding to a halt, and there is a decent crop of editing tools so you can make tweaks, save the file and send it to coworkers. You can export to PNG and SVG, and Lunacy will automatically download any missing Google fonts. 

36. Zeplin

Zeplin translates Photoshop or Sketch files into a free Mac, Windows or web-based app [Image: Zeplin]
(opens in new tab)

Zeplin (opens in new tab) allows you to take your design and prototypes and hand them over to developers, complete with all the specs, codes snippets and exportable assets you need from design files. You can upload your Sketch, Photoshop, XD and Figma files to Zeplin and this tool will create an environment for developers and designers to send over the project without the tedious task of creating guidelines. This is wonderful for bigger product teams.

37. React Sketch.app

Airbnb is sharing its bespoke tool with the open source community
(opens in new tab)

React Sketch.app (opens in new tab) provides a super-easy way to manage Sketch assets in a large design system. Built by the team at Airbnb to help bridge the gap between designers and engineers, it’s basically an open-source library that allows you to write React components that render to Sketch documents. 

Because React Sketch.app uses Flexbox, its components can have the same rich layout as your real components. That means no more dragging rectangles by hand; everything works like your target layout engine. 

React Sketch.app, then, makes it simple to fetch and incorporate data into your Sketch files. It also provides an easy way to build your own custom design tools on top of Sketch. You can learn more about how it works in this post (opens in new tab).

38. Avocode

web design tools: Avocode screengrab

Avocode helps you code websites or apps from Photoshop or Sketch designs [Image: Avocode]

Avocode (opens in new tab)makes it easy for frontend developers to code websites or apps from Photoshop or Sketch designs. It's built by the same team that brought us CSS Hat and PNG Hat, so it's not surprising they've taken the exporting process one step further here. Although previous apps have allowed you to export assets, what makes Avocode really special is that you can use its Photoshop plugin to sync your PSD into Avocode with just one click.

Avocode quickly and automatically analyses your PSD or Sketch file and brings everything into a beautifully designed UI. You then have full control over how you export assets, including SVG exporting as standard. 

VR and AR

39. ARKit

Create augmented reality experiences for iOS 12 devices with Apple’s ARKit 3 [Image: Apple] (Image credit: ARKit)
(opens in new tab)

Augmented reality – blending digital objects and information with the environment around you – is a space that’s generating a lot of excitement in the web and app development community right now. Not least because of Apple's ARKit (opens in new tab), a framework that allows you to easily create AR experiences for iPhone and iPad.

With ARKit on iOS 12, your AR apps can now be experienced by multiple users simultaneously, and resumed at a later time in the same state. You can also incorporate real-world objects into your AR experiences, giving your users even greater immersive opportunities. And People Occlusion allows AR content to realistically pass behind and in front of people in the real world, making AR experiences more immersive while also enabling green screen-style effects in almost any environment.

40. Firefox Reality

Firefox Reality is a browser especially for VR devices (Image credit: Mozilla)
(opens in new tab)

If you’re working in webVR, you’ll want to check out Firefox Reality (opens in new tab), a browser for virtual reality devices such as Viveport, Oculus, Hololens and Pico. 

Launched by Mozilla in September 2018, it's designed to move seamlessly between the 2D web and the immersive web. Among these features is the ability to search the web using your voice, via your device headset. The browser is being built in the open, and you can follow along via its Github page (opens in new tab)

41. Tvori

Tvori interface

(Image credit: Tvori)

If you're designing for a virtual world, why not actually do so? Tvori (opens in new tab)makes it easy for you to prototype interfaces, products, and design experiences for both XR and for the real world. And there are some great collaboration features, allowing you to invite teammates and clients in VR to review your design.

Typography

42. What the Font

Find that mystery font with WhatTheFont  (Image credit: MyFonts)
(opens in new tab)

Seen a font you like, but can't work out what it is? WhatTheFont (opens in new tab) can help. It uses deep learning to search our collection of over 133,000 font styles and find the best match for the fonts in your photo. It even works with connected scripts and when there’s more than one font in an image. Just upload an image, click the font you want to identify, then check out the results.

43. Textblock

Textblock website

A progressive enhancement for responsive typography (Image credit: Textblock)

Glyphic's Textblock (opens in new tab) is a JavaScript tool that adjusts the size, leading and grades of your type to make it fully responsive. It operates as a progressive enhancement over your existing CSS, and making your text adjust to fit any viewport width or device orientation. 

44. Gridlover

Gridlover interface

Use the sliders to see different combinations of font sizes, line heights and so on (Image credit: Gridlover)

Gridlover (opens in new tab) gives you the tools to automatically adjust your typography to figure out the most effective approaches. Fiddle with the font size, line height and scale factor sliders, then watch the typography respond.

Other

45. Aquarelo

web design tool

Aquarelo is a nifty tool for extracting the dominant colours from an image (Image credit: Aquarelo)

Want to match your website’s colour scheme to a particular image? Then you may well find Aquarelo (opens in new tab) handy. It's a free Mac app that uses a clustering algorithm to analyse your images and lets you know which colours are dominant in a picture, so you can use that information in your design. You drag and drop your image into the app and the dominant colours appear in a panel. You can then click on any of the colours to add them to your clipboard.

46. Vivaldi

web design tools: Vivaldi screengrab

Vivaldi is the most customisable browser you can find [Image: Vivaldi]

Sometimes the best web design tool can be something as simple as a new browser. Vivaldi (opens in new tab) is a fast, customisable web browser for power-users built by some of the people who started Opera. Dubbed 'a browser for our friends', Vivaldi is built using web technologies. JavaScript and React were used to make the user interface, along with Node.js and lots of NPM modules. 

Vivaldi is the most customisable browser out there, and it offers cool features such as command line control, a panel for taking notes, tab stacking and tiling, and web panels that enable you to put all your favourite sites in one place for easy access.

47. CodePen Projects 

CodePen interface

This tool lets you build websites directly inside CodePen (Image credit: CodePen)

Founded in 2012 by Alex Vazquez, Tim Sabat and Chris Coyier, CodePen has grown to become of the web’s largest and liveliest communities for testing and showcasing HTML, CSS and JavaScript code snippets. For its first five years, it functioned as both an online code editor and an open-source learning environment, where developers could create code snippets ("pens"), test them and get feedback. 

Then in 2017, CodePen took another big leap forward by launching its own IDE (Integrated Development Environment), CodePen Projects (opens in new tab), which enables you to build websites within your browser. 

You can drag and drop your website files, organise them into tabs, and preview your site as you build it. There are templates to help you create sites more quickly if you choose, as well as built-in debugging tools. 

Note that, although it works in a similar way to the Pen Editor, CodePen Projects doesn’t replace the latter but sits alongside it. You can learn more about CodePen Projects in this blog post (opens in new tab).

48. Foundation for Emails 2

Create responsive HTML emails with Foundation for Emails 2 [Image: Foundation for Emails 2]
(opens in new tab)

Foundation for Emails 2 (opens in new tab) is a framework from ZURB formerly known as Ink. It is used for creating responsive HTML emails that work on just about every platform and service, bundling together email coding best practices. The tool uses a Sass codebase that gives you access to a settings file, wherein you can define all sorts of defaults to suit your needs.

49. Ethical Ads

Ethical ads screenshot

An ad network carrying visually appealing adverts from ethical companies [Image: Ethical Ads] (Image credit: Ethical Ads)

The creators of Ethical Ads (opens in new tab) don't like the fact that monetising a website requires advertising which often detracts from the design by being ugly and obtrusive. The solution they’ve created is an advertising network whose ads have all been vetted - they’re all ethical companies and the ads are tastefully designed. 

50. CSS Scan

Check styles on hover with this browser extension

Check styles on hover with this browser extension (Image credit: CSS Scan)

CSS Scan (opens in new tab) is a browser extension that works on any website you visit in Chrome, Firefox or Safari and it’s great for finding out how your favourite sites are styled. Instead of opening Dev Tools to inspect an element, you can use it 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. 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.

Related articles:

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

Tom May is an award-winning journalist and editor specialising in design, photography and technology. Author of the Amazon #1 bestseller Great TED Talks: Creativity (opens in new tab), published by Pavilion Books, Tom was previously editor of Professional Photography magazine, associate editor at Creative Bloq, and deputy editor at net magazine. Today, he is a regular contributor to Creative Bloq and its sister sites Digital Camera World, T3.com and Tech Radar. He also writes for Creative Boom and works on content marketing projects.