5 Free Website Design Tools I Love

with 2 Comments

Over time, digital designers of all kinds develop an arsenal of tools that are their go-to sources for creative projects. I primarily collect tools for website design, but regardless of what you’re creating, web-based or print media, these free resources can help. Whether you’re an amateur or professional, everyone loves great stuff that’s FREE!

#1 Color Palette FX

First, let’s talk about colors. When I’m working on a website, one of the first things I ask the client for is their logo. If they have a strong logo they like, and the logo has colors (not all black), I take that logo file and head over to palettefx.com. There you can click on the big camera icon on the left side of the screen and upload any image from your computer (such as a logo). It then displays an array of colors, including the exact shades used in the logo, and some complementary colors to choose from as well. Here’s an example using the Madison County Chamber of Commerce logo. Within the program, you can click on each individual color bar to see the hex code for that color. If you don’t use hex codes, just Google for a Hex to RGB converter (or whatever you use).

It also works if you want a suggested color palette based on a photo.

#2 Paletton

If you’re working with one main color and need suggestions for additional colors, Paletton can take it to the next level. Let’s say I want to use that plum color from the image above, the one just to the right of the image (my lovely daughter). The hex code that Color Palette FX gave me for that color is #774455. I can take that color over to paletton.com and input it where it says “Base RGB” to the lower left of the color wheel. From there I can click the round icons above the color wheel to see several combinations of complimentary colors, such as a monochromatic palette, adjacent colors, or a triad. Again, the color numbers are provided.

#3 Pixabay and Unsplash

#3 is actually two tools — bonus! Moving on from colors, let’s talk about where to find free images. It’s always best to use your own photos when possible, but when you can’t, or you’re on the hunt for the perfect image to make your point or fill your space, Pixabay.com and Unsplash.com are huge, high-quality collections of royalty free stock photos.

Pixabay gives you the option to download the image in several different sizes (choose your size in the box on the right, after you click “Free Download.”

And Unsplash makes it easy to credit the photographer if you’d like, though it’s optional.

#4 Google Fonts

Colors, photos…. what else do we need to design a website? Fonts. I love Google Fonts for web design because they integrate so easily with self-hosted WordPress (.org), my tool of choice for designing websites. Also, I love how you can type a word or phrase into the search box and then click “Apply to All Fonts” and then scroll through the results to see how your word or phrase looks in various font options.

#5 Bob Ross Lipsum

You’re probably familiar with the idea of Lorem Ipsum, which is scrambled, nonsense text used as a placeholder in design until you replace it with your actual content. I really, really prefer to have the actual content up front when I’m designing a website, but sometimes it’s just not ready.

Instead of using the standard “Lorem ipsum dolor sit amet, consectetur adipiscing elit…” I prefer placeholder text generated from bobrosslipsum.net because it’s just plain hilarious, and design should be fun.

Are there more free tools I love? Yes there are! Maybe I’ll write another post about that someday, and in the meantime, feel free to ask me if you’re looking for something specific. I could talk about web design all day.

2 Responses

  1. Aaron McCullough
    | Reply

    Like palettefx.com, I like to use coloors.co.

    When I want a quick color code I reference I use: https://htmlcolorcodes.com/assets/downloads/material-design-colors/material-design-color-chart.png

    If I’m stuck on font pairings, I’ll refer to this article from Canva: https://www.canva.com/learn/the-ultimate-guide-to-font-pairing/

    Great stuff, Julie!

    • admin
      | Reply

      Thanks, Aaron! I’ve never seen that color chart before — awesome. I’ll check out that article too!

Leave a Reply

Your email address will not be published. Required fields are marked *