My life motto is “work smarter, not harder.” When it comes to using the web, especially as a designer, I’m always looking for ways to make the experience more efficient! Chrome extensions help me do exactly that.

If you’re not familiar with Chrome extensions, they are tools that allow you to customize your browsing experience when you are using Google Chrome. These tools are created by third-party developers, so it’s always important to read the reviews and make sure it’s a source you trust!

Here are the top ten Google Chrome extensions I use on a daily basis. I use these extensions to audit clients’ websites and to get design inspiration. Here’s how they can help you design your website:

 

Ten best Chrome Extensions for designing your website

 

1. ColorZilla

As I’m browsing the web in the course of my day, I keep an eye out for colors that appeal to me. When I see a color I love, I use the ColorZilla extension to pull colors from the image. All you have to do is “pick color from the page” and you will get an eyedropper tool that allows you to view the HEX code for the different pixels on the screen. When you click, the HEX code saves to your clipboard for you to copy elsewhere!

 

2. FontFace Ninja

When I’m browsing sites and notice a new font I love, I use the FontFace Ninja extension to learn the name of the font. This extension is great because it also tells you the price of the font and where you can buy it from (though I’m a huge fan of free fonts!). If you’re working on refining your “design eye,” a fun game to play is to see if you can tell what font a site is using and then checking your answer. If you get in the habit of doing this on most websites, you will start to get a sense of what fonts are popular, overused, or tend to be used together!

 

3. CSS Peeper

This is my absolute favorite Chrome extension. With this extension, you can click any asset on a web page and view its properties. For example, I use this extension when I’m auditing client sites to check things like font size, letter spacing, and line height (want to do a DIY site audit? Grab my checklist here). This extension allows you to easily see so much information from your site: colors, images, and more!

Extensions like this are also a big reason I caution my clients not to worry about disabling “right click save.” It’s so easy for folks to pull your images without right clicking, so you’re better off letting go of that worry! Of course, I urge you to use your newfound Chrome extension powers for good, so make sure you’re not pulling assets you don’t have rights to from another person’s site!

 

4. FireShot Capture Page

I use this tool to create the website mockups you’ve seen on my website and on social media. With this extension, you can screenshot not just the visible part of the page, but the entire page! FireShot also gives you options for what file type you’d like to save your screenshot (you can learn more about file types here).

 

5. Page Ruler

This tool allows you to measure elements on a webpage in pixels. Keep in mind that the size of these elements will change depending on the size of your browser window!

 

6. Word Counter Plus

Word Counter Plus allows you to see how many words and characters are in a selection of text. I use this often when auditing clients’ sites or checking sites I am creating since for readability, a line should be around 100 characters. If a line looks off to me, I will double-check the word count to be sure! This is also a helpful tool when it comes to blogging and page content since over 300 words is optimal!

 

7. Image Downloader

I will sometimes use this Chrome extension when I am working with a client and need to pull their images for something (not always ideal because file sizes become an issue), but it works in a pinch and is great for use in mockups!

 

8. Responsive Web Design Tester

You’ve probably heard before that your website needs to be responsive! This Chrome extension allows you to check how your site would be viewed on different types of responsive screens. You can even visualize different versions of the same screens (like iPhone 6 versus iPhone 7). This extension will pull up a new window of the screen you selected so you can see exactly how users on that type of screen would view your site.

 

9. Grammarly

Ok, so this one isn’t exactly design related, but take it from this former English teacher—grammar is so important! Good grammar makes your business look more polished and professional. The Grammarly extension is SO easy to use and makes suggestions as you type. I use it for emails, blog posts, google docs…pretty much anything I write! There is also a paid version of Grammarly, but I have found the free version sufficient!

 

10. Pinterest Save Button

Last but not least is the Pinterest extension! When I’m reading a blog post I really love, or come across an image that would make for great design inspiration, I use the Pinterest extension to pin it to one of my Pinterest boards!

 

I’d love to hear how you use Chrome extensions in your workflow! Comment to tell me!