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">meccano-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 09:31:44 UTC