6 must have design in browser tools

Designing in the browser is becoming a new trend among designers. There are of course pros and cons in doing so but most people do it because they get a live preview of how their websites will look like. It also reduces the workload in terms of asset generation such as mockup, wireframe etc. Most of these assets are typically thrown away once the website is live so spending time and effort to generate them might not be the best use of such resources. If you are one of those who likes to design in browser or wants to try it, here are 6 tools that will make your in browser designing more efficient.


#1: Chrome Inspector

design in browser tools 1

This is one of the most essential tool you will need to design more productivity in browser. Once you have a draft of your website design, you can start laying in out in the Inspector to see how it looks like.


#2: Sip

design in browser tools 2

For color section, nothing beats Sip. This little software uses the ctrl+alt+P shortcut to copy the color code from any screen you see so that you can reuse them on your own in browser design. Very conveniently and definitely time saving.


#3: LiveReload

design in browser tools 3

LiveReload helps you to preprocess the code everytime you save your CSS. This means you no longer needs to hit refresh everytime you coded something in the browser environment. Time saving and you can’t do without it once you start using it.


#4: Brackets

design in browser tools 4

If you need a full function that does live preview in browser, then you might want to consider this open source tool from Adobe. It is pretty robust and has a good supply of extensions that enhance the core functionality of the editor.  Best of all, it is free 🙂


#5: Yeoman

design in browser tools 5

It is hard to explain what Yeoman can do but basically, it is tool that can quickly help you to set up your workflow and dependenices in minutues.  It combines three tools (yo (the scaffolding tool), grunt (the build tool) and bower (for package management))into one lovely package that makes workflow setup a breeze.


#6: Purecss

design in browser tools 6

PureCss is great if you need a light weight CSS framework to get things going when you want to start coding you website in browser. The modules are easy to implement without needing any major framework installation.


About the author

With a passion for Knowledge, Smashinghub has been created to explore things like Free Resources For Designers, Photographers, Web Developers and Inspiration.

Twitter Visit author website

Subscribe to Smashing Hub

1 Comment

  1. Johnb976 says:

    There is visibly a bundle to realize about this. I assume you made certain nice points in features also. ebdgfaeekkbe