Chrome Add-ons for Web Design

Google Chrome is a web designer’s go-to web browser. The main reason for this is not only the fact that it is fast, compact and efficient, but also that it has the capacity to be rigged with a whole array of tools and Chrome add-ons that make the designer’s work a great deal easier.

Those tools are available for free, and can be added directly from Google’s Chrome Web Store. They encompass the entire plethora of a web developer’s needs, from picking the right font, developing a color palette, customizing graphics, testing a website’s device compatibility and much, much more.

To make a long story short, let’s cut from the introductions right to the list of

Chrome Extensions for Web Design and Development

Pixlr Editor. This tool is an online photo editor, which allows the designer access to many advanced photo editing features such as layers, lasso selection, cloning, filters and more… without the need to download the image itself. Not to mention having to own (and pay for) expensive image editing software.

ColorZilla is a color sampling addon that can get you an instant color reading from an open web page, adjust it as you wish, and paste the color code into any other program.

WhatFont is a web developer’s dream. It allows you to identify any font just by hovering your cursor over it. An additional feature of this addon is to detect the services used for serving the font.

Yslow is capable of providing a thorough analysis of any given web page, topping it with suggestions on ways to improve it’s performance.

Benchwarmer is highly praised by Dribble users, displaying a set of inspirational images from your Dribble feed in every new Tab you open.

Palette goes a step further from color sampling, and helps you extract your own color palette from any web page or image.

Instant Wireframe is one of our personal favourites. As a busy Toronto web site design company, we do a lot of wireframing and value this addon for helping us automate the process. When on, it will show you every page you visit with a wireframe overlay.

Dimension, as the name implies, gives you the sizes of on screen elements, from viewport scale to images, HTML elements, boundaries, icons and more.

Stylebot lets you test changes to any website’s appearance in your browser with custom CSS by picking the element you wish to alter and choose the changes you’d like to apply.

Appspector can inspect the web framework for you, including the content management system, JavaScript library and more. Applicable to any website, with a detailed output that allows you to replicate the framework for your own project.

Font Playground. When just sampling a font is not enough, and you need to preview your site with over a thousand Google Web Fonts – this one’s for you. It gives you the code for the ones you like, so you can add them to your CSS later.

This covers the Chrome add-ons that we use in our operations as a Toronto website design company, but of course there is much, much more.

Leave a Reply