Web Design Toronto | Internet Marketing | Inbound Marketing | Certified Hubspot Partner | Social Media Marketing | Online Marketing Strategies | Business Blog
A Non-Designers Guide to Choosing Website Colours and Fonts


Follow the WhiteSpace Blog Follow WhiteSpace  on Twitter Follow WhiteSpace  on Facebook WhiteSpace LinkedIN

Current Articles | RSS Feed RSS Feed

A Non-Designers Guide to Choosing Website Colours and Fonts

 

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

Murray Sye WhiteSpace specializes in helping organizations thrive by leveraging the power of the internet. Our digital marketing and creative agency can help develop strategic and tactical direction to help boost your business.

Comments

Post Comment
Name
 *
Email
 *
Website (optional)
Comment
 *

Allowed tags: <a> link, <b> bold, <i> italics

Articles

Small Canadian agency becomes HubSpot Certified Partner
Business Marketing Toronto
The Business of Email Marketing
Graphic Design for the Web
Internet Marketing
What shapes website design in Toronto
Understanding Social Media Marketing
Internet marketing and search engines