Menu

A Non-Designers Guide to Choosing Website Colours and Fonts

Posted by Murray Sye

on Wed, Nov 27, 2013 @ 08:25 AM

Although Photoshop and other designer programs in the Adobe Creative Suite are incredibly powerufl tools, they're not so easy to use, they're expensive, and they take a long time to learn. Luckily, there's a way to do everything from choosing a colour palette to editing photos to annotating screenshots using the following assortment of tools.

adding-colour-to-websites.jpg

Tools for Choosing Colours and Fonts

If you don't know much about web colour, you might want to spend some time exploring Web-Colours-Explained – a handy website we found that will teach you the difference between the RGB and CMYK colour systems. You might also want to brush up on your basic HTML skills so you can learn how to use a HEX code (a 6-character alpha-numerical code that represents a colour such as #FF0000). These HEX codes come in handy whether you're working on a website, designing an ebook or manipulating an image in photo editing software.

With the basics of colour and HEX codes covered, you can now begin exploring some tools that help you pick the right ones to incorporate into your designs.

Peruse DesignSeeds for bold and seasonally relevant colour palettes inspired by photos.

colour-finder-whitespace.jpg

Use Colour Scheme Designer to pick one key colour, and view various schemes of your choosing – monochromatic, triad, analogous, complementary and more.

colour-scheme-designer-whitespace.jpg

Browse colours, palettes and patterns on COLOURLovers or create your very own. Upload a photo and generate colour palette based on it using the PHOTOCOPA tool.

explore-colour-palettes-whitespace.jpg

Check out Google Web Fonts, a directory of almost 600 fonts that are ready to use on your website.

Google-web-fonts-whitespace.jpg

Tools for Creating or Editing Your Own Visual Content

Sometimes design involves editing photos and images. Sometimes you just need a high quality screen-shot to include in your PowerPoint presentation. Sometimes you need a good photo editor on your smartphone to improve your Instagram uploads. This is where you'll find the tools that do all of the above.

To save yourself a lot of frustration, make sure you know the image sizing and resolution requirements for the desired publishing channel. For example, you may need to resize an image you first used on your blog to include in a Facebook post. 

Create, edit or manipulate an image using Photoshop-like-editors like Pixlr or Sumopaint.

editing-photos-whitespace.jpg

Take a screenshot of something on your computer screen, and annotate it with text, shapes, and objects using Jing or Evernote's Skitch.

screen-shot-whitespace.jpg

Modify photos or create memes with the Google+ Photo Editor (you have to have a Google+ account to do this).

Google+-Photo-Editor-whitespace.jpg

Create a reusable PowerPoint template with several simple backgrounds that you can easily layer text on top of, then same as a JPEG.

PowerPoint-templates-whitespace.jpg

Create infographics in PowerPoint.

infographics-whitespace.jpg

Snap and edit photos with one or more of these mobile apps.

edit-photo-whitespace.jpg

Snap and add effects to photos using Instagram, Facebook Camera, or Flickr Mobile.

snap-add-effects-whitespace.jpg

Create a word cloud with Wordle.net.

wordle-whitespace.jpg



ScoopIt logo
Follow our content curation channel, Inbound Digital Marketing with WhiteSpace for daily breaking news!

guide\u002Dto\u002Dlead\u002Dnurturing

Flickr Photo Credit: by Madison Berndt

Written by Murray Sye

Murray is the CEO and Creative Director with the award-winning
inbound marketing agency WhiteSpace. You can
connect with Murray on Twitter.

Follow WhiteSpace

Join Our Mailing List