Our top 10 web design tools

In this article we’ll look at some of our favourite resources that help during web design projects - they're our 'go to' places to discover new typography, pick harmonious colours, find the right icon and ensure designs are accessible.

We use Figma as our primary design tool, but there are plenty of resources that we use at various stages of the design process. It’s thanks to the generosity of the design community that all of the resources we’ll discuss are open-source or free in some capacity. They include:

1. Unsplash
2. SiteInspire
3. Ionicons
4. Typewolf
5. Coolors
6. Accessible Colors
7. Frrames
8. The Noun Project
9. SVGOMG
10. Dribbble

1. Unsplash

Like everyone else in the design community, we’re big fans of Unsplash. Once upon a time, access to high-quality (and more importantly free) images, was limited. If you wanted to use placeholder images in your designs, you had to rely on watermarked images from Shutterstock or trawl through Google Images to find something that would work.

The arrival of Unsplash changed the game. They now boast over a million high-resolution, royalty-free images that you can use when designing.

Although Unsplash is our ‘go to’, there are now dozens and dozens of websites dedicated to providing great images - all of which are made possible by the generosity of photographers and our fellow creators.

2. SiteInspire

There’s no shortage of websites that you can visit when looking for web design inspiration. But one website has consistently remained a go-to resource is SiteInspire. SiteInspire has always felt much more curated than other similar websites and, thanks to that, you can’t fail to be inspired. And with plenty of ways to filter websites by type, subject or style, you can explore the designs that are most relevant to what you’re currently working on.

3. Ionicons

A good, default icon pack is a must for any designer. Whilst a project may require bespoke or very specific iconography, it’s always useful to have a comprehensive icon pack on hand when you need it. Ionicons is perfect for this. Open source and easily customisable (thanks the SVG format), Ionicons are ideal.

4. Typewolf

Typography choices can make or break a design so it’s always handy to have a place to go for inspiration. Typewolf is one of the best resources for this that we’ve found. Not only can you browse websites that make great use of typography, you can get a better understanding of font pairings and view new and emerging typefaces too.

5. Coolors

It can take time to assemble the perfect colour scheme for a website or web application. It should be cohesive, accessible and aligned with the overall brand. With Coolors (no, not a typo!), you can generate complementary colour schemes with just a tap of your spacebar - give it a whirl!

You can pre-define the key brand colours and then generate additional swatches to create a flexible and extensive palette.

Not only is Coolors useful for experimenting and composing a brand palette, but it’s also a great source of inspiration. By browsing through hundreds of user-generated colour schemes, you can quickly get a feel for what combinations might work.

6. Accessible Colors

What good is a nice colour scheme if it isn’t accessible? When designing, we test our colour combinations to ensure we’re delivering a solid user experience to as many users as possible. There are plenty of apps and resources that let you test the accessibility of the colours you’ve chosen, but if you want something that is free and easy to use, Accessible Colors is a solid choice.

You can input the HEX values for the text and background colours you wish to test and define the size and weight of your text. You can then check to see how your choices measure up against the accessibility standards of WCAG 2.0.

7. Frrames

Sharing your designs in the context that they will be used is a great way to present your work - anything that helps to showcase how the final version will look and feel is a good thing. Frrames (again, not a typo!) is a handy resource for downloading mockups for common use cases such as presenting your work in the browser on a phone.

8. The Noun Project

As good as Ionicons are (the free icon pack we mentioned earlier) there are times when you need something more specific or don’t want to download a pack of 400 icons only to use a handful in your project. Maybe you just need some inspiration about what style of iconography to use in a design project? Noun Project is perfect for this. It is a curated library of over 2 million icons and supported by a global community.

9. SVGOMG

SVGs are great. When it comes to assets like logos, icons and graphics, SVG’s (Scalable Vector Graphics) are more flexible, efficient and practical than using images. And with extensive cross-browser support, there really isn’t a good reason to not use SVGs in your designs.

But when it comes to exporting assets from your favourite design tool, SVG’s don’t tend to be optimised as well as they can be.

Enter SVGOMG.

We use this tool on a daily basis! SVGOMG allows you to paste or upload your exported SVG code and create an optimised version of your SVG - the file size is smaller and the markup is prettier. Win win!

10. Dribbble

Dribbble has had a lot of criticism in recent months and some argue it is no longer the resource that it set out to be - a platform for designers to get feedback on their work. These days it’s much more about seeking validation from the design community. Valuable, actionable feedback won’t always be forthcoming - but you’ll get plenty of pats on the back!

Despite this, Dribbble remains a go-to resource for inspiration. It’s ideal for exploring emerging trends and for seeing how fellow designers are approaching design challenges.

Summary

That’s a look at 10 tools and resources we use on a regular basis when designing. From making sure our designs are accessible to being aware of emerging trends, these resources are invaluable to our workflow. Hopefully, they help you too!