Standards Advancement - Logo / Icon

[ConradSollitt]

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

• https://www.dataformsjs.com/img/icons/web-components.svg
• https://github.com/dataformsjs/website/blob/master/public/img/icons/web-components.svg
• Image source is Sketch file in root of this project: https://github.com/dataformsjs/static-files

[ConradSollitt]

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).

https://scotch.io/bar-talk/an-overview-of-the-most-exciting-proposals-for-the-web-platform-related-to-web-components

[LeaVerou]

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:

• HTML
• Web
• Encapsulation
• Angle brackets
• Extensibility
• Letters "WC" (probably not something to follow further, as that also means toilet 😅)
• Metaphorical: Gears, wrenches, stencil, puzzle pieces

@ConradSollitt wanna go next?

[bennypowers]

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]

@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):

Logo

Wish list

• Icon will fit within a square nicely
• Icon will scale to different sizes nicely (large icon all the way down to a 16px favicon)
• Visually looks compatible with other W3C logos or widely used logos - HTML5, CSS3, Unofficial JS
• Icon that implies simplicity

Design Considerations

• Color
  • New Dominant Color - Compared to HTML5, CSS3, Unoffical JS - This would make it standout when seeing a list of Standard Technologies side-by-side
  • Shades of one Dominant Color
  • Multiple colors to indicate component re-use

Logo Ideas

• <-> - Fit to a square using shapes rather than text
• Several Shapes together - Square, Circle, Triangle, Pentagon, Hexagon, etc
• One Repeated Shape rotated different ways and optionally with different colors
  • Examples of this: Google Photo, Apple Photo on iOS, Walmart
  • In terms of Web Components this could be used to show one "Component" Shape being re-used with different attributes
• Simple Fractal Shape
  • Expanding on the previous idea a single shape could be rotated, sizes, etc using either a real Fractal or Fractal-like pattern
• Shield with Letters or "C" letter (based on the HTML5 logo)
• Page/Webpage or HTML5 with a gear or other shape in it. To me the gear implies complexity though so I would try to think of something else
• Combine 2 or 3 shapes to represent something - In my opinion Stripe is doing a good job of this on their main site (top sub-nav)
• "WC" Letters, while "WC" doesn't represent toilet for many places in America (at least where I lived), I'm know for a fact that I have actively looked "WC" (Water Closet) sign when I've traveled to other countries.
  • Perhaps if it the letters could be made into a nice design it could work. Major brands that use a single letter in an interesting way include Toyota and Tesla, and LG (link below) builds a smiley face with their letters
• Complex Single Shape - webcomponents.org or hybrids Web Component Library (link below)

Good Links for Logo Ideas

• https://thenounproject.com/search/?q=component
  • The Noun Project has 3 million Icons so it's very widely used site that other designers search for inspiration and ideas.
  • Other search terms related to this: Part, Piece, Module, Item, Webpage
• https://www.lg.com/global/about-lg-brand-identity
• https://github.com/hybridsjs/hybrids
• https://99designs.com/blog/logo-branding/famous-logos/
• https://blog.designcrowd.com/article/744/100-famous-corporate-logos-from-the-top-companies-of-2015
• https://www.brandeps.com/
• https://medium.com/microsoft-design/redesigning-the-office-app-icons-to-embrace-a-new-world-of-work-91d72608ee8f
• https://www.w3.org/html/logo/
• https://stripe.com/ Hover of [Products] in the Top Nav when using a Desktop/Laptop
• https://medium.com/design-bootcamp/why-googles-new-app-icons-are-pretty-bad-10f1ec40ab04 Example of how it's hard to please everyone with icons Personally I like these but see the author's point.
• 10 Billion more links on Google using "logo design" 🎉

Acronym or Abbreviation

In addition to a branding logo I would also go as far as propose having an acronym or abbreviation of Web Components.

• WEBC - This would be my preference
• WC - Toilet in many countries and it's only 2 letters which is very short

Some of my reasoning for this:

• Compared to other popular web tech or frameworks React, Vue, Mavo (:smile:) the word combo "Web Components" doesn't roll of the tongue as well in my opinion and it is long to type if you use the words in docs or code comments over and over
• Translation complications - for example should this be translated to different languages or should it be kept as is. Doesn't appear to be a census last time I looked. If translating it can be hard for the translator to remember to be fully consistent and either keep or translate.
• Difficult for non-latin language developers to remember or spot when mixed with other tech. Compared to seeing HTML, CSS, SVG or other acronyms mixed with code.

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

• HTML5 is easy to learn
• My site is built with HTML5
• I can write HTML5

Hypertext Markup Language

• Sounds complex, I'll learn something else or stick with HTML
• I have no idea if my site includes 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 🤔 At least something I've spent too much time thinking about 😆

[justinfagnani]

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]

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.

https://www.w3.org/html/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]

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]

I have always used the webcomponents.org logo:

[oscarotero]

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:

• The first logo at the left is the original, I think it have too many details.
• So I've simplified it (second logo) and I've narrowed a little bit in order to fit better in a square. I like the concept of <c to represent "web components".
• In the third version, I wanted to make the 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).
• Finally, due HTML and CSS logos have the shape of a shield, I've rotated the logo, so it combine better with them, although it looks more like a box (or a heart), instead a shield.

If you like something of this, I'll give you the svg. Feel free to leave feedback or suggest changes.

[skanne]

If I had a say, I'd pick the second version: <C

[graynorton]

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]

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]

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

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

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]

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]

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]

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]

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]

👆Now this I can stand behind. Carry on!

[Westbrook]

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]

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]

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]

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]

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]

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.