WebsiteAMP

Let’s Get Visual: Design Resources for Your Next Project

Mark Praschan

Mark Praschan

4 min read

For most small business owners, the idea of choosing brand elements like color palettes, fonts, and icons can sound like a lot of fun, but it can also be paralyzing. Here are a few resources to help get you started.

Color Palettes

Today’s high-end computer monitors can display over 1 billion different colors. That’s a staggering number and it means you probably need some help narrowing things down a bit if you’re trying to figure out what colors you should use for your next project.

These online color tools will eliminate a lot of the guesswork and get your headed in the right direction.

Coolors is a full-screen color palette generator.

Coolors

Coolors (notice the extra “o”) is perhaps the quickest way to generate a new color palette for your small business project. It’s a free online tool you can use right inside your web browser.

Once at that site, you can hit the spacebar on your keyboard to generate a new color palette until you find something you like. Once you have something that piques your interest, you can adjust and refine the colors as you see fit.

Color Hunt gives users many palettes at a quick glance.

Color Hunt

Color Hunt is fairly similar to Coolors in that is generates color palettes for you for free in your web browser, but CH does a better job of allowing you to quickly browse palettes. Better yet, you can easily view groups of colors by what’s trending or popular.

TailwindCSS’ color palette features 220 colors.

TailwindCSS

It can look a little daunting at first, but this palette of 220 hand-picked colors is one of the best out there. The Tailwind 2.0 color palette offers a great mix of options, while still making sure the colors can work well together.

There are 12 color families or “hues” (like red, blue, lime, and violet) and each hue has 10 shades ranging from very light to very dark. Unlike the color palette generators mentioned above, this is a set grouping of colors from which you can pick.

If you’re not sure how to get started, pick just 3-5 of your favorite hues (don’t forget one of the 5 gray hues for neutral items like paragraph text) and stay within those hues for a cohesive feel.

Fonts

Fonts add a dose of personality to any project and can help your brand make a bigger impact. Fonts are typically organized by type: Serif, Sans-Serif, Display, Handwriting, Monospace.

Serif

Serif fonts have extra flourishes called “serifs” at the ends of most characters. This is a more traditional style and is often more legible and readable than other styles.

Sans Serif

These fonts are without (or “sans”) serifs. This gives them a cleaner, more modern look.

Display

Display fonts are intended for use only in large settings like for headings, posters, or signage.

Handwriting

As you’d expect, handwriting fonts try to mimic the look of hand-written characters. Many handwriting fonts are playful cursive or delicate calligraphy.

Monospace

Monospace fonts are so called because each character takes up the same width. These are often used in software programming, but can be used in other contexts too to create a unique look.

Google Fonts is a collection of over 1,000 free fonts.

Google Fonts

By far the biggest source of high-quality, free fonts is Google Fonts. Their library of over 1,000 fonts can be downloaded for offline use or imported for use in online projects.

Fonts.com is the most popular source for paid and premium fonts.

Fonts.com is the most popular source for paid and premium fonts.

Premium Fonts

Sometimes a free font isn’t the right fit. Some projects may warrant the purchase of a premium font to give it that extra spark.

Since premium fonts aren’t free, they are also used much less frequently. For anywhere from a few dollars to a few hundred, you can purchase a font-family and set your brand apart from competitors.

Icons

Beyond colors and fonts, most project also call for the use of symbols or icons. Rather than just googling random images, selecting an icon library will ensure that all your icons have a consistent appearance.

Font Awesome, a free and premium icon library.

Font Awesome

Don’t get fooled by the name. Font Awesome is all about icons… it just uses font files to display them in some cases. As of writing, there are over 1,600 free icons and nearly 8,000 premium icons all designed by the same team with the purpose of working great together.

Font Awesome’s space-shuttle icon in 4 weights: Light, Regular, Solid, and Duotone

Some large icon libraries like Font Awesome offer variants and different “weights” of the same icons to help you find the right fit for your application.

Flaticon

If you’re looking for a wider variety of styles, you can check out Flaticon and their selection of nearly 3.9 million (!) icons. Most of the icons you’ll find here are part of a small package or set that will all have the same aesthetic style.

Be careful not to mix and match between packs and designers too much since that can create a confused look for your website or project.

Summary

The internet is full of design resources, some of them great, some of them not-so-much. Hopefully this list can narrow your choices a bit if you’re tackling a design project yourself.

Design isn’t for everyone. If you find yourself stuck or otherwise wishing you could talk to an design expert, I’m happy to assist.