30 Web Based Tools and Apps for Web Designers

Here in this post I have collected a variety of web based tools and applications that were built to help web designers with a specific solution and act as time savers. These tools might or might not be well known or be the most powerful tools or apps, but they are really useful and can save a lot of time.

Get ready to bookmark, because you’ll find apps to help you create calculations, icon-fonts, backgrounds, color schemes, apps to help u calculate elements width in % from PXs and a lot more.


px-em is a px to em tool which allows you to work out the em sizes from px.

px-em

 

Create CSS3 – A super-simple CSS3 generator.

Create CSS3

 

Responsive Wireframes – Quickly create and share RWD wireframes.

Responsive Wireframes

 

Responsive Test – Test responsive web design in various resolutions

ResponsiveTest

 

Raw – An app for createing custom vector-based visualizations on top D3.js.

raw

 

Random User Generator – A free API for generating random user data. Like Lorem Ipsum, but for people.

Random User Generator   API

 

FontAwesome Finder – Quickly and instantly search FontAwesome icons.

FontAwesome Finder

 

typesetwith.me   A typography and legibility sandbox

typesetwith.me

 

CSS Beautifier – A tool that will automatically ‘beautify’ your CSS.

CSS Beautifier

 

RQRWD – A calculator for working out elements width in % from PX.

Really Quick Responsive Web Design Calculator

 

Iconogen – A tool to for generating favicons, Windows 8 Tiles and iOS7 icons.

Iconogen

 

Contrast Ratio – A tool to calculate color contrast ratios.

Contrast Ratio

 

NTH-TEST – A nth-child and nth-of-type tester.

NTH TEST

 

SpinKit – Simple loading spinners animated with CSS.

SpinKit   Simple CSS Spinners

 

SVGeneration

SVGeneration

 

Red Pen – An app for uploading your design and getting live feedback.

Red Pen

 

Fontello – Generate an icon font from Font Awesome, Entypo, Typicons, and many more icon sets. .

Fontello   icon fonts generator

 

OverAPI – Collecting all the cheat sheets in one place.

OverAPI.com   Collecting all the cheat sheets

 

Flat UI colors reference.

Flat UI Colors

 

Material Palette – Material Design Color Palette Generator]

Material Design Color Palette Generator   Material Palette

 

extractCSS – A tool for extracting ids, classes and inline styles from HTML and outputting them as CSS.

extractCSS   Online CSS Extractor

 

A handy web-based web developer checklist.

Web Developer Checklist

 

CSS3 Click Chart CSS3 Browser Support and Information

CSS3 Click Chart

 

Patternizer – Stripe Pattern Generator Tool
Patternizer   Stripe Pattern Generator Tool

 

 

HTML5 Boilerplate  The web’s most popular front end template

HTML5 Boilerplate

 

XRAY  for web developers

XRAY    for web developers

 

Primer undercoats your CSS by pulling out all of your classes and id’s and placing them into a starter stylesheet.

PrimerCSS

 

Opera Mobile Emulator, Do your mobile development straight from your desktop, and pair it with Opera Dragonfly for advanced debugging.

opera-mobile-emulator

 

CodeAnyWhere Collaboration platform for developers

Codeanywhere

 

Daturi  Convert images to Base64

Daturi   Convert images to Base64

 

SassMe – An app for visualizing SASS color functions.

web_based_tool_05

 

iconmelon – Quickly create a library of SVG icons.

web_based_tool_07

I hope this list of Web Based Tools and Apps for Web Designers helps you find some new apps to extend your bookmark collection. Let me know in the comments below which are your favorite apps and tools!