This is an archived snapshot of W3C's public bugzilla bug tracker, decommissioned in April 2019. Please see the home page for more details.
The way the links to the different content categories are laid out curently on http://docs.webplatform.org/wiki/Main_Page could really use improvement. To the end, I have got Sebastien Desbenoit interested in helping to design some icons for thie purpose! I was thinking we could have a container with 6 floated boxes inside it, each cpontaining an icon and a text label. These could be fixed width, so that when the container gets below certain widths, the layout could shift from 3 x 2, to 2 x 3, to 1 x 6. Nice and responsive, but very simple. If we wanted to, we could have this as a fallback, and give modern browsers something more bullet proof, like CSS3 multicol, or even flexbox. I'm happy to work on a code prototype, or just leave that to Lea or whoever else. For the icons, I was thinking of something along these lines: * Concepts - an open book, or perhaps a characterture of that famous statue "the thinker" (http://en.wikipedia.org/wiki/The_Thinker) * HTML - a simple set of open and closed tags CSS - a paint brush to indicate style/decoration Accessibility - an opening door, to indicate access. I'd prefer to keep away from the obvious wheelchair logo, as I think it'd be better to use something else. Disabled people are reminded too much of disability by this icon. JavaScript - something technical looking, like a machine, or cogs, or a robot? SVG - a simple picture frame containing a simple image, such as a sun and a hillside. For the icon size, I reckon about 32x32 would be a decent size. I've tested a few sizes, and this looks like space for enough detail without being too imposing.
Created attachment 1215 [details] 32x32 icon size estimation
See attached image for icon estimation.
Also, this doesn’t look like it should be a table. It would be nice if it had icons, but I think there are more important issues to sort with that listing as well.
Indeed, the listing needs a new look. The icons are just a small contribution I can make to the design of WPD.
(In reply to comment #4) > Indeed, the listing needs a new look. > > The icons are just a small contribution I can make to the design of WPD. And we are incredibly grateful for it! I was just noting that we also need to fix the other issues *too*. :)
I'm currently for the pictograms inside the icons. The styling side will come later. Concept, the thinker is a great idea, but I fear it wouldn't be understandable for all peoples: it needs a cultural background. Perhaps the open book should do the trick. HTML, like Chris said a pair of bracket should do the trick. <html> or simply < > CSS - the brush might work for svg and css, so it won't be appropriate. perhaps a ".css{}" would work but what for svg? Accessibility - there's a new universal pictogram : a standing man with open arms in a circle. We should use it. JavaScript - A gear composed of a J and a S SVG - I was thinking about something around bezier curves as a vectorial tool. Quick pictograms badly drawn are attached.
Created attachment 1224 [details] Quick pictograms badly drawn.
Here's a second draft about those icons. The HTML icons are three proposals of style. - The first with pure Bitter font, - The second is in a pure WPD logo style, - The third is a mix. The colors are to be fixed too. Aside from concept and accessibility, they're not truly some icons, some kind of illustrations. They wore more shapes than the characters they support, they don't accelerate the navigation (where is the limit between icons and illustrations).
Created attachment 1237 [details] Draft 2 - icons
I think I like the pure WPD logo style icons the best Seb - it's nicely in keeping with the site branding!
(In reply to comment #10) > I think I like the pure WPD logo style icons the best Seb - it's nicely in > keeping with the site branding! While I too like the pure WPD style logo (#2), I think #3 would be best for legibility while having cool open and close tags.
Created attachment 1248 [details] WebPlatform icons Here's a new iteration of the webplateform homepage icons.
I really like how you are following the style of the main webplatform icon with your icons. However, I think I would like to see the icons all as more abstract pictures, rather than having the HTML, CSS, JS and SVG ones basically as just the text of the acronyms with a bit of styling and dressing around them. The reason is that most of the time, these icons will be used alongside some text that will state what the technology is anyhow. On the main landing page of WPD, in each case we will have the icon alongside the title, which will probably just be HTML, CSS, JavaScript, or whatever, and then a little bit of blurb about what the technology area is, below those. So to have the icon and the title, both stating the acronym, could start to look a bit repetitious.
The icon for accessibility and concepts look great, BTW.
I really appreciate the effort here, but I would urge that we use--whenever possible--the class technology icons that the W3C created and licenses for HTML5 and related technologies. [1] Peter Lubbers mentioned this in mail [2], and I agree emphatically. This will give us consistency with the larger standardization efforts around the world. [1] http://www.w3.org/html/logo/#downloads [2] http://lists.w3.org/Archives/Public/public-webplatform/2012Dec/0016.html
We shouldn't just take an easy way out and use logos already created by a Steward (or Stewards.) If a community member wants to take the time to create custom icons and/or logos then we should give it an honest look. There is some really good stuff in here and it also fits the sites style. (In reply to comment #15) > I really appreciate the effort here, but I would urge that we use--whenever > possible--the class technology icons that the W3C created and licenses for > HTML5 and related technologies. [1] > > Peter Lubbers mentioned this in mail [2], and I agree emphatically. This > will give us consistency with the larger standardization efforts around the > world. > > [1] http://www.w3.org/html/logo/#downloads > [2] http://lists.w3.org/Archives/Public/public-webplatform/2012Dec/0016.html
(In reply to comment #16) > We shouldn't just take an easy way out and use logos already created by a > Steward (or Stewards.) If a community member wants to take the time to > create custom icons and/or logos then we should give it an honest look. > There is some really good stuff in here and it also fits the sites style. I applaud people taking the initiative here; however, these are not just "logos created by a Steward (or Stewards)." These icons were created to be industry standards by the W3C: "Heralding this revolutionary collection of tools and standards, the HTML5 identity system provides the visual vocabulary to clearly classify and communicate our collective efforts." [1] My 2 cents. [1] http://www.w3.org/html/logo/
Ok, so I think we agree that there is a need to use recognised industry standards, but we are disagreeing on exactly what icons to use. I don't think the W3C icons will go with the look of WPD, and their meanings don't fit exactly with the meanings we want to show. So how about this: We use these icons as much as is appropriate. Where appropriate icons don't exist in the W3 set, we look for other recognised standards elsewhere. When we've found a set we like, we get Seb to create some "WPD-ised" versions of those icons?
(In reply to comment #17) > (In reply to comment #16) > > We shouldn't just take an easy way out and use logos already created by a > > Steward (or Stewards.) If a community member wants to take the time to > > create custom icons and/or logos then we should give it an honest look. > > There is some really good stuff in here and it also fits the sites style. > > I applaud people taking the initiative here; however, these are not just > "logos created by a Steward (or Stewards)." These icons were created to be > industry standards by the W3C: "Heralding this revolutionary collection of > tools and standards, the HTML5 identity system provides the visual > vocabulary to clearly classify and communicate our collective efforts." [1] > > My 2 cents. > > [1] http://www.w3.org/html/logo/ I realize W3C is the decider of industry standards at the moment, but I think WPD should feel timeless and unbias. The origins of front-end development have little to do with our Stewards. I would rather have icons that actually match the site well. We should stay away from the symbolic meanings behind said logos and make icons that have character due to the Docs itself, and not a Steward.
There are existing logos for all these technologies, not just HTML5. For instance, SVG’s logo is this [1], CSS’s is this [2] and JavaScript has [3]. These are not created by companies, but either by W3C or the community, and are widely recognized. If we want to make them fit WPD’s style, we could simply use single color versions, in a color that fits the WPD theme. But creating new logos when existing ones exist is suboptimal, in my opinion. [1]: http://www.w3.org/2009/08/svg-logos.html [2]: https://twimg0-a.akamaihd.net/profile_images/52124215/css_normal.png [3]: https://github.com/voodootikigod/logo.js
Thanks for your input Lea. I'll go away and do some research to look into the most likely industry standards for each icon we want, and then compile a list for Seb to look at. I still think we'll need to get Seb to "Webplatform-ise" the basic logos, as they come from different sources and it will end up looking disjointed and not fitting in, otherwise.
Research done. I think Seb should start working on some more mockups, unless anyone else has major disagreement with my comments here: Concepts I think what Seb has created so far is pretty good. I did a search for a concept icon, and found nothing much, except this icon on dribbble, which is rather nice - http://dribbble.com/shots/313718-Concept-Icon. But I think the lightbulb metaphor is likely to get confused with with both "idea" and "creation", which is not really what we want. HTML There is an icon listed at http://www.w3.org/html/logo/#semantics-desc, which we should consider using, as the W3C wants this to be the standard icon set for describing the different technologies listed here. As an alternative viewpoint, the noun project lists http://thenounproject.com/noun/html-code/#icon-No4991. CSS I had trouble with this one. Lea suggested https://twimg0-a.akamaihd.net/profile_images/52124215/css_normal.png, but I have never seen that before in my life, and couldn't find any other mention of it (of course, saying that, it is very hard to search for CSS logos and find anything else other than tutorials on implementing logos using CSS!). Has it been used that much? Perhaps we should just go with something similar to the CSS3 styling logo on http://www.w3.org/html/logo/#css3-styling-desc ? Accessibility The logo Seb has already drawn for accessibility looks like it is ok. I wanted to go away from the wheelchair logo, as I've never liked this, plus the person in the circle is listed on the noun project - http://thenounproject.com/noun/accessibility/#icon-No1872 - as being a well recognised logo for accessibility JavaScript The official JS logo can be found at https://github.com/voodootikigod/logo.js, and is pretty well recognised these days. SVG The official SVG logos are recorded at http://www.w3.org/2009/08/svg-logos.html. I would either go for the flower logo on it's own, or the half logo with "SVG" underneath it, as they are both fairly good for fitting into a square.
Thanks for the comments! I don't care if I need to restart everything from scratch as long as we can find an overall agreement for the line to follow. From what I read here and in the mailing list thread, there are two different topics in those discussions about the pictograms on the first hand and the style of the icons on the second hand. * For the style, we nearly all agree that WPD needs icons that are consistent with webplatform identity. IMO, it is a key point in order that webplatform does not look like a patchwork website. * For the pictograms in the icons, I see three possibilities from the discussion: 1. Redraw or find a consistent pictogram for each concept/language, 2. Use the language logo if it exists and 1. for the others, 3. Use the HTML5 logo guide for languages and 1. for the others. In my humble opinion, icons are here to shorten the navigation process so we should focus on their pictogram consistency for our users so perhaps starting from the language logos is a great idea. But this means we can make small modifications to fit in the WPD style. I second Taylor about HTML5 icons: using those symbols puts WPD in a time lapse and it should remain timeless.
And another page that probably needs to be linked from the main page: http://docs.webplatform.org/wiki/dom, pointed out by Garbee. I've raised this as a point of discussion for the next general meeting - what root pages need to be linked from the main page
1. I third what Taylor about HTML5 icons: using those symbols puts WPD in a time lapse and it should remain timeless. 2. Regarding DOM being added on to main page. Here's a reference to someone asking for that today: cody lindley @codylindley https://twitter.com/codylindley @WebPlatform - Shouldn't there be "DOM" documents included among the others on this page: http://docs.webplatform.org/wiki/Main_Page ? I tried to add it, no luck.
Thanks all, For the css icon, i'll try too draw something looking like the HTML5 styling icon but looking enough different to be timeless. For the DOM, I'll come back as soon as I found an idea for the pictogram under the icon. If anyone as some ideas, please feel free to add it.
Rough mockup for new Main Page available at http://docs.webplatform.org/wiki/TEST:main_page. The short paragraphs will be turned into short sentences about each technology, and the red squares will eventually be replaced with the icons for each technology.
(In reply to comment #27) > Rough mockup for new Main Page available at > http://docs.webplatform.org/wiki/TEST:main_page. The short paragraphs will > be turned into short sentences about each technology, and the red squares > will eventually be replaced with the icons for each technology. Looks good, only change I’d make is to remove the underline from heading links, since they already have a border-bottom.
(In reply to comment #28) > (In reply to comment #27) > > Rough mockup for new Main Page available at > > http://docs.webplatform.org/wiki/TEST:main_page. The short paragraphs will > > be turned into short sentences about each technology, and the red squares > > will eventually be replaced with the icons for each technology. > > Looks good, only change I’d make is to remove the underline from heading > links, since they already have a border-bottom. Good call Lea. For the moment, I've removed the border-bottom rather than the text-decoration, as this is easier to do with the markup I've got to work with. We can make this work better in the final template. Are you able to help with implementing styles for this? Or I can do it, if I can get access.
Created attachment 1269 [details] WPD icons - Draft 2 Here's a second list of all the icons based on the last remarks. I need to work on DOC and Beginners pictograms too.
Thanks for sending these in Seb. Hrm. I am unsure whether sticking to the same translucent overlay style as in the Webplatform "W" works for icons as small as this. The "JS" text looks bit awkward, and the SVG icon is not really recognisable, for example. Would it solve the problem to cut out the translucent overlaps? Could we try that for a few? Or do we just need a style that fits in with the site's style and colour scheme, but that doesn't try to follow the "W" style at all? I'm pretty sure I said this before somewhere. I like the overall direction the icons are taking, but think the style of them is not quite working
Created attachment 1270 [details] Icons - 3 Here's the icons without the addition style. The color could be changed, I choose one but it needed to be test on the interface to find the right one.
I think these look a lot better. I still think: * The SVG icon could do with being shaped a bit more, like the original * The JS icon could do with just using kind of font that would fit in. Something shapely and sans-serif, along the lines of the ubuntu font? * The accessibility font looks good, but the central person part of the icon could do with being just a little bit smaller, so it fits inside the circle better.
Thanks for all your comments Chris, In order for the icons to have a coherent style, I use the same elements for all the part of each element. For the accessibility icons, I fear I reach the smallest size, so it should need to reshape all of them. I use the same process for the JS icon. I'll rework the font but I fear it won't be coherent if I use another other font like ubuntu (or perhaps bitter).
Created attachment 1271 [details] Icons-4 Thanks for all your comments Chris, In order for the icons to have a coherent style, I use the same elements for all the part of each element. For the accessibility icons, I fear I reach the smallest size in my new version. I use the same process for the JS icon. I reworked the font but I fear it won't be coherent if I use another other font like ubuntu (or perhaps bitter).
I think the JS and SVG icons now look much better, Seb. But the a11y icon now looks worse. I can see what you mean! Put that one back to the way it was ;-)
Created attachment 1272 [details] Icons - 5. And here we are. By the way, do you have any idea for the DOM pictogram?
For the DOM, I would try to create a stylised tree of some kind.
Created attachment 1273 [details] Icons 6 Here's two proposals: One for DOM and one for beginners guide.
For "Beginner's guide", I was thinking something more suitable would be a take on the building blocks you always see associated with "basic" or "basics". For example http://www.careerrocketeer.com/wp-content/uploads/Back-to-Basics.jpg
Created attachment 1274 [details] DOM tree attempt for the DOM tree icon, I like the vertical brackets, but thought the tree could be done so that it looks a bit more like an actual DOM tree. I have attached a very quick scribble I did in Fireworks, to give you more of an idea.
Created attachment 1275 [details] DOM icon attempt And here's a DOM proposal
Created attachment 1276 [details] Beginners icon attempt 1-2-3 :)
The last two icons look good. I'm pretty pleased with them! I guess we should solicit other opinions before we sign them off ;-)
Created attachment 1277 [details] Icons in context Here the icons in contexts in order to test colors.
There are still in vectors too. I'll need to do some clean pixels icons and the x2 icons for high resolutions screen.
I like the middle one the best - the top one fits the colour scheme the best, but I think the middle one benefits from standing out a bit as well, makes the icons not get lost on the page.
Should I make three different files?
I'm not sure what you mean?
Do you want an image per color? A screenshot for the blue icons, one for the red...
yes. If it's not too much trouble.
Created attachment 1284 [details] 3 colors - 3 screens here's the file Chris.
Is that the right ZIP file? These are a bunch of icons we didn't want to use in the end, surely? No DOM icon, no beginner icon, and the others look like old versions?
Created attachment 1285 [details] 3 colors - 3 screens - The right file. Aaaargh. Sorry.
Much better! I think I like the red and the blue almost equally, the orange not as much. Can you do a couple of samples pages that show ALL the icons in context? These screens are missing a couple. Then we can solicit feedback from the team.
Created attachment 1286 [details] Full screen preview - Red & Blue Dear Chris, Please find enclosed the blue and red proposals for the webplatform Main Page icons. Cheers, Seb Desbenoit
Created attachment 1288 [details] icons-DOM-2
Created attachment 1289 [details] icon-CSS-2
Created attachment 1290 [details] icon-html2
Created attachment 1291 [details] icon-html3
Created attachment 1292 [details] Full screen preview - 2 - Blue
Created attachment 1293 [details] Full screen preview - 2 - Red
Created attachment 1294 [details] html icon - svg The html icon in svg format in order to allow Doug to play :)