Re: blog post for the Noun Project blog

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 08:51:20 UTC