Top 8 Chrome Extensions for Designers

When it comes to designing websites, Chrome extensions can make your life a little easier. From selecting which font to use for a website to wireframing; you name it, and there will be a Chrome extension for it. We’ve scoured the extensive list of Chrome extensions and hand-picked a few that we thought might come in handy for web designers and developers.

1. Fontface Ninja

See a font you like or like how a font is being used on a website? Well, you don’t have to go through a whole list of fonts to match the one you liked. Install Fontface Ninja and it’ll recognize the font on any website. It’ll give you the name, line spacing, size, and the letter spacing as well. Another great feature is that you can mask all the images and ads on the website, so you’re only left with the text.

Download Here

Chrome Extensions Niswey Fontface Ninja2

Chrome Extensions Niswey Fontface Ninja

 

2. Pageruler

An extension that can help you inch towards a pixel perfect web page. Find out the height, width and even the position of an element on a website. Pageruler allows you to measure the exact dimensions of any selected area. It has an “Element Mode” which will outline sections on the page as you hover over them.

Download Here

Chrome Extensions Niswey Pageruler2

Chrome Extensions Niswey Pageruler

 

3. ColorZilla

If you’ve ever marveled at how wonderful a color is on a website and want the exact hex code for it, ColorZilla will make life easier for you. The eyedropper tool will help you get the hex code for any pixel, on any web page. ColorZilla can help you generate a CSS gradient, which you can use in your code. It can also capture the color palette being used on a particular website.

Download Here

Chrome Extensions Niswey Colorzilla

Chrome Extensions Niswey Colorzilla2

Chrome Extensions Niswey Colorzilla3

Chrome Extensions Niswey Colorzilla4

 

4. Font Playground

This tool is a must have for web designers. Font Playground has over 1000 free Google web fonts and helps you choose and preview fonts on any website you want. Don’t think Calibri is working for your site? Open Font Playground and check out which font would look best for your site.

Download Here

Chrome Extensions Niswey Font Playground

Chrome Extensions Niswey Font Playground3

Chrome Extensions Niswey Font Playground2

 

5. Code Cola

Using this extension you can generate CSS styles for any web page. Web designers can use this to modify web pages quickly without opening Photoshop. See what style looks best for your web page, copy the code and paste it in your code. Yes, that simple!

Download Here

Chrome Extensions Niswey Code Cola2

Chrome Extensions Niswey Code Cola

 

6. Web Developer

This is an extension designed to make a web developer’s life easy. It provides various web development tools ranging from CSS to responsive layouts. If you need to validate your website’s CSS, you can directly do it from the extension. It has abundant tools to help you with your website’s development.

Download Here

Chrome Extensions Niswey Web Developer

Chrome Extensions Niswey Web Developer2

 

7. Instant Wireframe

While designing a website, you need to create wireframes. Where will the images go, where will the text be placed, that sort of stuff.  All of that will need to be answered and outlined in a document, which you’ll give to your client. Instant Wireframe helps you see how your websites look by stripping away all the fancy work.

Download Here

Chrome Extensions Niswey Instant Wireframes

 

8. Project Naptha

This extension can save you from a world of trouble if you’re working on JPG mockups with content in it. Project Naptha enables copying and pasting text that is in an image. Although it might not work with 100% accuracy, it’ll still give you enough to save you from a lot of rewriting.

Download Here

Chrome Extensions Niswey Project Naptha

 

If you know any other Chrome extensions that are helpful for designers and developers, let us know and we’ll add them to the list.

 

 

 

1 Comment

  1. Adam  - June 14, 2016 - 1:02 pm

    Wow! You have just pointed out the best of the world, according to you. The extensions are really quite helpful I must say, I have some too.

Leave a comment

Top