Re: blog post for the Noun Project blog

Thanks Doug - these are all good; I have implemented all your changes.

Seb, I'll send you this final version separately, so you can pass it on to the Noun Project folks

Also, I agree about updating the HTML icon - seb, can you send me an updated PNG, so I can implement it on the site?

Chris Mills
Opera Software, dev.opera.com
W3C Fellow, web education and webplatform.org
Author of "Practical CSS3: Develop and Design" (http://goo.gl/AKf9M)

On 18 Jan 2013, at 08:51, Doug Schepers <schepers@w3.org> wrote:

> Hi, Chris, Seb-
> 
> Comments inline...
> 
> On 1/17/13 5:31 AM, Chris Mills wrote:
>> Thanks! Fixes all made. Anyone else?
>> 
>> Chris Mills
>> 
>> On 17 Jan 2013, at 09:55, David Kirstein <frozenice@frozenice.de> wrote:
>> 
>>> I thought it's "WebPlatform.org" and not "Webplatform.org".
>>> 
>>> That "All of us." sounds a bit strange (all of us are what?).
>>> 
>>> (HTML icon) "our first ideas ware based" were?, and maybe find out who that
>>> "someone" was (Doug gets mentioned and that someone not?)
>>> 
>>> "Too small and you can make the icon out out" throw one "out" out? Also
>>> "can't"?
>>> 
>>> "to be used consistently the world over", rather "over the world"?
>>> 
>>> Otherwise sounds good, I like it! :)
>>> 
>>> -fro
>>> 
>>> 
>>> -----Ursprüngliche Nachricht-----
>>> Von: Chris Mills [mailto:cmills@opera.com]
>>> Gesendet: Donnerstag, 17. Januar 2013 10:31
>>> An: public-webplatform@w3.org
>>> Betreff: blog post for the Noun Project blog
>>> 
>>> Hi all,
>>> 
>>> Seb and I have been talking to the Noun Project about Seb's WPD topic icons,
>>> and they want us to write guest blog post about our icons and who we are, as
>>> they love the W3C. See below for what Seb and I have written - any comments?
>>> 
>>> <h1>Webplatform.org icon design</h1>
>>> 
>>> <p>The <a href="http://webplatform.org">Webplatform.org</a> community is
>>> dedicated to spending the new few years creating and maintaining
>>> <em>the</em> definitive guide to client-side open web technologies. We are
>>> shepherded by the <a href="http://w3.org">W3C</a> and other <a
>>> href="http://www.webplatform.org/stewards/">stewards</a>, whose job it is to
>>> keep things moving, get people interested in working on the site, and fund
>>> the project. The stewards are naught without the power of the larger web
>>> community however — the real strength of the site is that it is Wiki-based,
>>> so anyone has the power to help improve and add to the documentation. It is
>>> our web and our documentation. All of us.</p>
>>> 
>>> <p>When creating a <a href="http://docs.webplatform.org/wiki/Main_Page">set
>>> of icons</a> for the main documentation topics on the site, the design brief
>>> was thus:</p>
>>> 
>>> <p>"create some icons to represent the major topic areas we are covering on
>>> WPD, which should fit in with the look of the site, but still be based on
>>> any already existing conventions for those topics."</p>
>>> 
>>> <p>How did we approach this work? Well, an icon relies on three
>>> elements:</p>
>>> 
>>> <ul>
>>>  <li>Its pictogram (the raw shape of the icon)</li>
>>>  <li>Its style</li>
>>>  <li>The context it is used in</li>
>>> </ul>
>>> 
>>> <p>The context and the style were the easy parts: Webplatform.org is a
>>> universal documentation platform for client-side web technologies, and the
>>> style was drawn from the site colours, and our <a
>>> href="http://docs.webplatform.org/w/skins/webplatform/images/logo.svg">mecca
>>> no-like logo</a>.</p>
>>> 
>>> <p><img src="wpd-icons.png" alt="the main index page for web platform docs
>>> on webplatform.org showing all the icons in use"></p>
>>> 
>>> <p>The pictograms took a bit longer to choose. For each icon, we needed to
>>> choose the right shape to build our logo on.</p>
>>> 
>>> <ul>
>>>  <li>"JavaScript" and "SVG" were easy too — each one has a recognised
>>> standard icon, so we just built on those.</li>
> 
> s/easy too/easy/
> 
> 
>>>  <li>"General web concepts" and "Beginners guide" were easy to decide too,
>>> having been taken from intuitive concepts (a book for concepts, a pile of
>>> baby bricks for beginners).</li>
>>>  <li>The shape for "Accessibility" took more time: we did not want to use
>>> the classic wheel chair icon, as we felt that it focuses too much on
>>> "DISability" rather than "ability" and "enabling". In addition, creating an
>>> accessible website means building a tool that is available to everyone.
>>> That's how we arrived at the idea of universality: making something for all
>>> mankind. The Vitruvian Man is already well-known as a symbol of
>>> universality, so we built our icon on him!</li>
>>>  <li>With "HTML", our first ideas ware based on the classic angle brackets,
>>> but we thought they were turning out a bit uninspiring. Then someone
>>> reminded us of the <a href="http://www.w3.org/html/logo/">W3C's HTML5
>>> logo</a>, which is in the shape of a shield. To ensure longevity of our icon
>>> and not limit it to a particular version, we suppressed the 5 and based our
>>> pictogram on the shield only (we also had a version with the 5, for a
>>> subtopic we did specific to HTML5-related articles.)</li>
> 
> Seb, didn't we agree to go with the brackets-inside-sheild icon I suggested, to match the solid fill of the other icons and to suggest HTML more?
> 
> http://lists.w3.org/Archives/Public/public-webplatform/2012Dec/0331.html
> http://docs.webplatform.org/wiki/File:WPD-icon-html-brackets.svg
> 
> If so, maybe this bit could read:
> 
> [[
> <li>With "HTML", our first ideas ware based on the classic angle brackets, but we thought they were turning out a bit uninspiring. Then someone reminded us of the <a href="http://www.w3.org/html/logo/">W3C's HTML5 logo</a>, which is in the shape of a shield. To ensure longevity of our icon and not limit it to a particular version, we combined shield with the brackets (we also have a version with the 5, for a
> subtopic we did specific to HTML5-related articles.)</li>
> ]]
> 
> 
>>>  <li>The "DOM" (Document Object Model) has no recognised standard icon, but
>>> is generally known to be a tree structure. We therefore started off with
>>> some ideas for an icon based on a logic tree, but these proved too
>>> complicated to work in such a small space. Doug Schepers (W3C) therefore
>>> suggested a simpler approach, which you can see in the final icon.</li>
>>>  <li>The "API" icon marries two concepts, a blueprint and connecting gears,
>>> which nicely fit with API concepts such as code reuse, and connecting
>>> services together.</li>
>>>  <li>The "CSS" icon was invented from scratch. Since CSS is all about
>>> style, the two pictograms we deemed ideal were a "crayola-style" pen for the
>>> creativity, and the angle brackets to represent the code aspect.</li>
> 
> s/angle brackets/curly brackets/
> 
> 
> Regards-
> -Doug
> 
> 
>>> </ul>
>>> 
>>> <p>Each icon is fairly simple, but a few iterations were required to get the
>>> colour and sizing exactly right. In such a limited space, you have to be
>>> really exact. Too small and you can make the icon out out; too big and the
>>> icon looks crowded and doesn't sit right. In terms of the formats we have
>>> available, we decided to provide both PNG and SVG: SVG for crisp
>>> representations at larger sizes, and PNG for pixel crisp renderings at small
>>> sizes.</p>
>>> 
>>> <p>Once the icons were agreed and implemented on the site, we decided to
>>> submit them to The Noun Project: it is doing an amazing job with building a
>>> standard pictographic language for the world to use to communicate more
>>> freely and openly. Having icons available for different technologies to be
>>> used consistently the world over would make web developer conversations much
>>> easier!</p>
>>> 
>>> 
>>> Chris Mills
>>> Opera Software, dev.opera.com
>>> W3C Fellow, web education and webplatform.org
>>> Author of "Practical CSS3: Develop and Design" (http://goo.gl/AKf9M)
>>> 
>

Received on Friday, 18 January 2013 12:04:54 UTC