Retro Style
1st edition — by Patrick McNeil — Feb. 8, 2006
The Design Element
Revised versions of past styles is a common and very popular technique.
It is found in advertising, cd design, fashion, and of course, website design.
It is done for a variety of reasons, sometimes driven by the content of the
site and at other times by the desire to associate the site with some element
of the past.
After looking at these retro styled websites for some time I settled on
three main elements that establish the retro feel: the color palette, old
photographs, and period appropriate typefaces. Consider how all these elements
work together to make a complete theme.
The Color Palette
An appropriate
color palette is fundamental to establishing the feel of a specific time
period. The period you are shooting for will ultimately determine the
set of colors you choose to work with. Earth tones seem to be the one constant
among these sites. Perhaps it is not necessarily because those earthy colors
are associated with a specific time period, but rather because they evoke
age, and aging the site is exactly what we need.
Old Photography or Illustration
The age old saying that a picture is worth a thousand words couldn't be
more true. In nearly all the sample sites photography or illustration is
perhaps the primary element that sets the feel for the site. With out the
imagery, most of the sites would be very weak in terms of pulling you into
a different era.
For example, the
Target Scope
web site has an illustration of a pin up model.
This is easily understood as a reference to the 1940s. That combined with
the military theme clearly plants us in the midst of World War II. Imagine
the layout with out the model and you will quickly see how important it really
is. The other primary image is the background. This paper texture does wonders
to age the site and really helps complete the whole package.
Retro Typefaces
This seems to be an obvious element, but the use of appropriate typefaces
can either complete or destroy a design. One of the best sources of retro
fonts is
Font Diner
.
They even have a few free ones available. If you are unsure of which typeface
is appropriate this article on the history
of type might help you determine which ones to use. This timeline
of type classification is another excellent tool for picking type families.
Consider the
need2know
web site. The color palette lends itself to the 1970s.
But it is the type treatment of the title which does more then anything to
remind us of that time period. The bottom line, don't skimp when it comes
to selecting your typefaces. Decorative typefaces can so easily be abused
but when put to use in small yet important ways you can really enhance the
design of the site. As you can see on nearly all the samples, a more decorative
period appropriate typeface has been used for the main title of the site.
While more subtle fonts have been selected for the supporting copy.
Sample Usage
Links
Retro Color Palettes
1950s
Retro Color Palette
1960s Retro Color Palette
1950s Lamp Shades (Good color source)
Free Retro & Vintage Images
Retro
Illustration Blog (great inspiration)
World War II Poster Collection
Authentic History Center
The
Library of Congress: American Memory
Smithsonian
Institution Libraries
Library
of Congress Digital Collections & Programs
The National Archives
Duke
University: Rare Book, Manuscript, and Special Collections Library
The
National Archives of the UK
NYPL
Digital Gallery
1800's Ephemera
Free Retro Fonts
dafont.com
Font Diner (Awesome
fonts — Some free)
History of Type
Typeface Classification Timeline
American Sign Museum
