Design by Fire • Rebranding the World Wide Web Consortium

Rebranding the World Wide Web Consortium Sep 30th, 2004

Last week, I got an email from Dean Jackson asking me if I would be interested in potentially helping the W3C for a small job. We also discussed a potential rebranding of the W3C logo, although just for fun - not for real use. Dean even suggested I write a blog entry on the work.

Current W3C logo

What an interesting idea, I thought. But is he crazy?

Given the ups and downs of emotions that always come from uncensored feedback produced by an audience sitting in the ether of the internet, I hesitated at the thought of blogging how I would design a logo specifically for the W3C. I mean, after I was both roundly criticized and praised for the latest iteration of Design by Fire — which I had admitted was nothing more than a quick knock-out to get back control of my blog to produce more content than spend time code tweaking — how could I face that barrage again?

I guess I’m a glutton for punishment. Besides, whatever I came up with should be better than their current logo above. Ultimately, I won’t be the judge of that.

School of Paul Rand

Everyone has certain designers they look up to. One of mine has always been Paul Rand. I’ve always found myself attracted to the corporate logos he has created, along with the sublime playfulness always present in his work. Like many other designers, I was quite annoyed to see one of Rand’s best logos replaced by an unworthy successor.

In Rand’s book, From Lascaux to Brooklyn, he outlines the evolution of a logo idea for Okasan, a Japanese securities company. The original logo is nothing but a thickened, perfectly circular “O”.

Original Okasan logo

Rand notes that in the word Okasan is “OK”, a word “full of meaning and universally understood.” He takes the word “OK”, turns it on its side to discover a simple anthropomorphic figure, something that is easy to discover and remember for the viewer. It’s also easy to draw. Sharpening the letters then rewrapping the figure in a circle reminiscent of the original logo finishes off the design.

Evolution of OK

An elegant, simple idea that is further strengthed by the unique application of the name of the company to support the logo.

Final Okasan logo

Why am I passing along this example? The evolution of this logo as presented by Rand is the genesis for this blog entry. While I’m not the best judge of my own work, I found the idea I used for the W3C idea to be similar in approach.

Finding an idea for the W3C elsewhere

When Dirk, Bob and I were planning our new design firm, the original name Dirk and I had come with was Syntex Studios. A combination of the words “synthesis” and “technology.” Obviously, it wasn’t the best choice as the word has an awkward, almost sinister sound to it. We finally agreed on Involution Studios, which means “a state of being involved.” This name works for what we want to do and accomplish on so many levels while also being reminiscent of innovation and revolution.

But while the Syntex name was around, I toyed around with ideas for a logo for it. To me, the word “syntex” was similar to “syntax” so I explored ideas down that line of thinking. What is syntax? Well, the word has a few specific definitions, but I settled on the concept that syntax for a technology design firm would have something to do with code. Specifically, with mark-up code.

So I looked at a bunch of mark-up for a while.

Code code code

And like others who look at a lot of mark-up, invariably one always sees the three characters that create the foundation for mark-up out of all the verbosity in code.

Main three characters for mark-up

The “greater than,” “forward slash” and “less than” characters.

Evolving the concept

After spending a great deal of time with pencil and paper, I somehow found myself following this simple evolution of an idea using these three characters.

Evolution of characters into shape

In the end, I discovered a three dimensional cube could be built from the characters. The idea that these characters in mark-up could create an object as well formed as a cube was powerful to me. And yet when looking at the cube, the characters don’t quite reveal themselves unless you know to look for them. There’s a sense of playfulness and exploration with the shape.

Further refinement yields this.

The code cube

The final result is a subtle nod to using a start tag as the top of the cube and an end tag as the bottom. It also produces a less busy shape that is more pleasing to my eye.

The code cube

Once I had the cube, it became apparent that as a dingbat it could be used in a playful fashion.

The dingbat can be rotated, allowing it to placed near other shapes based on what looks best given the context. I found the 20 degree rotation the most aesthetically pleasing as a default.

Rotation of code cube

It can change color, allowing for one central color to be used as the main brand but also other colors if needed. For example, one section of a website could be color coded based on content and the cube could adjust to match.

Coloring the code cube

Finally, the dingbat can be used with the name to create a single logo but it also works well on its own. If merchandising was an option — t-shirts, baseball caps, pens, and such — the cube makes for a good mark to use on those items all by itself.

Repurposing the cube

However, in the end, the dingbat seemed to have little to do with what we felt were the core values for Involution Studios. Our company isn’t about code or development, even though it plays a role in what we do. So while the dingbat was a novel approach with an interesting backstory, it seemed to have little to do with our firm. We dropped it as a candidate for our company.

Weeks later, after Dean and I went back and forth a little over email, it dawned on me that while the cube made little sense for Involution, it actually made a great deal of sense for the W3C. So I pulled out the cube and went to work on it in conjunction with the letters “W3C.” After playing with many different font variations, I went with Trade Gothic Bold Condensed No. 20.

The W3C is by nature a somewhat conservative organization that is built on strong foundations for their technology. Trade Gothic is a font that helps project that image.

W3C in Trade Gothic

The font itself might be a bit too conservative. After all, the W3C also represents innovation and forward thinking in the world of technology. So to take the edge off of Trade Gothic I bevelled the corners of the font.

Bevelling the corners

The final type face is clean, strong and powerful, yet with a hint of softness. (Editor’s Note: This low resolution sample is difficult to see the difference. I will post a better visual example later.)

The final result

Combine the dingbat with the type treatment and here it is, one idea for a rebranding effort for the W3C.

New logo variation

Since I wound up not using the code cube for Involution Studios, I have offered this logo to Dean Jackson and the W3C for free if they want to use it. A gift from one designer back to a group that has helped make possible a future in this exciting field of high technology design. Even though I grumble and rant about the W3C from time to time, I have the upmost respect for everyone in the organization and all their hard work. I feel this logo would put a stronger, more recognizable and professional face on the organization as it moves forward into the future.

If they choose not to use it, so be it. Corporate logos and brands are a tricky business. It’s very difficult to make everyone happy and find consensus. I’m sure many of you reading this probably don’t care for the logo. Such is the life of a designer. There are plenty of other ideas rumbling through my head if the W3C wants to engage me in rebranding themselves.

Regardless of the outcome, I still found the evolution of this particular idea enjoyable and immensely satisfying.

Bullet

Standards rant

Repeat after me Separator Standards do not block, impede or otherwise hinder innovation. Businessmen, engineers or product managers who only care about how they want to implement technology or only care about their own bottom line are the ones doing the real damage in the larger economic picture.

Design by Fire strives to be as standards compliant as humanly possible in spite of the fact that those in charge of developing the technology, the browsers and the operating systems can't seem to to code to the W3C specification with 100% compliance.

However, even though I'm a firm believer in standards, I'm beyond sick and tired of trying to figure out what works and what does not work according to the W3C specification. So while I make every attempt to do the right thing, occasionally I'll just do what I have to get the thing working. In other words, if you run any Design by Fire URI through a code validator and find invalid markup or css, please don't bother sending me an email.

With that little rant out of the way, here are some good articles about the benefits of web standards.

About Web Standards

Web Standards for Business

And of course, there's Zeldman's Designing with Web Standards, which is easily one of the best reads from both a practical and technical point of view on the subject.

All of these sources discuss simplification of code, rapid development, smaller file sizes, faster download times, better accessibility for a larger set of users, easier code maintenance and platform scalability - all benefits of standards at a technological level. There's also some ROI discussion on using standards.

Really Simple Syndication is still a pain in the ass

Here's the RSS feed.

Design by Fire RSS Feed

You should know the drill by now.

Andrei Michael Herasimchuk
Designer

Updated June 2006 Separator The quick and dirty summary is that I am largely considered one of the first official interface designers hired by Adobe Systems. That is, the first one hired to do nothing but interface design across the professional product line. I worked personally on the interfaces for Adobe Photoshop, Adobe Illustrator, and Adobe InDesign.

Andrei

One of these days, I'll convince Adobe's legal eagles to let me write a book about all that I have been through while working on those products. I just doubt they'll agree to it in my lifetime. Until, then you'll have to be satisfied with the History of Photoshop, an article written by a long-time friend of mine, Jeff Schewe.

Work

Principal bullet Involution Studios
July 2004 - Present

Project Lead, Adobe Lightroom bullet Adobe Systems
December 2002 - June 2004

Director, User Interface bullet ePeople
April 2001 - December 2002

Director, User Interface bullet Impresse
January 2000 - April 2001

Director, User Interface bullet Mambo.com
August 1999 - January 2000

Senior User Interface Designer bullet Adobe Systems
August 1995 - July 1999

Co-Founding Member, Director bullet Specular Int'l
June 1990 - August 1995

Play

Having the opportunity to work on Adobe Photoshop and Adobe Lightroom has given me a chance to explore photography in way I would not have had access to otherwise. You can find samples of all my personal work on this web site, and unless otherwise noted, everything here is photographed by me.

For a short period of time, I was exploring a screenwriting career. I had a script optioned by Hyde Park Entertainment (a division of MGM), a studio that has since gone under. I even had an agent in Beverly Hills for a short period of time.

I enjoy playing poker on the side and find the game infinitely fascinating. I have made the final table in a few bigger tournaments. One at The Hall of Fame Poker Classic and the other at the Bay 101 Open, but no World Series of Poker bracelet for me yet. I have had the opportunity to play against some world-class poker professionals and have gotten crushed by them.

In my off time I play bass guitar and far too much World of Warcraft.

Publications and Awards

Industry Awards bullet 1995-2000
Adobe Photoshop, Illustrator and InDesign have won far too many awards than is possible to list here.

The History of Photoshop bullet February 2000
An article written by Jeff Schewe for Photo Electronic Imaging Magazine. This covers the history and development of Photoshop. A copy of this article can be found here in PDF format. You can also find another copy on Jeff's web site, Schewe Photography.

Design Graphics, Cover Story bullet June 1999, Issue 46
This article covered the work I did on the redesign of the professional product line while at Adobe.

Collage with Photoshop bullet 1994
This book features 14 digital artists using Photoshop and Specular Collage. I'm only mentioned in the prologue, but the book was created to promote Collage and what digital artists were doing with it at the time. I'm still fairly proud about the book and the work produced inside of it.

Education

Amherst College bullet 1989 to 1990
Left Amherst College to start Specular Int'l

The Hill School bullet 1984 to 1988
College preperatory school.

Contact

andrei@designbyfire.com bullet To avoid getting tagged by my spam filter, be sure to create a meaningful subject line.

Colophon and other details

Design by Fire v4.0 Separator A quick overview of the design and implementation of DxF for those who care about such details.

Browser Support

If you are viewing Design by Fire in either Firefox or Safari, congratulations! You are experiencing Design by Fire in the manner it was intended. If you are using Internet Explorer 6.0 or less, you have my sympathies as you are getting a version slightly less dynamic. The reason for that is due to Microsoft's lack of support for the CSS property "position: fixed;" plus a few other things.

Bottom line, Internet Explorer promises to fix these things in version 7, so in the meantime you can either download the beta for IE7 or switch to Firefox.

Typography

If you have purchased the Adobe Creative Suite, you should have Helvetica Neue installed in your font library. If so, then you are reading Design by Fire as it was intended to be read. For everyone else, you are either seeing Lucida Grande or Arial.

Fonts

Clearly, Helvetica Neue is far superior.

As for the logotype of Design by Fire, it's set using the classic Bodoni typeface, complete with ligature for that extra flourish.

Content Management System

This version of Design by Fire is managed using WordPress. So long MovableType.

Copyright Information

You may not use any material, articles, logos, essays, technical illustrations, photos or any content from this site without expressed written permission.