Jonathan Yuen

Jonathan Yuen Portfolio Website
Communication Arts 13

This lyrical portfolio site seems to be made entirely with Flash. The result is a fluid, lyrical digital interpretation of a zen scroll. When you hover your mouse over the minute red circle beside each Chinese character, the screen scrolls over to the next animation. This is a perfect example of how an unconventional navigation system can be simultaneously innovative, intuitive, and beautiful.

And Then There Were Two...

In this day and age when branding is ubiquitous, you'd think that our presidential candidates would put a little more thought into how they package their image into a logo. Every nuance, line, and joke that issues forth from their mouths is subject to endless analysis from the media, but the graphics they choose as visual shorthand for whom they are seldom get any scrutiny. The two notable exceptions are the remaining candidates. I think Obama has the best presidential logo I have ever seen. The round, geometric O depicts a sunrise against a blue sky. The stripes evoke a landscape that leads off into a hopeful tomorrow. It is sunny, contemporary, and hopeful, while the clean, well-kerned serif font beneath (Gotham) is more traditional and inspires confidence with its mixture of upper nd lower case caps.


John McCain, on the other hand, chose Optima for his logo. The typeface is blunt, ugly, and to the point, much like the persona he projects. It is no cincidence that the font used is the one in which names are written at the Vietnam Memorial. This, plus the naval star remind us of his military experience.

Visual Complexity

Visual Complexity

This is the only website I've found so far mentioned in a design publication that seems to make no use of Flash. It doesn't need it. The grid structures, easy to follow architecture, and clear navigation system are perfect for viewing these beautiful images.

Picardie

Client: Picardie
Designer: Catherine LePage
Source: Communication Arts interactive Annual 14

I love the whimsical treatment of this typographic design. The text skips along the page and has very obviously been hand-drawn; there are variations in size and shape within the same letters.

JLern Design

http://www.jlern.com/
Communication Arts Interactive Annual 14

This portfolio site uses Flash in a way that is unique and fresh. Upon first entering the home page we see a sparse, black and white typographic grid placed on a diagonal. As you move the mouse, however, you change the direction of the grid and trigger brightly colored ornamental animation. Clicking on features zooms in and out of the image.

Restraint

Restraint

This font was released in 2007 by Tiroworks. It was created by Marian Bantjes, an illustrator. It is an ornamental typeface with letters included so you can build intricate ornamental design in a modular manner around the letters. Where the majority of ornamental type begins with a typeface onto which swashes and decoration are added, this one was built inside-out. The characters themselves have been defined by the negative space of the ornament, as if the letterforms are just a lucky happenstance. Ornate borders and swirly pattern based designs magically reveal themselves as words.

It looks like it requires a lot of forthought to use correctly (it comes with rather detailed instructions). This sfont should definitely be used sparingly as a display font, but in the right context it could be spectacular.

The Guardian II

After my last post, I decided to do a little bit more research on the Guardian. As it turns out, the advertising campaign was part of the newspaper's massive rebranding initiative in 2005. During this time, the Guardian switched from a black and white broadsheet to a full-color Berliner print format. They created a new all lowercase logo to reflect their unbiased, center-left reporting. Finally, they commissioned a new type system form scratch from SchwartzCo Inc. The new family is a slab-serif design with a large x-height, low contrast and open aperture that includes: Guardian Egyptian, Guardian Sans, Guardian Text Egyptian, Guardian Text Sans, and Guardian Agate. Each font comes in numerous expressive weights, and are adopted to fit the unique needs of each newspaper section.

The chief designer behind all of this was Mark Porter. If you have an hour to kill, grab a beer and pop some popocorn because here's a link to a video in which he goes through the entire process! He's a very eloquent public speaker, and the Guardian has become one of the standards for newspaper designs, so I think it's worth watching. It touches upon many of the challenges with which news designers (print and web) will be contending in the near future.



Mark Porter Video

The Guardian

The Guardian
wieden + kennedy london
Luerzer's Archive

I came across this ad campaign for the Guardian in Luerzer's Archive. I was initially attracted to the way type was used as illustration, and to the fact that the bright color palette was not one typically associated with a newspaper. It was clever and unexpected, and the serif font (probably Guardian Egyptian) remains legible in spite of the overlap and transparencies.

Here's another ad from the same campaign by Wieden + Kennedy. The same serif font and vibrant color palette is repeated. This time the copy is kerned tightly to the point of overlap to illustrate the point that you can create a hierarchy through means other than size and weight. In this case, the color palette grabs our attention and creates subtle focal points facilitate reading.

Design for Chunks

http://www.designforchunks.com/

Design for Chunks
Forcefeed Swede
Computer Arts 149

Originally an idea by graphic design studio Forcefeed Swede, I stumbled upon Design for Chunks by browsing through Forcefeed Swede's website, which was mentioned in Issue 149 of Communicaiton Arts. The site's striking color and retro illustrations are a perfect complement to the tongue-in-cheek copy and subject matter. It's purpose is to house an online gallery of custom-designed air-sickness bags designed by up-and-coming young designers. The site eventually came to the attention of Virgin Atlantic, who commissioned 20 designs and printed them on 500,000 sickbags over a period of 6 months.

The logo and illustrations look like they're right out of an '80s safety manual. Flash animation is used throughout the site minimally and to great effect. It has a simple, clear navigation system, but throws in some surprise links to keep us on our toes. The sick-bag themselves are also nothing to barf at. The ones in the archives tend to be funnier and edgier, so they are worth taking a peek at.