Do you have a project that calls for creating a business website with that vintage look and feel? Several small businesses in our town, and possibly in your city too, sell vintage goods. Whether you call it retro, antique, classic, used, recycled, period, or throwback, vintage is a hot theme for many businesses and organizations. These types of businesses include second-hand clothing stores, consignment shops, specialty gourmet stores, arts and crafts boutiques, furniture stores, flea markets, photography shops, and much more.
I’ve also noticed that many of these businesses do not have websites, or if they do have one, the site typically does not match the business identity. That identity should be carried out in the website design. In this post, I’ll show you how to create a thematic design – in this case, vintage.
Inspiration from the past
The steampunk movement incorporates elements of steam power with science fiction, fantasy, speculative fiction, and alternative history embracing inspiration from the Victorian or the “Wild West” era. Notable precursors of the steampunk theme can be found in novels and cinema, including the feature film “20,000 Leagues Under the Sea” inspired by the Jules Verne novel in which a team of oceangoing investigators in the 1800’s finds the futuristic submarine Nautilus commanded by Captain Nemo. “The Time Machine” is another example, inspired by the H.G. Wells’ novel where a Victorian Englishman travels into the future to find a totally different world than his own. Many themes from antiquity can be found in many other works including television, video games, music, performance art, web series, role-playing games, literature, comic and graphic novels – all can be great sources of inspiration for creating a website with a vintage look and feel.
Other sources of inspiration from the past can be found in old posters and illustrations, similar to the movie poster shown above in Figure B, as well as old advertisements, including typography and handwriting, old cars, televisions, and radio devices, old photographs — especially Polaroids, dirty or grimy colors and textures, and elements from pop-art or Art-Nouveau.
Architecture can also be a source of inspiration; for example, the works of Victor Horta, the Belgian architect who designed many structures, including the Musée des Beaux-arts in Tournai 1928 as shown in Figure C.
Vintage styles and themes
Vintage styles and themes can be best categorized by the era or topic, as well as inventoried by the decades which have had the most influence in popular culture. Some of the eras or subjects that are most effective in vintage design today include the following:
|
Graphics
Graphics make up a large part of getting your vintage look and feel up to speed, and there are plenty of resources for free, shareware, and low-cost graphics available. I have included several source ideas to get you started on discovering great graphics for your vintage website designs.
You don’t have to make all your own graphics; some can be purchased and ready for editing. The source for the badge graphics that are applied in this piece are sourced from Graphic River – Vintage Web Elements, and created by Sam Sneek Digital, in particular, the “8 Retro Vintage Badges,” which are available for download as editable psd files at the rate of only $6.00. Graphic River has over 260 sets of vintage graphics available for purchase and range from $2.00 to $8.00 per set, and also include labels, timelines, logos, stamps, stickers, newsletters, backgrounds, travel stickers, ribbons, faded, navigation elements, retro web elements, 404 pages, ripped paper, boxes, and icons as shown in Figure F below.
Figure F
Another source for graphic inspiration is the Pinterest Vintage Graphics board which currently holds 705 pins and is followed by 1,763 people; if not directly available as graphics the board is a great starting point for getting ideas to creating your own. The board is displayed in Figure G below.
Figure G
Squidoo has a great post in its Graphic Design and Digital Art section with a list of Vintage Graphics and Antique Clip Art, which includes retro advertising art, old-time photos, retro greeting cards, public domain fairy clip art, and more.
Fonts and typefaces
A large part of getting that vintage look and feel is making sure the fonts and typefaces you use are suitable to the era, period, or theme you have chosen to incorporate into the design. I have listed several fonts here that make for great vintage designs.
Summertime – by Sara is one of several fonts she has created and is suitable for vintage design; a sample is displayed in Figure H.
Figure H
Futura Condensed Medium was originally designed by Paul Renner in 1927; Futura is based on geometric shapes representative of the Bauhaus design style of the 1919-1933 period, and is displayed in Figure I.
Figure I
Lobster by Impallari is a lovely bold condensed script fully loaded with hundreds of ligatures and alternates.
Figure J
Rockwell, originally designed at the Monotype foundry in-house studio in 1934, is a serif typeface belonging to the slab serif classification, and is shown in the sample in Figure K.
Figure K
Chunk Five is an ultra-bold slab serif typeface that is reminiscent of old American Western woodcuts, broadsides, and newspaper headlines. Used mainly for display, the fat block lettering is unreserved yet refined for contemporary use.
Figure L
For more inspiration, the Web Design Ledger has a good list included in this post by Henry Jones of “30 Fonts Perfect for Vintage and Retro Style Design.” The Flickr Vintage Typography Group Pool with over 2,400 members lists over 9,400 photos and considers itself as the ultimate source of old time typography such as type, lettering, signs, logos or any typographical element on ads & posters, cards & matchbooks, coupons & tickets, emblems & badges, packaging & booklets, covers & decals, electronics & road signs, and what not. A screen capture of the group is displayed in Figure M.
Figure M
Examples of websites with vintage and retro web design
Finally, I will finish with examples of six web sites that currently make good use of the vintage look and feel, and offer more inspiration and opportunities to look under the hood of these model designs.
Mom and Popcorn
Level Two Design
The New York Moon
The Cottonseed Oil Tour
Island Photo Booth
Font Diner
Have you worked with or created any web site designs with a vintage look and feel? I would enjoy hearing about any experiences you have had in creating vintage design effects.
Daily Tech Insider Newsletter
Stay up to date on the latest in technology with Daily Tech Insider. We bring you news on industry-leading companies, products, and people, as well as highlighted articles, downloads, and top resources. You’ll receive primers on hot tech topics that will help you stay ahead of the game.
Delivered Weekdays
