Co.Design

HTML 5's Fresh Branding Aims at Inspiring Geeks, Hints at Web's Future

Designer Michael Nieling of Ocupop on why the new face of the open web looks like it does -- and what the details say about the web's future

HTML5 is many things to many people. It's a technical spec, it's an open-web philosophy writ large, it's a standards battleground with unintended consequences, it's The Future of The Internets?! How do you design a logo for all that?

That's the problem that the World Wide Web Consortium (W3C) handed to Ocupop and its creative director, Michael Nieling. And their answer is already turning a lot of heads. As Liz Lemon would say, BLAMMO:

HTML-5-Logo

It's not just a technical spec: it's truth, justice, and the not-only-American way!

To those who say "I like it, but it looks too much like a superhero symbol": "No fucking shit," says Nieling. "We had comic book heroes on our concept boards. That's exactly what we were aiming for." (Yep, he's about as bored as we are with the insta-hate in certain quarters of the internet for any new logo. But I digress.) The reason, he says, is that HTML5 has come to "mean more than just the technical spec." In other words, it's not just the gobbledygook you see when you click "View Source" in your browser -- "it's a flag to wave, a coat of arms, that means 'I support and am helping to build the future of the web." (Specifically speaking: open, standards-based web applications that are as rich and dynamic as any desktop app.)

HTLM-5-Sticker

Let's get pumped!

The new logo is not a technical validation, nor is it intended "to become the next 'USB symbol,'" says Nieling. "It's a standard for the standard, a touchstone for enthusiasm," aimed at designers and developers to get them excited about building new things. Nieling zeroed in on heraldry imagery to give the mark "universal representations of 'powerful', 'official', and also 'crosscultural'." That last part was especially important given HTML5's global impact -- which is why they quickly iterated away from Captain America-esque ideas like this:

html

But Nieling didn't stop at just HTML5. Because the open-web "movement" encompasses other sub-ideas and technologies (such as CSS3), he created an icon set intended to complement the main logo and signpost what specific technologies a certain developer or site is using.

html

The one highlighted above stands for "device access" -- the ability of HTML5 to hook into and even control gadgets outside the browser itself. "This was the hardest one for us to figure out, because it's about really cool things that may not be invented yet, but are coming," says Nieling. They eventually settled on a subtly futuristic pictogram that could be a set of virtual reality goggles or a new kind of TV -- in other words, "awesome stuff that HTML5 may one day enable."

connectivity

The icon above, connoting "connectivity," is less obviously successful. Intended to depict a stylized plug inserting into a socket at an angle, it looks (to me, anyway) more like an insignia from a Klingon warship. Another challenging icon for "semantics", shown below, uses connotations of military rank to suggest order and organization of data; Nieling says that he's gotten positive feedback about it from developers.

semantics

In all, Nieling doesn't consider his designs sacrosanct (in fact, since they're published under a Creative Commons license, he expects less-than-flattering variations of them to start cropping up online any minute). But that's the point. "It's a start," says Nieling. "An icon is a vessel into which meaning gets poured over time -- you can only do so much as a designer. [The HTML5 mark] is a vehicle to communicate the movement and the platform consistently, but the supporting elements and the system as a whole will definitely continue to evolve."

Add New Comment

1 Comments

  • Howard Stein

    The HTML 5 logo is beyond awful. A cross between a football badge and a gas station. Nobody cares about the CSS. Let designers do their work. That's what we do.
    And Michael Bierut's BIG10 is fine. It walks a difficult line with cleanliness of thought and years of experience. This is not work for amateurs. Well done Michael.