An HTML5 Logo

W3C unveiled a logo for HTML5 today. HTML5 in the broad sense covers many different technologies at varying degrees of standardization and adoption. Commercial sites have begun to take advantage of some of the technology, and we are excited that this logo will help raise awareness about HTML5 and W3C. Please check out the logo home page for information about free stickers. We are also selling T-shirts and part of the proceeds will support the HTML5 test suite effort.

A number of people have already asked me "What does the logo represent?" We intend for it to be an all-purpose banner for HTML5, CSS, SVG, WOFF, and other technologies that constitute an open web platform. The logo does not have a specific meaning; it is not meant to imply conformance or validity, for example. The logo represents "the Web platform" in a very general sense.

The logo is available under a permissive license (Creative Commons 3.0 By) so that you can make it fit into your own designs. I hope you find the logo useful and invite you to share your creative applications of it with us on this thread.

As a special treat, I’d like to introduce Michael Nieling, the Creative Director at Ocupop, the design firm that developed the logo with us.

Ian Jacobs (IJ): I think the W3C community would be interested in hearing your perspectives on the design.

Michael Nieling (MN): As with most productive design conversations, this one started with a desire for clearer communication. As you're aware, the term HTML5 has taken on a life of its own; there has been significant confusion and debate both within the developer community and in the public at large as to what exactly HTML5 is when the term is used outside of simply referring to the spec itself. This variability in perception is what inspired the project - a group of developers and HTML5 evangelists came to us and posed the question, 'How can we better communicate all of the technologies and potential that HTML5 represents?' ...and the resounding answer was, the standard needs a standard. That is, HTML5 needs a consistent, standardized visual vocabulary to serve as a framework for conversations, presentations, and explanations moving forward.

IJ: W3C has also used the phrase "open web platform" to refer to the larger set of technologies. We had begun a logo design effort internally for the set of technologies, but put it on hold towards the end of 2010. How did you start your design process?

MN: In addition to lots of research, interviews, and seemingly never-ending web comment threads, we started giving casual presentations - to companies, colleagues, friends, and our moms - and learned what worked and what didn't when talking about HTML5. We went through rounds of review discussing the semantics of the movement, we developed a taxonomy that you currently see manifested as the 'technology classes' on the logo website; in short, we started, as I mentioned earlier, by defining the communication framework, the vocabulary. Once we had a foundation in place there, we began work in earnest on the logo - starting with a thorough design brief based on all of the above.

IJ: The HTML badge is the foundation for the framework. What inspired that image?

MN: On our agency website we have a more visual description of the evolution of the mark, but I can give you the narrative form here. We start any logo development project with really a pretty standard design process - we research, build a brief, amass keywords, create concept boards, and then we get to sketching. In the concept board phase of the project, a few focal points really stood out to us - stars, sea stars, and archways.

Stars were first on the list as your run-of-the-mill, hand-drawn star has five points and there's definitely a depth meaning in stars as they relate to the power and potential of HTML5. Stars led us to sea stars: mascot-as-logo is a proven communication tool used in this space before - it lends personality and life to what might otherwise be perceived as dull and technical. Additionally, sea stars are a keystone species - though a quick Wikipedia search would surely provide better background, keystone species hold entire ecosystems together, they shape the world around them, and without them, things start to fall apart. Lastly, 'keystone species' led us to the concept of the keystone in an arch - again, though every stone in the arch adds strength to the structure, the arch will not stand without the stabilizing effect of the keystone.

So, hundreds of star, archway and adorable sea star sketches later, we really focused in on the shape of the keystone and (in what seems an obvious evolution) it's incarnation as a crest, badge or shield. Not only is a keystone is a great metaphor for how HTML5 stands at the center of this current technology movement, but the final design started to take shape simultaneously as a coat of arms and badge of honor we felt captured the spirit and substance of the open web platform and the community surrounding it.

IJ: How do you build confidence that a logo you have designed will have the desired impact?

MN: Paul Rand was quoted at some point saying that great logos have 'the pleasure of recognition and the promise of meaning.' At first glance, people immediately see the number five, the badge, the power, and the excitement of this logo and the movement as a whole - they get that 'pleasure of recognition' - they get it immediately. Then the shape, the shading and very real latent meanings we talked about earlier also come through. That promise of meaning, that potential that the open web platform and the 'new' HTML5-driven web offers, that's there too - but the point Rand was making was also about the ability of a logo to take on meaning, to evolve - the designer can only do so much, the consumer of the logo makes the final call...and as you and I talked about at the very beginning of this interview, I am confident that we've provided a very clear and effective baseline of vocabulary for HTML5, the syntax and ultimate meaning is up to the community.

IJ: Thank you for sharing your thoughts about your work. I'd also like to thank Seth Ladd, who was instrumental in making this project happen.

Michael Nieling is a designer, educator, father and dog owner, he is the Creative Director at Honolulu-based Ocupop (www.ocupop.com) and also teaches logo design at MIAD.