Nova identidade para o Front-end Brasil

[kvnol]

Com o 1 ano do Front-end Brasil, estava pensando que a identidade poderia ser renovada, junto com um novo site (#21) apresentando o repositório.

E, conversando com o @mtmr0x e @Mendrone, resolvi abrir essa issue para aceitar sugestões da galera e depois fazermos uma votação coletiva com os melhores logotipos aqui propostos. Que tal?

Algumas dicas para construção da proposta

Alguns conceitos que seriam interessantíssimos de nós (designers, ou não, que estamos fazendo propostas) tentarmos seguirmos é:

1. Representar o front-end com referências (nítidas ou não) ao HTML, CSS e JavaScript.
2. Representar o Brasil com cores (verde, amarelo e azul - vi que a galera tem resistência ao azul, mas é legal incluí-la em algumas versões) e formas.
3. Pense nas diferentes aplicações que podemos fazer no futuro com a marca: stickers, camisetas, impressos - por isso, aplique o logo em diferentes fundos, teste-o em cores monocromáticas e teste a aplicação apenas com o símbolo (no caso de um favicon, por exemplo) ou lettering.
4. Como o logo será open-source, somos uma comunidade open-source, é obrigatório (a não ser que alguém compre - não sei se seria interessante) trabalharmos com fontes open-source: https://fonts.google.com/

Obs.: Antes de criar qualquer coisa lembre-se, somos uma comunidade open-source, por isso críticas construtivas serão dadas para uma melhor identidade para a organização. Não fique emocione-se em demasia, defenda seus pontos sem ofender os demais. ❤️

[fdaciuk]

Sendo bem sincero?

👏 👏

[eduardojmatos]

@kvnol gatão! Valeu demais por ter feito a sugestão, realmente estávamos pensando numa reformulada no logo e site. Você adivinhou heheh

O site eu curti a maneira que você dispôs o conteúdo, eu manteria assim!

Sendo sincero contigo, eu achei que o logo fugiu bastante da proposta do original, com as cores do Brasil e as formas também. Parece um pouco simples demais saca? Falta um tempero BR, tá bem minimalista hehehe

Eu realmente não manjo de design, só posso falar que gostei ou não. Você se importaria se a gente chamasse uma galera a mais pra avaliar e dar possíveis sugestões no que você fez?

Mais uma vez muito obrigado mano!

[kvnol]

@eduardojmatos hahahah, sugestões são sempre bem-vindas. A ideia foi essa mesma, abrir a issue e ver o que a galera acha e, se houver designers de verdade (eu também não sou) no grupo, enviar novas sugestões além da minha.

Tamo junto! ❤️

[theandersonn]

@kvnol Cara, show a iniciativa!
Eu gostei da tipografia, senti falta de um elemento que faça equilíbrio visual como os losangos atuais.
Mas tbm não tenho skill de designer, então não consigo fazer uma avaliação mais precisa.

Olhando o tom rosado, senti uma inspiração no que foi apresentado como identidade visual do Front in BH... ou nada a ver?! kkk

Vamos evoluir essa issue, parabéns pela iniciativa.

[kvnol]

@theandersonn valeu, hahaha. Então, eu curti muito o visual do Front in BH, mas nem cheguei a usar eles como inspiração.

Vamos evoluir essa issue sim! 😄

[diogomoretti]

Parabéns @kvnol 👏

Achei legal a iniciativa e a ideia do gradiente é legal, porém eu particularmente achei ela meio simples e sem nenhuma relação com BR.

Poderíamos fazer uma espécie de contest e votarmos na melhor logo. O que acham @frontendbr/admins?

[kvnol]

@diogomoretti Sim! Acho a ideia do contest massa.

[dionarodrigues]

@kvnol Compartilhando do comentário do @diogomoretti , parabéns pela iniciativa.

Sei que pode parecer um pouco clichê, mas tb penso ser importante fazer uma relação com as cores da bandeira brasileira, uma vez que a ideia é ter esse link entre a comunidade e o Brasil. Às vezes, nem precisa usar todas as cores, mas ter essa relação pode ser vantajosa.

Essa releitura do logo lembra bastante o que foi feito na nova identidade do Front in Sampa, confira lá depois: http://www.frontinsampa.com.br/ Nele também foi aplicado bastante minimalismo, além de formas geométricas... Achei interessante!

=D

[kvnol]

A nova identidade do Front in Sampa é linda. Vou pensar e rabiscar outras ideias para a identidade do frontendbr e vou postando aqui na issue.

[kvnol]

E aí, galera? Com base na opinião de vocês, refiz a proposta sobre a nova identidade do Frontend Brasil.

Vou explicar o conceito:

1. A base foi a bandeira do Brasil sendo criada em CSS e aberta no IE6, quebrada. Sem circulos ou formas complexas;
2. O que seria o círculo azul virou um terminal (para quem não sabe, é a tela preta que nós, programadores, utilizamos);
3. O "Frontend" está para fora do quadrado por conta de um bug no overflow da página (quando o conteúdo fica maior do que a resolução);

ps: Na minha cabeça, eu já desconsidero a primeira versão. Essa tem muito mais personalidade e traz a "brasileiridade" sugerida, hahaha.

[ricardogouveia3]

Adorei sua idéia @kvnol , mas pensei o seguinte: o verde tem bastante destaque, faz sentido, só que ele tá meio que fora do logo. Meio que ele é o fundo. Como eu sou adepto de fundos monocromáticos, acho que seria legal ele ter seu próprio elemento, menor, mas bem significativo e centralizado.

Essa é minha sugestão (eu gostei tanto das cores que copiei). Com bem menos base em CSS, eu só peguei as formas geométricas (valeu por lembrar @diogorodrigues ) e desmontei em forma de um layout básico.

Amo feedbacks, podem mandar <3

[kvnol]

Massa, @ricardogouveia3. É isso que queria ver na issue. Então, mano, esse fundo verde no que montei seria o palco. Porque aplicado em outros lugares (site, #21, e tal), ficaria assim:

[ricardogouveia3]

Gostei da idéia do clip-path @kvnol . Eu usei no site do meetup daqui (http://devinsanta.github.io/), não tem como errar com foto de fundo, sempre fica foda.

Voltando pro logo, acho que nessa aplicação tem algumas coisas que eu chamaria atenção:

• As barras no quadrado azul vão se perder em telas pequenas. Isso aí acho que não tem muito o que fazer.

• O verde na fonte fica legal, mas com amarelo de fundo ele força a vista. Se vc colocar o escurecimento na foto mais verde, você poderia colocar tudo branco. As cores em si não são um problema, estão com tons bem flat.

Vou fazer uma sugestão de layout ainda hoje pra postar.

[kvnol]

@ricardogouveia3 sim! clip-path é coisa linda ❤️ e o site do devinsanta ficou TOPPER 🤙

Sobre os pontos, vamos lá:

• Sobre as barras é verdade e concordo, posso considerar até em aumentar um pouco a altura e o "line-height" delas, para ficar mais visível em escalas menores.
• Sobre forçar a vista no verde com o amarelo de fundo, não sei se concordo, porque aplicado num layout total (esse do exemplo não é o final e está longe de ser) ele é um elemento visual separado dos outros e permite ter um contraste mais forte.
  ps: eu pensei em colocar o amarelo (do fundo) como verde e o verde (da fonte) como amarelo, mas não ficaria legal pensando que o azul ficaria diretamente sob o verde.

[ricardogouveia3]

@kvnol acho que se vc aumentar a line-height delas, pode ocorrer duas coisas numa diminuição grande: ou vc vai perder muito espaço do quadrado, ou a divisão delas vai ficar muito pequena e elas viram um elemento só (e pensando bem, não fica ruim esse ultimo).

Essa coisa de forçar a vista tem a teoria e o pessoal, e eu usei só o pessoal aqui pq eu nunca decoro essas coisas. Eu entendi que isso não é ruim de se fazer em logos, mas se usarmos por exemplo o tom de verde atual do FrontendBR (#056839) em vez do que capturei na logo (#16A542) acho que fica mais confortável.

[kvnol]

@ricardogouveia3 Sim, sobre a line-height vou ter que testar pra ver se vai ser uma mudança boa ou não.

mas se usarmos por exemplo o tom de verde atual do FrontendBR (#056839) em vez do que capturei na logo (#16A542) acho que fica mais confortável

Sim! Nem cheguei a testar com as cores atuais. Erro meu.

[kvnol]

@ricardogouveia3 e pessoal que está acompanhando a issue:

Testei essa nova proposta com as cores (exatas) atuais e não gostei muito do resultado, não deram um contraste muito legal. Com os elementos separados (como é o atual, com as bandeirinhas) as cores ficam legais, mas quando os elementos entram em contato (sobrepostos) a combinação não fica interessante.

Mas com base nas cores da identidade atual, fiz um ajuste na da nova proposta ficando assim:

[felipefialho]

Galera, só para avisar, a última semana foi insana (estava fazendo Design Sprint), mas estou acompanhando a evolução de vocês.

[felipebernardes]

caraca, tá muito bonito! keep going folks! parabéns pela iniciativa :D

[ghost]

Pessoal, apostaria mais na proposta do @ricardogouveia3 mas em outras cores, sem preto. A ideia de desmontar as formas e tirar um tanto do verde é ótima, considerando as outras propostas todas, devíamos dar mais atenção a essa :)

Todas as opções que vi do @kvnol possuem alguns aspectos problemáticos que podem ser retrabalhados, vou citar alguns, talvez ajude:

• alta complexidade: o logo pode ser mais simples, considerando que vai ser exibido em tamanhos pequenos. 5 barras brancas pode ser muito pra um espaço pequeno.
• falta espaço branco: os elementos estão com espaçamentos muito pequenos entre eles (reparar na margem entre o bloco azul e a beirada do amarelo) ou mesmo espaçamentos estranhos, como o L sobrando pra fora do quadrado.
• o lettering pode dar muitos problemas de leitura dependendo do background aplicado, principalmente por "vazar" pra fora de um fundo obrigatoriamente sólido e de cor definida
• animações: logos não podem depender de animações pra serem compreendidos... É muito bom animar, mas pensa primeiro no impresso. Essa versão do logo, impressa, não passa uma mensagem clara.

Se fosse considerar todos esses apontamentos, o logo seria completamente diferente acredito. Você chegou a riscar mais opções dele @kvnol? Qualquer coisa me manda um inbox no Facebook, tento ajudar :)

[estudio86]

Pessoal, boa noite.
É possível enviar outras ideias tbm? Ou, a ideia é apenas escolher entre as duas (ou três) opções que citaram aqui? Trabalhamos com ID tbm e gostaria de enviar algumas ideias tbm.

[ricardogouveia3]

@estudio86 fique a vontade para enviar sua sugestão, qualquer pessoa que queira contribuir é bem vinda.

[ricardogouveia3]

@brokenfans que cores você sugere? o preto não faz parte da minha proposta, ele só sugere que o background seja escuro (por exemplo, uma foto com um efeito sobreposto escuro, como o layout do @kvnol ). Realmente, é problemático em backgrounds claros, e eu ainda não resolvi isso. Aceito sugestões.

[lazaroalvarenga]

Bom dia galera, achei a ideia e o debate super interessantes! Aí resolvi fazer uma sugestão em cima da peça do @kvnol e alguns pontos que achei relevantes que são:

• Trocar a cor principal para o Verde em vez do amarelo. Pensando nas aplicações em fundo branco como badges, papéis e por aí vai. O verde trabalha melhor no contraste com o branco, acredito eu.
• a ideia da linha quebrando no overflow eu entendi mas acho que não seja algo que uma comunidade brasileira de front-end deveria ter orgulho em mostrar rsrsrs então eu acabei trocando, botando o "end" como um elemento ao lado.

Mas não é pq tenha feito a sugestão que acho que tá ótimo, ainda tem uma coisa que sinto falta, o hífen do "front-end"

[kvnol]

@brokenfans cara, primeiramente, acho que a gente já se conhece. Seu username não é estranho para mim, hahahaha.

Segundo que seus pontos são ótimos e ajudam sim, vamos lá:

alta complexidade: o logo pode ser mais simples, considerando que vai ser exibido em tamanhos pequenos. 5 barras brancas pode ser muito pra um espaço pequeno.

Concordo e talvez, como a ideia @lazaroalvarenga, poderíamos diminuir para 3 linhas e até aumentar a altura delas (deixando-as mais grossas)

falta espaço branco: os elementos estão com espaçamentos muito pequenos entre eles (reparar na margem entre o bloco azul e a beirada do amarelo) ou mesmo espaçamentos estranhos, como o L sobrando pra fora do quadrado.

Sim, a margem interna é algo que estava reparando ontem e fazendo alguns ajustes sem jogar os elementos muito para o centro ou ter que aumentar o bloco amarelo. O "L" para fora do quadrado segue aquela base do "overflow" citado, mas creio que isso pode trazer problemas com as aplicações.

o lettering pode dar muitos problemas de leitura dependendo do background aplicado, principalmente por "vazar" pra fora de um fundo obrigatoriamente sólido e de cor definida

Sim, concordo totalmente. Repensarei.

animações: logos não podem depender de animações pra serem compreendidos... É muito bom animar, mas pensa primeiro no impresso. Essa versão do logo, impressa, não passa uma mensagem clara.

Quando criei ele seria com intuito de animar o "terminal", como se estivesse sendo digitado mesmo. Mas não creio que impresso ele não fosse compreendido.

Se fosse considerar todos esses apontamentos, o logo seria completamente diferente acredito. Você chegou a riscar mais opções dele @kvnol?

Sim, considerando tudo ele mudaria quase que totalmente. Eu farei alguns ajustes e mandarei aqui novamente. 😃

[kvnol]

@lazaroalvarenga primeiramente obrigado pela sugestão, gostei bastante. Só alguns pontos:

1. Você desconsiderou o azul na construção da paleta por quais motivos?
2. Talvez nessa versão, como você desconsiderou a referência ao overflow, o "front-end" poderia ficar junto, com hífen, dentro do caixa no mesmo tamanho do "Brasil". O que acha?

[kvnol]

@estudio86 como o @ricardogouveia3 disse, fique a vontade para mandar sugestões.

[khaosdoctor]

Eu curti bastante essa da do @matheusmonteiro

[CaiqueCardoso19]

Gostei bastante do modelo do @matheusmonteiro ficou show de bola !

[dionarodrigues]

Vejam que legal essa lista de eventos: https://frontendfront.com/conferences/

Talvez possa surgir alguma inspiração através dos logos deles. :)

[kvnol]

Com base nas dicas para construção da proposta que coloquei aqui na issue, fiz uma nova proposta (além da primeira) que segue uma linha mais minimalista, mas com um conceito forte em HTML, CSS e JavaScript:

Creio que o conceito é auto-explicativo, mas:

1. Os colchetes (em verde) fazem o papel do Array, referênciando o JavaScript;
2. O "menor que" e "maior que" (em amarelo) fazem o papel da tag, referênciando o HTML;
3. O círculo (em azul) faz o papel da classe, referênciando o CSS.

[allysonsouza]

Fala galera, vim aqui dar meus dois dedos de prosa.

Achei essa proposta do @kvnol muito boa: #20 (comment)

Acredito que a referência ao Brasil na proposta vai além da obviedade das cores e faz referência ao início do Design brasileiro, remetendo a logos de mestres como Wollner e Aloísio Magalhães. (Um post que achei para ilustrar: Design Gráfico Brasileiro, anos 50 e 60, além das boas sacadas de referência ao terminal/construção de F (que fica um símbolo que pode ser trabalhado para ficar bem identificável sozinho), e a quebra do "END" pra fora da forma atua como o hífen das outras propostas (e não exclui a grafia frontend que também é aceita)

Eu sugeriria investir nessa ideia, algumas observações:

• Trabalhar mais detalhadamente sua construção geométrica
• Ajuste no kerning do "RA"
• Testaria mais combinações de cores (Eu evitaria esse contraste bandeira do Brasil mesmo, em fundo verde, acho que a forma ganha mais destaque com aplicação solta mesmo)

Quanto à utilização de caracteres como colchetes, chaves, parênteses, acho que poluem a marca, eles já são signos por si só e carregam seus significados. É isso, parabéns pela aula de design gráfico colaborativo por aqui! 👍

[dionarodrigues]

Essa sua última proposta ficou bem criativa heim @kvnol . Show! Penso ser esse o caminho.

[kvnol]

@diogorodrigues Valeu, mano. Eu ainda curto mais a primeira proposta, mas essa veio de um estalo na análise da bandeira e referências às partes do front-end.

[kvnol]

@allysonsouza Cara, que análise maravilhosa. Primeiramente falar sobre a segunda proposta (com caracteres e tal), eu também vejo que elas já possuem um significado (matemático, no caso desses símbolos) e que pode poluir, mas foi uma ideia.

Sobre a primeira proposta, concordo totalmente com seus pontos (sobre o "END" não precisa de um hífen, etc), farei os ajustes geométricos, de kerning e a aplicação em mais fundos. E fico lisonjeado com a referência aos mestres do design gráfico nacional.

Terminando os ajustes, posto aqui. 😀

[dulcetti]

@kvnol cara, gostei MUITO dessa segunda... Por mim é essa, sem o corte no melhor do ponto.

[kvnol]

@dulcetti valeu, mano, ainda vou fazer alguns ajustes de alinhamento nela. E, como disse, ainda curto mais a primeira proposta. 😆

[ricardogouveia3]

Fiz mais uma alternativa. Usei a idéia do @matheusmonteiro representar trechos de código, e tentei construir a bandeira com esses elementos, alterando as cores da minha proposta anterior pra não cegar ninguém de contraste (ficava mais aparente nesse modelo). Mantive a tipografia, mas aumentei os espaçamentos. Ainda acho meio a-lá-marca-de-pneu, talvez aumentando o espaçamento essa impressão diminua.

Esse conceito de usar trechos de código me lembra muito o site do FrontInSampa. Eu estava evitando usar porque queria manter separadas as identidades visuais de cada um, mas acho que preciso das opiniões de vocês nisso também.

[khaosdoctor]

Dessa eu curti também

[kvnol]

@ricardogouveia3 mano, gostei bastante dessa ideia. Só uma sugestão: e se talvez a fonte fosse com algo parecido com a "Helvetica Rounded"? Para combinar com as bordas arredondadas do símbolo.

E outra coisa, seria legal fazer um ajuste no espaçamento entre as letras (kerning).

[gabsprates]

Essa ficou massa mesmo! Bem legal!

[felipefialho]

@kvnol Gostei bastante desse seu último.

@ricardogouveia3 Gostei muito desse seu também.

Estão indo muito bem 🎸

[dougjuliao]

@ricardogouveia3 ficou muito louca essa versão, será que com uma fonte no estilo do @matheusmonteiro não ficaria melhor?
Tipo juntar as duas ideias, acho que ficaria muito massa.
@kvnol e sua ultima versão também curti bastante, com essa bandeira :)

[eduardojmatos]

Caramba, quanta proposta bacana! Felizão aqui :) :) :) :)

[kvnol]

@matheusmonteiro, @ricardogouveia3, @lazaroalvarenga a proposta final de vocês seriam essas mesmo? Sem mais nenhum ajuste pontual que o pessoal citou?

E não vamos ter mais nenhuma proposta do resto da galera? Queria ver mais coisas 😢

[kvnol]

Sobre a proposta do @matheusmonteiro eu penso como o @dulcetti:

@matheusmonteiro achei interessante a ideia, só achei meio sem respiro, pareceu um pouco rastro de pneu, talvez a logo pequena, numa versão mobile, possa ficar estranho.

É bonito, mas não tem o peso necessário para a marca, não vejo uma boa aplicação em escalas menores e o conceito é fraco, me dá impressão de banco de imagens.

[didiraja]

Caraca galera, umas ideias iradas. O foda de mexer com front-end é que a bagagem de design não fica esquecida hahaha

@kvnol parabéns pela iniciativa

Pensei numa sugestão que nada mais é um remix das melhores sugestões que vi aqui. @matheusmonteiro qual fonte você usou no texto laranja front-end brasil ?

[kvnol]

@didiraja: O foda de mexer com front-end é que a bagagem de design não fica esquecida hahaha

Exato! Por isso eu amo isso, ficamos no meio-termo, é lindo. ❤️

[kvnol]

Galera, outra coisa. Vamos decidir a nova identidade até o fim da semana que vem? Como ninguém se pronunciou mais, vou fazer uns ajustes nas minhas propostas, deem nas de vocês também, com os pontos aqui abordados.

E segunda-feira (07/08/2017) vou abrir a issue, com as propostas aqui dadas, para votação. Com uma proposta por comentário, o mais votado será definido e o autor nos ajudará a montar as diferentes aplicações e a aplicação no site, em breve.

[didiraja]

Fiz um remix do @kvnol e do @matheusmonteiro, que pra mim traduz prefeitamente a ideia do projeto haha

[ricardogouveia3]

@kvnol vou tentar aplicar as sugestões amanhã, não estou com muito tempo disponível...
se eu não postar, pode considerar a ultima como final e levar pra votação.

[kvnol]

@didiraja manjei o que você quis passar, mas em termos estéticos as cores não encaixam muito bem e a tipografia não combina com o símbolo. Você gostaria de fazer outra versão antes da votação?

[kvnol]

Pessoal, a votação foi aberta na issue #24. ❤️

[kvnol]

Para deixar avisado a todos, a nova identidade do fórum foi publicada: https://github.com/frontendbr/brand