25 Fresh Useful Web Design Tools and Apps

web-design-tools4As a web designer, any little tool that helps you accomplish anything that little bit quicker and better are worth their weight in gold. And the great thing about the design community is that there is a multitude of designers that recognize the small resource gaps that we might have and create handy solutions, like the resources I’ve outlined in this post, which fill those learning gaps.

Below you will find apps that will clean up your CSS files, tools that will convert Illustrator files to HTML, guides that will help you visualize CSS3 Flexbox Properties, web apps to quickly browse and select Google fonts, and much, much more.

All of the Useful Web Design Tools and Apps are completely free, so get ready to start bookmarking!

1. Layers for WordPress

Layers for WordPress

Recently reaching the 100,000 download milestone, Layers is a new and open-source site builder for quickly creating WordPress themes.



With HTTTML you can change your boring, standard markup, to include custom tags with more interesting and unique names.

3. Purify CSS

Purify CSS

Purify CSS is a handy tool that detects which CSS selectors your app is using and creates a file without unncessary CSS.

4. Email Lab

Email Lab

Email Lab is an open-source starter kit for HTML emails that uses Grunt, a command-line build tool, to streamline and simplify the creation of email templates. The templates can be built with re-usable components and can be styled using traditional CSS or Sass.

5. CSS Stats

CSS Stats

CSS Stats is a simple web-based app that visualizes various stats about your CSS files.

6. spaceBase


spaceBase is a Sass-based responsive CSS framework that can be built upon and tailored to your requirements. It combines best practices for today’s responsive web with the core components used on every project.

7. Font Library

Font Library

Font Library is an open-source project to tag, organize and make it easier to browse Google Fonts.

8. .resizr


.resizr emulates the different screen sizes of many popular devices showing you how your site will appear and allow you to test media queries.

9. Libraries


Libraries.io is a web-based app that helps you find new open-source libraries, modules and frameworks and also keep track of ones you depend upon.

10. Libscore


Libscore is an app that scans the top one million sites on the web to collect statistics on JavaScript library usage.

11. First Aid Git

First Aid Git

First Aid Git is a searchable collection of the most frequently asked asked questions about Git.

12. Angular Interactive box-model Diagram

Angular Interactive box-model Diagram

A useful app to help you visualize the box-model.

13. CSS Gradient Animator

CSS Gradient Animator

CSS Gradient Animator is, as the name suggests, a handy little tool for quickly generating CSS gradients.

14. localFont


localFont is an web-based Vanilla JS tool that converts font family files into a ready to use solution for localStorage web font caching.

15. Epic Favicon Generator

Epic Favicon Generator is a tool that will create 20 different favicon sizes for your site, from 16x16px all the way up to 196x196px.

Epic Favicon Generator

16. UX Recipe

UX Recipe

UX Recipe is a checklist where you discover, choose and estimate your next UX project tools & techniques.

17. Visual Guide to CSS3 Flexbox Properties

Visual Guide to CSS3 Flexbox Properties

Rather that explaining how the flex properties work, this visual guide focuses on how the flex properties affect layouts.


18. CSS Font Sizing

CSS Font Sizing

CSS Font Sizing explores and compares the various methods of declaring font sizes with CSS.

19. Typography Cheatsheet

Typography Cheatsheet

This Typography Cheatsheet, created by Type Wolf, is a comprehensive guide to smart quotes, dashes & other typographic characters.

20. Device Metrics

Device Metrics

Device Metrics is a handy resource from Google Design for checking the screen size, resolution, aspect ratio of many devices.

21. CSS Ruler

CSS Ruler

CSS Ruler is a handy web-based tool for exploring CSS lengths.

22. Unitools


Unitools is a collection of tools, gathered from various sources on the net, for working with Unicode in the browser.

23. PixelCounter App


Pixelcounter is an open source Windows and Mac application for counting the pixels of your images.

24. Web Font Load

Web Font Load

Web Font Load is a tool that will allow you to install, via the terminal, ALL of Google’s Web Fonts at once.

25. ai2html


ai2html is an open-source script for Adobe Illustrator that converts your Illustrator documents into HTML and CSS.

…and finally…

…a bunch of handy references for you:

You may also like...

Read previous post:
User Experience and Design
What Skills You Need To Be a UX Designer?

A guide on how to get started UX design has become the standard recipe for success in the tech industry....