top of page

Logo e ID Visual na Web3 | DIY

Atualizado: 3 de jan.

Sua Credibilidade em Jogo | Trilogia Branding para Web3

 
logo identidade visual branding web3

imagem : midjourney

Resumo:

  • As diferenças entre Logo e Marca, e como fazer bom uso disso na Web3.

  • Não me faça pensar: A regra de ouro do Design.

  • Usando a logo, as fontes e as cores a seu favor no design de marcas para a Web3.

  • Estudo de caso real: Como desenvi o design de marca para meu projeto pessoal - Rio Frenz.

 

Fala aí, amigos!

Sejam bem-vindo ao último de nosso especial de fim de ano sobre BRANDING PARA WEB3, onde descrevemos detalhes da criação do Branding de Rio Frenz - tudo na real - e como você pode implementar seu projeto com estratégias de marca.


Perdeu os outros artigos? Confere todos aqui:

  1. Posicionamento de Marca na Web3: Como definir estrategicamente o nicho e o papel de seu projeto no mercado.

  2. Storytelling de Marca na Web3: Detalhando persona, arquétipo, laddering, storytelling e associações de marca.

  3. Logo e ID Visual na Web3: Detalhes para uma boa logo, seus assets visuais e as principais trends estéticas na Web3.

Todas estas ferramentas já foram experimentadas com sucesso ao longo de minha vida pré-Web3 e adaptadas às demandas desta nova revolução digital. Segura, que só tem filé.
 


Chegamos ao final de nosso especial sobre Branding Web3, e a que mais diverte a galera também. Hoje vamos tratar de Logo e Identidade Visual. Você vai conhecer os pontos pontos importantes destes assets e como utilizá-los no desenvolvimento do seu projeto Web3.


Logo não é Marca


Antes de mais nada, não é à toa que estamos falando de logo por último em nossa trilogia. Marca é toda memória que geramos na mente e no coração das pessoas. A logo é o símbolo disso. Se você fez um bom trabalho de posicionamento, storytelling e outros aspectos da marca e você terá uma logo eficiente traduzindo tudo isso. Caso contrário, a logo vira decoração apenas.

Invista na seu conteúdo de marca antes de criar a logo. '"Isso munda o mundo", que nem a Fernandona Montenegro.

As 2 Missões Chave


O Design da Logo e Identidade Visual tem 2 funções chave:

  1. Transmitir a Vibe de seu Projeto.

  2. Inspirar Credibilidade ao seu Negócio.

Se está feia ou bonita, não importa. Isso é subjetivo.

Mas se ela não cumpre um destes dois critérios, falhou na missão.


A sua Vibe


Seu projeto inspira leveza? Agressividade?

É voltado à cultura de rua ou ao mercado financeiro?

Ele debocha do mundo? Diverte? Educa? Ou requer austeridade?


A esta altura, isso já foi definido por você no seu projeto de Brand, o papel da logo é traduzir estes valores em imagem.

O resultado nem sempre é literal, mas não se atenua a isso. Um profissional ajuda na criação, mas a percepção final vem de seu público. Se ele sente a vibe da sua marca ao olhar para a logo, a missão 01 foi cumprida com sucesso.


A sua Credibilidade


Curto e grosso aqui: Se a sua identidade visual parece fuleira, seu negócio vai parecer fuleiragem aos olhos do seu público. Instintivamente, a leitura que fazemos no contato com um bom design é: “Se este site está tão bem cuidado assim, eles devem me atender com o mesmo capricho.”

Se o seu design inspira esta confiança em seu público, é sinal de sucesso na missão 02.


Não me faça Pensar.


Esta regra do design foi cunhada há 20 anos por Steve Krug, e vale até hoje.

Nosso cérebro quer paz para pensar no que importa. O design de sua marca deve permitir que as pessoas encontrem, percebam e saibam de tudo que elas - ou a marca - precisam, quase instintivamente. Com o mínimo esforço possível.

Neste caso, ícones do censo comum - como uma caneta para um copywriter - pode parecer pouco criativo - e é mesmo. Mas se as pessoas entendem, funciona.

🟢 🔴 ✉️ 💾

Abuse do senso comum e da facilidade de leitura. Guarde os toques criativos para os lugares de honra.

O verde quer dizer “tudo bem” quanto está perto do vermelho indicando perigo.

O envelope quer dizer e-mail, mesmo que um correio eletrônico jamais tenha precisado deles.

Um disquete quer dizer “salvar o arquivo” ainda que a maioria das pessoas hoje jamais tenham visto um de perto.


Se o seu projeto Web3 vai rodar o mundo, faça uso dos símbolos. Eles falam todos os idiomas.


 

A Logo


Com as dicas principais na mesa, vamos à logo. Você já deve ter uma logo ou vai contratar um designer para desenhá-la. Então a ideia aqui é focar nos pontos chamas que a gente, como gestor de uma marca, deve ficar atento. Certo?


As primeiras checagens são estas que apontamos acima: Se transmite a vibe e a credibilidade que o projeto demanda, e se tudo é lido com clareza e fluidez pela audiência. A logo é boa quando cumpre estes critérios é ruim quando não. O resto é gosto: cada um tem o seu.



Formatos


Dependendo da logo, vale pedir seu desdobramento em diferentes versões:


formatos de logo - branding web3


Formato Full: Exibe todos os elementos e pode vir em versões vertical e horizontal.

Compacta: Versão reduzida para menores formatos.

Micro: Para reduções extremas como em abas, selos e fav icons.

Icon: Com o símbolo da marca apenas ou seu PFP como é usual na Web3.


Cores


Todos estes formatos devem se desdobrar em versões para fundo claro ou escuro - que tecnicamente chamamos de positiva e negativa no design. Além disso, precisamos de 3 padrões de cores:


Full Color: Coloridão! Com todas as cores, tons e degradês.

Tons de Cinza: para quando a gente vai imprimir em uma cor apenas.

Black & White (B&W) ou PReto & Branco P&B: Usando a mídia suporta uma cor apenas, sem variação de tons ou degradê.


logo - branding web3


Bitmap + Vetor

Tecniquês chato mas importante:


Você vai precisar de versões da sua logo em Arquivos de BITMAP e Arquivos de VETOR.

Bitmaps são usados no dia a dia para aplicação no Word, Canva, WhatsApp ou redes sociais - os .PNG são os mais famosos por serem mais leves e permitir fundo transparente.

Os arquivos de Vetor são usados em softwares para ediçao gráfica, seu designer vai precisar deles. O formato .SVG tem se popularizado por ser compatível com Microsoft Office ea Suíte iWork do Mac (Pages, Numbers e Keynote).


branding - formatos arquivo - png svg


As Fontes:


A grosso modo, são as “letras” usadas em nossa Identidade Visual - tem um rolo nessa nomenclatura, não vamos falar sobre isso. Normalmente 2 fontes dão conta do trabalho. Uma decorativa para os títulos e outra de fácil leitura para o corpo de texto.


fontes - branding web3

Use poucas fontes

Muitas fontes misturadas no mesmo layout podem inspirar amadorismo e comprometer sua credibilidade.


Commercial Use

As fontes tem direitos autorais. Certifique-se de que as suas são livres para uso comercial. Todas as fontes baixadas no Google Fonts são livres, então é uma uma boa referência.


Assim como a logo, elas devem trazer a vibe e inspirar credibilidade ao seu projeto. Lembre-se disso. 👌🏼


As Cores


As cores são grandes responsáveis pela energia que a Identidade visual transmite. As cores de nossa identidade visual deve estar em nosso programa de Branding. Normalmente são 2 ou 3 com desdobramentos para modo claro ou escuro.

É bacana ter contigo as versões de suas cores em RGB - para uso em telas - e CMYK - para impressão. E outro tecniquês chato, mas vai evitar surpresas na produção dos seus adesivos irados ou seus merchs topzêra.


Mas na Web3, especialmente em projetos visuais como Creative IPs e Coleções NFT, é interessante definir a paleta base completa para a marca. Assim as criações de seus designers terão sempre a mesma atmosfera cromática, trazendo-a sensação de unidade e coesão: Tudo parte do mesmo universo.


Não me faça pensar com as Cores


Todo mundo me pergunta as cores ideis para cada ocasião. Estas regras não funcionam ao pé da letra - ninguém sente fome porque viu uma bola vermelha - mas elas têm sim associaões e energias muito contundentes no senso comum - cores te ajudam a entender sem precisar pensar 💎. Seguem algumas dicas para seu uso no Design Web3. | Eu sei... a letra tá pequenininha. Clica e dá zoom que resolve.


paleta de cores - funções - branding web3


 

Case Prático de Rio Frenz


Ao final, você deverá ter uma Brand Sheet similar a esta em mãos, com todos os seus assets de design em Vetor, além da pasta com versões bitmap da logo em .PNG.

branding - modelo sheet - web3

Se o projeto for de maior porte - muitos designers envolvidos - você precisará de uma Manual de Identidade Visual. Como eu faço tudo sozinho por enquanto, não é preciso.



Logo


Em Rio Frenz eu optei por uma versão da logo apenas, em formato único e quadrado, por se adaptar a muitos layouts. Mas os outros formatos façam falta às vezes, não vou negar.



logo - rio frenz - web3 branding

A estética cartoonesca traz a atitude dos arquétipos que escolhemos para a marca: É divertida (comediante) e com as letras irregulares, tortas e com este ar gaiato do Rio (rebelde). Este efeito se aplica tanto à logo quanto à nossa fonte de título.

O contorno em sticker é providencial, sabe? Como vamos aplicar a logo siversas vezes sobre ilustrações muito coloridas, ele cria uma "margem de segurança" ao redor das letras, garantindo sempre uma boa leitura.


Modo Geléia: Talvez você se pergunte do porquê desta estética gelatinosa das letras. Quando eu era criança, eu percebia a vegetação como uma cobertir verde que se derrama sobre as mantanhas do Rio, assim como as ervas trepadeiras de fato fazem sobre as árvores da floresta tropical. Vamos trazer esta estética ao Rio Frenz, e todo mundo vai poder ver o Rio como eu via quando era criança.


logo web3 branding

Quando criei a logo os personagens ainda não estavam prontos - estão sendo desenhados agora, aliás 🤩 - então os elementos se organizam de forma a funcionarem sozinhos ou com personagens atrelados à logo.



Cores


O azul de fundo também não foi em vão. Logos de cartoons aparecem muitas vezes SOBRE O CÉU em desenhos. Então tudo precisa rolar legal nesta cor como base. O modo escuro foi pensado da mesma forma. Só que neste caso, o amarelo as letras "conversa" com o das luzes nas janelas da cidade à noite, trazendo sempre a sensaçAo de integração ente a identidade visual e nossa produçao artística. Abaixo temos também as versões Cinza e P&B.


logo - web3 branding

A paleta é cítrica, EXTREMAMENTE vibrante - energia que nossos cartoons devem transmitir. O tom neutro do sticker se sobrepõe a todos sem "brigar" com ninguém. Por ser uma marca de cartoons, temos também a paleta de ilustração com o set complato - base para o desdobramento de todas as cores pelos cartoonistas.


color palette - web3 branding

Como teríamos um longo tempo em making of aberto ao publico, temos uma segunda paleta monocromática para este período, inspirada nos antigos álbuns de figurinhas - os colecionáveis não-digitais. A ideia é que, à medida que o trabalho ganhe corpo, seu resultado ganhe cor aos olhos do público, até seu formato final.

web3 branding
 


Erros comuns e Acertos valiosos

Não cabem todos num post, mas eu selecionei umas importantes na Web3 aqui pra você. Faça bom uso!


Margem de Importância


O rei parece importante no trono porque não há concorrente disputando a atenção ao seu redor.

Com a logo é igual.

Guarde uma margem de importância ao redor de sua logo. Quanto maior esta margem, mais importante sua logo vai parecer.


dicas - web3 - branding


Repita e Não Mude


Marca e lembrança. Quanto mais vezes as pessoas virem, mais vão lembrar de você. Repita seus assets de marca, mas cuidado para não parecer chato ou oportunista.

Não troque sua logo.

Não troque seu PFP

Não troque seu Nome na Rede Social.

Não troque sua Identidade Visual.

Você vai enjoar delas, mas NÃO TROQUE a menos que algo esteja dando errado.


Não aumente a Logo


Geral tem mania de aumentar logo para parecer importante. Isso é sinal de inexperiência no design e insegurança na gestão. Quer parecer importante, aumenta a margem ao redor, ao a logo



Equilíbrio = Credibilidade


Nosso cérebro busca permanentemente agrupar e organizar o que vê. Quando a gente o ajuda neste trabalho, isso se traduz em conforto na leitura e credibilidade para a marca. Quando a gente torna tudo mais difícil, esta boa impressão vai para o ralo. Use estras regrinhas e elas vão ELEVAR MUITO a qualidade do seu design.


  1. Hierarquia da Importância: Coisas mais importantes maiores, com mais peso visual margens vazias maiores ao seu redor. Coisas menos iumportantes menores, mais leves e margens menores ao redor.

  2. Blocos de Informaçao: Use alinhamento e margens para formar "blocos de informação". Quando mais claros eles forem, menos esforço nosso cérebro demandará para sua leitura.


web3 branding - design

Anticorpos contra Propaganda


Temos anticorpos contra propaganda, se não todo mundo morria pobre. E qualquer logo no post - inclusive a sua - ativa o sistema de defesa do cérebro.

Quando possível, evite o uso da logo nas postagens e invista nos outros assets de branding como cores, fontes e padrão de imagens. Isso conecta a audiência com a marca sem mexer com o sistema imunológico.


PS: Estas não são regras absolutas. Um bom designer pode subverter todas elas e fazer coisas incríveis. Ainda assim, é bom guardá-las na manga.😉


 


Você Designer


Tudo isso te parece complicado para uma pessoa normal utilizar no dia-a-dia? Pois não é. Na dinâmica da Web3 não há espaço para a burocracia de agência. Quando a demanda surge, nós mesmos precisamos produzir a arte e publicar de imediato.


De olho nisso, surgiram vários sotwares mobile como o CANVA e o ADOBE EXPRESS.

O modelo ideal hoje é pedir para o seu designer criar seu perfil de marca no seu aplicativo com todos os seus assets de design - logo, fonte , paleta de cores - e com todos os templates de postagens de que você precisa. Assim, você mesmo vai poder criar mídias com a sua identidade visual, em qualqer lugar sempre que precisar.



 

That's all Folks!



É com assas dicas de sorte e sucesso que encerramos nosso especial de fim de ano, galera!


Obrigado a todos que colaboraram com nosso nossa experiência até aqui, e se prepara porque o bull vem e vai, mas a gente chega sempre além.

Boa sorte e bom trabalho! 🥂🍾


 


Bora ganhar Presente de Natal?

[Promo Encerrada: Em breve teremos os resultados fazendo bonito por aí na Web3]


É isso aí, galera! Neste fim de ano quero dar um presente à nossa comunidade Web3 BR em retribuição ao acolhimento e à experiência tão rica e receptiva que tive aqui em 2023.. 🙌🏼🎅🏼🤩


Vamos desenvolver

01 PROJETO PROFISSA DE BRANDING PARA A WEB3

para um criador ou empresa bacana de nosso ecossistema brasileiro.

Kit completo! Com todos os assets abordados nesta trilogia de fim de ano.

Partiu?


Quem pode concorrer? Qualquer PLAYER DO ECOSSISTEMA WEB3 BRASILEIRO que já tenha um projeto em andamento ou quer começar agora perspectivas de médio ou longo prazo (1 ano ou mais). Pode ser um Game, App, Artista, Comunidade, Profissional... qualquer particpante de nosso ambiente Web.
Como concorrer? Acesse nosso POST DA PROMO no TWITTER e diga: Que MUDANÇAS você ou seu projeto Web3 promovem na vida das pessoas? Por que vocês é importante para o mundo? Vou selecionar as 4 RESPOSTAS MAIS INTERESSANTES e abrir a escolha final para votação pública numa ENQUETE DO TWITTER que termina na NOITE DE NATAL. O vencedor leva nosso presente junto com um abraço do Papai Noel. 🎅🏼
 O que inclui o prêmio? ✅ Análise de Posicionamento; ✅ Estudo de Arquétipo de Marca; ✅ Storytelling; ✅ Laddering e Associações de Marca; ✅ Logo e padrão de Identidade Visual.
Se liga no Cronograma: Temporada de Inscrições ao Prêmio: De 10 a 16 de dezembro. Votação: De 17 a 24 de dezembro. Anúncio do Resultado: 24 de Dezembro. Na noite de Natal!

 

Partiu Parceragem?


Tenho notícia boa:

Está aberta nossa temporada Parceria Topzêra para botar o bloco na rua e rodar o mundo com Rio Frenz!

Você manda bem em ilustração, desenho, ou animação 2D e 3d?

Gostou de nosso projeto e quer fazer parte disso?

Fale com a gente pelo nosso e-mail e partiu Moon!


 
Saiba Mais sobre Rio Frenz









49 visualizações

Posts recentes

Ver tudo

Comments


bottom of page