Opinions on corporate and brand identity work.

A division of UnderConsideration.

Share ›

This is a very old entry — images are small, formatting is off.


HTML5 Validates with New Logo

Reviewed Jan. 18, 2011 by Armin

Industry / Technology Tags /

HTML5 Logo, New

Over the last six months or so, some of the hardcorest web developers and designers have started to test the possibilities of the newest markup for building websites, HTML5. I realize that some might not even be aware that there was HTML1, 2, 3, or 4 or what it even means for coding language to be upgraded. In a nutshell: HTML, overseen by the World Wide Web Consortium (W3C for short), is the gobbledygook text that gives structure to a website; in its first iteration, the amount of things you could do with it was limited and in each version it has added bits of language that allow for more versatility. This latest version reflects the advancement of the web in general, by natively allowing the use of multimedia or web fonts, for example, as well as having a more robust set of “tags” — i.e., the ‹em› tag makes things ‹em›italic‹/em›, but that’s just the most basic example — that power each website. HTML5 has gotten a lot of support and generated plenty of excitement and the W3C wants to encourage its use so they are introducing an official HTML5 logo that will serve as a badge for those that are adopting the latest and geekiest markup language. In charge of designing the logo, identity, and a set of icons was Honolulu, HI-based Ocupop.

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.
W3C Blog Post


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.


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.
— Ocupop Creative Director Michael Nieling


Some sketches and a couple of other ideas considered.

This is a great strategy by the W3C, giving the organization a visual tool that the developer and design community can rally around and be proud to show off — a much needed boost, since most of the W3C visual palette is drab. The actual logo, or badge, is bold and simple with a solid structure, if a little superhero-ish, but it’s definitely cool enough that people will not mind displaying it on their own websites. They push the color version a little too hard on the logo website and it would probably benefit them to show off the single color version too as I think more people might opt for it over the bright, road sign-like color version.


Icons for Semantics; Offline & Storage; Device Access; Connectivity; Multimedia, 3D, Graphics & Effects; Performance & Integration; and CSS3.

In addition to the badge, there is a set of icons that represent the different technologies that HTML5 offers. People can use the “Badge Builder 5000” to customize the badge and append the icons of the different technologies they used. Again, a great move by the W3C to offer a standard for users that can easily be accessed. Although the icons aren’t perfectly clear without their explanations they do form a cohesive whole and work very well with the badge.


Branding a markup language sounds like a strange proposition but this works very well and now it will be up to developers and designers to decide if it’s something they want to embrace.



Share ›

Spotted Around the web

New Logo for Bojangles’

New Logo for Bojangles'
Spotted Jul. 9, 2020

Pinned Recent, Big Stories


New Logo for Lifetime

New Logo for Lifetime
Posted Mar. 26, 2020