Re: blog post for the Noun Project blog

Thanks! Fixes all made. Anyone else?

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 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>
>  <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>
>  <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>
> </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 Thursday, 17 January 2013 10:32:11 UTC