Your Credibility on the Line | The Web3 Branding Trilogy
image : midjourney
Brief:
Understanding the Difference Between Logos and Brands, and How to Rock Them in Web3.
Don't Make Me Think: The Golden Rule of Design.
Leveraging Logos, Fonts, and Colors in Your Web3 Brand Design.
Real-World Case Study: How I Crafted the Brand Design for My Personal Project - Rio Frenz.
What's up, friends!
Welcome to the last of our year-end special on BRANDING FOR WEB3, where we describe details of the creation of Rio Frenz Branding - all in real life - and how you can implement your project with brand strategies.
Did you miss the other articles? Check them all out here:
Brand Positioning in Web3: Strategically defining the niche and role of your project in the market.
Brand Storytelling in Web3: Detailing persona, archetype, laddering, storytelling, and brand associations.
Logo and Visual Identity in Web3: Details for a good logo, its visual assets, and the main aesthetic trends in Web3.
All these tools have been successfully tested throughout my pre-Web3 life and adapted to the demands of this new digital revolution. Hold tight, it's all top-notch.
We've reached the end of our special series on Web3 Branding, and it's the most fun part for everyone too. Today, we're diving into Logo and Visual Identity. You're about to learn the key points of these assets and how to use them in your Web3 project development.
Logo Isn't Brand
First things first, it's no coincidence we're talking about logos last in our trilogy. A brand is every memory we create in people's minds and hearts. The logo is the symbol of that. If you've done a great job with positioning, storytelling, and other brand aspects, your logo will efficiently translate all of that. Otherwise, the logo is just decoration.
Invest in your brand content before creating the logo. "This changes the world," just like Fernanda Montenegro would say.
The 2 Key Missions
Logo and Visual Identity Design have two key functions:
1. Inspire the Vibe of Your Project.
2. Inspire Credibility in Your Business.
Whether it looks ugly or pretty doesn't matter. That's subjective.
But if it fails to meet one of these two criteria, it's missed the mark.
Your Vibe
Does your project inspire lightness? Is it tuff?
Is it street culture-oriented or finance market-focused?
Does it mock the world? Entertain? Educate? Or does it require austerity?
The role of the logo is to translate these values into an image.
The result isn't always literal, but don't get hung up on that. A professional can help create it, but the final perception comes from your audience. If they feel your brand's vibe when looking at the logo, mission 01 is a success.
Your Credibility
Plain and simple here: If your visual identity looks shoddy, your business will seem shoddy to your audience. Instinctively, what we perceive when we see good design is: “If this site is so well-cared-for, they must treat me with the same attention to detail.”
If your design inspires this confidence in your audience, you've nailed mission 02.
Don't Make Me Think.
This design rule was coined 20 years ago by Steve Krug, and it's still running.
Our brains want peace to focus on what matters. Your brand's design should allow people to find, perceive, and understand everything they - or the brand - need, almost instinctively. With the least effort possible.
In this case, common sense icons - like a pen for a copywriter - might seem uncreative - and it is. But if people get it, it works.
🟢 🔴 ✉️ 💾
Leverage common sense and ease of understanding. Save your creative flair for the spotlight.
Green means “all good” when it's near red indicating danger.
The envelope signifies email, even though an electronic mail has never needed one.
A floppy disk means “save the file” even though most people today have never seen one up close.
If your Web3 project is going global, use symbols. They speak every language.
The Logo
With the main tips laid out on the table, let's dive into logos. You might already have a logo, or perhaps you're planning to hire a designer to create one. The key idea here is to focus on the essential elements that we, as brand managers, need to keep an eye on, okay?
The first things to check are those we've mentioned earlier: Does it convey the vibe and credibility your project requires, and is everything clear and easy for the audience to understand? A logo is great when it meets these criteria and not so great when it doesn't. The rest is a matter of taste: everyone has their own.
Formats
Depending on the logo, it is worth asking for its unfolding in different versions:
Full Format: Shows off all the elements and comes in both vertical and horizontal versions.
Compact: A scaled-down version for smaller spaces.
Micro: For really tiny spots like tabs, stamps, and fav icons.
Icon: Just the brand symbol or your PFP, as it's commonly seen in the Web3 world.
Colors
All these formats should be available in versions for both light and dark backgrounds - what we in the design biz call 'positive' and 'negative'. Plus, we need three color schemes:
Full Color: The whole color shebang. All the colors, shades, and gradients.
Grayscale: For those times when we’re printing in just one color.
Black & White (B&W): When the medium only supports a single color, with no shades or gradients.
Bitmap + Vector
Boring but Important Tech Talk:
You'll need versions of your logo in BITMAP and VECTOR Files.
Bitmaps are everyday heroes for use in Word, Canva, WhatsApp, or social media - PNGs are famous for being light and allowing transparent backgrounds.
Vector files are a must in graphic editing software, and your designer will need them. The SVG format is getting popular because it's compatible with Microsoft Office and Mac's iWork Suite (Pages, Numbers, Keynote).
About Fonts
Basically, these are the “letters” used in our Visual Identity - there's a whole debate about this term, but let's not get into that. Usually, 2 fonts do the job. One decorative for titles and another easy-to-read for body text.
Use Few Fonts
Too many fonts in the same layout can scream amateur and hurt your credibility.
Commercial Use
Fonts have copyrights. Make sure yours are free for commercial use. All fonts on Google Fonts are safe bets, so that's a good reference.
Like your logo, they should vibe with and add credibility to your project. Keep that in mind. 👌🏼
The Colors
Colors play a big role in the energy your Visual Identity conveys. The colors of our visual identity should be in our Branding program. Usually, there are 2 or 3, with variations for light or dark modes.
It's cool to have your colors in RGB - for screens - and CMYK - for printing. Another boring tech detail, but it’ll save you from surprises when producing your awesome stickers or top-notch merch.
But in Web3, especially for visual projects like Creative IPs and NFT Collections, it's smart to define the complete base palette for the brand. This way, your designers’ creations will always have the same chromatic atmosphere, giving a sense of unity and cohesion: Everything is part of the same universe.
Don’t Make Me Think About Colors
Everyone asks me about the ideal colors for each occasion. These rules aren’t set in stone - no one gets hungry seeing a red ball - but colors do have strong associations and energies in common sense - they help you understand without thinking too hard 💎. Here are some tips for their use in Web3 Design. | I know... the text is tiny. Click and zoom in.
Rio Frenz's Practical Case Study
By the end, you'll have a Brand Sheet similar to this one, complete with all your vector design assets, plus a folder with bitmap versions of the logo in .PNG.
For larger projects - with many designers involved - you'll need a Visual Identity Manual. Since I'm currently a one-man show, it's not necessary.
Logo
For Rio Frenz, I chose a single, square logo format because it fits well in many layouts. I won’t lie, sometimes I miss having other formats.
The cartoonish aesthetic captures the essence of the archetypes we chose for the brand: It's fun (comedian) with irregular, crooked letters, capturing Rio's mischievous air (rebel). This effect applies to both the logo and our title font.
The sticker outline is a lifesaver, you know? As we’ll often place the logo over colorful illustrations, it creates a “safety margin” around the letters, ensuring they're always legible.
Jelly Mode: Ever wondered about the jelly-like aesthetic of the letters? As a kid, I saw the vegetation as a green blanket spilling over Rio’s mountains, just like vines do in a rainforest. We’re bringing this aesthetic to Rio Frenz, letting everyone see Rio as I did as a child.
When I created the logo, the characters weren’t ready - they’re being drawn right now, actually 🤩 - so the elements are arranged to work independently or with characters linked to the logo.
Colors
The background blue wasn’t a random choice. Cartoon logos often appear against the sky in animations, so everything needs to look great with this base color. The dark mode was thought out in the same way. Here, the yellow in the letters "talks" to the lights in the city’s windows at night, maintaining a sense of integration between the visual identity and our artistic production. We also have Gray and Black & White versions.
The palette is citrusy, EXTREMELY vibrant - the energy our cartoons should convey. The neutral tone of the sticker overlays all colors without clashing. Being a cartoon brand, we also have an illustration palette with a complete set - the base for all color variations by the cartoonists.
Since we’ll have a long period of public making-of, we have a monochromatic palette for this phase, inspired by old sticker albums - the non-digital collectibles. The idea is that, as the work progresses, its result gains color in the public's eyes, until its final form.
Common Mistakes and Valuable Insights
I can't fit them all in a post, but I’ve selected some important ones for Web3 here for you. Make good use of them!
Margin of Importance
The king looks important on his throne because no competitor is vying for attention around him.
Same with your logo.
Keep a margin of importance around your logo. The larger this margin, the more important your logo will appear.
Repeat and Don’t Change
Brand and recall. The more people see it, the more they’ll remember you. Repeat your brand assets, but be careful not to seem boring or opportunistic.
Don’t change your logo.
Don’t change your PFP.
Don’t change your Name on Social Media.
Don’t change your Visual Identity.
You’ll get tired of them, but DON’T CHANGE unless something is going wrong.
Don’t Enlarge the Logo
People often enlarge their logo to look important. This is a sign of inexperience in design and insecurity in management. If you want to look important, increase the margin around, not the logo.
Balance = Credibility
Our brains constantly seek to group and organize what we see. When we help in this task, it translates to comfort in reading and credibility for the brand. When we make it harder, the good impression goes down the drain. Use these little rules, and they will GREATLY elevate your design quality.
Importance Hierarchy: Bigger, visually heavier things with larger empty margins around them are more important. Less important things should be smaller, lighter, with smaller margins around them..
Information Blocks: Use alignment and margins to form "information blocks". The clearer they are, the less effort our brain needs to read them.
Antibodies Against Advertising
We have antibodies against advertising; otherwise, everyone would be broke. Any logo in a post - including yours - activates the brain's defense system.
When possible, avoid using the logo in posts and invest in other branding assets like colors, fonts, and image patterns. This connects the audience with the brand without triggering the immune system.
PS: These aren’t absolute rules. A good designer can subvert all of them and create incredible things. Still, it’s good to have them up your sleeve. 😉
You, Designer
Does all of this sound a bit too complex for everyday use to the average Joe? Well, it's not. In the Web3 world, there's no room for the red tape of traditional agencies. When there's a need, we've got to create the art and publish it right away.
With this in mind, several mobile software options like CANVA and ADOBE EXPRESS. have popped up.
The ideal approach these days? Get your designer to set up your brand profile in your app with all your design assets - logo, fonts, color palette - and all the posting templates you need. This way, you can create media with your own visual identity, anytime, anywhere.
That's all, folks!
We're wrapping up our end-of-year special with these lucky and successful tips, gang!
A big thanks to everyone who's been a part of our journey so far, and get ready, because although the bull market comes and goes, we always aim higher.
Good luck and great work! 🥂🍾
Lesgo Partnership?
I have good news:
Our 'Top-Notch Partnership' season is now open to hit the streets and travel the world with Rio Frenz!
Are you skilled in illustration, drawing, or 2D and 3D animation?
Do you like our project and want to be a part of it?
Contact us via our email and let's head to the Moon!
Find out more about Rio Frenz
Get to know us at www.RioFrenz.com.
Follow us on Medium.
Comments