Today I would like to share with you a collection of super useful browser apps that I find very handy and use pretty often, these browser based design apps are perfect for designers or front-end developers who are are in the process of taking the design build from sketch concepts all the way through to the final coded product. I hope you find some new and useful browser apps from this collection and hopefully these will help you to speed up your work-flow from concept to delivery.

Connect A Sketch

There are a thousand great design tools out there, including pen and paper. Sketch out your designs, then upload them to Connect-A-Sketch. Drag and drop your sketches into your prototype. Create connections between sketches and make your prototype interactive.

Typecast App

The Typecast App was developed by Front in Belfast, the app provides real-time typographic feedback to you natively in the browser.

CSS3 Generator

This handy css3 generator tool makes it super easy to quickly create complex css3 declarations. Well worth adding to your bookmarks.

HTML5 Validator

The HTML5 validator should be one of your most used tools when coding up your design to code, the HTML5 validator enables you to be sure you are writing clean, well structured HTML5.

Onotate

Onotate provides a centralised hub for people to discuss visual concepts. It also helps you organise and manage the many stages of the design process quickly and effectively.

WhatFont

What is the easiest way to find out the fonts used in a webpage? Firebug or Webkit Inspector? No, that’s too complicated. It should be just a click away. WhatFont is a tool with which you can easily get font information about the text you are hovering on.

Workstack

Workstack enables you to get a better view of your Basecamp projects.

Ultimate CSS Gradient Generator

As you might know, HTML5 introduced many exciting features for Web developers. One of the features is the ability to specify gradients using pure CSS3, without having to create any images and use them as repeating backgrounds for gradient effects.

CSS3 Button Maker

The CSS3 Button Maker allows you to adjust the custom settings until you have a nice looking button, the generator will then give you the CSS.

Type Tester

The Typetester is an online application for comparison of the fonts for the screen. Its primary role is to make web designer’s life easier. As the new fonts are bundled into operating systems, the list of the common fonts will be updated.

CSS Sprite Generator

CSS sprites allow you to reduce the number of HTTP requests made for image resources referenced by your site. Images on your website are compiled into one large image at defined X and Y coorindates. You then assign this image to relevant page elements the background-position CSS property can then be used to shift the visible area to the required component image.

Prefixr

Prefixr allows your to create cross-browser CSS3 in seconds!

MeasureIt

Draw a ruler across any webpage to check the width, height, or alignment of page elements in pixels.

Firebug

I could not exclude this tool, it really is invaluable to many designers and developers – Firebug is a FireFox plugin that allows you to inspect HTML and modify the style and layout in real-time.

Photoshop.com

Photoshop.com allows you to edit images in your browser, super handy if you on the move or working from a different computer without your software.

Color Scheme Designer

Color Scheme Designer allows your to create color scheme variations and test the color scheme in both light and dark variations.

PXtoEM

PXtoEM is a handy tool that allows you to quickly perform pixel to EM calculations.

Adobe Browserlab

Adobe BrowserLab is an online app that allows you to accurately preview web pages across multiple browsers and operating systems.

Cloud9 IDE

Cloud9 IDE now enables developers around the world to edit the same code and chat together in realtime.

GridFox

GridFox draws a grid on top of a website. This is useful for checking designs that are supposed to follow a grid-based layout.