Monday, January 28, 2008

A Brief History of the Middle East, in 3 Minutes

I love good informative design. It's a difficult task to combine information, entertainment, and good design. But thanks to the on-going writers' strike, and our NetFlix account's associated vigorous workout, we recently stumbled across a surprising and impactful combination of these elements in the inventive three-minute opening sequence for Peter Berg's The Kingdom.

Observers frequently notice when filmmakers embellish their movie credits with elaborate music and graphics. The creative opening and closing credits for recent films James Bond, Ratatouille, Shoot 'Em Up, and Superbad come to mind – each a kind of short film in-and-of-itself that is both visually unique and thematically tied to the parent film. The Kingdom's opening sequence is a welcome addition to – if not an improvement on – this theme precisely because it is both strong enough to stand on its own but also blends seamlessly into the subsequent film.

In an effort to set up his Middle East action thriller, director Peter Berg commissioned motion design boutique PIC, an LA-based entertainment and motion design boutique, to create a unique title sequence that would detail the history of the relationship between Saudi Arabia and the United States. Berg's only mandate was to educate and entertain the audience at the same time.

To create The Kingdom's opening sequence, PIC assembled three minutes of historical audio and video news footage, examining 72 years of the history of the U.S.'s involvement with the Kingdom of Saudi Arabia, and wove them together seamlessly with geopolitical information graphics to move the story forward. With a focus on the discovery of oil, political and business relationships, cultural tensions, and modern day terrorist actions, the opening title sequence provides what Ain't It Cool News calls the "perfect beginning" to The Kingdom. Universal even took the unusual tactic of posting this opening sequence for The Kingdom on Yahoo to market the thriller.

PIC believes it won the contract for The Kingdom's intro because of its idea to couple bold graphics with archival footage. In particular, the designers felt a powerful juxtaposition of a map of U.S. oil consumption becoming the twin towers, then struck by a plane as the screen goes black, sealed the deal for the boutique agency. It's certainly the most dramatic sequence in a montage full of striking moments.

According to Entertainment Weekly, producing the three-minute clip took PIC nine months, during which the agency spent dozens of hours fact checking and obtaining rights for the audio and video footage that appears in the piece. All 128 shots had to be approved — a process that was expensive and unusually time consuming. PIC did everything from calling Dubai at 12:30 in the morning, convincing CNN to release their exclusive footage of Osama bin Laden walking with the gun over his shoulder, befriending a brother of Saudi Arabian ambassador Adel al-Jubeir to obtain interview footage, and culling through hours of home movies from an American who grew up in Saudi Arabia in order to dig up images of people playing football and swimming in a pool on an expatriate compound in the kingdom.

And the work, tedious as it was, paid off. Robert Redford was so impressed with what PIC did for The Kingdom that he hired the firm to create the beginning and ending credits for his political drama, Lions for Lambs. And Charlize Theron encouraged PIC to work on her boyfriend Stuart Townsend's upcoming film, Battle for Seattle, for which the group is creating a title sequence that tells the history of the World Trade Organization.

As observers of good design who also share a deep interest in history – that of the U.S. and the Middle East in particularPIC's opening for The Kingdom was a welcome introduction to a difficult subject and a solid film. FB

Monday, January 21, 2008

Helvetica: The Movie

Helvetica is a movie about a font. A whole 90 minute movie about one, single font. A font that you use – and see – every day. It's a movie that throws around terms like typography, kerning, leading...

But the film's not just for graphic design buffs. Really. It's a genuinely interesting and well made film that opens your eyes to, well, the words and letters all around us. The words and letters typeset in Helvetica.

Helvetica is a feature-length independent documentary about typography, graphic design, and global visual culture. It looks at the proliferation of the 50-year old Swiss typeface as part of a larger conversation about the way type affects our lives. The film explores the urban spaces in several major cities, ranging from New York to Zurich, and the type that inhabits them. It also engages in a fluid discussion with renowned designers about their work, their creative processes, and the choices and aesthetics behind their use of type.

But why make a film about a single typeface – let alone one as ubiqitous as Helvetica? Because it's all around us. You've probably already seen Helvetica several times today. It's on your tax forms, subway signage, storefronts, TV commercials, and your computer. It might've even let you know whether to 'push' or 'pull' to open your office door.

Tracing the roots of the Helvetica back to a small foundry in Münchenstein, Switzerland in the 1950s, the film charts the font's rise as a staple of corporate logos, warning signs, and any form of communication that requires a direct, pithy, and functional mode of expression. In the late 1950s, the European design world saw a revival of older sans-serif typefaces such as the German face Akzidenz Grotesk. Haas Type Foundry's director Edouard Hoffmann commissioned Max Miedinger to draw an updated sans-serif typeface to add to their line. The result was called Neue Haas Grotesk, but its name was later changed in 1961 by German parent companies Stempel and Linotype to Helvetica, a word derived from Helvetia, the Latin name for Switzerland.

Introduced amidst a wave of popularity of Swiss design, and fueled by advertising agencies selling this new design style to their clients, Helvetica quickly appeared in corporate logos, signage for transportation systems, fine art prints, and myriad other uses worldwide. Inclusion of the font in home computer systems such as the Apple Macintosh in 1984 only further cemented its ubiquity.

And it is precisely the font's ubiquity that the film excels at depicting. In cut scenes between locations and interviews, the film flashes a nearly endless stream of Helvetica applications across the screen. On clothing, signage, albums, faded billboards, the sides of ships, the marquees of office towers, books, products, and logos, Helvetica is everywhere. In the most dramatic of these sequences, the film shows us an endless stream of Helvetica-set logos, from early-adopter American Airlines to the Gap, American Apparel, Target, Verizon and many, many more. Likewise, in a recent interview for PRI's Studio 360, director Gary Hustwit wandered the streets of New York and was never out of sight of multitudes of applications of the font.

It's almost absurd that something so commonplace could provoke controversy but, as the film reveals, the graphic design world is split over the font's cultural connotations and artistic value, allying it as easily with fascism as socialism, progress as decline, superficiality as substance. One of the film's highlight is an interview with German typographer and designer Erik Spiekermann who goes so far as to compare the uniform appearance of the font to Nazi soldiers marching in line. In fact, every one of Hustwit's shrewdly selected interviewees has extremely strong opinions on the subject, and there doesn't seem to be any kind of generational or creative link as to why a designer will love or loathe the font; some see it as a design masterpiece which will never be bettered, others see it as emblematic of a creative drought and serves as nothing more than an easy design solution for lazy creatives.

The film also does an excellent job framing the transformation of typography from a highly refined and respected discipline in the pre-computer age to an almost casual process now. The investment in typography has shifted radically since the development of the Helvetica in 1957. When American Airlines invested in the typeface for its corporate identity they similarly invested in thousands of pounds of cut and chiseled steel – the medium necessary for the now obsolete art of typesetting. With the advent of electronic design, the entire font suite can be purchased online for only a few hundred dollars and effortlessly applied anywhere a cursor can reach.

Check out Helvetica – whether you're a design devotee or not, it's a fascinating film. But by way of full disclosure, we have to admit: This blog is typeset in Georgia. FB

Tuesday, January 15, 2008

Dieter Rams' 10 principles for good design

Earlier today a colleague directed me to a fascinating Gizmodo article connecting Braun's industrial design from the 1960s to Apple's industrial design of today. The article centered on the similarities in the respective design philosophies of Braun's Dieter Rams and Apple's Jonathan Ive and the eerie similarities between a number of the companies' products – such as that of the Braun T3 pocket radio and the Apple iPod.

But what struck me the most was Rams' design philosophy, "Weniger, aber besser" which freely translates as "Less, but better." This passion for "simplicity" and "honest design" is at the core of Rams' 10 principles for good design:

Dieter Rams' 10 principles for good design
• Good design is innovative.
• Good design makes a product useful.
• Good design is aesthetic.
• Good design helps us to understand a product.
• Good design is unobtrusive.
• Good design is honest.
• Good design is durable.
• Good design is consequent to the last detail.
• Good design is concerned with the environment.
• Good design is as little design as possible.

These 10 principles are applicable – indeed, critical – to any conscientious design, industrial or otherwise. As graphic designers, we should make these principles our canon. How often do interactive designers create websites that obfuscate, rather than help us understand? That are obtrusive and over designed? How often do brand designers create trademarks that are neither honest or "durable"? How often are any of us as innovative as our professionalism demands?

These 10 principles should be our standard – our guiding star. Such tenets have assured Rams and Ive a certain degree of immortality, at least as far as cultural historians and the MOMA are concerned. If their success doesn't make a compelling case for the utility of these principles, I'm not sure what could. FB

Thursday, January 10, 2008

RSIZR Brings Seam Carving to Your Images

I just was just reminded (cause I needed it) of rsizr, a great little image resizing tool online that's based on seam carving technology rather than the basic scale and distort methods we normally use in Photoshop.

As most of us know, when you resize an image using traditional tools, you make everything in it smaller. But with rsizr, a Flash, browser-based application that lets you resize JPG, PNG, and GIF images, you can also resize your images using seam carving (a method of image retargeting). Seam carving analyzes your image and determines what detail is important and what isn’t. As you shrink an image the software eliminates the less important areas first, preserving the more important data.

Seam carving is a mindblowing image resizing technique pioneered by Shai Avidan and Ariel Shamir (now both at Adobe). Their algorithm alters the dimensions of an image by intelligently removing pixels from (or adding pixels to) an image, preserving the proportions and prominence of critical image elements while altering the shape and scale of the image around them. With this technique, it's now possible to reduce or enlarge pictures by a wide range, while still retaining details. For instance, if you need a horizontal image to go vertical, seam carving lets you change the image without rotation or spacial distortion (of your foreground objects anyway)

It's a little technical, admittedly, but the results are amazing:

This resizing technique first made waves last August when Wired posted a blog entry about the above video. But with rsizr's September 2007 release, seam carving became a practical reality on your desktop. To use rsizr, just upload the image you want to edit and then click the "retarget" tab and select the "preserve" brush. Now paint the portion of the image you want to preserve when you resize the image. Click done when you're satisfied and then use the sliders on the left side and top of the screen to shrink your image.

The results are pretty impressive, especially for a web-based implementation of seam carving. rsizr is a little counterintuitive at first – our seasoned interactive designers spent more than a few minutes trying to figure out how to reduce the scale of an image, for instance. And rsizr does have its limitations: Flash 9 imposes a 2880 pixel maximum in width and height for all loaded images. But once you get through the brief learning-period, rsizer is a powerful little tool that has greatly extended the utility of our image library.

And if you're a Flash developer that is interested in implementing this flexible image sizing technique on your own web site, the folks at rsizr have even provided information to help you dynamically implement seam carving on your website in much the same way they first developed the technique for

Seam carving opens up a whole new way to manipulate images and rsizr is just the tip of the iceberg. Expect to see it in CS4 (or CS10, at least...). FB