Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

WebAssembly logo #112

Closed
jfbastien opened this issue Jun 3, 2015 · 244 comments
Closed

WebAssembly logo #112

jfbastien opened this issue Jun 3, 2015 · 244 comments
Milestone

Comments

@jfbastien
Copy link
Member

@jfbastien jfbastien commented Jun 3, 2015


WebAssembly  Logo  Contest

⚠️⚠️⚠️⚠️⚠️
⚠️ UPDATE ⚠️ vote for your favorite logo in ➡️ this thread ⬅️
⚠️⚠️⚠️⚠️⚠️


ORIGINAL POST (now closed)


At the very start of the WebAssembly project, @sunfishcode hacked up a logo:
image
It has nice ideas:

  • Arrows coming together to represent "assemble".
  • Arrows coming together can also represent compiling other languages to the web.

It would be nice to have something more fancy / web-y / designer-y, and keep it neutral so it belongs to the web and not one of the browser vendors.

Petr Hosek from the NaCl team proposed using the HTML5 technology class icons.


Here's  where  YOU  come  in!

Reply to this thread with your suggested WebAssembly logo.

We haven't decided how we'll pick the final logo, but it'll definitely be around "stable MVP" time.


@jfbastien jfbastien added this to the Public Announcement milestone Jun 3, 2015
@titzer
Copy link

@titzer titzer commented Jun 3, 2015

That's a neat metaphor. FWIW I always liked the Borland C++ logo, which
looked like building blocks being put together. "Assembling" can also have
that connotation as well.

On Wed, Jun 3, 2015 at 10:34 PM, JF Bastien notifications@github.com
wrote:

@sunfishcode https://github.com/sunfishcode hacked up a quick logo for
Web Assembly:
[image: image]
https://cloud.githubusercontent.com/assets/298127/7970689/95aefe64-09f4-11e5-87c8-b67d25f46901.png
It has nice ideas:

  • Arrows coming together to represent "assemble".
  • Arrows coming together can also represent compiling other languages
    to the web.

It would be nice to have something more fancy / web-y / designer-y, and
keep it neutral so it belongs to the web and not one of the browser vendors.

Petr Hosek from my team proposed using the HTML5 technology class icons
http://www.w3.org/html/logo/, and came up with the following:
[image: image]
https://cloud.githubusercontent.com/assets/298127/7970659/70880d2e-09f4-11e5-9c7b-c2134ee7f483.png

Any other suggestions?

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

My own personal nit would be that the asymmetry of the arrows bothered me
a bit. Asymmetry can be visually nice, though. Just to throw out an idea:
what if the arrows were symmetric but there were 4 slightly-different
abstract shapes at the four corners: building on the "compiling to the web"
metaphor above, the 4 shapes would represent 4 different source languages
which were being compiled (via the arrow) to the center (the web).


Reply to this email directly or view it on GitHub
WebAssembly/spec#112.

@jfbastien
Copy link
Member Author

@jfbastien jfbastien commented Jun 3, 2015

@BrendanEich also mentioned that he like the superheroes assembling vibe, Avengers style.

@lukewagner
Copy link
Member

@lukewagner lukewagner commented Jun 3, 2015

Yes, my nit aside, I overall like arrows pointing together. Building blocks is an interesting idea; I'd be interested if anyone had a concept that matched the HTML5 technology class icon style.

@jfbastien
Copy link
Member Author

@jfbastien jfbastien commented Jun 3, 2015

Petr Hosek originally came up with the following:
image

@davidsehr pointed out a horrible flaw in that logo. I like the arrows, but we should definitely avoid inadvertently creating a historically-insensitive logos!

The HTML5 technology class icon idea is still good, though!

@jfbastien
Copy link
Member Author

@jfbastien jfbastien commented Jun 3, 2015

I talked to some folks here, and they suggest that we hold off having any logo until first launch. That'll allow us to concentrate on tech instead, and let us take time to actually create a logo which is though-out and doesn't have inadvertent meanings!

@jfbastien jfbastien modified the milestones: MVP, Public Announcement Jun 3, 2015
@Teemperor
Copy link
Member

@Teemperor Teemperor commented Jun 18, 2015

wasm

@lukewagner Well, it's version 1.0 (somewhen) and it's abbreviation is WASM. Also, green is not used so far by the typical HTML5 technology icons AFAIK.

EDIT: Licensed under (CC BY 3.0) and based on the HTML 5 Logo

EDIT: Will provide a SVG version with less pixel errors when I have time :p.

EDIT: SVG for the green and purple version.

@jfbastien
Copy link
Member Author

@jfbastien jfbastien commented Jun 18, 2015

@Teemperor we can't accept a logo without you being in the W3C community group, and with proper copyright attribution. It's also too early to get a logo for now :)

@Teemperor
Copy link
Member

@Teemperor Teemperor commented Jun 18, 2015

@jfbastien I'm already in the W3C community. The logo has to be licensed under the original CC license of the HTML5 logo because it's obviously just the remixed HTML 5 logo.

@Teemperor
Copy link
Member

@Teemperor Teemperor commented Jun 18, 2015

Another design based on the arrows pointing together (for WebAssembly):
wasm2

Licensed under (CC BY 3.0), created by Raphael Isemann.

And I think a logo that will be changed later is better than no logo at all :)

@lawnsea
Copy link

@lawnsea lawnsea commented Jun 19, 2015

webassembly-group

@cihadturhan
Copy link

@cihadturhan cihadturhan commented Jun 22, 2015

Here are my 3 mins shots.

wasm1
wasm2

@yurrriq
Copy link

@yurrriq yurrriq commented Jun 22, 2015

👍

@Namozag
Copy link

@Namozag Namozag commented Jun 23, 2015

What about the WA Zigzag

wa-logo

wa-logo2

@andrnag
Copy link

@andrnag andrnag commented Jun 23, 2015

@Namozag I like it!

@fstark
Copy link

@fstark fstark commented Jun 23, 2015

(looks like attachments don't work via email...)
(Couple of quick and dirty)

An play on the zigzag idea:

wa1

Playing with negative space:

wa2

—fred

On 23 Jun 2015, at 13:27, Andrey notifications@github.com wrote:

@Namozag https://github.com/Namozag I like it!


Reply to this email directly or view it on GitHub #112 (comment).

@kigiri
Copy link

@kigiri kigiri commented Jun 23, 2015

@fstark can't see them.

@fstark
Copy link

@fstark fstark commented Jun 23, 2015

Looks like you can't attach images via email, so I added them to the original comment. Do they appear inline ?

@Teemperor
Copy link
Member

@Teemperor Teemperor commented Jun 23, 2015

Nope

@fstark
Copy link

@fstark fstark commented Jun 23, 2015

Let me try again with a smaller resolution.

Image 1 (Variation on Zigzag)
wa1

Image 2 (Negative Space)
wa2

@Janonard
Copy link

@Janonard Janonard commented Jun 23, 2015

I think it may be confusing to use a WA-logo, because Whatsapp is abbreviated as WA too.

@BrendanEich
Copy link

@BrendanEich BrendanEich commented Jun 23, 2015

Really creative work by everyone here. Agree on avoiding WhatsApp overlap; also the // from "Clueless" for "whatEVER" ;-).

/be

@fstark
Copy link

@fstark fstark commented Jun 23, 2015

I don't really understand the concern with Whatsapp, as their logo looks like thisWhatsapp logo.

Also, the full name is WebAssembly, not wasm nor wa, so I am not sure where the confusion would come from. It isn't like if people would start using wa as the name. It is just some random scribbles on a logo. Reusing the shield idea of @Teemperor (maybe not green, to avoid WA connotations) with some scribbling could give WebAssembly a recognizable look directly connected to HTML5. Mmm. May try that later.

@Teemperor
Copy link
Member

@Teemperor Teemperor commented Jun 23, 2015

Maybe it's a regional thing, but I don't connect the logo of @fstarks with WhatsApp at all.
Also, as I figured out that the green shield is for PHP (and WhatsApp is also green as said by @fstark ), so I recolored it to purple (and fixed the pixel errors):

wasm

@bobajeff
Copy link

@bobajeff bobajeff commented Jun 25, 2015

I agree that you should hold off on a logo. In fact I'm not convinced it even need to have one.

However, I do like thinking up logos and I like some of the designs I've seen here. If there is a logo I think it should use the full name (WebAssembly) or the shortened version (wasm). In the latter I'd suggest visually distinguishing the w from the asm. Also, is suggest referencing the assembly language aspect of the it somehow.

@jbondc
Copy link
Contributor

@jbondc jbondc commented Jun 29, 2015

Amazed by the all the logo ideas, variation of @Namozag
asm

I'd seem to prefer anything with 'wasm' or 'asm' in there as text.

@dcodeIO
Copy link

@dcodeIO dcodeIO commented Jun 29, 2015

Oh, cool, (not) a logo contest! And already some great ideas! Well, this is my take on a logo (trying to incorporate a bunch of the previous ideas):

- Somewhat like the HTML5 semantics logo "Giving meaning to structure", but upside down, still "enabling a more useful, data driven web for both programs and your users." - A bit compact, flowing data - A bit pluggable - A bit stack - A bit "W", "A", "S", "M" - Optional shading and, of course, _green_

Cheers!

@bobajeff
Copy link

@bobajeff bobajeff commented Dec 7, 2016

So far the kitten in a basket logo is my favorite. @BartoszBaczek are the copyright issues cleared on its use in w3c?

@bbonczek
Copy link

@bbonczek bbonczek commented Dec 8, 2016

@bobajeff Well that's a picture of cat, and like almost every other picture of a cat, was found in the internet. I dunno.

@alexhultman
Copy link

@alexhultman alexhultman commented Dec 8, 2016

I feel the cat is missing this background sound: https://www.youtube.com/watch?v=EKcviWIDFKQ

@ghost
Copy link

@ghost ghost commented Dec 8, 2016

@alexhultman Your icon was used at JSconf singapore

#112 (comment)

See the following clip at 9:28

https://www.youtube.com/watch?v=KxRX_HRGRo4

@alexhultman
Copy link

@alexhultman alexhultman commented Dec 8, 2016

Like I said it is not mine

@styfle
Copy link

@styfle styfle commented Dec 8, 2016

@MWrathDev Those comments are misleading. The entry was submitted above by @Fogaccio

@stnemsid
Copy link

@stnemsid stnemsid commented Dec 12, 2016

wild

embrace the manticore

@congsan
Copy link

@congsan congsan commented Dec 14, 2016

e

The ideals are:

  1. Regtangular: 16*9 -> multimedia
  2. The W shape -> web
  3. 3 Register with ascii code denote for A, S, M
  4. Grey area represent for memory

But it look poorly, so i change it so much different from the beginning with another concept. I add some smartphonefull to it.
.
.
.

eee

@congsan
Copy link

@congsan congsan commented Dec 18, 2016

jg

@congsan
Copy link

@congsan congsan commented Dec 19, 2016

@olalonde
:))

The simplìfying may be to much, but the ideal is doing that extremely but still keep meaning. The simplified icon still keep some important concept including W shape, javascript was wrapped inside or it is the core. It also is saw that a block inside block, module inside module. It also have the button waiting for a click. I think i will put it in asymmetric position represent the action of server-client enviroment.

jgvv

I also make another version of simplifying one.

bb

@rsms
Copy link

@rsms rsms commented Jan 12, 2017

@pontuswallberg
Copy link

@pontuswallberg pontuswallberg commented Jan 13, 2017

webassembly

@carlosbaraza
Copy link

@carlosbaraza carlosbaraza commented Jan 15, 2017

@lukewagner, this is my proposal's CC licensed repository:

Web Assembly Logo - Carlos Baraza

@mindplay-dk
Copy link

@mindplay-dk mindplay-dk commented Jan 15, 2017

@carlosbaraza this remains my favorite proposal by far! Just one minor comment: why is the font size of WA smaller than JS? It makes it seem less important somehow.

@RyanLamansky
Copy link

@RyanLamansky RyanLamansky commented Jan 15, 2017

@carlosbaraza I like this, too.

I think a second notch going upward from WA into JS will help illustrate the interconnectedness of the two technologies (they can call into each other view import/export) and to balance out the area of each color. This may require the JS text to be pushed up to the top or both texts to be centered, for symmetry...

Edit: I say this because without considering the IC example I'm inclined to view the JS/WA combination as two connected puzzle pieces.

@haroldfredshort
Copy link

@haroldfredshort haroldfredshort commented Jan 17, 2017

80's style!
photofunia-1484677188

@congsan
Copy link

@congsan congsan commented Feb 2, 2017

web assembly logo

@kumavis
Copy link

@kumavis kumavis commented Feb 3, 2017

casting my vote for #112 (comment)
image

simple and has a good story 👍

@jaydonteh
Copy link

@jaydonteh jaydonteh commented Feb 3, 2017

Initially I decided to emphasise on the word "WebAssembly" as a whole being a logo, but then it wouldn't be unique. So I decided to come up with an indifferent logo for WebAssembly, but then again it either look too sophisticated or corporate which is not the strength of it's main usage. In the end I tried to go with the HTML5 logo which inspired my submission.

wasm logo banner
wasm logo

Built upon the already loving and powerful logo of HTML5. This is a derivation of the HTML5 logo.

@luveti
Copy link

@luveti luveti commented Feb 4, 2017

Another dev tool snippet to show comments by popularity :D. This one prints everything to the console like so:

b23c9453f555150785555de27d71e2ca

PS: It looks like @Fogaccio's logo has been used out in the wild https://simpleprogrammer.com/2016/05/25/webassembly-finally-freed-javascript/

(() => {

    // get all the comments that have thumbs up + images, sorted by most thumbs up
    var comments = ($ =>
        $(document, '.timeline-comment-wrapper')
        .map(comment => { return {
            element: comment,
            thumbsUp: $(comment, 'g-emoji[alias="+1"]')
                .map(gemoji => parseInt(gemoji.parentNode.innerText.replace(/[^0-9.]/g, '')))
                .filter(num => !isNaN(num))
                .pop()
        }})
        .filter(comment => comment.thumbsUp)
        .sort((a, b) => b.thumbsUp - a.thumbsUp)
        .map(({element, thumbsUp}) => { return {
            author: $(element, '.author').shift().innerHTML,
            thumbsUp: thumbsUp,
            images: $(element, '.comment-body img')
        }})
        .filter(({images}) => images.length)
    )((e, q) => Array.prototype.slice.call(e.querySelectorAll(q), 0))

    // add padding to all the author names so they line up when we print them out
    var longestNameCount = comments.reduce((a, {author}) => author.length > a ? author.length : a, 0)
    comments.forEach(comment => {
        for (var i = comment.author.length; i < longestNameCount; i++) comment.author += ' '
    })

    // print everything in nice collapsed groups
    comments.forEach(({author, thumbsUp, images}) => {
        console.groupCollapsed(author, '=', thumbsUp)
        images.forEach(image => console.log(image))
        console.groupEnd()
    })
})()
@s3ththompson
Copy link
Member

@s3ththompson s3ththompson commented Feb 7, 2017

Please head over to #980 to vote on the top submissions!

@g-harel
Copy link

@g-harel g-harel commented Feb 7, 2017

I feel like simply taking the top 5 is slightly unfair because it favors people that submitted a long time ago instead of the actual most fitting submission.

@s3ththompson
Copy link
Member

@s3ththompson s3ththompson commented Feb 7, 2017

@g-harel appreciate the feedback. In this case, the thread was so contentious that this was the most fair approach we could come up with. Also, reactions weren't introduced until March last year, so I don't think the earlier submissions got too much of a head start.

@g-harel
Copy link

@g-harel g-harel commented Feb 7, 2017

@s3ththompson I was more specifically referring to a thread on reddit in November that gave this issue a lot of attention (that is how I learnt about this and ended up submitting as well). Since there was a big influx of people around that time, the submissions that were already there got a lot of attention but the new ones didn't get a similar opportunity.

@styfle
Copy link

@styfle styfle commented Feb 7, 2017

@s3ththompson Can you close comments on this issue so that people in this thread stop getting spammed and then everyone can vote on #980 🥇

@WebAssembly WebAssembly locked and limited conversation to collaborators Feb 7, 2017
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
You can’t perform that action at this time.