Awesome Tools for Designing in the Browser

A bad workman always blames his tools. – Proverb

One of the biggest complaints I hear about designing in the browser is that designers do not have the tools they need to create good designs. Even though I think that mindset has many flaws in it, I want to focus on only one part … the tools.

While many may might not be aware, there are so many great tools out there to help create beautiful fluid designs within the browser window. These tools have been created by other designers and developers that faced the same issue. The tools that they have created turn an ordinary browser into a grid displaying, typography pumping, color blazing machine.



Gridlover gives you adjustable css for font sizes, line heights and margins. The default css output is for body, p and h1 – h4 headings, but you can of course apply your adjusted values to any element by editing the css later.



Looking for an easy way to overlay a baseline grid on any webpage? Baseliner is a JavaScript tool that can do just that.


Adobe Color CC

Adobe Color CC is a fun and simple way to capture inspiring color combinations wherever you see them.


Viewport Resizer

Viewport resizer is a browser-based tool to test any website’s responsiveness. Just save the bookmarklet, go to the page you want to test, click on your created bookmarklet and check all kinds of screen resolutions of the page.



Typekit is a subscription font service that brings thousands of fonts from foundry partners into one library for quick browsing, easy use on the web or in applications, and endless typographic inspiration.


Google Fonts

A web with web fonts is more beautiful, readable, accessible and open.

Google Fonts makes it quick and easy for everyone to use web fonts, including professional designers and developers. We believe that everyone should be able to bring quality typography to their web pages and applications.



When it comes to the web … this is a tool … so use it like one!

Available for both Windows and Mac, Adobe Photoshop is an extremely powerful application that’s used by many professional photographers and designers. You can use Photoshop for almost any kind of image editing, such as touching up photos, creating high-quality graphics, and much, much more.



When it comes to the web … this is also a tool … so use it like one!

Sketch gives you the power, flexibility and speed you always wanted in a lightweight and easy-to-use package. Finally you can focus on what you do best: Design.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s