Skip to main content

53 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

23. Canva

Canva is a popular tool for quickly creating social media images and infographics [Image: Canva]
(opens in new tab)

Want to mock up something like an infographic quickly and easy? Then Lawrence Harmer, founder of Solve Web Media (opens in new tab), recommends Canva (opens in new tab). It’s a free, browser-based tool that’s used by both designers and non-designers to make graphics for both print and the web. 

“Canva is pretty good for making nice images,” says Harmer. “Images are the window into the soul of your website and social media, so a tool like this can be a key to success.” 

24. Affinity Photo

Affinity Photo for iPad

Affinity Photo will meet all your image editing needs, and then some (Image credit: Affinity)

Looking for an alternative to Photoshop or Illustrator? This is one for the pros, as Affinity Photo (opens in new tab) pretty much covers everything you'd ever need. It works superbly on desktop and there's also an excellent iPad version. This tool is Photoshop and Illustrator in one, and offers a great deal of features and power to enable you to create superb designs. For more complete image manipulation tools, explore our list of the best image editing software.

25. Orion Icon

Orion Icon

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

This web design tool is one for the armoury. Most of us will know that brilliant icon sets can always be hard to find. Even using the best stock libraries, it can be a long old slog to find something you like when it comes to Icons. If that’s the case, check Orion Icon (opens in new tab) out. It is super helpful to find the right icons and to top it all, 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. A nice feature is that you can build collections for different projects, ensuring you never forget which icons you used and how they were styled.

Not quite what you're after? Take a look at our roundup of the best free icon sets around.

26. 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. Created by Peter Nowell, 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.

27. 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

28. 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.

29. Anima

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

30. Anime.js

Spice up your apps with this animation engine [Image: Anime.js] (Image credit: Animejs)
(opens in new tab)

Although web page animations have at times got 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.

Here’s an example to demonstrate the super-simple API:

var myAnimation = anime({
 targets: ['.box1', '.box2'],
 translateX: '5rem',
 rotate: 180,
 duration: 3000,
 loop: true
});

This code defines the objects you want to animate, along with specifics of the animations. The API allows you to target elements using CSS selectors, DOM elements or even JavaScript objects.

The author, Julian Garnier, has provided a CodePen (opens in new tab) collection that demonstrates what the library can do, as well as thorough documentation on GitHub (opens in new tab).

31. Hype Professional

Web design tools: Hype Professional

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

32. Tobii Pro

Tobii Pro

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. With these tools, designers can 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.

33. Sizzy

Sizzy allows you to preview multiple screens during app testing

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. 

34. 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, too, you can set up rules. For example, if you want people in the UK who are using Chrome on iOS to end up in a different place to people in the US, that’s pretty easy to set up.

35. 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

36. Lunacy

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

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

The arrival of Lunacy (opens in new tab) was a big relief for Sketch users because it 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 some 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. The team behind Lunacy are aiming to gradually bring its feature-set in line with that of Sketch.

37. 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) is a tool that fits in the post-design and pre-development stage. It 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.

“The best part is that Zeplin provides quick reference for the colours, dimensions and fonts from your designs,” says James Stiff (opens in new tab). “It even generates CSS and style guides. I've found Zeplin to be a massive time-saver and my developer friends seem to really like it too.”

38. 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).

39. URL to PDF

URL to PDF: web design tools

Convert HTML into PDFs automatically with this API [Image: URL to PDF]

Brought to you by Alvar Carto, URL to PDF (opens in new tab) is a self-hosted API that enables you to convert your HTML into PDFs, so it’s handy for rendering receipts, invoices, or any other HTML content. The API ignores a page's @media print CSS rules by default, and sets Chrome to emulate @media screen, to make the default PDF look more like the actual site. You can set it to operate automatically at regular intervals and best of all, it’s free.

40. 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 extremely 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. 

You can also click elements in the design, and copy and paste the code into a text editor of your choice. "It gives users everything they need for coding – a preview of the design, and access to all layers and export assets," says Avocode co-founder Vu Hoang Anh (opens in new tab). "The best thing is that developers won't need Photoshop or Sketch at all. The current workflow really sucks and that's why we created Avocode."

We're not sure any app can ever replicate a developer. But we know of many hard pressed designers who happily use this to turn PSDs and Sketch files into interactive designs, which can then form the foundations for the website build.

VR and AR

41. ARKit

Create augmented reality experiences for iOS 12 devices with Apple’s ARKit 3 [Image: Apple]
(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.

42. Firefox Reality

Firefox Reality is a browser especially for VR devices
(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 and Google Daydream. 

Launched by Mozilla in September 2018, it's available now from these device’s app stores, and is 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). Also check out the VR app Hologram, further down on our list.

43. Hologram 

This Mac app built on A-Frame lets you create WebVR experiences without needing to code [Image: Hologram]
(opens in new tab)

Hologram (opens in new tab) is an all-in-one tool for WebVR creation. This free desktop app requires no previous coding knowledge, and its native Google Blocks integration enables you to play with lots of free 3D objects right off the bat. Under the hood, Hologram takes full advantage of the power and simplicity of A-Frame, Mozilla’s WebVR framework. 

This means that developers can download projects created with Hologram and use them in their A-Frame workflows. It’s currently available on Mac and a Windows version is promised soon. 

Typography

44. Type Nugget

Type Nugget gives you greater control over your typesets 
(opens in new tab)

Type Nugget (opens in new tab) addresses a need you’ll have on just about every front end project: dealing with CSS typography. Still in beta with more features in the works, it’s an online typesetting tool that gives you fine control of type styles. 

The tool displays a diverse set of text samples on the page, which can be live-tweaked in a panel on the right. The panel lets you select font size, weight, style, colour, letter spacing, text decoration and more for individual aspects of the page (global styles, headings, paragraphs, links and HTML lists).

Usefully, this tool allows you to register for an account, log in and save your progress. After specifying all your settings, you can hit the ‘Generate Code’ button and Type Nugget will produce a link to a style sheet hosted on its CDN. If you find CSS typography tedious and repetitive, you’ll benefit greatly from adding this tool to your workflow.

45. 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. 

46. Gridlover

web design tools: 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

47. 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.

48. 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 other 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.

49. CodePen Projects 

web design tools: Code snippets in the Codepen editor

This tool lets you build websites directly inside 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).

50. 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.

51. Ethical Ads

web design tools

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. 

52. CSS Scan

Check styles on hover with this browser extension [Image: CSS Scan]

Check styles on hover with this browser extension [Image: CSS Scan] (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.

53. Stark

Stark web design tool

Check your colours can be seen by all with this tool (Image credit: Stark)

Baked into Figma, Sketch and Adobe XD, Stark (opens in new tab) makes designing with accessibility in mind easier than ever before. A great example of this is Stark's colour contrast analyser which can be used to measure colour contrast ratio and find the minimum advised by the Web Content Accessibility Guidelines (WCAG). The app can also simulate what designs look like for users with varying types of colour-blindness – 4.5% of the world is a lot of potential users, after all. To learn more about making your web work as inclusive as possible, read our how to create inclusive web design (opens in new tab)guide. You might also want to see our guide to underrated website design tools.

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

Carl Cahill
Carl Cahill

Carl is a creative who has been in the web industry for more than 14 years. Blessed with a passion for UX/UI design, Carl has been awarded Creative of the Year for his contribution to the industry. His diverse portfolio of past clients includes Facebook, Twitter, Unity Technologies, Ordnance Survey, and beauty brand Lush. He has written features for Web Designer magazine, and currently heads up the Salo Creative agency, which he also founded.