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.
Raphael.js is another javascript library that can create powerful interactive maps to display all sorts of data. I’ve written more about interactive SVG maps here, and there’s a small example below:
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:
Visual Studio Code is a free and super slick text editor that is superb for editing HTML, CSS, and Javascript files. Elements are formatted in a way that makes it very easy to distinguish between them, and you can tidy code easily with a shortcut. Here’s the same code in Visual Studio Code and Notepad (where I coded my first website), to illustrate the difference:
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.
JSFiddle gives real-time demonstrations of how code will look and work. You can build HTML, CSS, and JavaScript in separate boxes then hit ‘Run’ to see it in action. Here’s a demo of the above, as an example. Also here’s a really crude, rough-and-ready demo of elaborate functionality that underpins a beautiful piece of content I created, showing just how useful a sandbox testing environment can be.
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:
site:chrislee.is/blog raphael
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.
