Design: Logo WebAssembly

C'est une belle métaphore. FWIW J'ai toujours aimé le logo Borland C++, qui
ressemblait à des blocs de construction assemblés. « Assemblage » peut également avoir
cette connotation aussi.

Le mer. 3 juin 2015 à 22:34, JF Bastien [email protected]
a écrit:

@sunfishcode https://github.com/sunfishcode a piraté un logo rapide pour
Assemblage Web :
[image : image]
https://cloud.githubusercontent.com/assets/298127/7970689/95aefe64-09f4-11e5-87c8-b67d25f46901.png
Il a de belles idées :

• Flèches s'assemblant pour représenter "assembler".
• Les flèches qui se rejoignent peuvent également représenter la compilation d'autres langues
  au web.

Ce serait bien d'avoir quelque chose de plus sophistiqué / web-y / designer-y, et
gardez-le neutre afin qu'il appartienne au Web et non à l'un des fournisseurs de navigateurs.

Petr Hosek de mon équipe a proposé d'utiliser les icônes de classe de technologie HTML5
http://www.w3.org/html/logo/ , et a proposé ce qui suit :
[image : image]
https://cloud.githubusercontent.com/assets/298127/7970659/70880d2e-09f4-11e5-9c7b-c2134ee7f483.png

_D'autres suggestions?_

@lukewagner https://github.com/lukewagner a dit :

Mon problème personnel serait que l'asymétrie des flèches me dérange
un peu. Cependant, l'asymétrie peut être visuellement agréable. Juste pour lancer une idée :
et si les flèches étaient symétriques mais qu'il y en avait 4 légèrement différentes
formes abstraites aux quatre coins : s'appuyer sur le "compiler vers le web"
métaphore ci-dessus, les 4 formes représenteraient 4 langues sources différentes
qui étaient en cours de compilation (via la flèche) vers le centre (le web).

-
Répondez directement à cet e-mail ou consultez-le sur GitHub
https://github.com/WebAssembly/spec/issues/112.

@BrendanEich a également mentionné qu'il aimait l'ambiance d'assemblage des super-héros, à la manière des Avengers.

Oui, mon nit mis à part, j'aime globalement les flèches qui pointent ensemble. Les blocs de construction sont une idée intéressante; Je serais intéressé si quelqu'un avait un concept qui correspond au style d'icône de classe de technologie HTML5.

Petr Hosek a initialement proposé ce qui suit :

@davidsehr a signalé un horrible défaut dans ce logo . J'aime les flèches, mais nous devons absolument éviter de créer par inadvertance des logos historiquement insensibles !

L'idée de l'icône de classe de technologie HTML5 est toujours bonne, cependant !

J'ai parlé à certaines personnes ici, et elles suggèrent que nous n'ayons aucun logo jusqu'au premier lancement. Cela nous permettra de nous concentrer sur la technologie à la place, et de prendre le temps de créer un logo qui est réfléchi et n'a pas de signification par inadvertance !

@lukewagner Eh bien, c'est la version 1.0 (quelquefois) et son abréviation est WASM. De plus, le vert n'est pas utilisé jusqu'à présent par les icônes de la technologie HTML5 typiques AFAIK.

EDIT : sous licence (CC BY 3.0) et basé sur le logo HTML 5

EDIT : fournira une version SVG avec moins d'erreurs de pixels quand j'aurai le temps :p.

EDIT : SVG pour la version verte et violette .

@Teemperor, nous ne pouvons pas accepter un logo sans que vous fassiez partie du groupe communautaire W3C et avec une attribution appropriée des droits d'auteur. Il est également trop tôt pour obtenir un logo pour l'instant :)

@jfbastien Je suis déjà dans la communauté W3C . Le logo doit être sous licence CC d'origine du logo HTML5 car il ne s'agit évidemment que du logo HTML 5 remixé.

Une autre conception basée sur les flèches pointant ensemble (W eb A ssembly):

Sous licence (CC BY 3.0) , créé par Raphael Isemann.

Et je pense qu'un logo qui sera changé plus tard vaut mieux que pas de logo du tout :)

Voici mes photos de 3 minutes.

:+1:

Qu'en est-il du WA Zigzag

@Namozag j'aime ça !

(on dirait que les pièces jointes ne fonctionnent pas par e-mail...)
(Couple de rapide et sale)

Un jeu sur l'idée du zigzag :

Jouer avec l'espace négatif :

—fred

Le 23 juin 2015, à 13h27, Andrey [email protected] a écrit :

@Namozag https://github.com/Namozag J'aime ça !

-
Répondez directement à cet e-mail ou consultez-le sur GitHub https://github.com/WebAssembly/design/issues/112#issuecomment -114450578.

@fstark ne peut pas les voir.

On dirait que vous ne pouvez pas joindre d'images par e-mail, je les ai donc ajoutées au commentaire d'origine. Apparaissent-ils en ligne ?

non

Laissez-moi réessayer avec une résolution plus petite.

Image 1 (Variation sur Zigzag)

Image 2 (Espace négatif)

Je pense qu'il peut être déroutant d'utiliser un logo WA, car Whatsapp est également abrégé en WA.

Un travail vraiment créatif de tout le monde ici. Acceptez d'éviter le chevauchement de WhatsApp ; aussi le \/\/ de "Clueless" pour "whatEVER" ;-).

/être

Je ne comprends pas vraiment le souci avec Whatsapp, car leur logo ressemble à ceci .

De plus, le nom complet est WebAssembly, pas wasm ni wa, donc je ne sais pas d'où viendrait la confusion. Ce n'est pas comme si les gens commençaient à utiliser wa comme nom. Ce ne sont que des gribouillis aléatoires sur un logo. Réutiliser l'idée de bouclier de @Teemperor (peut-être pas vert, pour éviter les connotations WA) avec quelques gribouillis pourrait donner à WebAssembly un aspect reconnaissable directement connecté à HTML5. Mmm. Peut-être essayer plus tard.

C'est peut-être une chose régionale, mais je ne relie pas du tout le logo de @fstarks à WhatsApp.
De plus, comme j'ai compris que le bouclier vert est pour PHP (et WhatsApp est également vert comme l'a dit @fstark ), je l'ai donc recoloré en violet (et corrigé les erreurs de pixels):

Je suis d'accord pour que vous reteniez un logo. En fait, je ne suis pas convaincu qu'il soit même nécessaire d'en avoir un.

Cependant, j'aime imaginer des logos et j'aime certains des designs que j'ai vus ici. S'il y a un logo, je pense qu'il devrait utiliser le nom complet (WebAssembly) ou la version abrégée (wasm). Dans ce dernier, je suggérerais de distinguer visuellement le w de l'asm. Il est également suggéré de faire référence à l'aspect du langage d'assemblage de celui-ci d'une manière ou d'une autre.

Émerveillé par toutes les idées de logo, variation de @Namozag

Il semblerait que je préfère tout ce qui contient « wasm » ou « asm » comme texte.

Oh, cool, (pas) un concours de logo ! Et déjà de belles idées ! Eh bien, voici mon point de vue sur un logo (en essayant d'incorporer un tas d'idées précédentes):

• Un peu comme le logo sémantique HTML5 « Donner un sens à la structure », mais à l'envers, « permettant toujours un Web plus utile et axé sur les données pour les programmes et vos utilisateurs ».
• Un peu compact, des données fluides
• Un peu enfichable
• Un peu pile
• Un peu "W", "A", "S", "M"
• Ombrage en option et, bien sûr, _green_

Acclamations!

@dcodeIO a l' air super !

@fstark Image 2 ,,

@dcodeIO : sympa !

Peut-être quelque chose comme ça ;)

J'aime beaucoup le noir/vert de @dcodeIO !

J'aime le noir et le vert. Acclamations!

El mié., 1er juil. de 2015 a la(s) 10h10, Jan-Oliver Opdenhövel <
[email protected]> inscription :

J'aime beaucoup le noir/vert de @dcodeIO https://github.com/dcodeIO
!

-
Répondez directement à cet e-mail ou consultez-le sur GitHub
https://github.com/WebAssembly/design/issues/112#issuecomment -117662363.

mon sous

celui-ci est en double pour mon dernier sous

Devrions-nous organiser un sondage de paille pour décider quel est le meilleur logo pour le projet ?

Vous aviez déjà parlé du logo de WebAssembly pendant longtemps, je pense qu'il est temps d'en finir.

Envoyer par iPhone

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

Devrions-nous organiser un sondage de paille pour décider quel est le meilleur logo pour le projet ?

-
Répondez directement à cet e-mail ou consultez-le sur GitHub.

Je n'ai rien essayé sur un logiciel graphique, mais en attendant les compilations, j'ai eu les idées suivantes :

• Celui du centre est une superposition verticale du W (web) et du A (assembly), et me rappelle beaucoup l'émoticône d'une personne levant les mains au ciel comme ceci : \o/
• Celui de droite est le même que celui du centre, même s'il réduit également joliment le W (web) et le A (assemblage).
• Celui de gauche est le même que celui du centre, mais il a aussi les 4 têtes flottantes au dessus du triangle central, qui sont censées rappeler le logo temporaire original et les mêmes idées.

Si quelqu'un était prêt à développer ces idées et à créer de vrais logos à partir de ces images de croquis, ce serait formidable !

J'adore le noir/vert @dcodeIO

Au sujet du vote, et pour aider à définir les attentes dans ce fil : nous n'avons pas encore de processus choisi pour choisir un logo et quel que soit ce processus, je pense que cela se produira plus près de la sortie de WebAssembly (spécifications et implémentations) . Cela étant dit, j'ai apprécié le flot d'idées ici et je ne veux dire à personne d'arrêter, juste qu'il n'y a pas de décision pressée ou imminente.

Plus on est de fous, plus on rit! Je suis d'accord avec @lukewagner : ne nous contentons d'un logo que lorsque nous nous

Je n'abandonnerai jamais pour trouver le meilleur logo !

Je ne suis pas un designer mais j'ai fait quelques griffonnages et j'ai pensé que je pourrais aussi bien les partager.

Ils sont très approximatifs (mauvais alignements/proportions/police), mais l'idée générale devrait passer.

Essayons :)

L' image 2 de

@dcodeIO c'est cool !!

+1 pour @dcodeIO

+1 Pour @dcodeIO logo noir et vert

+1 Pour @dcodeIO Noir et Vert

Vraiment comme le premier de Raphael

C'est quelque chose que j'ai fait en jouant avec Krita. Bien que le design flotte dans ma tête depuis plusieurs mois :

Voici une expérience des années 80 que j'ai faite en jouant avec des effets :

Salut à tous,
Je voulais juste ajouter cette contribution au projet, veuillez l'utiliser comme vous le souhaitez.

Merci

Les logos HTML5/CSS/JS actuels sont laids et vieux (comme ces technologies aussi, lol). Prenez ce logo vectoriel - simple, propre, puissant et sacrément volant - et faites-en tout ce que vous voulez.

wa_logo.zip

J'adore le travail de @Fogaccio

J'aime le logo de @Fogaccio .

Les travaux de @jjmiyao sont cool !

Texte WASM inspiré et grâce à Erik Demaine http://erikdemaine.org/fonts/hinged/
Notez que W et M sont symétriques. (Comme d'autres personnages, ce qui rend plus amusant.)
Utilisé/suggéré pour le projet d'incubateur expérimental F#UN FSharp FSTWASM FSharp To WASM.
Chaque lettre et chaque chiffre de cette police peuvent être pliés à partir d'une chaîne de pièces articulée universelle, en particulier 128 triangles isocèles droits articulés à leurs angles vifs. En particulier, chaque personnage a exactement la même zone. De plus, la chaîne peut se replier en un carré, représenté par un point. Voir notre article "Hinged Dissection of the Alphabet", Journal of Recreational Mathematics, 31(3):204-207, 2003.

Je suis fan du logo de

+1 logo de

\ \ \  /\
 \/\/\   \

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

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

...

@Fogacci , avez-vous une version .svg , .ai du logo ?

@mbebenita oui je le veux .. =]

Mais j'ai besoin de préparer les fichiers à la livraison, je vais le faire au plus vite

@Fogaccio Des progrès à ce sujet ?

@kenchris Je travaille sur des productions d'assets.

@Fogaccio amical ping

Salut @kenchris et @mbebenita , je suis sur le point de finir les assets .svg et .ai, je pense que j'aurai ça vendredi.

Symbole de balise HTML + AST.

Bonjour à tous,
Juste pour vous faire savoir qu'ici (https://github.com/Fogaccio/OpenDesign/tree/master/webassembly_identity) se trouvent les fichiers de la proposition de marque que j'ai déjà envoyé. J'espère que ces ressources pourront vous aider au mieux. N'hésitez pas à partager vos idées et suggestions.

Merci

@Fogaccio merci, c'est super. Je regarde la petite version favicon 16x16 :

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

Pensez-vous que cela pourrait être rendu un peu plus lisible. Cette version de l'icône peut être utilisée dans les IDE et d'autres outils. Nous avons probablement besoin d'une version pixel art personnalisée du logo pour cette taille. Je serais heureux de le faire, si vous n'avez pas déjà quelque chose en tête.

Salut @mbebenita , j'ai essayé de faire du pixel art sur .ico, mais je n'ai pas réussi, n'hésitez pas à m'aider à le faire =]

je serai très reconnaissant pour votre aide

@Fogaccio en utilisant moins de nuances de couleurs (et des couleurs plus nettes - donc plus de contrat avec l'arrière-plan/transparent/blanc) le rendrait probablement plus net

C'est un peu difficile cependant avec seulement la taille 16x16 :) Besoin de bien choisir les nuances

En voici un autre. C'est un objet solide composé d'un "W" au-dessus d'un "A" qui fournit un logo 2D pixelisé à l'ancienne très simpliste d'une vue et un logo 3D d'une autre vue. Voici un gif animé :

L'objet solide est créé par programme à l'aide du code suivant dans 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];

Voici la vue 2D :

et voici la vue 3D :

Je peux produire des variations et étoffer des ensembles d'actifs si nécessaire.

J'ai joué avec un bras croisé courbé plus symétrique pour le A :

mais je préfère personnellement le bras croisé droit car le A est plus évident.

@h00gs intéressant, vous avez presque un truc MC Escher, j'aime bien.

Je pensais qu'une clé pourrait communiquer l'assemblage et pourrait être construite à partir de formes semblables à WA.

@rfernbach en quelque sorte, votre conception ressemble à un viking pour moi :

... avons-nous besoin d'une mascotte ? :)

Salut @mbebenita Comment est le défi de faire le favicon en pixel art ? ... =]

Mes efforts initiaux n'étaient donc pas tout à fait corrects, alors j'ai persévéré et j'ai trouvé une barre transversale incurvée pour que le A soit joli. Voici une animation :