Design: Logotipo da WebAssembly

Essa é uma metáfora legal. Sempre gostei do logotipo Borland C ++, que
pareciam blocos de construção sendo colocados juntos. "Montagem" também pode ter
essa conotação também.

Na quarta-feira, 3 de junho de 2015 às 22h34, JF Bastien [email protected]
escreveu:

@sunfishcode https://github.com/sunfishcode criou um logotipo rápido para
Montagem da Web:
[imagem: imagem]
https://cloud.githubusercontent.com/assets/298127/7970689/95aefe64-09f4-11e5-87c8-b67d25f46901.png
Tem boas ideias:

• Setas se juntando para representar "montar".
• As setas se juntando também podem representar a compilação de outras linguagens
  para a web.

Seria bom ter algo mais chique / web-y / designer-y, e
mantenha-o neutro para que pertença à web e não a um dos fornecedores de navegador.

Petr Hosek, da minha equipe, propôs usar os ícones de classe de tecnologia HTML5
http://www.w3.org/html/logo/ e veio com o seguinte:
[imagem: imagem]
https://cloud.githubusercontent.com/assets/298127/7970659/70880d2e-09f4-11e5-9c7b-c2134ee7f483.png

_Qualquer outra sugestão? _

@lukewagner https://github.com/lukewagner disse:

Minha própria crítica seria que a assimetria das flechas me incomodava
um pouco. A assimetria pode ser visualmente boa, no entanto. Só para lançar uma ideia:
e se as setas fossem simétricas, mas houvesse 4 ligeiramente diferentes
formas abstratas nos quatro cantos: construindo na "compilação para a web"
metáfora acima, as 4 formas representariam 4 idiomas de origem diferentes
que estavam sendo compilados (através da seta) para o centro (a web).

-
Responda a este e-mail diretamente ou visualize-o no GitHub
https://github.com/WebAssembly/spec/issues/112.

@BrendanEich também mencionou que gosta de super-heróis

Sim, minha nit à parte, no geral eu gosto de setas apontando juntas. Os blocos de construção são uma ideia interessante; Eu estaria interessado se alguém tivesse um conceito que correspondesse ao estilo de ícone da classe de tecnologia HTML5.

Petr Hosek originalmente veio com o seguinte:

@davidsehr apontou uma falha horrível naquele logotipo . Eu gosto das setas, mas devemos evitar criar inadvertidamente logotipos historicamente insensíveis!

A ideia do ícone da classe de tecnologia HTML5 ainda é boa, no entanto!

Conversei com algumas pessoas aqui, e elas sugerem que adiemos ter qualquer logotipo até o primeiro lançamento. Isso vai permitir que nos concentremos na tecnologia, e vamos dar um tempo para realmente criar um logotipo que é bem pensado e não tem significados inadvertidos!

@lukewagner Bem, é a versão 1.0 (algumas vezes) e sua abreviatura é WASM. Além disso, o verde não é usado até agora pelos ícones típicos da tecnologia HTML5 AFAIK.

EDITAR: Licenciado sob (CC BY 3.0) e baseado no logotipo HTML 5

EDITAR: Fornecerei uma versão SVG com menos erros de pixel quando eu tiver tempo: p.

EDIT: SVG para a versão verde e roxa .

@Teemperor , não podemos aceitar um logotipo sem que você faça parte do grupo da comunidade W3C e com a devida atribuição de direitos autorais. Também é muito cedo para obter um logotipo por enquanto :)

@jfbastien Já estou na comunidade W3C . O logotipo deve ser licenciado sob a licença CC original do logotipo HTML5 porque é obviamente apenas o logotipo HTML 5 remixado.

Outro desenho com base nas setas que apontam em conjunto (para W eb Um ssembly):

Licenciado sob (CC BY 3.0) , criado por Raphael Isemann.

E acho que um logotipo que será alterado posteriormente é melhor do que nenhum logotipo :)

Aqui estão minhas fotos de 3 minutos.

: +1:

E o WA Zigzag

@Namozag eu gosto!

(parece que os anexos não funcionam por e-mail ...)
(Alguns rápidos e sujos)

Uma brincadeira com a ideia do zigue-zague:

Brincando com o espaço negativo:

-Fred

Em 23 de junho de 2015, às 13:27, Andrey [email protected] escreveu:

@Namozag https://github.com/Namozag Eu gosto!

-
Responda a este e-mail diretamente ou visualize-o no GitHub https://github.com/WebAssembly/design/issues/112#issuecomment -114450578.

@fstark não pode vê-los.

Parece que você não pode anexar imagens por e-mail, então as adicionei ao comentário original. Eles aparecem embutidos?

não

Deixe-me tentar novamente com uma resolução menor.

Imagem 1 (variação em ziguezague)

Imagem 2 (espaço negativo)

Acho que pode ser confuso usar um logotipo WA, porque Whatsapp também é abreviado como WA.

Trabalho realmente criativo de todos aqui. Chegue a um acordo sobre como evitar a sobreposição do WhatsApp; também o \ / \ / de "Clueless" para "whatEVER" ;-).

/ser

Eu realmente não entendo a preocupação com o Whatsapp, já que seu logotipo é assim .

Além disso, o nome completo é WebAssembly, não wasm nem wa, então não tenho certeza de onde viria a confusão. Não é como se as pessoas começassem a usar wa como nome. São apenas alguns rabiscos aleatórios em um logotipo. Reutilizar a ideia de escudo de @Teemperor (talvez não verde, para evitar conotações WA) com alguns rabiscos poderia dar ao WebAssembly uma aparência reconhecível diretamente conectado ao HTML5. Mmm. Pode tentar isso mais tarde.

Talvez seja uma coisa regional, mas eu não associo o logotipo de
Além disso, como descobri que o escudo verde é para PHP (e o WhatsApp também é verde, como disse @fstark ), recolori para roxo (e

Eu concordo que você deve adiar um logotipo. Na verdade, não estou convencido de que ele precise ter um.

No entanto, gosto de pensar em logotipos e gosto de alguns dos designs que vi aqui. Se houver um logotipo, acho que deveria usar o nome completo (WebAssembly) ou a versão abreviada (wasm). Neste último, sugiro distinguir visualmente o w do asm. Além disso, é sugerido fazer referência ao aspecto da linguagem assembly de alguma forma.

Espantado com todas as ideias de logo, variação de @Namozag

Parece que prefiro qualquer coisa com 'wasm' ou 'asm' como texto.

Oh, legal, (não) um concurso de logo! E já algumas ótimas ideias! Bem, esta é minha opinião sobre um logotipo (tentando incorporar um monte de ideias anteriores):

• Um pouco como o logotipo de semântica HTML5 "Dando significado à estrutura", mas de cabeça para baixo, ainda "permitindo uma web mais útil e orientada por dados para programas e usuários".
• Dados um pouco compactos e fluindo
• Um pouco plugável
• Uma pilha de bits
• Um pouco "W", "A", "S", "M"
• Sombreamento opcional e, claro, _verde_

Felicidades!

@dcodeIO parece ótimo!

@fstark Image 2 ,, Cheers !!

@dcodeIO : legal!

Talvez algo assim;)

Gosto muito do preto / verde do @dcodeIO!

Eu gosto do preto e verde. Felicidades!

El mié., 1 de julho. de 2015 a la (s) 10:10 am, Jan-Oliver Opdenhövel <
notificaçõ[email protected]> escribió:

Eu gosto muito do preto / verde de @dcodeIO https://github.com/dcodeIO
!

-
Responda a este e-mail diretamente ou visualize-o no GitHub
https://github.com/WebAssembly/design/issues/112#issuecomment -117662363.

Meu sub

este é duplicado para o meu último sub

Devemos fazer uma enquete para decidir qual é o melhor logotipo para o projeto?

Você já havia se falado sobre o logo do WebAssembly há muito tempo, acho que é hora de acabar.

Enviado via iPhone

在 2015 年 7 月 16 日 ， 22: 36 ， Thomas [email protected]写道 ：

Devemos fazer uma enquete para decidir qual é o melhor logotipo para o projeto?

-
Responda a este e-mail diretamente ou visualize-o no GitHub.

Não tentei nada em um software gráfico, mas enquanto esperava as compilações, tive as seguintes idéias:

• O do centro é uma sobreposição vertical do W (web) e do A (montagem), e me lembra muito o emoticon de uma pessoa levantando as mãos para o céu assim: \o/
• O da direita é igual ao do centro, embora também colapse bem o W (teia) e o A (montagem).
• O da esquerda é igual ao do centro, mas também tem as 4 cabeças flutuantes acima do triângulo central, que supostamente lembram o logotipo temporário original e as mesmas ideias.

Se alguém estivesse disposto a expandir essas idéias e fazer logotipos reais a partir dessas imagens de esboço, isso seria ótimo!

Eu amo o preto / verde @dcodeIO

Sobre o assunto da votação, e para ajudar a definir as expectativas neste tópico: ainda não temos um processo escolhido para escolher um logotipo e seja qual for esse processo, acho que vai acontecer mais perto do lançamento do WebAssembly (especificações e implementações) . Dito isso, gostei da torrente de ideias aqui e não quero dizer a ninguém para parar, apenas que não há pressa ou decisão iminente.

Quanto mais melhor! Concordo com @lukewagner : vamos apenas

Nunca vou desistir de encontrar o melhor logo!

Não sou designer, mas fiz alguns rabiscos e achei melhor compartilhá-los.

Eles são muito grosseiros (alinhamentos / proporções / fonte errados), mas a idéia geral deve aparecer.

Deixe-me tentar :)

@dcodeIO image 2 parece ótimo!

@dcodeIO é legal !!

+1 para @dcodeIO

+1 para o logotipo @dcodeIO Black and Green

+1 para @dcodeIO preto e verde

Realmente parecido com o primeiro de Raphael

Isso é algo que fiz enquanto brincava com o Krita. Embora o design esteja flutuando na minha cabeça por vários meses:

Aqui está um experimento dos anos 80 que fiz enquanto brincava com efeitos:

Olá a todos,
Queria apenas adicionar esta contribuição ao projeto, por favor use como quiser.

Obrigado

Os logotipos HTML5 / CSS / JS atuais são feios e antigos (como essas tecnologias também, lol). Pegue aquele logotipo vetorial - simples, limpo, poderoso e voador - e faça com ele o que quiser.

wa_logo.zip

Eu amo o trabalho do @Fogaccio

Gosto do logotipo do @Fogaccio .

Os trabalhos de @Fogaccio e @jjmiyao são legais!

Texto WASM inspirado e graças a Erik Demaine http://erikdemaine.org/fonts/hinged/
Observe que W e M são simétricos. (Assim como alguns outros personagens, o que torna mais divertido.)
Usado / sugerido para F # UN FSharp Experimental Incubator Project FSTWASM FSharp To WASM.
Cada letra e número nesta fonte podem ser dobrados a partir de uma corrente universal articulada de peças, especificamente 128 triângulos isósceles retos articulados em seus cantos agudos. Em particular, cada personagem tem exatamente a mesma área. Além disso, a corrente pode dobrar em um quadrado, representado por um ponto. Veja nosso artigo “Dissecção articulada do alfabeto”, Journal of Recreational Mathematics, 31 (3): 204–207, 2003.

Sou fã do logo do

+1 logotipo da @Fogaccio , tem belas versões de arte ASCII.

\ \ \  /\
 \/\/\   \

\ \ \   /\
 \ \ \    \
  \/\/\    \

\ \ \    /\
 \ \ \  /  \
  \ \ \     \
   \/\/\     \

...

@Fogacci , você tem .svg , .ai versão do logotipo?

@mbebenita sim .. =]

Mas preciso preparar os arquivos para entrega, vou fazer isso o mais rápido possível

@Fogaccio Algum progresso nisso?

@kenchris Estou trabalhando na produção de ativos.

@Fogaccio amigável ping

Olá, @kenchris e @mbebenita , estou perto de terminar os ativos .svg e .ai, acho que farei isso na sexta-feira.

Símbolo de tag HTML + AST.

Olá pessoal,
Só para avisar que aqui (https://github.com/Fogaccio/OpenDesign/tree/master/webassembly_identity) estão os arquivos da proposta de marca que enviei antes. Espero que esses recursos possam ajudá-lo da melhor maneira. Sinta-se à vontade para compartilhar pensamentos e sugestões.

Obrigado

@Fogaccio obrigado, isso é ótimo. Estou olhando para a pequena versão favicon 16x16:

https://raw.githubusercontent.com/Fogaccio/OpenDesign/master/webassembly_identity/favicon/png/browser/favicon_16x16.ico

Você acha que isso poderia ficar um pouco mais legível? Esta versão do ícone pode ser usada em IDEs e outras ferramentas. Provavelmente precisamos de uma versão customizada de pixel art do logotipo para este tamanho. Eu ficaria feliz em fazer isso, se você ainda não tem algo em mente.

Olá @mbebenita , tentei fazer pixel art para .ico, mas não tive sucesso, fique à vontade para me ajudar a fazer isso =]

Ficarei muito grato pela sua ajuda

@Fogaccio usando menos tons de cor (e cores mais nítidas - portanto, mais contrato com fundo / transparente / branco) provavelmente faria com que parecesse mais nítido

É meio difícil embora com apenas tamanho 16x16 :) É necessário escolher cuidadosamente os tons

Aqui está mais um. É um objeto sólido que consiste em um "W" em cima de um "A" que fornece um logotipo 2D pixelizado da velha escola muito simplista de uma visão e um logotipo 3D de outra visão. Aqui está um GIF animado:

O objeto sólido é criado programaticamente usando o seguinte código em openscad

module LetterW(thickness=5,height=20,width=20,col="Chartreuse")
{
    color(col) {
        union() {
            cube([thickness,thickness,height],false);
            cube([thickness,width,thickness],false);
            translate(v=[width,width-thickness,0])rotate([0,0,90]) union() {
                    cube([thickness,thickness,height],false);
                    cube([thickness,width,thickness],false);
            }
            translate(v=[-1.5*thickness,1.5*thickness,0]) cube([thickness,thickness,height-1.0*thickness]);
            //translate(v=[-1.5*thickness,1.5*thickness,0]) cube([2.5*thickness,thickness,thickness]);
            rotate([0,0,45]) cube([thickness/sqrt(2),sqrt(2)*1.5*thickness,thickness]);
        }
    }

}

module LetterA(thickness=5,height=20,width=20,col="Chartreuse")
{
    offset=-2*thickness;
    color(col) {
        union() {
            translate(v=[0,0,-height]) cube([thickness,thickness,height],false);
            translate(v=[width-thickness,width-thickness,-height]) cube([thickness,thickness,height],false);
            /*
            translate(v=[0,0,offset]) cube([width,thickness,thickness],false);
            translate(v=[width-thickness,0,offset]) cube([thickness,width,thickness],false);
            */
            translate(v=[thickness,0,offset])rotate([0,0,45]) cube([sqrt(2)*(width-thickness),thickness/sqrt(2),thickness]);
        }
    }
}

thickness=5;
height=20;
width=20;
scale=1.0;
$vpr = [0,0,90];

LetterW(scale*thickness,scale*height,scale*width);
LetterA(scale*thickness,scale*height-0.5*thickness,scale*width);

$t = 0.0;
//$vpr = [0, 0, 90];
//$vpr = [$t*90, 0, 90];
$vpr = [90, 0, 90];
$vpr = [90-$t*25, 0, 90-$t*45];

Esta é a visão 2d:

e aqui está a visualização em 3D:

Posso produzir variações e desenvolver conjuntos de ativos quando necessário.

Joguei com uma cruzeta dobrada mais simétrica para o A:

mas eu pessoalmente prefiro o braço cruzado reto porque o A é mais óbvio.

@ h00gs interessante, você quase tem uma coisa de MC Escher acontecendo, eu gosto.

Achei que uma chave inglesa pudesse comunicar a montagem e pudesse ser construída a partir de formas semelhantes a WA.

@rfernbach de alguma forma, seu design parece um viking para mim:

... precisamos de um mascote? :)

Olá @mbebenita. Como está o desafio de fazer o favicon em pixel art? ... =]

Portanto, meus esforços iniciais não estavam corretos, então perseverei e descobri que uma barra transversal curva para o A parece boa. Aqui está uma animação: