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.
Create CSS3 – A super-simple CSS3 generator.
Mockplus RP is a non-coding required tool for creating a website or mobile app prototype.
Responsive Wireframes – Quickly create and share RWD wireframes.
Responsive Test – Test responsive web design in various resolutions
Raw – An app for createing custom vector-based visualizations on top D3.js.
Random User Generator – A free API for generating random user data. Like Lorem Ipsum, but for people.
FontAwesome Finder – Quickly and instantly search FontAwesome icons.
typesetwith.me A typography and legibility sandbox
CSS Beautifier – A tool that will automatically ‘beautify’ your CSS.
RQRWD – A calculator for working out elements width in % from PX.
Iconogen – A tool to for generating favicons, Windows 8 Tiles and iOS7 icons.
Contrast Ratio – A tool to calculate color contrast ratios.
NTH-TEST – A nth-child and nth-of-type tester.
SpinKit – Simple loading spinners animated with CSS.
Red Pen – An app for uploading your design and getting live feedback.
Fontello – Generate an icon font from Font Awesome, Entypo, Typicons, and many more icon sets. .
OverAPI – Collecting all the cheat sheets in one place.
Material Palette – Material Design Color Palette Generator]
extractCSS – A tool for extracting ids, classes and inline styles from HTML and outputting them as CSS.
A handy web-based web developer checklist.
CSS3 Click Chart CSS3 Browser Support and Information
Patternizer – Stripe Pattern Generator Tool
HTML5 Boilerplate The web’s most popular front end template
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.
Opera Mobile Emulator, Do your mobile development straight from your desktop, and pair it with Opera Dragonfly for advanced debugging.
CodeAnyWhere Collaboration platform for developers
Daturi Convert images to Base64
SassMe – An app for visualizing SASS color functions.
iconmelon – Quickly create a library of SVG icons.
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!