Chrome Extensions Every Web Designer needs in their Toolbar

Every Website Designer has their tool “stack”. Rather its favorite platforms to design with or little hacks that you learned the hard way. We all like to be more productive and these free Chrome Extensions help me do just that. 

I’ve compiled a list of my favorite Chrome Browser extensions (and one Mac app) that I pretty much couldn’t do business without. 

Clipboard Extensions

I listed this one first because if you take nothing else from this list I want you to grab this first one (if you’re on a Mac) or the second one as well. I literally use it multiple times an HOUR in my day. 

CopyClip

This app lets you go back and grab any of the last 20+ things you put into your copy-paste. Super useful for things like hex codes, copy as you move things over into a website, and more!

Best Chrome Extensions for Web Designers_copyclip.jpg

Clipboard Chrome Extension

Seriously, unless I’m alone, we all do a crazy amount of copy and pasting in a day. Give one of these copy paste extensions a try.

Best Chrome Extensions for Web Designers_clipboard chrome extension.jpg


SEO and Metadata Extensions

Blue Button | the webpage X-ray

Want to really impress potential clients with things that you can fix for them on their new site? Look up their current site and run an extension like this. It shows you where a website is missing H tags, alt tags, even what they’re using for keywords. This is especially useful for final checks before launching a new website as well. 

Best Chrome Extensions for Web Designers_BlueButton xray.jpg


Design Extensions

GoFullPage - Full Page Screen Capture

I use this one every time we complete a web design project. You can take these screenshots and turn them into nice mockups and graphics. You can also save ideas from other pages you like. 

Best Chrome Extensions for Web Designers_full page screen capture.jpg

Download All Images

This has been very helpful with clients that already had existing websites with a lot of images. I am able to download all the images on a page in one click into a zip drive. 

Best Chrome Extensions for Web Designers_download all images.jpg

WhatFont

Ever wonder what font someone is using on their website? This one will tell you the font, the weight, size and even color.

Best Chrome Extensions for Web Designers_whatfont.jpg

Page Ruler

Measure anything on a page. This is very helpful when you’re using images on a client website in a specific spot. Don’t use an image that’s 1500px wide if it only measures 500px wide. Measure and see. It will help  your image sizes and therefore your SEO and website speed as well.

Page Rulers_Best Chrome Extensions for Web Designers.jpg

Color Eye Dropper

Managing multiple color palettes for my own business, my course, and clients isn’t easy and like you ain’t nobody got time to memorize hex codes. My Color eye dropper extension saves so much of my sanity!

Best Chrome Extensions for Web Designers_Color Eye Dropper.jpg

CSSViewer

This tool really gets helpful if you’re needing to add some custom code or CSS to a website build. I use Webflow now so I don’t have to dig through as much code, but when you need it you simply click the toolbar icon and then hover any element on you want to inspect and up pops all of it’s CSS. 

Best Chrome Extensions for Web Designers_CSS VIEWER.jpg

Wireframify

Quickly see the structure of a website and begin to see layout patterns such as sections and columns. 

Best Chrome Extensions for Web Designers_Wireframely.jpg

Emoji Keyboard Extension

This is just a fun one and kinda makes me laugh how often I use it. It’s helpful specially for social media scheduling where I use Emojis often. It’s nice to not have to hunt them down on Google.

Best Chrome Extensions for Web Designers_Emoji Keyboard.jpg

Yet Another Lorem Ipsum Generator

It’s almost comical how often I use this. Anytime I’m recording a video especially and need fake text or if I’m trying to just fill space, it saves me a google for ispum text and I just pick how much I need and it’s copied to the clipboard.

Best Chrome Extensions for Web Designers_yet another IPSUM.jpg
get on the waitlist for design and grow with webflow course


Technology and Business Extensions

BuiltWith Technology Profiler

Ever wonder what plugins a site is using? What platform did they build their website on? Use this extension.

Best Chrome Extensions for Web Designers_Builtwith technology.jpg

Loom for Chrome (or Desktop)

Record short (or long) videos quickly and share them almost instantly with their own link. I actually have a pro account and use this on Desktop but it’s the same as the extension. With a pro account there’s no limit to my recording time. I have 100s of videos in folders from client trainings to SOPs for my own business and team.

Best Chrome Extensions for Web Designers_Loom.jpg

LastPass: Free Password Manager

Keep track of your own passwords as well as have clients securely hand you their passwords while you work together.

Best Chrome Extensions for Web Designers_LastPass.jpg

Toggl Track: Productivity & Time Tracker

Watch your time even if you’re not working hourly. I love to see how long I’ve spent on certain projects and this helps us increase our rates and productivity over time. It’s super easy to generate reports as well in case I need to look back or for the rare hourly project that we do work on.

Best Chrome Extensions for Web Designers_Toggl.jpg

Grammarly for Chrome

You probably have this somewhere on your computer already but figured I’d remind you that it’s there. Why worry about spelling when your best friend Grammarly is there to catch it all?!

Best Chrome Extensions for Web Designers_Grammarly.jpg


Well there you go. That was 17 Chrome Extensions! I’m serious I use these all almost every day, which is nuts because I work really short days haha! 

But I’ve got to know… were some of these new to you? I’d love to know which ones are your new favorites. Send me a DM @sitemakerstudio and let me know.



Here it is friend

You've been looking for the "right way" to design a website.

Lacking some confidence in your design skills? Wanting to start designing websites for clients but not sure where to start?
What if you knew every step (in the right order) to go from idea to development... and clients actually love their final website?

Download the Free Guide