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.
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.
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.
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.
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.
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!
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.
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.
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.
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.