Skip to main content

Creative Bloq is supported by its audience. When you purchase through links on our site, we may earn an affiliate commission. Learn more

52 web design tools to help you work smarter in 2020


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]

Want to mock up something like an infographic quickly and easy? Then Lawrence Harmer, founder of Solve Web Media, recommends Canva. 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 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 pretty much covers everything you'd ever need. It works superbly on desktop and there's also an excellent iPad version. This 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 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)

SVGito 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

Squoosh 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 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 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)

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 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 collection that demonstrates what the library can do, as well as thorough documentation on GitHub.

31. Hype Professional

Web design tools: Hype Professional

Export stunning animated HTML5 layouts (Image credit: Hype)

Hype Professional 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. 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 is a tool that allows you to preview multiple screens at once while you’re testing out your responsive web apps.  

Creator Kristijan Ristovski 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]

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

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

36. Zeplin

Zeplin translates Photoshop or Sketch files into a free Mac, Windows or web-based app [Image: Zeplin]

Zeplin 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. “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.”

37. React Sketch.app

Airbnb is sharing its bespoke tool with the open source community

React Sketch.app 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.

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

39. Avocode

web design tools: Avocode screengrab

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

Avocode 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. "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. It costs from $17 per month.

VR and AR

40. ARKit

Create augmented reality experiences for iOS 12 devices with Apple’s ARKit 3 [Image: Apple]

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, a framework that allows you to easily create AR experiences for iPhone and iPad.

With ARKit 3 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.

41. Firefox Reality

Firefox Reality is a browser especially for VR devices

If you’re working in webVR, you’ll want to check out Firefox Reality, 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. Also check out the VR app Hologram, further down on our list.

42. Hologram 

This Mac app built on A-Frame lets you create WebVR experiences without needing to code [Image: Hologram]

Hologram 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

43. Type Nugget

Type Nugget gives you greater control over your typesets 

Type Nugget 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.

44. Textblock

Textblock website

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

Glyphic's Textblock 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. 

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

46. Vaunt

web design tools: Vault screengrab

Vaunt is a nifty tool for extracting the dominant colours from an image [Image: Vaunt]

Want to match your website’s colour scheme to a particular image? Then you may well find Vaunt 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.

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

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

49. Foundation for Emails 2

Create responsive HTML emails with Foundation for Emails 2 [Image: Foundation for Emails 2]

Foundation for Emails 2 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 latest iteration uses a Sass codebase that gives you access to a settings file, wherein you can define all sorts of defaults to suit your needs.

As well as the framework itself, ZURB has provided the ZURB Email Stack, an all-in-one workflow that includes:

The Getting Started guide will help walk you through how to get the stack up and running should you choose to take advantage of all the features.

50. MakerAds

An ad network carrying visually appealing adverts from ethical companies [Image: Pattern Inc]

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

The creators of MakerAds set out to solve two problems for indie makers: monetising a website requires advertising which often detracts from the design by being ugly and obtrusive, and indie makers often struggle with self-promotion. The solution they’ve created is an advertising network that carries indie makers’ ads for free alongside paid-for adverts from larger companies that have been vetted - they’re all ethical companies and they ads are tastefully designed.

51. 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 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:

Topics