How to DIY your basic brand visuals (easy, effective & no BS)
You CAN create a professional-quality logo yourself (without hiring a designer). In this week's training and blog post about BRAND VISUALS, you'll learn:
- Why you should stop asking for logo advice on Facebook
- The 3 parts of an effective and professional logo
- How to design a “wordmark” logo (plus the tools I use)
- How to choose colors the right way (it's easier than you think)
- How to choose fonts (and use them effectively on your site)
And, yes, I did create a free downloadable version for you to follow along. You can get that at craftingcreative.com/checklist.
Feedback Faux Pas
One thing I see too often in Facebook groups is people crowdsourcing design feedback on their logos.
The reasons I don’t recommend this are:
The people responding are not necessarily in your target market
They have little-to-no context about your brand or intended audience
You’re making the feedback about aesthetics rather than effectiveness
When you provide context for your design (meaning the space it will be presented, the objectives for the design, and the intended audience), then you’re able to measure the effectiveness of the design, rather than to just get people’s preferences aesthetically.
When you’re evaluating a logo’s effectiveness, you’ll also want to check that it fulfills these 3 pillars of a timeless logo:
It’s simple — you don’t need to use multiple fonts or colors and you don’t even need an icon.
It looks good in black — Even if the final display logo is 2 colors, you want the logo to look good in a monochromatic hue.
It’s scalable — If you shrink it down to a small size (say 50px wide) or blow it up to massive proportions, it should still look good and stand for your brand.
Now, for these next 3 steps, we’re going to be referencing our brand tone words and mood board that we created back in lesson #5 on clarifying your brand style.
DIY Design Tips
So, take a second to grab your moodboard and tone words from that lesson. And, before we dive into the design, I want you to look at them and answer a few questions:
Are these words and images more bold or subdued? BOLD
Are they more contemporary or retro? CONTEMPORARY
Are they more calm or chaotic? CHAOTIC
Are they more refined or organic? ORGANIC
Answering these questions first will help you to identify the types of colors and fonts that you’ll want to use for your brand.
Now, that you have some thoughts on what types of fonts you’ll need for your logo (for example: bold, contemporary, and organic), we can jump into the logo design tutorial.
So, now we’ve got our monochromatic logo ready to go. Let’s talk COLORS! 🌈 A good way to choose your colors is to take them directly from your moodboard.
I promise you, colors are not complicated (and you only need 4 of them):
Almost Black (close to black but not quite).
Main color (one that won’t repel your target audience and that resonates with your brand vibe).
Button color (this will be complementary to your main color).
Now, you don’t need to choose the EXACT color opposite to your main one on the color wheel because sometimes that ends up looking like poo 💩. That being said, you should stay within that color family.
For example, you’ve chosen a shade of blue for your primary color, so your button color will be a shade of orange. It can be more of a reddish orange but it’s not going to be green or purple. Does that make sense?
When it comes to fonts, just like when it comes to every other element of design that I’m teaching you here, LESS IS MORE.
That’s why I almost always use only TWO fonts. I’ll choose one (slightly more stylized) font for the headings and then a second (highly readable) font for the body text.
Because, while your font choices should contribute to your brand vibe, the ultimate test of a font’s effectiveness is that it is READABLE.
After all, we’re doing this because we want to craft user-friendly websites that attract more of our dream peeps on autopilot. That means, we have to reduce friction and make it as easy for them as possible to use and peruse our sites.
And these are the main bits of text that you’ll need to define fonts for:
Paragraph (called “Normal” in Squarespace)
Quotes (pull quotes and inline quotes)
Optimize Your Website Copy for Scannability
And, as you know, people don’t read websites anymore, they scan them. So let’s optimize our website content for scannability by considering these 3 elements:
Hierarchy – Create a consistent typographic hierarchy by starting with your paragraph font size (16px - 20px is good) and then multiplying by 1.5 to get to the next font size.
For example: If my paragraph font is 16 pixels, then my h3 (heading 3) font will be about 24 pixels and my h2 (heading 2) font will be about 36 pixels and my h1 (heading 1) will be around 54px. I say “about” because I always allow myself small tweaks, once I see the text on the screen. Although, once I’ve decided on a font size, that will be standard throughout the site (for consistency).
Chunking – That means breaking your content into easy-to-read chunks of 2 to 3 lines per paragraph with plenty of spacing in between paragraphs.
Whitespace – This is the last and most important thing when it comes to layout.
By "whitespace", I mean the spacing between and around elements on a page. So have plenty of padding between the tops and bottoms of rows or in between columns. In a sense, it's like giving breathing room to your content and it's also giving your users space to digest and assimilate what they’ve just read before they move on.
So far in this #WebPrepChecklist series we’ve covered:
Nailing your brand basics without hiring a designer – that's this post 😉
Next up, we’re going to talk about PHOTOGRAPHY and sexy selfie snaps! (BTW that will be the last official step in the Web Prep series, BUT I’ve got a few bonus lessons for you).