HTML5

The organization that vows to lead the Web to its full potential came to us and said, ‘I think we need to design a logo for HTML5.’ Once we’d privately and profanely expressed our excitement, we didn’t wait for them to ask twice.

We were honored to collaborate with the W3C and several prominent HTML advocates in creating the logo for HTML5. Such a unique and potentially important project is once in a lifetime opportunity — the context of universal adoption and unfettered usage was like no other design challenge we’ve faced. We are exceedingly proud of the solutions generated and the level of design integrity maintained throughout. The W3C staff was truly incredible in their commitment to a reasoned, informed design process and dutifully sought to keep its Membership informed about the project.

You can read the announcement at w3.org or read on to get a peak behind the scenes on this project.

Visit http://w3.org/html/logo for more.

Disciplines: Brand Strategy, Naming, Identity, Web Design

HTML5

W3C staff, membership organizations, web developers, academics, reporters, and the community at large are out constantly trumpeting HTML5 as the technology toolkit to power the next generation of amazing web apps. Unfortunately, they had no high-quality assets — logos, marks, word marks, and iconography — to help them get their message across. HTML5 is about standards and consistency across web browsers and toolkits, but there is no consistency of design between the multitude of HTML5 presentations, articles, blog posts, or books. The irony was not lost on the W3C or us. The existing options haven’t coalesced into a single identity, and they fail to capture the motivation, the excitement, the future, and the robustness that is HTML5. An HTML5 advocate we worked with said, “HTML5 is the third phase of web development: it’s moved from black art to established practice to a purpose-built, standards-based platform, instead of a collection of hacks and workarounds. With HTML5 we can build rich internet applications, targeting a broad range of platforms, easier and more powerfully than ever.” We couldn’t have said it better. And Opera, Mozilla, Google, Apple, and Microsoft all agree: HTML5 is the future. With the situation and possibilities understood, we began our work. Starting with the HTML5 spec and the markup itself, we amassed imagery, inspiration, and metaphors. We looked at current technologies and the competitive landscape of toolkits and markup schemas, and the current language, literature, and lexicon. (Not to mention gang signs. And unicorns.) Sketching identity concepts. We were drawn again and again to the star shape. The five points reflecting the title of our subject, the name and shape suggesting the expansiveness of power and possibility in the starry sky. We thought of the star as a focal point, considered the speed of light. Research revealed the sea star as a keystone species. We were onto something. We were drawn again and again to the star shape. The five points reflecting the title of our subject, the name and shape suggesting the expansiveness of power and possibility in the starry sky. We thought of the star as a focal point, considered the speed of light. Research revealed the sea star as a keystone species. We were onto something. Just like the sea star’s role in its ecosystem, the keystone in an arch holds the entire structure together. HTML5 is the touchstone — both technologically and from a sociological standpoint — for the next generation of the internet. HTML5 isn’t just primarily responsible; without it, we wouldn’t be headed where we are, and it is certainly the center of the action and attention. It is the keystone technology of open web platform and the future of the web. The keystone resembles a crest or shield. This badge shape and the heraldic marks with which it is so often associated, convey a rich tradition of power, trust, integrity, and pride. Some of our early efforts at working with the badge shape. Our HTML5 logo, in monochrome. The logo’s silhouette is that of a badge, implying both the formality and respect an undertaking of this magnitude demands, but also as a homage to the progressive community that proudly, and relentlessly, ushers in the future of web technologies. Simultaneously a badge of honor and a coat of arms, this crest represents the spirit and substance of the open web platform and the forward-thinking community making it a reality. Our HTML logo, in glorious color. The logo’s silhouette is that of a badge, implying both the formality and respect an undertaking of this magnitude demands, but also as a homage to the progressive community that proudly, and relentlessly, ushers in the future of web technologies. Simultaneously a badge of honor and a coat of arms, this crest represents the spirit and substance of the open web platform and the forward-thinking community making it a reality. We took great care in assuring that the logo — and indeed every aspect of the identity system — adhered to a rigid set of geometric guidelines. A classic case of restrictions breeding creativity, the system allows for tremendous adaptability while remaining stable, stylish, and true to its foundations. The three pairs of logo treatments on the right demonstrate how closely we looked at the exact proportions that created the most clearly identifiable and strongest badge. Using scientific classification and taxonomy of species as a metaphorical starting point, we identified the core technology classes orbiting in and around HTML5. You can’t talk about HTML5 without talking about its various counterparts, and our identity system engages in that conversation as well. Visually exploring the technologies at hand, hundreds of icons and dozens of styles were explored, reviewed and revised. Fitting perfectly into the stylistic guidelines and math established by the logo, a clear design language emerged. The eight technology class icons we settled on. Click on the image for an in-depth discussion about the thought and inspiration behind each of the icons. Ocupop also designed the website, wrote the copy, and is supporting the ongoing HTML5 effort with HTML5Shirt.com. The best T-Shirt ever? Certainly the best HTML logo-sporting T-shirt ever.

 

The HTLML5 logo goes beyond simply representing the HTML5 spec to embody the technology, and the open web movement, at its core. This starts with standardization — the logo and its progeny follow very strict geometric rules providing an incredibly adaptable yet stable and stylish identity. As you’ve hopefully seen out on the web, the logo, the icons, the colors and the type all work, and work well, in nearly every imaginable context (and probably contexts beyond our imaginations). From favicons to billboards, this mark was designed to hold together in the face any manipulation. Through simple adjustment of hue, the logo conveys incredible depth and dimension without dated or awkward flourishes. With just two shades of orange and two shades of gray, the standard logo offers a thoroughly refined and assuredly lasting visual impact. The container for the logo is shaped as a badge, implying both the formality and respect an undertaking of this magnitude demands, but also as a homage to the progressive community that proudly, and relentlessly, ushers in the future of web technologies. Simultaneously a badge of honor and a coat of arms, this crest represents the spirit and substance of the open web platform and the forward thinking community making it a reality.

Formal and fun, forward and fully evolved, this HTML5 logo is imminently extensible yet refreshingly complete — the W3C encourages you to use it as-is or build on it to make it even better. Just like the technology it lives amidst, setting a common and comprehensive baseline is just the beginning.

Why orange? Orange is a very hot, fast, and striking color, but not nearly as intimidating or aggressive as red. Orange implies excitement, yet with undertones of caution. Orange grabs your attention, but doesn’t scream for it. In Chinese color theory, orange is the color of organization. In medieval heraldry, orange was symbolic of strength and endurance. Sexy with a safety net, organized, powerful and lasting. HTML5, this logo, and orange go quite well together.

Links