As web designers, we always need tools to make our job easier and even more fun. That’s why you crawl the internet looking for all manner of tools, extensions and add-ons. When Mozilla Firefox (oi) came around, it was all joy for web designers and developers since the browser offered us extensions such as Web Developer and Firebug that are still useful to date.
Then Google Chrome hit the market with its ultra-light, intuitive and modern design. “This new kid on the block looks good, but we’ll wait for a while”, so web designers kept away from the beautiful Chrome; it was basic for lack of a better word and did not provide all the features you now love as a web designer.
Then Chrome extensions came and nothing was ever the same. Google Chrome grew in popularity overnight and today, many web designers are finding gems and more on Chrome Web Store. Bursting at the seams with extensions, Chrome is quickly becoming the web browser of choice for many web designers, yours truly included.
In this post, we will reveal fifteen (15) or so awesome Google Chrome extensions that will add the fun and pizzazz to your web design work. Without further ado, let’s get to it.
WhatFont
Seen a font on some web page and would like to replicate it on your project? Worry not, What Font tells you everything about your choice font from the font family, size, weight and even color. Best part is you are not required to dig into scary code – just install the extension and highlight (mouse over) or click the target font and voila: font lifted. I just installed this bad boy to help a client who needed the Raleway font for his design. Never knew there was a font that goes by that, but What Font works like magic!
Awesome Screenshot
At times, you need to explain a concept or a design decision to a client, but how will you point out elements on your screen when the guy who signs the check is a thousand miles away? What to do? Awesome Screenshot allows you to capture any region of a web page and edit the same before saving. You can then share the screenshots with the client.
AppJump
To remain productive as a web designer, you need to be well organized at all times. You need an orderly work station and a uncluttered browser; the two are the main tools of trade. AppJump is the Chrome extension that organizes your other extensions into different groups e.g. work and personal saving you time and boosting productivity. On top of that, this extension helps you to locate and launch any extension quickly.
YSlow
Now more than ever, you should endeavor to build lightweight web pages that load in under three (3) seconds. Three seconds?! Why? Because Google search algorithm now factors page load speeds in search rankings. The slower the page, the less love it gets from Google spiders. The YSlow Chrome extension “…analyzes web pages and suggests ways to improve their performance…” Yahoo! backs this extension fully, and there’s no excuse why you shouldn’t have it for the fun of it.
Image Downloader
This Chrome extension by Vladimir Sabev is exactly the tool you want if you’re looking to bulk download images from any web page. It’s easy to use: after installing the extension, run it and select the images you’d like to download. Then hit the “Download” button. Keep image copyright restrictions in mind though.
Appspector
Want to know which Content Management System (CMS) a website runs on? Or perhaps you just want to see which JavaScript library powers an element or a web page? Appspector (formerly known as Chrome Sniffer) helps you to detect more than a hundred (100+) CMS and JavaScript libraries with just a single click. Ahhh..this extension makes this post look good 🙂 .
Web Developer
This is the Chrome equivalent of the Web Developer extension for Firefox (no, I won’t call it Mozilla again). This is a nasty extension that plays one role and plays it well – it adds a couple of swe-e-e-t web developer tools to your Chrome toolbar. It’s an indispensable tool for web designers and developers alike. You can debug some JavaScript at the click of a button, examine page structure and do other cool stuff with Web Developer.
RescueTime for Chrome & ChromeOS
Who am I not to have RescueTime installed on my PC. By the way, it has been a valuable time management tool. Now, with the good looking RescueTime for Chrome, you can track the time you spend in Chrome or ChromeOS device. Put a finger on how you spend the minutes in your life and learn how you to boost productivity.
Code Cola
This Chrome extension is so good it had yours truly smiling wide soon after installing. Ever wanted to change the CSS of any HTML element without actually editing your CSS stylesheets? Now you can. Say bye to “Inspect Element” with this hacker-style extension. Code Cola allows you to edit the CSS of any HTML element visually. That means you can edit the CSS of any web page on the web and see the results in real time! Once you are satisfied with your changes, you can save or copy/paste the styles to your CSS file – a process that is simple as A, B, C. Additionally, you can bring up the HTML code, copy and work on it. Eliminate and add your own HTML elements to any page on the internet. This extension is so much fun!
Palette for Chrome
Uniformity plays a huge role in providing the ultimate user experience on your website. Throw together colors and other elements in a rush and you’ll most likely send prospects away. Plan your colors and you will create a harmonious design that’s fertile ground for user engagement. Palette for Chrome gives you the chance to create color palettes from any image on your design. Want to create a 16-color, 24-color or 32-color palette to match your header image? This is the Chrome extension you need. It’s easy to use. After installing, just right click on your image and navigate to “Palette for Chrome”. Easy.
Eye Dropper
While we are still on this color biashara, have you ever seen a color shade that caught your eye on some page and wondered, “What color is that?” Say goodbye to wondering, with Eye Dropper you can pick any color from a web page as easily as you do in, say, Adobe Photoshop. Once you pick the color, Eye Dropper automatically saves it in history for future reference. The extension is easy to use; just run the app from the toolbar, mouse over the color and – wait for it – click. That’s all 🙂 .
Instant Wireframe
Wireframes can help you to speed up development and stay on top of things as you build your designs. This one-of-a-kind Chrome extension turns any web page into a wireframe instantly. You will see where your design might be flawed, and adjust the CSS using Code Cola perhaps?
Check My Links
Paul Livingstone developed Check My Links with web designers, developers and content editors in mind. This Chrome extension finds and checks all links on a page as you check Twitter. Then it green-lights the valid links and marks the broken ones. “Simple as that”.
Image Properties Context Menu
With over 120k users and a superb rating of 4.55/5.00, this Chrome extension shows you the properties of any image on the web. Image Properties Context Menu shows you the location, image source, dimensions, alt text, data URI, file size etc. Just install the extension, right click on the image and select “Image Properties”.
CSSViewer
With this extension, you don’t need to bring up “Inspect Element” every time you want to view CSS. After installing the extension, run it from the toolbar and mouse over any element to see the CSS. It features a beautiful design and works as advertised.
Bonus Extensions
ruul. Screen ruler
Nominated for Big Chip Awards 2012 Best Use of Technology, ruul is a simple on-screen ruler that you can use to line up and measure line height, type and strokes. There are so much to measure, right? You just have to try the seven (7) different rulers.
The Microstock Photo Power Search Tool
Images are an important part of any web design project. But getting the perfect stock photos can eat up energy and take a while. Enters The Microstock Photo Power Search Tool and your day is saved. This Google Chrome extension allows you to search multiple photo libraries for the best microstock photos. It supports up to thirteen (13) stock photo libraries at the time of writing. Tip: Don’t tick all libraries or the search might take ages.
Now You…
Which Google Chrome extensions do you use? Did we leave out your favorite Chrome extension? Disgruntled much? Don’t care, my toolbar looks alright. Please bring the fight to the comments below!
