Useful Website Design Tools To Save You Time

Here are a few handy online website design tools that we’ve found to be useful in our web design work.

WhatTheFont – https://www.myfonts.com/WhatTheFont/

An industry love affair has been going on with WhatTheFont since it’s creation. Don’t know what fot your company uses in it’s logo and marketing material – but you need to find out what font to use on the website to keep it consistent? Have a look at WhatTheFont and it’s optical character recognition (OCR) will read your image and match to it’s massive font database.

To create the best image for submission and searching, a simple trick is to screenshot or photograph the text you are after, and load it into Photoshop. Once opened, draw a rectangular marquee around the text, cutting off any items that are not the letters themselves, and crop the image to this size. It is sometimes helpful to increase the contrast of the image, to allow the edges of the letters to stand out more clearly – and easier for the automatic optical character recognition (OCR) to read and match to it’s database.

Whats the Closest Google Font? – http://joelcrawfordsmith.com/closest-font/

We often ask ourselves “What is the closest Google font to this?” when trying to match a client website to their brand font. Often a client has an existing font that they use, but often this isn’t a web ready font. This website compares common fonts to Google font equivalents that you can use in your client website designs.

Extract PDF – http://www.extractpdf.com

This is a great little tool that extracts the images, text and links from a PDF file.

I have tried lots of PDF extractor utilities over the years and all of the freeware/shareware/online options have not done the job that well for one reason or another so Extract PDF is somewhat of a revelation being so simple to use – just upload your file to the website and it gives you an overview and a download link for a .zip containing everything, could not be easier.

It extracts the high resolution images if they are included in the file, so if you have a company profile PDF that is 5-15mb in size you can usually extract all the content straight out of this to use on your website – no need to hunt down the original files from the designers, just extract and get started.

Favicon.cc Favicon Generator – https://www.favicon.cc

This handy tool allows you to upload an image and creates a favicon for you in ico format. Once uploaded you can edit the shrunk image or just skip uploading and design your own icon from scratch.

Base64 Image Encoder – https://www.base64-image.de/

When you’re creating an email signature it is a good idea to encode any images in base64. This means that you don’t need to remote link or attach the images separately – they are embedded right into the code. When using a base64 encoded image in an email signature it should display without any “Do you want to display remote images?” warnings as usually happens (most email clients block remote images by default but allow embedded/attached ones).

Lorem Ipsum Generator – https://www.lipsum.com

A designer rarely has the luxury of a full copy deck before starting a project, so filler text is essential for creating real-looking designs for clients to review. Try this generator to create as many paragraphs of Lorem Ipsum as you need for your design work.

Do you have any other favourite online website design tools? Let us know and we’ll try them out.