Last updated: 30th Jun 2022
As a freelance content creator most of what I do to put food on my table, clothes on my back and money into my bank account revolves around creating content.
So I strive to make that content as shit-hot as possible.
Over the years I’ve built an arsenal of tools and techniques to make this happen: everything from blog content to interactive infographics and fully bespoke web content.
The tools fit into these categories:
They are mainly free to use because I believe that shit-hot content should be available to everyone with a minimal outlay of money and energy.
Here I will share them with you. If you work in content marketing, content strategy, or just want to make great content, I guarantee that something here will be helpful.
I’ve found these tools helpful for writing better, making fewer mistakes, and continuing to build the confidence needed to deliver shit-hot copy.
Grammarly is, at its heart, a spellchecker. But rather than just picking up typos and incorrect sentence fragments (whatever the hell they are), it delves deep and gives you pointers on everything from grammar, spelling, punctuation, and tone in the free package, right up to inconsistent punctuation or style, monotony, unnatural phrasing in the paid ones. It also integrates seamlessly anywhere you type online (WordPress, Google Docs, Twitter, you name it).
Google Dictionary Chrome Extension lets you learn new words without having to go to a clunky dictionary website. Just double-click any word for a pop-up definition.
The Chrome Search Bar is a way to double-check definitions of big, clever words you’re not 100% sure about without aforesaid dictionaries. Hit Ctrl+L and start typing a word, and nine times out of ten Google will define it for you.
On the one time out of ten that a meaning doesn’t appear, just type “definition” after the word and it should appear.
Dictionary.com app is my backup for definitions if the two previous tools fail.
There are also some tools and techniques for improving copy from an SEO perspective. This means better keyword targeting, higher search intent relevancy, and readability.
Google’s “Searches related to” is useful for seeing which terms Google thinks are relevant to what you’re writing about. Good copy needs to address the needs and answer the questions of the people who are reading, and the suggestions in the related searches are based on tons of real search behaviour on Google.
The example above suggests that when writing about “creating content”, “social media” and “Instagram” would be good fits topically; “process flow”, “workflow”, and “tips” give an idea of a wider user need; and “for your brand” plus “online” give a flavour of their eventual intent.
Google’s “People also ask” is another way to harness Google’s search data to improve your copy. While the primary purpose of these questions is to help people find information to refine and answer their questions, there are other benefits.
By pre-emptively addressing relevant answers in your content, you increase its relevance and usefulness.
Google Ads Keyword Planner is a way to quantify the search volume behind keyword phrases and to make sure you’re mentioning the right things. Just plug a few keywords into the tool and it will give you tons of suggestions for related words, alongside search volume. Note: you have to have an account.
Here’s what you’re looking at:
Just remember to always write with the human reader in mind. While using the right keywords is important when signalling the meaning of your content to Google, keyword spamming will get you nowhere.
I’ve found these tools useful for adding a flourish to draw the reader’s eye and attention, and for creating interactive elements that invite engagement on a deeper level.
Google Fonts make sure your words look nice, as well as reading nice. In a world where WordArt is no longer socially acceptable,go for a professionally-designed font. Google also gives suggestions on pairings to use, making it easier to arrive at a nice aesthetic:
FontAwesome offers thousands of vector icons to spice up your content. They can be used as sophisticated emoji alternatives, like this Or they can be used to make bullet points more interesting, like at the start of this paragraph. You can animate and style them as well: They can enhance buttons, menus, headers, or pretty much any part of a website’s design.
At the moment there are over 5,000 icons, and although some of them require a Pro subscription, the free ones have covered me through tons of projects.
Emojis can be eye-catching, but they can be tacky too. So 👏 be 👏 careful 👏 how 👏 you 👏 use 👏 them 😂😂🤣🤣💦 If you press Win + . on Windows 10 you can type emojis anywhere, and sites like emojis.wiki are good if you want to see what they’ll look like on different platforms and devices, or, depending how jazzy your needs, to find out how to communicate elaborate concepts purely with emojis (see below).
Google My Maps lets you build interactive maps and embed them into websites. You can add routes, icons, and annotations to give information and context. Here’s a map I made of my bike ride across Canada using this tool:
MapStyle WithGoogle lets you build maps that are bigger and better. There’s a slightly steeper learning curve, but a much higher payoff. You can hide or style any element on Google Maps, from roads, to landscape, to attractions. This gives you enormous flexibility. The example below shows how hiding all roads and styling transport lines blue gives you a quick transport map of the UK:
This tool is great for creating maps that are completely aligned to a client’s brand colours.
I’ve found these tools helpful for bringing my ideas into reality, and for refining them beyond the usual limits of my creativity and design skills.
The Eyedropper from Chrome Developer Tools lets you find colours. I use this all the time. Any website I see with a nice hue, I dip in and steal it. Just hit right-click the element whose colour you like, click ‘Inspect’, then have a look in the code that pops up. If you see something like this, you’re in luck:
If not, use this trick:
Paletton builds colour schemes quickly and elegantly. It’s one of my favourite tools in this list. Just plug in a hex code, choose the type of colour scheme you want, and you’re good to go. Here’s an example with the colour we stole above:
Snagit is amazing for grabbing and editing images. All of the gifs and annotated screenshots you see in my posts were made with Snagit. You can effortlessly capture image or video of your whole screen, or of custom sections. You can convert video to gif with one click. You can blur bits of images, add callouts, highlight sections, include numbered steps, and loads more. Highly, highly recommend.
Windows Image Grabber is a quicker but more basic image grabber. It replaced, and far surpasses, the Snipping Tool. Hit Win + Shift + S then drag the selection you want to copy. The program automatically puts it on your clipboard (great for pasting into tweets, documents, etc) or you can click the dialogue box to do some rudimentary editing and permanently save the file.
Gifmaker.me lets you make gifs. It’s just one of many gif making tools out there. They’re useful alternatives to Snagit if you want to make a gif from a series of static images rather than video, as the filesize will be much lower.
Giphy is great if you want to use a gif but don’t want to make it yourself. It’s an enormous library of gifs which, if you follow this excellent tutorial, are very easy to pilfer. Gifs go a long way to spruce up email copy.
It’s easy to overcomplicate things or to make work harder for yourself. I’ve found these tools useful for streamlining workflow and making things easier.
Bootstrap is a responsive web design framework that is, quite simply, incredible. Its grid layout makes responsive design effortless to build. Its default styles are a great canvas to build on. And the advanced functionality it offers make some really elaborate website design elements much more accessible than they were formerly. Here’s some examples of simple, functional layouts that can be achieved with a few lines of code in Bootstrap:
Gimp is the open-source version of Photoshop, and it’s an incredibly powerful piece of software. I use it to spruce up images, to design logos and other elements, to build infographics, and much more. The learning curve is STEEP but the payoff is worth it.
Google Inspect Element lets you rummage around the code of any webpage, which is great for figuring out how certain effects are achieved. If I see something nice on a website I’ll always have a look at the code to see how they created the effect.
Not all of us have access to the two books that contain the sum of human knowledge, so it’s good to know where else to turn for information.
Stack Overflow is the crowd-sourced intelligence of all the nerds on the internet. When I inevitably hit a brick wall with code, this is where I turn. The community doesn’t suffer fools lightly so make sure you read about how to ask a good question first. I’ve never met someone who doesn’t use Stackoverflow occasionally.
There are also tools for finding elusive information that you know does (or did) exist.
Site: search operator is a way to jack up what Google can achieve. Essentially it lets you search for a specified string only in URLs that fit a specified pattern. For example when I needed to find the blog where I wrote about raphael.js I googled this:
site:chrislee.is/blog raphael, and it returned only the following result:
The Wayback Machine is an archive of the internet. You can use it to access old versions of current web content, or even to access web content that’s now been removed. Not every site is on there but you’ll be surprised at how many are. Below (or here) you can see all the versions of my site that it’s archived:
Good content has to be visual, and these tools are helpful for finding high-quality images that won’t bankrupt you with licensing fees.
Google Image Search is a search engine for pictures. It’s probably already familiar, and I’m pretty sure everyone in the world has used it at some point, but there are a few options that some people aren’t aware of which are great for finding open-source images:
Google Reverse Image Search is crazy and it still blows my mind that the technology exists. Just use the button on Google Images –
Flickr Creative Commons has tons of pictures that people have made available for use. Just head to the homepage, whack something in the search bar, and select the most applicable license from the dropdown. There’s various information on what each one lets you do here.
Wikicommons is a repository of free-to-use content that contains a ton of images.
Free stock photography sites like Unsplash and Pexels are free image libraries that I use all the time. The selection isn’t as big as paid sites like Shutterstock, but there’s more than enough to be getting on with.
Building a content plan, or finding something that excites you so you can learn how to replicate it. Personally, I think the latter is more important
Material.io shows you how Google’s design team do things. The styling of the image borders on my blog was inspired by Material Io.
The Guardian is one of many outlets that have cool ways of presenting content. Fivethirtyeight is great too, especially their politics content, and especially their election trackers.
Reddit Data is Beautiful collates tons of user-submitted data visualisations on all sorts of topics. Here are the top posts of all time.
Whatever cool content you see online, no matter how elaborate and insurmountable it seems, remember that someone built it. Remember that the gap between your current abilities and their skills can be bridged.
Also remember that if you don’t have the time, energy, or inclination to bridge the gap, you can pay someone to do it for you. A freelance content creator like me, for example. You can commission my services here, or browse my portfolio and testimonials here.