69 fantastic free web tools

29. Typorama (opens in new tab)

This iOS app is packed with image editing options

This iOS app is packed with image editing options

Typorama is an iOS app that enables anyone – with design skills or not – to create awesome graphics. Packed full of image editing features and beautiful typography options, it’s like Instagram on steroids. The app is frequently updated and has gathered a loyal following since its launch in 2015.

30. Sparkline Typeface (opens in new tab)

The Sparkline Typeface enables you to create sparkline graphs using just a font, no need for complicated JavaScript libraries and configurations. While it can be limited, it’s also a huge timesaver.

31. Coolors (opens in new tab)

Coolors is ideal for colour palette inspiration

Coolors is ideal for colour palette inspiration

Coolors is a great little web app for when you need inspiration; fire up the app and hit the Spacebar to generate a random colour pallet. Once you find a colour you like you can ‘lock’ that colour and hit the Spacebar again to generate more colours. 

32. FontBase (opens in new tab)

FontBase is a font management tool which works across all platforms, offering a beautiful and intuitive UI for searching and sampling fonts. It also enables fonts to be shared among teams so you’ll never need to hassle your designer to send you the fonts ever again! Paid plans are available.

33. Google Fonts (opens in new tab)

Google Fonts offers a large selection of free web fonts which can be used on any project. The interface is clean and minimal but enables you to easily see and test new fonts. It also offers a number of different ways to include the fonts in your project.

34. Adobe Capture (opens in new tab)

Adobe Capture is a smartphone app – available for Android and iOS – that enables you to take photos of anything inspirational, and then generate colour palettes, vector shapes and repeating patterns, all of which you can upload to Adobe’s Creative Cloud.

35. Font Base (opens in new tab)

Font Base is a font management tool which works across all platforms, offering a beautiful and intuitive UI for searching and sampling fonts. Font Base also enables fonts to be shared among teams so you’ll never need to hassle your designer to send you the fonts ever again!

36. AllTheFreeStock (opens in new tab)

This is a massive single resource where you can search for free stock photography from loads of different sites. It includes popular free sources such as Unsplash, along with other, lesser-known sites, to give you plenty of options for populating your designs.

37. Transformicons (opens in new tab)

50 free web tools - Transformicons

Transformicons: SVG and CSS icons that can be animated with CSS transitions

Transformicons is a different kind of icon set. These are SVG- and CSS-based icons that incorporate CSS transitions for an animated effect that can be controlled with some JavaScript.

38. Octicons (opens in new tab)

There are countless options for icons, and GitHub has released its own nicely designed set. Octicons is available as an icon font (or web font), which is commonly inserted into a page using CSS pseudo-elements.

39. Ionic (opens in new tab)

Ionic is a popular library of mobile-optimised CSS and JavaScript components

Ionic is a popular library of mobile-optimised CSS and JavaScript components

One of the biggest HTML5-based mobile app development frameworks, built with mobile-optimised CSS and JavaScript components, Ionic boasts a very strong community – which is great for those looking for a good long-term option.

40. Embed Responsively (opens in new tab)

A simple online tool that enables you to grab responsive embed codes for all sorts of popular media sources. It supports YouTube, Vimeo, Google Maps, Instagram, Vine and more.

41. Tablesaw (opens in new tab)

Responsive tables are one of the most difficult layout considerations. Tablesaw is a set of jQuery plugins to help in this area, by means of features like stack, toggle, minimap and more.

42. Froala Design Blocks (opens in new tab)

50 free web tools - Froala Design Blocks

Froala has over 170 ready-made design blocks to choose from

There's a strong case for using tried and tested design patterns – people know how to use them, and if your client wants evidence, there's plenty of user testing that shows them to be effective. A resource like Froala Design Blocks is ideal for putting sites together quickly, with over 170 design blocks that you can assemble into a great-looking, responsive site.

43. Site Palette (opens in new tab)

Site Palette is a Chrome extension that enables you to grab the colour scheme from any website, which you can then turn into a number of useful elements, such as Sketch Templates and Adobe Swatches, or you can print or download them. 

44. Atomic Design (opens in new tab)

Atomic Design is a methodology for creating design systems. It breaks design into five different levels: Atoms, Molecules, Organisms, Templates and Pages. Each level can and should include elements from the previous layers to build up designs. 

45. Wireframify (opens in new tab)

Wireframify is a Chrome extension that enables you to turn any website into a wireframe. It works by applying a custom stylesheet onto the website, which removes all images and modifies all of the colours and borders, leaving you with what looks like a wireframe.

Next page: Free animation tools

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

Steven Roberts

Steven is a digital creative from Stockton-on-Tees, UK. An experienced Head of UX, Steven has written a number of articles on web design and front-end development, as well as delivering a talk at CSSConf Budapest on the potential of CSS animations. He is currently Head of UX at Aero Commerce.