BTB Episode 108: Our Favorite Tools for Website Visuals

“And these color palette generators that I linked to, a lot of them have an option for like putting in web safe colors. So there are certain colors that if you know that if you pick that one and you pick a certain like range of hex codes, it’s most likely going to be displayed correctly on more sites and more monitors and devices.”

We talk a lot about strategy on the Brands that Book podcast, whether it be mailing lists or social media, or scaling and building a team. But one topic Krista and I noticed was missing is a practical conversation about pulling together the visuals of your website in a way that really elevates your aesthetic. So today, that’s what we discuss: some of our favorite tools for all things visual on your website.

Krista shares some of her favorite resources for finding the right fonts, creating a color palette, finding solid stock photos and videos, how to create product mockups for launches, and embedding or not embedding an Instagram feed on your website. And, we also have a brief conversation about some of the strengths of Showit and Elementor.

Find it Quickly

• 7:38 – Website builders we like
• 12:23 – Fonts: fonts to use or avoid, how much you can expect to spend, how to get the proper licensing
• 18:49 – Recommendations for what to shy away from when choosing a font
• 21:29 – Why to use a color palette generator
• 23:50 – Tips for color palettes
• 25:49 – Stock photos and videos
• 28:26 – Social Squares
• 29:33 – Source Co.
• 31:52 – Licensing and use for stock photos and videos
• 32:58 – Product mockups
• 34:35 – Other tools for creating graphics
• 36:10 – Why we use Sketch
• 38:50 – Instagram feed on your website

Resources

Website Builders

The only two platforms we use to build websites. For a more in-depth comparison of the two, check out our Showit vs. Elementor comparison. 

• Showit – The drag-and-drop, no-code website builder for photographers and creative professionals. For more details about Showit, check out our Showit Resource Center.
• Elementor – Elementor is a drag-and-drop WordPress page builder. It’s a plugin that’s installed on your WordPress website that helps you to visually design your website without needing to know code.

Fonts

Our go-to font sources for both desktop and web.

• Google Fonts – Free + you can download them to your computer. Built into both Elementor & Showit.
• MyFonts – Easy filtering and it lets you preview the text (including some character variations – which is great for script fonts if you’re creating a logo) MyFonts also lets you download either desktop or web versions of fonts.
• Creative Market – Tons of beautiful hand drawn fonts + more contemporary fonts.
• Font Squirrel – Free but you really have to weed through them and test to find good ones. Some of these download as web fonts but some don’t allow for web use without purchasing the web version.
• Avoid: Free fonts from most of the free sites (such as dafont.com). They can contain bugs and aren’t usually the best quality. Most also don’t include web licensing.
• Lost Type Co – Unusual (more “display” fonts).
• Adobe – For your computer, you can turn on the Adobe fonts through Adobe.com. Most of these can’t be used on websites unless you buy the web licensing elsewhere, but you could use them for logos, social media graphics and print pieces.
• What the Font – Helps you identify fonts by uploading a screenshot or an image.

Color Palette Generators

• Colormind – You can select “website colors” and generate color palettes randomly or with a few colors you selected (such as your brand colors). It lets you “lock” colors you want to keep and then generate another random palette to fill in colors you still need. The site also gives you a preview of how you could incorporate the colors on your website.
• Paletton – Lets you select a color and then choose a monochromatic palette, a three color palette, four color palette, etc
• Adobe Color Generator – Lets you generate a palette based on a color and makes it easy to play with variations such as monochromatic, complimentary, etc. You can put in a base color from your brand and generate the other colors with the tool.
• Colorhunt – Predesigned palettes if you need some ideas.
• Coolors – Will let you generate a color palette from an image. This is great if you have an image or two with colors you love or if you’re trying to match your brand colors to the colors in your work.

Stock Photos & Video

If you need a few images to round out your site, check out the following paid and free resources.

• Social Squares – They release new batches of images each month and their curation is beautiful. Great for social media and “filling” a site.
• Sourced Co – Beautiful collection of wedding industry related stock images
• Creative Market – Premium stock images. A large variety but you need to weed through them at times.
• Istockphoto – Premium stock images. Probably the most complete source. They literally have an image for everything but their images tend to be a bit more classic and can feel like “stock” images at times.
• Unsplash – Free stock images. We use images from here all the time! There are some duds on the site but if you keep looking long enough, you can generally find some quality images for just about any search.
• Pexels – Free stock images. Very similar to Unsplash.
• Coverr – Free stock videos.
• Pixabay – Free stock video + photos.
• Styled Stock – Free styled stock images.

Product Mockups (for launch graphics)

If you’re looking to create launch graphics showing your website in a screen, these are our go-to resources. And if you’re not sure how to create an image of a screenshot in a computer or phone screen, check out this tutorial.

• Creative Market has the most variety and they sell Photoshop templates that make it easy to drop an image into the template so it’s rotated and clipped perfectly.
• Social Squares has a lot of beautiful desktop and flatlay images but you would need to do the mockup work yourself

For Creating Graphics + Lead Magnets

If you need to create graphics or lead magnet PDFs, these are our go-to resources. If you’re new to lead magnets, this post explains the entire process.

• Sketch – Affordable one-time payment, similar to Illustrator but the export options make it a bit easier to export individual elements as multiple file types (SVG, PDF, PNG, JPG).
• Adobe Illustrator – My go-to for logo design and anything that needs illustration.
• InDesign – We use Adobe InDesign to create PDFs and most print pieces.
• Canva – Free software for creating graphics. We haven’t used it but we know a lot of people really love it! It’s a great alternative to the Adobe suite.
• Google Docs / Slides – Another way to create PDFs.

Embedding an Instagram Feed

If you want to embed an Instagram feed that automatically updates on your site, we recommend the following two resources.

• Snapwidget – They have a free plan but it won’t link directly to your Instagram images unless you pay to upgrade it. Here’s a tutorial for embedding Snapwidget on your website.
• Lightwidget – $10 to upgrade it once & use on a website with an HTTPS, links directly to your IG feed. Here’s a tutorial for embedding Lightwidget on your website.

Save it for later…