I have always loved the “wicked worn” look. There is nothing better than a good Golden Age design with the extra attention to detail to make it look old. Used. Classic. I just can’t get enough of it. One of my all-time most favorite websites in the world is Sleeping Giants, created by Second Story for Kodak. I gawk at the site at least once a month.
Back in the summer of ‘04 I was asked to write about this subject as part of Cameron Moll’s That Wicked Worn Look project and I was more than happy to join the fray. Since a lot of Photoshop techniques have already been demonstrated by Cameron and others in the project, I chose to address the academics of important elements in good wicked worn look design. When Howard Mann invited me to contribute to UX Mag I thought it would be fun to share this article with UX readers who may have missed the series debut – as the content is as timeless as the subject itself.
It’s the Little Things
If anyone has capitalized more on the wicked worn look it’s Fossil. Initially, when the company only sold watches, their product designs (including the packaging) were heavily influenced by the look of the 40’s and 50’s. What set Fossil apart from their competition was their attention to details like colors, typefaces, and shapes borrowed from the days gone by. It’s never enough to just make something look scratched
You can have the best Photoshop techniques, filters, and brushes available, but without paying attention to the details above, your design will fall flat.
The Typeface of the Times
Typefaces are important – critical for achieving the right look.
“Typography is as much a mirror of what goes in society as the styling of mobile telephones or car radiators.” – Stop Stealing Sheep & Find Out How Type Works
The best way to start finding your typeface is to look at the designs of yesteryear. The web has some references to offer but I have yet to come upon anything that is as well researched and collected as books published by Taschen and Rockport, among others. Some tomes that come to mind are See the World, All American Ads of the 50’s, and Then is Now: Sampling from the Past for Today’s Graphics.
Notable fonts from the this period include: Franklin Gothic, Frutiger, Park Avenue, Futura, Bodoni, and New Times Roman. I should also add that these fonts are also heavily used – if not overused. Perhaps the most abused font, in Adobe’s library, for achieving the classic look is Franklin Gothic.
Fortunately, there are plenty of alternatives. Almost anything from House Industries will do nicely, but don’t stop there on your quest for finding the right typeface. Take advantage of sites like Digitalthread to help find alternatives to the commonly used type.
The other day I was looking for a font similar to Franklin Gothic and found Tanek . It’s amazing what you can find on the web when you look hard enough.
That said, the type for the Airbag logo is set in Magnesium MVB which is readily available from Adobe.
Now If you are on the font welfare program and are limited to using the fonts that came installed on your computer don’t sweat. There are a few fonts that can be used to successfully. Try limiting yourself to Andale Mono, Arial Narrow, Arial Black, and Times New Roman. It may also be possible to finally put Trebuchet MS to good use.
Remember, you’re striving to emulate the simple, classic look so the fewer typefaces the better.
The Color of Yesterday
While the end result of a classic look is dull and muted it’s important to start off with the colors of the time and then work them into aged classics through Photoshop techniques like those Cameron has already documented.
The 1940’s started off very colorful with cherry reds, pinks, and yellows coming into full swing. But as World War 2 became a reality the look of the world started to de-saturate:
“Colors began to lose their vitality since the bulk of dyes, which were manufactured in Germany, were not available. Ultimately, French fashion designers came to the rescue, making fashion statements out of the colors that were abundant — olive, khaki, navy, and black.” – Then is Now: Sampling from the Past for Today’s Graphics
After the Great War, America in the 1950’s crawled out of the military drab and plunged into a world of full on primary colors: think a box of sixteen Crayons.
But that was then, this is now.
Things from yesteryear should look faded and used – colors should have more of a matte, or muted, look. And keep in mind that as something has worn, paint chips away to reveal under coats while other areas may have faded from too much exposure to the sun. These weather affects create a palette of different tones of the same color. Choose your primary colors and then work your way through the shades of that color to find a brighter and darker tones.
Sometimes I find it useful to design in primary colors and then played around with de-saturating the colors through the Hue/Saturation tool in Photoshop. Be careful not to suck all the color out less you want that hand colored black-and-white photograph look that was so popular in the 1980’s. That would be a disaster.
The Shape of a Classic
What really separates today from yesterday are the shapes of things. Aside from cars and planes; logos, mastheads, and layouts are all influenced by the fashion of the day and looked quiet a bit different back then from today’s designs. A good wicked worn look will take cues from how objects were shaped in the past.
A really good design will also borrow from elements not found in the medium in which they are applied. For instance using the shape of a 1950’s motel sign as the basis for a web site logo. I particularly find signage from the past to be a really good source for inspiration when working with this type of design. The signs of the Golden Age were so different from today’s gigantic television and blinking lights. These works of art were simple, yet highly functional – laced with elegant lines and great typography to create the perfect package.
“The ways sign makers approached the generation of form are of paramount importance. Sign makers were, for the most part, vernacular designers – common people making common things – and their design processes mirrored those of other everyday American designers, such as builders of barns, simple houses, tools, and other necessary objects. Like many vernacular designers, most sign makers created with the guiding hand of tradition; they incorporated well known and well-worn patterns of form, material, shape, and symbol to ensure that their signs had meaning and relevance to the people who used them.” – American Signs: Form and Meaning on Route 66
Fortunately for us the designs from the 1940’s and 50’s are so full shape, full of feeling. It’s such a great period to design around and borrow from.
Off You Go…
I can think of no better era of design to emulate and to learn from. Once you start looking into the designs of the past you’ll find a plethora of material just waiting to be brought back to life. The sky is the limit.
Remember that in the end, rules are made to be broken, but with the wicked worn look there is a need to adhere to more than one of these details to achieve a successful look.
I do find it interesting to see two of these details applied to a third taken from another era. Airbag for example uses retro type and colors with modern shapes. Another fantastic example is Sleeping Giants. And I can think of no better ending than for you to journey through that site. Strap in and prepare to gawk.
