Updated 2021 to reflect Loom’s new pricing model
When I first started dabbling in design, I had no clue how much harder I was making my life than I needed to.
I’d see a font on someone’s website that I liked… or a picture with a color I really wanted to match… and I’d take to Google, determined to find a match!
Most times, I’d end up settling for something close enough, because getting an exact match from just googling was damn near impossible.
You may be familiar with my Top 5 FREE Business Tools (and if you’re not, you should be!!), and now I’m compiling my Top 4 (also free!) Design Tools!
These are super simple tools that not only help me create designs, but showcase them as well.
My Top 4 FREE Design Tools for running an online business:
- ColorPick Eyedropper
- Fount
- FireShot
- Loom
These 4 of my favorite design tools are THE type of things I wish I knew about when I first started getting into design, because they’ve saved me so much time and kept my hair happily attached to my head!
Let’s talk about why every designer should keep these in their back pocket!
1. Color Pick Eyedropper
Have you ever found a color online that you totally love, but you can’t seem to replicate it exactly?
You saw it on Pinterest, and now you’re trying allllll the Google image searches because you need that color!
“smokey navy blue”
“gray navy”
“blue gray”
After a while, you decide you’ve found something close enough, but ugh… your heart was SO set on that one color!
Well, look no further because now you can get an exact color match, every. single. time. 🙌
The magical solution is called Color Pick Eyedropper, and it a Google Chrome extension so you can identify any color, on any website, at any time!
One-Click Install:
- Click here to find the ColorPick Eyedropper extension for Google Chrome
- Select Add to Chrome
- Done!
Alternatively you can also go to the Chrome Webstore for Extensions, search for “colorpick eyedropper”, and Add to Chrome from there.
How to Use It:
Using the ColorPick Eyedropper couldn’t be easier. After you add it to Chrome, you’ll then be able to access the color picker straight from your Google Chrome browser.
- Click on the ColorPick icon in the top right of your Google Chrome browser
- Hover the crosshairs over whatever color you want to identify
- Color codes will appear in a box, as shown in the picture below
- Copy whichever color code suits your needs
Now you can easily identify any color you ever come across on the internet!
2. Fount
So, we’ve talked about how to identify a mystery color that you’ve fallen in love with… but what about a mystery font?
If you thought the last tool was simple, I’m pleased to announce that this one is equally as quick and easy!
To quickly identify any font on any website, I use a tool called Fount.
Drag and Drop Install:
- Go to fount.artequalswork.com
- Drag the Fount button on the HomePage onto your browser’s Bookmarks Bar
- Done!
How to Use It:
The next time you find a font on a website that you want to identify, remember you’ve got Fount to save the day!
- Click on the Fount link in your browser’s Bookmarks Bar
- Click on, or highlight with the crosshairs, the text you want to identify.
- A popup bubble will appear in the top right, detailing the font name, size, and weight.
- **To turn Fount off, you will have to refresh your webpage
One important thing to note is that Fount will only identify fonts that are actually live text. It will not identify a font if the font is part of an image file.
So for example, while you may be able to identify the header font or the body font on someone’s website, you likely will not be able to identify the font within their logo… because their logo is actually an image file.
To identify text within an image, you may have some luck trying out whatthefont.com which is also an excellent tool for font identification.
But in terms of accessibility and ease of use, I generally use Fount.
3. FireShot
This tool may not be for everyone, but frankly I use it alllll the time and it’s a huge lifesaver, so here I am – spreading the word!
FireShot (previously known as Awesome Screenshot) is another Google Chrome extension, and is used for capturing screenshots of webpages.
Whether you want to capture just a small portion of a page, or the entire webpage from top to bottom, FireShot can do it all.
Imagine trying to take a Print Screen image of a portion of a website, scrolling, taking another, scrolling, taking another, then combining them all together into one image.
Nope, nope, nope. No thank you.
FireShot to the rescue!
One-Click Install:
- Click here to find the FireShot extension for Google Chrome
- Select Add to Chrome
- Done!
Alternatively you can also go to the Chrome Webstore for Extensions, search for “fireshot”, and Add to Chrome from there.
How to Use It:
Once you’ve added the FireShot extension to Chrome, you’ll then be able to access it straight from your Google Chrome browser, to take a screenshot of whatever you want.
- Click on the FireShot icon in the top right of your Google Chrome browser
- Select the type of screenshot you want to take (see image below)
- FireShot will take a screenshot and open the screenshot in a new browser tab
- Choose to save as either a PNG or a PDF file
This is the tool I use to save a PDF copy of all the website’s I design, for use in my portfolio.
4. Loom
Update: As of 2021 Loom changing their pricing structure a bit. They still offer a free plan, it’s just now limited to 100 videos, with a maximum of 5 minutes per video. Frankly I’m surprised they were allowing so much for free to begin with, and I feel this change it totally justified because Loom rocks. I’ve since opted to upgrade to the paid plan, because I still absolutely loveeee Loom and 5 minutes isn’t long enough for my Chatty Kathy ways 😉 All other info & opinions below remain the same!
Loom is a free program you can use to record your computer screen, with audio.
I use Loom for a variety of different things in my business.
The first thing I use Loom for is sending clients page previews of their website during the building process.
I find it so helpful to be able to walk my clients through the design with an in-depth explanation, without having to coordinate a time for a video call that works for both of us… because life is crazy! So by recording a video walkthrough I’m able to record it at a time that works for me, and they can watch it at a time that works for them.
The second thing I use Loom for is client tutorials.
At the end of all my website projects, I create a series of video training tutorials that show my clients how to run their website and make simple changes.
And as an added perk, they can actually download the videos to their computer for safe keeping so the step-by-step videos are always there whenever they need them.
Two Ways to Install
Option One – Desktop App
- Go to www.loom.com and select Get Loom for Free
- Create an account
- Download the Desktop App
- Done!
Option Two – Google Chrome Extension
- Click here to find the Loom extension for Google Chrome
- Select Add to Chrome
- Create an account
- Done!
Alternatively you can also go to the Chrome Webstore for Extensions, search for “loom”, and Add to Chrome from there.
How to Use It:
For myself, I use Loom strictly from the Google Chrome extension so I’ll explain briefly how to use it through the extension, although the Desktop App will offer the same features just with a slightly different interface.
So for the Chrome extension, once you’ve installed it, you’ll then be able to access Loom straight from your Google Chrome browser, to record anything on your screen that you want.
- Click on the Loom icon in the top right of your Google Chrome browser
- Choose either “Full Desktop” or “Current Tab” – whichever you want to record
If you choose Current Tab, it will crop out everything outside of the tab you’re currently on.
3. Click Start Recording
*If you chose Current Tab, it will begin recording after a quick countdown. If you chose Full Desktop, it will send you one more quick prompt before recording. (See Step 4)
4. Choose “Entire Screen” or “Application Window”
If you choose Entire Screen, it will record exactly that – your entire screen.
If you choose Application Window it will only show anything within that one specific application. This means that if you choose Application Window while you’re in Google Chrome and you have 5 tabs open, it will allow you to toggle between tabs and record anything you want from any of those tabs.
Alternatively, if you only want to record one single tab and block out the rest, you’d want to choose Current Tab from Step 2.
5. Once you’ve decided, click Share. It will begin recording after a quick countdown.
6. When you wish to be done recording, click the green checkmark in the bottom left corner of your screen to finish.
Now can share the link to any video you’ve created, for others to view!
Simple tools are the best tools!
Color Pick Eyedropper, Fount, FireShot, and Loom have all been a godsend since the day I discovered them, and I hope that you find them equally as useful for your own design needs!
Looking for even more awesome biz tools?
Click here to check out My Top 5 Must-Have Business Tools
And yep, you betcha they’re free!
Looking for a combo of my fave free and paid tools?
Head on over to my Business Tools page where you’ll find everything from website essentials, templates, education resources, tools for working with clients, marketing, and more!
