Open ConradSollitt opened 3 years ago
ConradSollitt
commented
3 years ago After a quick Google I found this well designed logo (and see a number of sites using it). I'm not sure of the source though. Regardless I think there should be a freely available logo that any site can use (public domain license).
LeaVerou
commented
3 years ago I agree a logo really helps adoption and popularization of a given technology. It can give it buzzword status. The HTML5 logo did wonders for HTML5 and associated APIs.
I agree there should be a public domain logo. I'm also not sure it's a good idea for the logo to be a derivative of the HTML5 logo, like that second one (which does seem fairly popular however). Also, it seems to outline a "S" via negative space, which would be brilliant if intentional, but I think it's actually an accident. A gear is a bit too generic, it could represent almost any technology.
Before anyone jumps into designing a logo, we should brainstorm concepts and terms we associate with Web components. These could be as abstract and big as "encapsulation", or as concrete and small as "angle brackets and hyphens", the point is to get as many ones out there to inspire whomever designs the logo (I used to work as a graphic designer about 15 years ago and that was always the first step for logo design).
I'll start my list:
@ConradSollitt wanna go next?
bennypowers
commented
3 years ago webcomponents.org logo: https://web-components-resources.appspot.com/static/logo.svg
I've always liked that one, I wonder it google is amenable to lending it to the broader community
ConradSollitt
commented
3 years ago @bennypowers I do like that one to and was unsure of the license so I never used it.
Thanks @LeaVerou that's great to know how much the HTML5 logo helped! I also agree the gear is too generic but at the time I just wanted to have something (until a standard one becomes available) so spending a little bit of time to think about I went with a gear.
After thinking about possibilities for a new logo here is my list (actual several lists):
Wish list
Design Considerations
Logo Ideas
<-> - Fit to a square using shapes rather than textGood Links for Logo Ideas
In addition to a branding logo I would also go as far as propose having an acronym or abbreviation of Web Components.
Some of my reasoning for this:
If putting myself in the shoes of a power-user at work who can make changes to HTML, or any site owner who knows the term I could see this sort of thinking:
HTML5
Hypertext Markup Language
In the same vain "Web Components" sounds somewhat complex to me but I could see a website owner saying something like "My site includes WEBC technology so it's fast and works well".
Just an idea to ponder :thinking: At least something I've spent too much time thinking about :laughing:
justinfagnani
commented
3 years ago Note that we have a webcomponents.org logo which is a bit nicer than the two-wrenches logo: https://camo.githubusercontent.com/20091716adcebf86499a1b4e8768ea6f348a8a07a318be3b10279c08cbc5caa7/68747470733a2f2f7765622d636f6d706f6e656e74732d7265736f75726365732e61707073706f742e636f6d2f7374617469632f6c6f676f2e737667
There's no great reason to have separate branding for web components and webcomponents.org. We could donate that logo.
It's not necessarily the best logo - it has a lot of shading and the silhouette isn't that identifiable - but it's decent and already made.
ConradSollitt
commented
3 years ago Thanks @justinfagnani
Yes I agree the https://www.webcomponents.org/ is much nicer than the two-wrenches logo. And for practical reasons it's easier to work with when using with other tech logos as it fits nicely within a square.
After your response I decided to update my site with it.
Screenshot from: https://www.dataformsjs.com/en/examples
In the above example most of the logos are not a perfect square but I am using 32x32 for the image and everything fits nicely. The Web Components Org logo is about 22% wider than tall however both React and Vue have slightly wider than tall logos as well.
Here is how the Web Components Org Logo looks with a wider range of Tech Logos from @bennypowers personal site (he commented earlier in this issue). https://bennypowers.com/
As for shading and the silhouette I personally think it's ok, but I could see it being updated with the gradient style triangles (or other shpaes) from the Polymer Logo:
If w3c were to adopt the Web Components Org logo a nice landing page could be created similar in use/concept to the HTML5 logo.
Any plans on updating https://www.webcomponents.org/? Perhaps if there were plans to update it regularly a logo page could go on there for developers to have easy access to the log.
ConradSollitt
commented
3 years ago Forgot to include one screenshot.
On the main page of https://www.webcomponents.org/ the logo was used as an outline for different tech within Web Components (Shadow DOM, Custom Elements, etc). I like this idea and feel that it could be expanded on for Web Component Resources (future sites, learning, docs, etc).
abdonrd
commented
3 years ago I have always used the webcomponents.org logo:
oscarotero
commented
3 years ago Hi. I've been playing with webcomponents.org logo in order to make it more flexible and improve the visibility at small sizes. I'm sharing with you some of my sketches just in case you like it:
<c to represent "web components".C more open and explore the possibility of a logo that can be repeated and combined with itself, like a stack (as you can see below).If you like something of this, I'll give you the svg. Feel free to leave feedback or suggest changes.
skanne
commented
2 years ago If I had a say, I'd pick the second version: <C
graynorton
commented
2 years ago Sorry, I somehow failed to notice this issue. I brought this up long ago in an informal WCCG setting, but adding it here for wider discussion.
The logo below was originally created for the Web Components SF meetup, but explicitly contemplating eventual broader use as a general web components logo. There are no rights issues, and we can easily go back to the original designers for tweaks and variations (different sizes, monochrome version, usage guidelines, etc.).
zachleat
commented
2 years ago I would love to see some consensus here, and leave my upvotes for the webcomponents.org version and the one @graynorton just posted!
What’s the next step we can make toward an official selection?
graynorton
commented
2 years ago @Westbrook, any thoughts on the process side? My personal inclination is to proceed with the WCSF / WCCG logo absent any strong opposition, because that's the one that gives us the simplest path forward (we know we can use it, are still working with the original designers, etc.).
The older wc.org logo may also be something we can use, but the folks directly involved in creating that one are no longer around and I'm not sure who designed it, so it would take somewhat more legwork. (I also associate its style pretty strongly with a generation of Google logos that now seems outdated to me, but that's largely a matter of personal taste. 😉)
michaelwarren1106
commented
2 years ago +1 for the idea of a new logo!
My favorite of the ones here is definitely the WCSF logo, i love the “W” the bottom diamonds makes! +1000 if intentional! :)
Westbrook
commented
2 years ago As the WCCG, we leverage the logo in https://twitter.com/webcomponentscg and https://github.com/webcomponents-cg/ and I think other places as well. Decided.
It's the "what's the 'official' web components logo?" question that I don't know how to answer. How did the JS logo or the HTML5 logo become "official"?
I thought Google owner https://twitter.com/webcomponents, where we could continue the trend, and we can definitely leverage this is designs for the new webcomponents.org (if you're here and didn't know we were working on a new webcomponents.org and want to take part, join us). Where else can we tell people to use this logo to make it "official".
Maybe @zachleat using it in his 11ty documentation is the thing? 😉
graynorton
commented
2 years ago Sure, there’s no entity with the undeniable power to declare an official logo, but I think the WCCG has better standing than anyone else to offer one up and promote / support its general use.
I guess my question to you was what process would be required to ratify a WCCG decision to do just that?
Once we’ve decided, we can discuss what we’d like the designers to do to round out the available assets and usage guidelines.
justinfagnani
commented
2 years ago Yeah, I think if WCCG, webcomponent.org, and sites we collectively manage use a new logo, it'll catch on quickly enough.
I personally have a couple of concerns with the WC SF logo around its silhouette and what a mono version would look like, how a favicon-sized version would read, etc., but we could bring that to the designers when asking for a mono version.
I also like the look of the simplified wc.org icon that @oscarotero did fwiw. It has some pop with the colors, and nice "C" silhouette.
claviska
commented
2 years ago I personally have a couple of concerns with the WC SF logo around its silhouette and what a mono version would look like, how a favicon-sized version would read, etc.
I'll echo this. It looks cool, but it's busy and we'll need a small variant which might be challenging.
Does anyone know the backstory? What does it represent? What was it inspired by? Or is it just a cool pattern that got picked up because somebody wanted a logo?
graynorton
commented
2 years ago I personally have a couple of concerns with the WC SF logo around its silhouette and what a mono version would look like, how a favicon-sized version would read, etc., but we could bring that to the designers when asking for a mono version.
Yeah, we can absolutely iterate on it with the designers as needed to address these requirements / concerns.
Does anyone know the backstory? What does it represent? What was it inspired by? Or is it just a cool pattern that got picked up because somebody wanted a logo?
This was designed by the same designers who did the Lit logo, specifically for the Web Components SF meetup, but with the guidance that we might want to expand its use to represent Web Components more generally.
Conceptually, it is inspired by building blocks; it is also meant to suggest angle brackets in three dimensions. The fact that it overlays on / emerges from an infinitely tiling tessellated pattern (whether that pattern is shown or not) is symbolic of the fact that web components seamlessly "interlock" with each other and with native DOM elements. The overall shape is suggestive of a + sign, symbolizing the fact that web components extend the vocabulary of HTML.
claviska
commented
2 years ago 👆Now this I can stand behind. Carry on!
Westbrook
commented
2 years ago The "current" usage as favicon can look like the favicon for: https://web-components-cg.netlify.app/ which is the content we're working on in: https://github.com/webcomponents-cg/docs-and-guides to eventually replace webcomponents.org and that we're discussing in a breakout session next Tuesday and Thursday the week after...
At this time it's not been "designed" so much as a logo versions (that has a good amount of alpha around the edges) was repurposed for this use. Design work to confirm whether the circle version (without alpha) or the blocks on a transparent background (which might filly the tab a bit like the Slack logo) or something more "designed" sounds amazing!
Westbrook
commented
2 years ago Also, as for "making a proclamation/decision/official logo"... now that we've got a decent amount of comments here, I'd like to give this a quick go no go vote at the two breakout sessions we have coming up: https://calendar.google.com/calendar/u/0/embed?src=o25bim5rvcu42mfnqilirpmp44@group.calendar.google.com and then assuming there's not hard no's we can having topic officially closed by June24th.
With that in mind, mind your thoughts heard, tell a friend, we making the logo happen and it's last call!
jordanaustin
commented
2 years ago Ok, since the best logo ever, the Polymer logo wasn't offered up as an "official" web components logo, I have to now choose from something else 😄.
While I like some of the ideas proposed by @oscarotero, the "C" kind of feels like we're trying too hard; I don't know maybe polishing it up would be ok 🤔. I kind of like the more abstract representation of WC as building blocks, especially as Polymer did with their logo being a tag. I think the current WCSF logo is a reasonable starting point and I'd love to see if we can have some iteration on it based on our group's feedback if possible.
bheston
commented
2 years ago Looking at the screenshots above, particularly the full array of icons on @bennypowers page, the green in the webcomponents.org is the only part that I don't notice. That is, it's disproportionately light and falls away. If any variation of that logo is picked, it would read stronger if the main colors were more balanced.
The WCSF logo looks great large. It doesn't read well as a favicon or even in the title on the CG page though. Including the circle it feels like it doesn't work much smaller than 50px. It does lend itself to a monotone version better. If it were reduced to three cubes for a smaller size it would be too generic.
web-padawan
commented
1 year ago The logo below was originally created for the Web Components SF meetup, but explicitly contemplating eventual broader use as a general web components logo. There are no rights issues, and we can easily go back to the original designers
@graynorton Could you please clarify if this logo is OK to use for a website with a curated collection of resources related to web components? Basically, something similar to the Web Components the Right Way repo that I maintain.
graynorton
commented
1 year ago Could you please clarify if this logo is OK to use for a website with a curated collection of resources related to web components?
@web-padawan Yes, feel free to use it. That said, based on the discussion here and elsewhere, I think it’s most likely that we’ll eventually end up with a new logo. We’re starting to look into this and will update here when there’s any news.
Perhaps this is trivial but I think having an available logo for Web Components would be helpful for developers who want to reference Web Components on websites, in documentation, etc.
For example I created a JavaScript library and set of Web Components and for all external libraries and tech I am able to use a Logo from the vendor. Since nothing like this exists for Web Components (at least I’m not aware of one) I ended up created my own SVG logo for it. And before first publishing the site over a year ago I recall spending many hours looking up Web Component Icons and what other sites were using and if there was an official version.
Example https://www.dataformsjs.com/en/
From the last image above the JavaScript icon is not official but it is widely used so in a way it's become the de-facto standard.
Perhaps if it doesn’t make sense to create an official logo an generic widely used logo would be nice. For my logo I choose a simple gear design to represent Web Components.
SVG Image from above Screenshots