RE: blog post for the Noun Project blog

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)