IE9 and the Lost World’s Fairs

Today marks the beta launch of Internet Explorer 9. To celebrate the release, Nishant Kothary from the MIX Online team at Microsoft reached out to me to help showcase its support of WOFF.

I knew immediately this was a great opportunity to collaborate with people I admire, so I dropped a line to Frank Chimero and Naz Hamid to lend their design talents, and Trent Walton (who also brought in the skilled Dave Rupert) to help pitch in on coding duties. As things progressed, Trent and Dave really came in swinging and the group ended up collaborating and nurturing ideas together. We dubbed ourselves the Friends of Mighty, and thus began our super friend collaboration (teased originally under the internal name, Operation: Condor).

From the start, we agreed to do something in three parts (one by each designer), and more importantly, something that didn’t look like an article or a blog. Aside from some of the technical advantages the WOFF format provides, there’s little about it that’s aesthetically different than other formats. So we resolved just to have some fun and design something with strong typography as its centerpiece.

Since we abandoned anything with swaths of text, we quickly opted to find something with fillable slots of information, things that could be common elements across each piece. For instance, an event might have a title, date, time, place, and related information about what goes on there. We actually settled on exactly that, something akin to web broadsheets.

The resulting project is called Lost World’s Fairs.

Lost World’s Fairs

We decided to make designs around a grand series of events, the World’s Fairs. We initially started playing with ideas for the cities we all lived in, but ended up going with locales and fairs that never were. We wanted to feel unrestricted by the design and history that already existed from specific fairs and instead find ways to key in on design aspects of a particular time period.

Sketches... from the Moon!

Assorted sketches for the different fair locales.

Our basic setup was this: El Dorado would be set in the 20s and be in a sort of Grand Ole Opry style, Atlantis would be set in the early 60s and in a Mid-Century modern style, and the Moon would be sometime in the not too distant future with a retro-future style. Clearly, we followed these guidelines loosely throughout, but they served as a nice way to frame each of the directions. We brainstormed over Skype a few times, followed up on Basecamp, drafted up a bunch of copy and taglines, and set to work. Each of us took on a different locale, and mine ended up being the Moon. Luckily, we each just seemed to connect with place and time, so divvying up the locales wasn’t a problem.

Onward & Upward

We had all done some initial sketches for each locale to get ideas flowing. Most of mine for the Moon centered around some really large type and an interplay between celestial bodies. I loved the idea of the phases of the moon, or eclipses, and for parts of the type to take on the role of a celestial body itself. I didn’t really have an interest in realistic depiction of the earth and moon, I just wanted to suggest their forms and colors. The end result attempts to explore type in a browser window a little differently. And special thanks to Kevin Cornell for his two quick silhouette spot illustrations.

All Together Now

Each of the designs has a charm of its own (and some have a few hidden treats to discover). We set out to design first for IE9, so we resolved not to use any properties that weren’t supported yet. Even with that said, IE9 is a really polished browser, and the improved type rendering alone makes it a big step forward for Windows. You can see screenshots of what each locale looks like in the IE9 beta here. Congrats to the IE team and everyone involved! You can see more experiments by other agencies in the Beauty of the Web project.

The final Moon mission

The final design for the Moon. You can also view a screenshot on Flickr.

It’s not often you get to design something to showcase what a product can do (it’s reminiscent of getting to design a paper sample book). We were basically our own client, and just set out to have a little fun. From the layering of Naz’s El Dorado, to the scrolling fun of Frank’s Atlantis, to the cosmos manifest destiny of my Moon, we had a blast fulfilling our basic premise of playing with type. The project came to me, but was really made whole by the fantastic work of Frank, Naz, Trent, and Dave. These guys are all at the top of their game, and are creative like whoa.

You can launch all of the different world’s fair locales from the project’s landing page (beautifully designed by Trent), as well as see the fonts being used from their Typekit colophons. The Moon uses two fonts from Process Type Foundry not listed in its colophon, Klavika and Bryant, which will soon be available as web licenses served via Typekit (similar to some of the web FontFonts).

You can read all about the making of Lost World’s Fairs from the rest of the gang: Frank, Naz, Trent, and Dave. We hope you enjoy our experiment!


Commenting is not available in this section entry.

On the Subject of Me

Jason Santa Maria is a graphic designer living and working in sunny Brooklyn, NY. More »

Recent Projects

  • They Might Be Giants
  • Typekit
All Projects »

A Book Apart

Responsive Web Design, by Ethan Marcotte. From A Book Apart.
“Insightful, witty and practical, Responsive Web Design points us in the direction of a new web.”
—Mark Boulton
Order »

Daily Photography

Gold Medal

With Support From

Recommended Reading

Bird by Bird coverBird by Bird
by Anne Lamott
All Books »

Search The Site

Oddities & Diversions

Design Is History

Design Is History, created as a teaching tool for young designers just beginning to explore graphic design and as a reference tool for all designers. Chock full of great info.

Education at FontShop

Education at FontShop, a great resource for tips, tricks, and type knowledge.

A List Apart: Issue 311

A List Apart: Issue 311, Start web design projects the right way. Learn when and how to say no. Articles by Whitney Hess and Kevin M. Hoffman.

Past Oddities & Diversions »

Happy Cog Hosting Powered by
Happy Cog Hosting