Above is a video of my friends Ryan (right) and Marcin (left) being interviewed at CBS News about the (massive) success of their PAC-MAN homepage for Google (the page has been permanently installed here). PAC-MAN’s success last Friday resulted in the highest traffic EVER at Google.com! Astounding.

On a technical note, Marcin’s technique for coding the PAC-MAN game is clever and intelligent “next level shit” (as Ryan likes to say). The lightweight code (all HTML, CSS, and Javascript) allows the game to be rendered entirely in-browser. This comes as no surprise because Google is designing the future of the web to include in-browser applications and programs (here’s a the New York Times report on Google’s web-centric future). Imagine using Photoshop (or an equivalent) within your browser by simply visiting a domain. Marcin’s PAC-MAN code is lightweight and sleek. To save browser load time, the game utilizes one single image (which includes the game boards and the variation images of PAC-MAN and the different ghosts within it). Then, the game uses CSS sprites that use tiny DIVs to call for select areas of that image. The images are then distributed for Javascript use throughout the game. Next level shit indeed.

Ryan is a great friend, former classmate, and interview subject of mine. Many congrats to both of these talented guys on their successes! It’s exciting to see friends knock a project out of the park like that.

Related links:

Marcin’s PAC-MAN blog post at the Google blog

Geek Gestalt: Google Gets PAC-MAN Fever

Original CBS News Article

Categorized in: Web Design
Leave a Comment

I designed the album packaging for Boots Factor’s debut solo album, Part or Execution (Boots is well-known for his work in Stephen Kellogg & The Sixers). I designed the cover with photography by wisecracking cigarette enthusiast Sean Hutcheon.

We had a great time working on this project. After Boots and I discussed the theme of mannequins, I called around to a variety of mannequin factories and warehouses and got ignored or turned down by most of them. Finally, I found a gracious factory manager who allowed us to conduct a shoot in a cavernous warehouse located way out in the sphincter of Brooklyn. We rescheduled after the factory closed for an early February blizzard, but finally made it there shortly thereafter. I think the location exceeded all of our expectations; the space was loaded with boxes of hands, aisles of mannequins, and all kinds of interesting environments. Thanks to Boots and Sean. Listen to Part or Execution at iTunes. Here are some alternate shots from our photography shoot.

Categorized in: By Magnetic State, Graphic Design
2 Comments

San Francisco’s Mission District has the strongest visual character of any neighborhood I’ve ever visited.

The Mission is best known for its murals, which adorn nearly every block and transform alleyways like Balmy Alley into public art galleries (Balmy is lined with over 30 murals). Those murals have been well documented elsewhere, particularly by the Precita Eyes muralists, who are central to the community and have published a book on the subject. However, the neighborhood’s unsung hero is its hand-painted street signage: colorful restaurant façades, elaborate store windows, and charming, handmade business marquees all possess the welcoming tone of a handwritten note from a friend.

Click here to view the rest of this post.

Categorized in: Artists, Graphic Design, Visual Inspiration
8 Comments

Below are three photos of surf/movie graffiti that I took last week in Bolinas, California, followed by a photo of some Bolinas surfers. Can you name all three actors and films? The first two are easy…

I was hoping to surf while I was in Bolinas but the water temperature was too frigid to enter without a wetsuit. The winding cliffs of the coastal drive and the intoxicating aroma of the Eucalyptus trees made for an ultra-relaxing environment and Ryan’s birthday party was a smash hit (the sheriff himself shut down the late-night dance party, but I’m pretty sure he’s the only employee of that tiny town’s police department anyway, so who else would they send?).

I took a billion pictures in San Francisco. More to come soon.

Categorized in: Visual Inspiration
Leave a Comment

Back in 2007, Pentagram partner Paula Scher created graphic design templates (for business cards, stationary, etc) that were made available for free downloads from Hewlett-Packard. Those templates are no longer available, but I thought it was interesting to see the choices Ms. Scher made for fonts that represent specific design themes. The fonts in the image are, from top to bottom, Avenir heavy (‘Bold’), Helvetica Neue ultra light (‘Modern’), Bodoni roman (‘Elegant’), Century Schoolbook regular (‘Friendly’), and Helvetica Neue ultra light italic (‘Edgy’). This is Typography 101 stuff, but I think many designers might’ve made different choices, especially for themes like ‘friendly’ and ‘edgy.’ Ms. Scher’s font choices, as usual, are communicative yet sophisticated.

Categorized in: Graphic Design
Leave a Comment

I’m pleased to unveil an exciting project that I recently completed: a brand identity and website design for Social Security Works. Social Security, as most of us know, is an economic support system that has provided assistance to millions of Americans since its inception in 1935. Recently, some politicians have jeopardized the program by claiming that it’s in crisis. Social Security Works was founded to prove that the program is not only alive and well, but an essential element of a healthy American future. It was an honor to help strengthen this cause with powerful, communicative design.

The Social Security Works logo emphasizes the message inherent in the organization’s name. Through typography and punctuation, the words become not just a name, but an emphatic statement. In previous designs that were considered, other iconography was used: pillars (which you’ll see on your Social Security card), an eagle, elements of the American flag. We eventually decided that all of these things were superfluous; the name says it all. The final logo utilizes bold typography and color to amplify what’s already there.

The animation above features a series of graphic statements developed as assisting materials in the graphic identity. You can see another version of this concept in the background of the Social Security Works Twitter page.

This idea was inspired by a series of blog posts that the Social Security Works team had written. These posts are titled Social Security Works for People of Color and so forth. The articles are informative and persuasive. These phrases and statements proved to be quite persuasive as well. They expound on the meaning present in the logo.

Above is a screenshot of the website I built at socialsecurity-works.org. This site is a branded, customized WordPress content management system. The header features a Javascript photo slideshow portraying a range of societal demographics that benefit from Social Security. The ‘Social Security Works…’ articles have been given their own prominent area of the left sidebar. The right sidebar is devoted to social networking.

Many thanks to the fine folks at Social Security Works.

Categorized in: Branding, By Magnetic State, Logo Design, Web Design
Leave a Comment

“Basically the future of web design is gonna be on a little tiny screen.” -Google designer Ryan Germick

It’s no secret that images need to reproduce at very small sizes in order to be effective online. And when I say ‘very small,’ I mean ‘the size of a pencil eraser.’ That’s freaking small. It’s always said that logos should be scalable (i.e. they need to function at large and small sizes), but we have moved into an era where scale itself has a different calibration. Twenty years ago, the smallest canvas you’d be likely to design for was a business card. Never before have artists or designers had to consistently focus on scales so miniature. I recently designed an album cover which I frequently shrunk to iPod/iTunes sizes to check its readability and visual impact (it’s looks rad and it’s coming in mid-May).

From left to right, the favicons above belong to WordPress, Google, and this blog. You might say that favicon design – which is typically 16 pixels by 16 pixels – is an art of its own (I squished a Warhol into a favicon here. I think he’d approve and/or laugh). It has been said that designing with the favicon in mind is the contemporary equivalent to the fax: designers used to stress that a logo or brand identity had to reproduce well in a low-quality black and white reproduction.

Favicons aside, the age of miniature design appears to be around for awhile. Handheld web devices continue to be a dominant form of web browsing. Digital information is commonly consumed in condensed and aggregated forms like RSS feeds. Most brands are frequently represented by images smaller than a postage stamp: the app button on your iPhone, the icons in your Twitter feed, etc.

In this type of design, simplification reigns. ‘Less is more’ is truer now than ever before. In brand identity, one great place to look for inspiration are be the simple runes and symbols of early forms of writing. Great power can be derived from very simple symbols and letterforms.

It’s also important to take every opportunity to spaz out and make drawings and designs that subscribe to the ‘more is more’ philosophy. An entirely minimalist world would be a boring place. Working at both ends of the spectrum will increase your skill with both ‘less’ and ‘more.’

Categorized in: Branding, Logo Design, Web Design
Leave a Comment