"IE9 started from the premise that the modern web will deliver HTML5 experiences that feel more like native applications than sites. Building on hardware-accelerated SVG, canvas, video, audio, and text, developers will use the power of the whole PC to achieve great performance. On the modern web, developers will use the same markup across different HTML5 browsers.” – Dean Hachamovitch, Corporate Vice President, Windows Internet Explorer

Why start a post on designing the new Windows Internet Explorer 9 logo with a quote from our post on IE9’s Developer Platform Preview 4? As logo designer Paul Rand said in his book Design, Form and Chaos, "It is only by association with a product, a service, a business, or a corporation that a logo takes on any real meaning.”

The decision to evolve the logo, and the choices we made in the redesign were driven by the fundamental improvements in performance and standards support. Leading up to the Beta release, Platform Preview builds have been the viewport into the engineering behind Internet Explorer 9’s platform. For all of us, IE9 is about making web sites shine. It’s about the web sites you go to every day on your PC. It’s about the developers who make those sites for you. It’s about a browser that helps you accomplish your everyday tasks faster than ever before.

Before we describe what a fast and modern web means for our logo, let’s look at the history of the Internet Explorer mark.

The Internet Explorer Logo – 15 Years and Counting

In August, Internet Explorer celebrated its 15^th anniversary. IE has been around since the early years of the consumer browser. At that time, the Internet meant a lot of things to a lot of people. Whether the online world was scary to you or was the coolest thing you’d ever seen, one thing was clear, the world was coming to you (and everyone else around the world) in ways you had never imagined. Content you never had access to became available on your PC, and it was only going to get bigger and better.

From the start, Microsoft chose the World to symbolize our browser, a metaphor for possibility and connection. And it is called the World Wide Web, after all. An early logo design consisted of the Windows symbol (circa Windows 95) and a circle representing a globe. In time, an orbiter was introduced, to represent speed and exploration.

Blue e = Internet

Soon after the early 1.0 and 2.0 versions of Internet Explorer shipped in 1995, the logo evolved to what has come to be known as ‘the way to the Internet’ – the blue e. The logo design conveys the metaphor of a globe (World Wide Web) and the exploration of that globe (the orbiter). The logo represents stability and integrity (a solid, well balanced and proportional e derived from the classic and timeless Helvetica typeface). The resulting system consists of a solid, stable, trusted color and shape (a blue circle).

The IE logo is well known as the way to the web. Internet cafés around the world use the IE logo on their signage to invite people in. Some of our teammates have snapped photos while passing cafés during their travels. The IE logo is right on the front of the buildings! It’s always fun to see that to many people, the blue e means the Internet.

Moving Forward

With Windows Vista and Internet Explorer 7, came a new logo with a blue glass texture that had more dimension, an evolution of the familiar blue e. This new logo was developed to complement the design and personality of Windows Vista. Internet Explorer 8 retains the same logo, having also shipped during the Windows Vista timeframe. For Internet Explorer 9, it was time to evolve the logo to embody the new, high performance modern platform and user interface.

We started by thinking about what the IE8 logo (and prior IE logos) mean to our customers. When we asked customers what they think of when they see our logo, we heard professional, trusted, and familiar. Then we thought about what it means to take that trusted familiarity and make it faster and more modern.

ORIGIN OF THE LOGO

The original logo was drawn starting with the Helvetica Black typeface as a base. It’s a classic, timeless font that is derived from a typeface created more than a century ago. In The Elements of Typographic Style by Robert Bringhurst, this typeface is described as a "heavy un-modulated line and tiny aperture (which) evoke an image of uncultivated strength, force and persistence.” Helvetica has such a rich history as a typeface that a feature-length documentary was made about it in 2007. Designers have used Helvetica as a go-to typeface for decades – it continues to be a classic.

That all sounds like a winning plan, but what we wanted was to modernize the logo giving it a new sense of balance, legibility, energy, freshness, lighter weight, and sense of speed, while retaining the familiar e people have trusted for 15 years. We wanted to open up that tiny aperture of Helvetica Black in the same way we opened up the browser to all the power of Windows and PC hardware, and so we did.

WHAT DOES A LETTER SAY ABOUT ITSELF?

With the Windows typography team, we studied the letter e in a number of typefaces. We looked for the attributes we had set out to achieve: balance, legibility, fast, modern and lightweight.

A sampling of character studies of the letter e. Through these studies we were able to identify attributes of the e in different fonts that we wanted to recreate in our evolution of the IE8 logo.

DEPICTING MOVEMENT

We also wanted to better articulate a sense of forward movement, so the team made sketches of a variety of ways to view the orbiter which might represent a quicker movement. Below are some drawings of the orbiter in alternate configurations to the current. The e as a letterform has a lot of character and can at times resemble a face (with an eye and a mouth). Many of our explorations made the e look more like a person with a cape or a mask. Fun perhaps, but not what we’re looking for!

A sampling of sketches studying the shape of the e and the explorations of a forward moving orbiter element.

MODERNIZING THE E

Because of the familiarity and brand recognition of the current mark, we decided the basic structure and color would stay the same (a blue planet and yellow orbiter), we worked with the typographers on the Windows team to strengthen and modernize the form of the e.

First, we defined a shape for the e that focused on clarity and legibility: a true circle. Then we examined the details of the e. By reducing the contrast in stroke weight, we made it appear much lighter weight than the previous logo. The updated logo has more open negative space (counters) that maintain their presence at small sizes. The counters in the previous logo were very closed and disappeared at small scale. With no obvious horizontal or vertical variation in the character, the fluidity of the form is emphasized. The result is a simple, more open letterform.

Comparison studies of Chalet New York 1960 with Helvetica Bold. We decided to base the final letterform for the logo on Chalet for it’s more modern and open look.

The IE8 logo footprint compared with the new direction for IE9.

A FASTER ORBIT

We also updated the orbiter. To make it feel more alive, a small amount of transparency was added, and the stroke contrast and size of the shadow were decreased. Whereas the IE7/8 orbiter stops short of connecting to the e on the upper right side, the updated orbiter makes a full, more continuous connection. The updated orbiter is proportionally smaller when compared to the e than was its predecessor. These new proportions give more emphasis to the e, and give the logo a stronger presence.

IE7/8 logo

IE9 logo

The Finishing Touches

Once the e and orbiter designs had solidified, it was time to refine the details. We needed to polish the design and view it in the context of the interface and larger scale print materials.

In Jane’s post we talked about the new interface design for IE9. One of our goals for IE9 is to make sure sites shine by reducing the frame to only the controls most used for browsing the Web. We used a visual technique to allow the content to come forward by creating a single line of UI on the Windows 7 glass, creating a monochrome effect that allows the content of the web page to shine.

To reflect this in the logo, we focused on revealing only what is essential, reducing ornamentation that might call undue attention to the logo itself. To indicate speed and fluidity we applied more subtle shading and bevels than the IE 8 logo. The effect is an overall flatter and more lightweight appearance. To stay true to the Windows 7 aesthetic, we chose fresh colors and shades to complement the Windows 7 color schemes that IE9 is built on.

We paired the e with an updated logotype using Segoe, a font shared across Microsoft’s portfolio of brands. The new logotype layout places renewed emphasis on exploration, provides a simpler, more compact footprint and helps the version number stand out.

The final Windows Internet Explorer 9 logo

We hope you enjoy the new lighter weight and fresh modern look of Internet Explorer 9. More importantly, we hope you enjoy the web sites you know and love even more with IE9.

Mary-Lynne Williams, Senior User Experience Lead, Windows
Leslie MacNeil, User Experience Designer, Windows
Marty Hall, User Experience Designer II, Windows