Design: WebAssembly-Logo

Das ist eine schöne Metapher. FWIW Ich mochte schon immer das Borland C++ Logo, welches
sah aus wie Bausteine, die zusammengefügt werden. "Montieren" kann auch haben
auch diese Konnotation.

Am Mittwoch, 3. Juni 2015 um 22:34 Uhr, JF Bastien [email protected]
schrieb:

@sunfishcode https://github.com/sunfishcode hat ein schnelles Logo für gehackt
Bahnmontage:
[Bild: Bild]
https://cloud.githubusercontent.com/assets/298127/7970689/95aefe64-09f4-11e5-87c8-b67d25f46901.png
Es hat schöne Ideen:

• Pfeile, die zusammenkommen, um "zusammenbauen" darzustellen.
• Zusammentreffende Pfeile können auch das Kompilieren anderer Sprachen darstellen
  ins Netz.

Es wäre schön, etwas ausgefalleneres / web-y / designer-y zu haben, und
Halten Sie es neutral, damit es zum Web gehört und nicht zu den Browser-Anbietern.

Petr Hosek von meinem Team schlug vor, die Symbole der HTML5-Technologieklasse zu verwenden
http://www.w3.org/html/logo/ und kam zu folgendem Ergebnis:
[Bild: Bild]
https://cloud.githubusercontent.com/assets/298127/7970659/70880d2e-09f4-11e5-9c7b-c2134ee7f483.png

_Irgendwelche anderen Vorschläge?_

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

Mein persönlicher Schwachpunkt wäre, dass mich die Asymmetrie der Pfeile störte
ein bisschen. Asymmetrie kann jedoch optisch schön sein. Nur um eine Idee zu verwerfen:
Was wäre, wenn die Pfeile symmetrisch wären, aber 4 etwas anders wären?
abstrakte Formen an den vier Ecken: Aufbauend auf dem "compiling to the web"
Metapher oben, die 4 Formen würden 4 verschiedene Quellsprachen darstellen
die zusammengestellt wurden (über den Pfeil) in die Mitte (das Web).

—
Antworten Sie direkt auf diese E-Mail oder zeigen Sie sie auf GitHub an
https://github.com/WebAssembly/spec/issues/112.

@BrendanEich erwähnte auch, dass er die Superhelden mag, die Vibe im Avengers-Stil zusammenbauen.

Ja, meine Nase beiseite, ich mag insgesamt Pfeile, die zusammen zeigen. Bausteine ​​sind eine interessante Idee; Mich würde interessieren, ob jemand ein Konzept hätte, das dem Symbolstil der HTML5-Technologieklasse entspricht.

Petr Hosek hat sich ursprünglich Folgendes ausgedacht:

@davidsehr wies auf einen schrecklichen Fehler in diesem Logo hin . Ich mag die Pfeile, aber wir sollten auf jeden Fall vermeiden, versehentlich ein historisch unsensibles Logo zu erstellen!

Die Idee mit dem Symbol für die HTML5-Technologieklasse ist jedoch immer noch gut!

Ich habe hier mit einigen Leuten gesprochen, und sie schlagen vor, dass wir bis zum ersten Start kein Logo verwenden. Dadurch können wir uns stattdessen auf die Technik konzentrieren und uns die Zeit nehmen, ein Logo zu erstellen, das durchdacht ist und keine unbeabsichtigten Bedeutungen hat!

@lukewagner Nun, es ist Version 1.0 (irgendwann) und seine Abkürzung ist WASM. Außerdem wird Grün bisher nicht von den typischen HTML5-Technologie-Icons AFAIK verwendet.

BEARBEITEN: Lizenziert unter (CC BY 3.0) und basierend auf dem HTML 5-Logo

BEARBEITEN: Wird eine SVG-Version mit weniger Pixelfehlern bereitstellen, wenn ich Zeit habe: p.

EDIT: SVG für die grüne und violette Version.

@Teemperor wir können kein Logo akzeptieren, ohne dass Sie in der W3C-Community-Gruppe sind und mit der richtigen Copyright-Zuordnung. Für ein Logo ist es auch noch zu früh :)

@jfbastien Ich bin bereits in der W3C-Community . Das Logo muss unter der ursprünglichen CC-Lizenz des HTML5-Logos lizenziert werden, da es sich offensichtlich nur um das neu gemischte

Ein anderes Design basierend auf den zusammen zeigenden Pfeilen (für W eb A ssembly):

Lizenziert unter (CC BY 3.0) , erstellt von Raphael Isemann.

Und ich denke, ein Logo, das später geändert wird, ist besser als gar kein Logo :)

Hier sind meine 3 Minuten Aufnahmen.

:+1:

Was ist mit dem WA Zickzack

@Namozag gefällt mir!

(Sieht so aus, als ob Anhänge per E-Mail nicht funktionieren...)
(Paar schnell und schmutzig)

Ein Spiel mit der Zickzack-Idee:

Spielen mit negativem Raum:

—fred

Am 23. Juni 2015 um 13:27 Uhr schrieb Andrey

@Namozag https://github.com/Namozag Ich mag es!

—
Antworten Sie direkt auf diese E-Mail oder zeigen Sie sie auf GitHub an https://github.com/WebAssembly/design/issues/112#issuecomment -114450578.

@fstark kann sie nicht sehen.

Anscheinend können Sie keine Bilder per E-Mail anhängen, daher habe ich sie dem ursprünglichen Kommentar hinzugefügt. Erscheinen sie inline?

NÖ

Ich versuche es noch einmal mit einer kleineren Auflösung.

Bild 1 (Variation auf Zickzack)

Bild 2 (Negativraum)

Ich denke, es kann verwirrend sein, ein WA-Logo zu verwenden, da WhatsApp auch mit WA abgekürzt wird.

Wirklich kreative Arbeit von allen hier. Stimmen Sie zu, WhatsApp-Überschneidungen zu vermeiden; auch das \/\/ von "Clueless" für "was auch immer" ;-).

/Sein

Ich verstehe die Bedenken bei Whatsapp nicht wirklich, da ihr Logo so aussieht .

Außerdem lautet der vollständige Name WebAssembly, nicht wasm oder wa, daher bin ich mir nicht sicher, woher die Verwirrung kommen soll. Es ist nicht so, als ob die Leute anfangen würden, wa als Namen zu verwenden. Es sind nur einige zufällige Kritzeleien auf einem Logo. Die Wiederverwendung der Schildidee von

Vielleicht ist es eine regionale Sache, aber ich verbinde das Logo von @fstarks überhaupt nicht mit WhatsApp.
Da ich auch herausgefunden habe, dass das grüne Schild für PHP ist (und WhatsApp auch grün ist, wie von @fstark gesagt), habe ich es in Lila umgefärbt (und die Pixelfehler behoben):

Ich stimme zu, dass Sie sich mit einem Logo zurückhalten sollten. Tatsächlich bin ich nicht davon überzeugt, dass es überhaupt einen haben muss.

Ich denke mir jedoch gerne Logos aus und ich mag einige der Designs, die ich hier gesehen habe. Wenn es ein Logo gibt, sollte es meiner Meinung nach den vollständigen Namen (WebAssembly) oder die verkürzte Version (wasm) verwenden. Im letzteren Fall würde ich vorschlagen, das w visuell vom asm zu unterscheiden. Es wird auch vorgeschlagen, irgendwie auf den Aspekt der Assemblersprache zu verweisen.

Erstaunt über all die Logo-Ideen, Variation von @Namozag

Ich würde alles bevorzugen, was 'wasm' oder 'asm' als Text enthält.

Oh, cool, (kein) ein Logo-Wettbewerb! Und schon einige tolle Ideen! Nun, das ist meine Meinung zu einem Logo (ich versuche, eine Reihe der vorherigen Ideen zu integrieren):

• Etwas wie das HTML5-Semantik-Logo "Struktur geben Bedeutung", aber auf den Kopf gestellt, immer noch "ein nützlicheres, datengesteuertes Web für Programme und Ihre Benutzer ermöglichen".
• Etwas kompakte, fließende Daten
• Ein bisschen steckbar
• Ein bisschen Stapel
• Ein bisschen "W", "A", "S", "M"
• Optionale Beschattung und natürlich _grün_

Beifall!

@dcodeIO sieht toll aus!

@fstark Bild 2 ,,Prost!!

@dcodeIO : schön!

Vielleicht sowas ;)

Das schwarz/grüne von @dcodeIO gefällt mir sehr gut!

Ich mag das schwarz-grüne. Beifall!

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

Das schwarz/grüne von @dcodeIO https://github.com/dcodeIO gefällt mir sehr gut
!

—
Antworten Sie direkt auf diese E-Mail oder zeigen Sie sie auf GitHub an
https://github.com/WebAssembly/design/issues/112#issuecomment -117662363.

Mein Sub

Dieses ist ein Duplikat für mein letztes Sub

Sollten wir eine Strohhalmumfrage durchführen, um zu entscheiden, welches das beste Logo für das Projekt ist?

Sie haben schon lange über das Logo von WebAssembly gesprochen, ich denke, es ist Zeit zu Ende.

Per iPhone senden

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

Sollten wir eine Strohhalmumfrage durchführen, um zu entscheiden, welches das beste Logo für das Projekt ist?

—
Antworten Sie direkt auf diese E-Mail oder zeigen Sie sie auf GitHub an.

An einer Grafiksoftware habe ich noch nichts ausprobiert, aber beim Warten auf Zusammenstellungen kamen mir folgende Ideen:

• Das Bild in der Mitte ist eine vertikale Überlagerung des W (Netz) und des A (Anordnung) und erinnert mich stark an das Emoticon einer Person, die wie folgt die Hände zum Himmel hebt: \o/
• Der rechte ist der gleiche wie der in der Mitte, obwohl er auch das W (Netz) und das A (Baugruppe) schön zusammenfaltet.
• Der linke ist der gleiche wie der in der Mitte, hat aber auch die 4 schwebenden Köpfe über dem zentralen Dreieck, die an das ursprüngliche temporäre Logo und die gleichen Ideen erinnern sollen.

Wenn jemand bereit wäre, diese Ideen zu erweitern und aus diesen Skizzenbildern echte Logos zu machen, wäre das großartig!

Ich liebe das schwarz/grüne @dcodeIO

Zum Thema Abstimmung und um die Erwartungen in diesem Thread zu schärfen: Wir haben noch keinen Prozess für die Auswahl eines Logos ausgewählt und was auch immer dieser Prozess ist, ich denke, er wird näher an der Veröffentlichung von WebAssembly (Spezifikationen und Implementierungen) erfolgen. . Davon abgesehen habe ich den Strom der Ideen hier genossen und möchte niemandem sagen, dass er aufhören soll, nur dass es keine Eile oder unmittelbare Entscheidung gibt.

Je mehr, desto besser! Ich stimme @lukewagner zu : Lassen Sie uns erst ein Logo

Werde nie aufgeben, das beste Logo zu finden!

Ich bin kein Designer, aber ich habe ein paar Kritzeleien gemacht und dachte, ich könnte sie genauso gut teilen.

Sie sind sehr grob (falsche Ausrichtung/Proportionen/Schriftart), aber die allgemeine Idee sollte rüberkommen.

Lass es mich versuchen :)

@dcodeIO Bild 2 sieht toll aus!

@dcodeIO es ist cool!!

+1 für @dcodeIO

+1 Für @dcodeIO Schwarz-Grün-Logo

+1 Für @dcodeIO Schwarz und Grün

Wirklich wie der erste von Raphael

Das habe ich beim Spielen mit Krita gemacht. Obwohl mir das Design seit mehreren Monaten im Kopf herumschwirrt:

Hier ist ein 80er-Jahre-Experiment, das ich beim Spielen mit Effekten gemacht habe:

Hallo allerseits,
Ich wollte diesen Beitrag nur dem Projekt hinzufügen, bitte verwenden Sie ihn nach Belieben.

Danke

Aktuelle HTML5/CSS/JS-Logos sind hässlich und alt (wie diese Technologien auch, lol). Nehmen Sie dieses Vektorlogo – einfach, sauber, leistungsstark und gottverdammt fliegend – und machen Sie damit alles, was Sie wollen.

wa_logo.zip

Ich liebe die Arbeit von @Fogaccio

Ich mag das Logo von @Fogaccio .

Die Arbeiten von @Fogaccio und @jjmiyao sind cool!

WASM-Text inspiriert von und Dank an Erik Demaine http://erikdemaine.org/fonts/hinged/
Beachten Sie, dass W und M symmetrisch sind. (Wie einige andere Charaktere, was mehr Spaß macht.)
Verwendet/empfohlen für F#UN FSharp Experimental Incubator Project FSTWASM FSharp To WASM.
Jeder Buchstabe und jede Zahl in dieser Schriftart kann aus einer universellen Scharnierkette gefaltet werden, genauer gesagt aus 128 gleichschenkligen Dreiecken, die an ihren scharfen Ecken angelenkt sind. Insbesondere hat jedes Zeichen genau den gleichen Bereich. Darüber hinaus kann sich die Kette zu einem Quadrat falten, das durch einen Punkt dargestellt wird. Siehe unseren Artikel „Hinged Dissection of the Alphabet“, Journal of Recreational Mathematics, 31(3):204–207, 2003.

Ich bin ein Fan des Logos von

+1 Das Logo von

\ \ \  /\
 \/\/\   \

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

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

...

@Fogacci , hast du .svg , .ai Version des Logos?

@mbebenita ja das tue ich .. =]

Aber ich muss die Dateien für die Lieferung vorbereiten, das werde ich so schnell wie möglich tun

@Fogaccio Gibt es diesbezüglich Fortschritte?

@kenchris Ich arbeite an Asset-Produktionen.

@Fogaccio freundlicher Ping

Hallo @kenchris und @mbebenita , ich bin kurz

HTML-Tag-Symbol + AST.

Hallo an alle,
Nur um Sie wissen zu lassen, dass hier (https://github.com/Fogaccio/OpenDesign/tree/master/webassembly_identity) die Dateien des Branding-Vorschlags sind, die ich zuvor gesendet habe. Ich hoffe, dass diese Ressourcen Ihnen am besten helfen können. Fühlen Sie sich frei, Gedanken und Vorschläge zu teilen.

Danke

@Fogaccio danke, das ist großartig. Ich schaue mir die kleine Favicon 16x16-Version an:

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

Meinst du, das könnte etwas lesbarer gemacht werden. Diese Version des Symbols kann in IDEs und anderen Tools verwendet werden. Für diese Größe benötigen wir wahrscheinlich eine benutzerdefinierte Pixel-Art-Version des Logos. Das mache ich gerne, wenn Sie nicht schon etwas im Sinn haben.

Hallo @mbebenita , ich habe versucht, die Pixel-Art für .ico zu erstellen, aber ich hatte keinen Erfolg, hilf mir

Für eure Hilfe wäre ich euch sehr dankbar

@Fogaccio mit weniger Farbtönen (und schärferen Farben - daher mehr Kontrakt mit Hintergrund/transparent/weiß) würde es wahrscheinlich schärfer aussehen lassen

Es ist jedoch mit nur 16x16 Größe etwas schwierig :) Müssen Sie die Farbtöne sorgfältig auswählen

Hier ist ein anderes. Es ist ein solides Objekt, das aus einem "W" auf einem "A" besteht, das ein sehr einfaches, pixeliges 2D-Logo der alten Schule aus einer Ansicht und ein 3D-Logo aus einer anderen Ansicht bietet. Hier ist ein animiertes Gif:

Das Solid-Objekt wird programmgesteuert mit dem folgenden Code in openscad erstellt

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];

Hier die 2D-Ansicht:

und hier die 3D-Ansicht:

Bei Bedarf kann ich Variationen erstellen und Asset-Sets ausarbeiten.

Ich spielte mit einem symmetrischer gebogenen Querarm für das A:

aber ich persönlich bevorzuge den geraden Querarm, weil das A offensichtlicher ist.

@h00gs interessant, du hast fast eine MC Escher-Sache am Laufen, gefällt mir.

Ich dachte, ein Schraubenschlüssel könnte die Montage kommunizieren und aus Formen gebaut werden, die WA ähneln.

@rfernbach irgendwie sieht dein Design für mich aus wie ein Wikinger:

...brauchen wir ein Maskottchen? :)

Hi @mbebenita Wie ist die Herausforderung, das Favicon in

Meine anfänglichen Bemühungen waren also nicht ganz richtig, also habe ich durchgehalten und eine gebogene Querstange für das A gefunden, die gut aussieht. Hier ist eine Animation: