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

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

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

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

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

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

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.