Smashing Magazine ~ we smash you with the information that will make your life easier. really.
Smashing Magazine we smash you with the information that will make your life easier. really.

Retro and Vintage In Modern Web Design

October 7th, 2008 in Design Showcase | 121 Comments

Advertisement

Retro and vintage are becoming a new trend. Once rarely used in this robust, dynamic medium, early, retro and vintage elements are now becoming more and more popular in a variety of design contexts. Online shops, corporate designs, portfolios and blogs incorporate both styles on a small and large scale. When applying “old-style” elements to their works, designers produce creative and appealing designs that make their websites stand out and look really different. As a matter of fact, if executed carefully, such designs almost never look boring, although one might intuitively think that the opposite would be the case.

Retro and vintage designs exhibit graphic solutions that are strongly influenced by the time period that they are supposed to represent. While retro focuses on the style of the 1910s to 1930s, vintage recalls the time period between the 1950s and 1980s. In both cases, design elements reflect some old-fashioned motifs, trends, personalities and objects that had been an essential part of our lives in the past.

Such elements create a nostalgic atmosphere, awaken feelings and memories and attempt to communicate information effectively using emotions. Some such designs make use of so-called “classical conditioning” — a technique used to associate a stimulus with an unconscious physical or emotional response.

The Secrets Of Vintage and Retro Designs

What elements do designers use to create a genuine vintage or retro atmosphere? What colors are used? And what kinds of graphics are usually embedded in such designs? Let’s find out. According to our research, common graphic elements for such designs are:

  • illustrations from old posters, movies, newspapers, CDs, vinyls, ads;

    Retro and Vintage

  • old-style typography (e.g. Roman typefaces);

    Retro and Vintage

  • script fonts and handwriting;

    Retro and Vintage

  • old radio devices;

    Retro and Vintage

  • old TV devices;

    Retro and Vintage

  • old cars;

    Retro and Vintage

  • old packaging;

    Retro and Vintage

  • old photos;

    Retro and Vintage

  • vibrant rainbow colors (high contrast, neon-style);

    Retro and Vintage

  • torn, used paper with stains (often yellowish paper);

    Retro and Vintage

  • dark, dirty colors (brown, dark red, dark blue) and textures (e.g. paper);

    Retro and Vintage

  • scrapbooks;

    Retro and Vintage

  • pop-art elements (see also Pop Art Is Alive: Classics and Modern Artworks);

    Retro and Vintage

  • retro illustrations;

    Retro and Vintage

  • old-style signs;

    Retro and Vintage

  • vintage and retro are often combined with a hand-drawing style and grunge style.

Some designs go even further and not only use retro or vintage elements but try to achieve a Renaissance look. You can find some examples of such designs at the end of this post. You can find even more inspiration for similar designs in our post Celebration of Vintage and Retro Design.

In all of these cases, designers use their creativity to offer something truly different and make the design literally stand out. Let’s take a look at some beautiful examples of what can be achieved using this technique.

Below, you’ll find a showcase of 50 beautiful retro, vintage and Renaissance designs. Some of them are Flash-based, and most of them are CSS-based: for us it was not important how the design was achieved; rather, it was more important what came out of the designer’s approach in the end.

Showcase Of Retro and Vintage Web Designs

CSS Tinderbox (the design is different now - the site was recently redesigned)

Retro and Vintage Designs - CSS Tinderbox

Custom Design

Retro and Vintage Designs - Custom Design | graphic, product & web design

Big Rig Design

Retro and Vintage Designs - Big Rig Design - Design and Marketing

AdaptD.com

Retro and Vintage Designs - AdaptD.com - Web Design and Development

FortySeven Media

Retro and Vintage Designs

Jeffrey Sarmiento

Retro and Vintage Designs - Portfolio and blog of Jeffrey Sarmiento a web designer/developer from Toronto, Canada currently working for FreshBooks

Klassiker in Acryl

Retro and Vintage Designs

Level2D.com

Retro and Vintage Designs -

Rob Across America

Retro and Vintage Designs - Rob Across America

Slabovia.tv

Retro and Vintage Designs - Slabovia.tv - Unimpressed With The West

Dallas Advertising Agency

Retro and Vintage Designs - Dallas Advertising Agency, Dallas Advertising Agencies, Web Design, Website Designers, Dallas Flash Design

Sensi Soft

Retro and Vintage Designs - Sensi Soft

mediaBOOM

Retro and Vintage Designs - mediaBOOM | ...delivering smart internet and design solutions

The New York Moon

Retro and Vintage Designs - The New York Moon - Neighborhood

~ The Statement ~ The Official Blog of The Old State

Retro and Vintage Designs - ~ The Statement ~ The Official Blog of The Old State

MacTarnahan’s Brewing Company

Retro and Vintage Designs - MacTarnahan's Brewing Company

ISO50 - The Visual Work of Scott Hansen

Retro and Vintage Designs - ISO50 - The Visual Work of Scott Hansen

Tricycle Terror

Retro and Vintage Designs - Tricycle Terror

Charlies Loan

Retro and Vintage Designs - Charlies Loan Payday Loans Short term cash loans fast

Small Stone Recordings

Retro and Vintage Designs - Small Stone Recordings

Big Cartel

Retro and Vintage Designs - Big Cartel » Bringing the Art to the Cart

The Ernest Hemingway Collection

Retro and Vintage Designs - The Ernest Hemingway Collection

jrojr.com

Retro and Vintage Designs - jrojr.com » Home » Front Page

Five Cent Stand - Bitter Kiss

Retro and Vintage Designs - Five Cent Stand - Bitter Kiss

Tennessee Vacation

Retro and Vintage Designs - Tennessee Vacation - The State's Official Travel Planning Website

Prahba

Retro and Vintage Designs - Prahba | Creative Minds: Graphic and Web Design

Thigpen Designs

Retro and Vintage Designs - Thigpen Designs - 770.527.3958

Team Mongolmania

Retro and Vintage Designs - Team Mongolmania

tomatic

Retro and Vintage Designs - » tomatic® - splendid hypertext | a thomas marban venture

The Superest

Retro and Vintage Designs - The Superest: Who is the superest hero of them all?

Red&Blu Winter ‘08-’09

Retro and Vintage Designs - // / Red&Blu Winter '08-'09 // /

Lataka

Retro and Vintage Designs - Lataka, més de 5 anys d' experiencia dissenyant pagines web profesionals

Booreiland

Retro and Vintage Designs - Booreiland - platform for creative productions

Fuelhaus

Retro and Vintage Designs - Fuelhaus Brand Strategy, Marketing, Design Agency

intensify.org

Retro and Vintage Designs - intensify.org

Mister-Aero

Retro and Vintage Designs

The Dollar Dreadful Family Library

Retro and Vintage Designs

Creating Passionate Users

Retro and Vintage Designs

Dennis Jones Artwork

Retro and Vintage Designs

Capitol Media

Retro and Vintage Designs

One Horse Shy

Retro and Vintage Designs

The Lippincott

Retro and Vintage Designs

BlackMoon Development

Retro and Vintage Designs

Sourcebits TangledDecals

Retro and Vintage Designs

FOWA Miami

Retro and Vintage Designs

Bestial design

Retro and Vintage Designs

The First Twenty

Retro and Vintage Designs

The Blizzards

Retro and Vintage Designs

Thuiven

Retro and Vintage Designs

Internet Zillionaire

Retro and Vintage Designs

Renaissance-Designs

Timoni.org

Retro and Vintage Designs

Theocacao

Retro and Vintage Designs

Delicious button Stumbleupon

Advertisement
  1. 1.

    Andy Gongea (October 7th, 2008, 9:09 am)

    Nice old stuff here. Good collection, very inspiring

  2. 2.

    Steve (October 7th, 2008, 9:18 am)

    way to go retro!
    …though some of us have always been retro. at least that what my kids keep telling me. — steve
    Link [photoportunity.com]

  3. 3.

    Antonio Ciccarone (October 7th, 2008, 9:21 am)

    It seems like this style is coming back with a vengeance - there’s more thought put into it this time over though.

  4. 4.

    Andrej (October 7th, 2008, 9:27 am)

    Jesus I love retro design. And love this post. Love, love love ….

  5. 5.

    Max | Design shard (October 7th, 2008, 9:38 am)

    retro and vintage definatly have a place in my heart, good stuff thanks

  6. 6.

    Piotr (October 7th, 2008, 9:47 am)

    I can’t believe you missed Link [designr.it] here.

  7. 7.

    david (October 7th, 2008, 9:48 am)

    the example of “old-style” typeface is anything, perhaps Early 20th Century Display Type would have been more appropriate, old style typefaces were created in the 18th century and would be something like the typeface used in the renaissance example

  8. 8.

    Alex (Blogsessive) (October 7th, 2008, 9:49 am)

    Amazing effort put into compiling this. Thanks for that, very inspiring post!

  9. 9.

    F. Yang (October 7th, 2008, 9:50 am)

    These are how sites looked before the age of internet :)

  10. 10.

    Eric (October 7th, 2008, 9:54 am)

    Excellent post!
    Retro is sweet!

  11. 11.

    Manuel (October 7th, 2008, 10:03 am)

    wow… huge collection!

  12. 12.

    Sophia (October 7th, 2008, 10:11 am)

    I love this post. It’s a great source of inspiration. Thank you for posting.

  13. 13.

    Ivan (October 7th, 2008, 10:12 am)

    Love retro! :D thanks for the inspiring posts!

  14. 14.

    Matt (October 7th, 2008, 10:15 am)

    Nice post guys, I have been a fan of some of these sites for a while. It was nice to see some new ones.

    Thanks!

  15. 15.

    azam (October 7th, 2008, 10:16 am)

    Good Work

  16. 16.

    ViniMan (October 7th, 2008, 10:16 am)

    Nice post.
    And btw, Fallout 3 has also an ultimate retro and vintage web design.

  17. 17.

    Chrissie (October 7th, 2008, 10:19 am)

    very nice collection and a lot of work was done for this post.
    but if something is “back” it usually means it is “done” (or soon to be done)

    i’m more interested in what is NEXT…

  18. 18.

    Rita (October 7th, 2008, 10:24 am)

    You left out one of my favorites. You can find vintage inspiration in the design and content of

    Link [www.mangofalls.com]

  19. 19.

    Curvball (October 7th, 2008, 10:25 am)

    Great collection of some amazing sites. Always a pleasure to see these posts here on Smashing Magazine.

  20. 20.

    hdoug (October 7th, 2008, 10:35 am)

    EXCELLENT!

    So many GREAT sites and designs posted!

    One of the best lists I’ve seen!

  21. 21.

    Andy (October 7th, 2008, 10:47 am)

    Nice list. I believe Link [www.bigfatinstitute.org] deserved to be on it, though.

  22. 22.

    Andrew Cornett (October 7th, 2008, 10:48 am)

    Thanks so much for the great list!

  23. 23.

    Siah (October 7th, 2008, 10:53 am)

    this is some really awesome stuff. I love the music and bomber that flies by every few minutes on the Dallas Ad Agency site, sweet!
    Very inspirational. Great post, thanks!

  24. 24.

    David (October 7th, 2008, 11:11 am)

    That ‘old radio device’ is actually a Roland SE-201 Space Echo.

  25. 25.

    Robert (October 7th, 2008, 11:57 am)

    Great collection:) (btw. thanks for adding our site in such a marvelous company;)

  26. 26.

    Luis (October 7th, 2008, 12:26 pm)

    Legal, muito legal esta lista.

    Parabéns!

    Tem um site muito bacana aqui no Brasil que se encaixa no estilo deste post: Link [www.laticiniosaviacao.com.br]

  27. 27.

    Benedikt (October 7th, 2008, 1:03 pm)

    Wow!
    Simply awesome these webdesigns!
    Great collection! I think I’ll try this style by my own.

  28. 28.

    Quint (October 7th, 2008, 1:26 pm)

    Great sites, but no retro designs without retro fonts.
    Link [www.fontdiner.com]Link [www.fontoville.com]Link [www.girlswhowearglasses.com]

  29. 29.

    Guillaume Joly (October 7th, 2008, 2:09 pm)

    Here’s another french, but very nice looking retro blog : Link [hangar.revolver3.com]

  30. 30.

    Sara (October 7th, 2008, 2:34 pm)

    Nice collection, thank you so much! I will have a great time exploring these sites.
    I have to disagree on this point, though: While retro focuses on the style of the 1910s to 1930s, vintage recalls the time period between the 1950s and 1980s.
    As a collector of vintage clothing and ephemera, “retro” is most certainly applied to the 50s/60s-80s. Vintage is definitely earlier (00s-40s). Retro is more of a kitschy feel (think the 60s “retro” craze of the 90s), whereas vintage implies there is a history and quality behind the product that is “vintage-inspired”.
    Sorry, that was way more than I intended to type!

  31. 31.

    Marked Event (October 7th, 2008, 2:58 pm)

    We work with many brides and grooms and they even love a vintage flair! Our highest selling designs have vintage patterns and style. You might enjoy them too. Check us out. Link [www.markedevent.com]

  32. 32.

    Sherman (October 7th, 2008, 3:03 pm)

    Nice collection! Here is another one: Link [islandphotobooth.com]

  33. 33.

    Jim (October 7th, 2008, 3:25 pm)

    Im looking for a retro / modern design for a kitchen design website. Any ideas or inspiration - Link [www.kitchen-designs.co.uk]

  34. 34.

    mahsyar90 (October 7th, 2008, 3:43 pm)

    although they look old,
    but they are cool!
    nice!

  35. 35.

    Okibi (October 7th, 2008, 4:16 pm)

    Big fan of the Big Rig’s design, nice work.

  36. 36.

    Ivan (October 7th, 2008, 11:10 pm)

    What about Link [www.cakephp.org] ?

  37. 37.

    danny (October 7th, 2008, 11:48 pm)

    Great article! Not long ago I had an honour to design my friend site. She needed a touch of Golden Twenties… Enjoy: Link [www.dorotaboczkowska.com]

  38. 38.

    Kilian (October 7th, 2008, 11:52 pm)

    What about Link [maintenance.mint.com] ?

  39. 39.

    Mixitup (October 8th, 2008, 12:16 am)

    Another link Link [www.pugwashtheband.com] with a medicine/sideshow feel

  40. 40.

    Matthew Riches (October 8th, 2008, 12:19 am)

    Hi,

    It’s funny this. I have just taken a t-shirt order this morning for a load of distressed looking vintage t-shirt designs! And I have been doing this type of image for the past 3 or 4 months, I do think it is coming back as well.

    I haven’t had any requests for a retro styled web design yet though. I like to think I keep things clean and simple (Link [www.richescreative.co.uk] isn’t finished yet and I doubt it will ever be).

    I might have a go and just mock up a dummy retro looking site and see what I can come up with :-)

    Wish me luck!!

    Matthew Riches Link [www.richescreative.co.uk]

  41. 41.

    Justin (www.DotNetMushroom.com) (October 8th, 2008, 12:21 am)

    Love this post. Whilst some of the sites are amazingly good, I found the majority as being unbalanced in that they have some really effective retro look in one part of the site (mainly at the top) but then they are the normal, modern wordpress like towards the bottom. I think the best way to make use of this blog post is to select ideas and concepts of how to create a convincingly good retro look and then blend some of the elements together to create your own ! It is plain useless to try to stuff as much as possible. May I add that as part of the research, one may go to some old toy shop or those small shops that sell old memorabilia - nothing beats the original stuff to get an authentic feel !

    As always… great post !

    Link [www.dotnetmushroom.com]

  42. 42.

    Donovan (October 8th, 2008, 12:35 am)

    Brilliant stuff.
    So many insiring creations.
    I would like to some day design a site with a taste of “retro”

    Good on Ya ;0)

  43. 43.

    aniec2 (October 8th, 2008, 12:43 am)

    cool!

  44. 44.

    Samuele (October 8th, 2008, 12:59 am)

    Simply amazing! Go crazy for the vintage style!

  45. 45.

    Marco (October 8th, 2008, 1:18 am)

    here is another great one …. Link [www.silverspoonfilms.co.uk] a 50’s drive in movie theme!!!!

  46. 46.

    Bruno Byington (October 8th, 2008, 1:20 am)

    fucking sweet. Such a nice collection of Vintage STuff!!! So inspirational to put that wacom away for a second and design some websites. Thanks man

  47. 47.

    Dizet (October 8th, 2008, 1:20 am)

    It all puts me in mind of the Fallout series of games and their type of ‘neuvo-retro’ design. Nice designs, tho’.

  48. 48.

    srinivas (October 8th, 2008, 1:52 am)

    i love it….. its an nice collection…..

  49. 49.

    chris Kelly (October 8th, 2008, 3:16 am)

    what about pluginmedia.net?

  50. 50.

    Ponto e Pronto (October 8th, 2008, 3:42 am)

    Wonderfull collection….

    =)

  51. 51.

    Danny (October 8th, 2008, 3:48 am)

    Very nice collection. I’m going to print out and hug some of these designs, if they let me near a printer again.

  52. 52.

    Christopher Ross (thisismyurl.com) (October 8th, 2008, 4:00 am)

    CSS Tinderbox was always one of my favorites, the new design is OK but the old one was classy.

  53. 53.

    pedro (October 8th, 2008, 4:16 am)

    Super showcase here. Very inspiring indeed. Thanks.

  54. 54.

    abatar (October 8th, 2008, 4:34 am)

    Time to realize it.
    hand made art desigs show tecture and contract.
    Abatar

  55. 55.

    Chris (October 8th, 2008, 5:02 am)

    damn fine collection. thanx

  56. 56.

    boxhagen (October 8th, 2008, 6:04 am)

    very inspiring!

    Thx

  57. 57.

    Jonathan Longnecker (October 8th, 2008, 6:13 am)

    Thanks for including us; we’re honored to be mentioned with these amazing designs! - FortySeven Media.

  58. 58.

    Raymond (October 8th, 2008, 6:26 am)

    thanks for including the CSS Tinderbox, especially as the lead off for a great list of some seriously kick ass sites. i appreciate being included.

    i still love the “nior” design and it’s one of my favorites. i think i hit the sweet spot with that one. thanks again!

  59. 59.

    Simon Day (October 8th, 2008, 7:32 am)

    Pretty much all of those sites suffer from the same thing. You get to the page and you have to start hunting around for the links and content.

    The designs are excellent and I enjoy them but usability seems to be a forgotten aspect for many sites I see these days. If the user can’t clearly and easily find what they want hasn’t the point of the page been lost?

  60. 60.

    Benjamin Jancewicz (October 8th, 2008, 10:26 am)

    So; retro means lots of happy people with no melanin in their skin…

  61. 61.

    Peter Green (October 8th, 2008, 11:14 am)

    hey i’ve got a retro design too on my page! You can see it by clicking “О сайте” (”about site”) on the very bottom of the screen :) Link [www.petergreen.ru] !

    Thanks:)

  62. 62.

    Espen (October 8th, 2008, 12:10 pm)

    great collection.
    I have to agree with Simon above.
    retro designs almost always compromise over usability.
    a very interesting challenge indeed.

  63. 63.

    diegooriani (October 9th, 2008, 12:13 am)

    Just adding another very interesting one from Nokia.
    Link [www.legendstelegraph.com]

  64. 64.

    Todd (October 9th, 2008, 1:55 am)

    “Retro and vintage are becoming a new trend. Once rarely used in this robust, dynamic medium, early, retro and vintage elements are now becoming more and more popular in a variety of design contexts.”

    I doubt it. The retro style has been around for ages and as far back as I can remember, it had been a theme on CoolHomepages.com whenever I was browsing their sites for ideas and inspiration. To say it is becoming a new trend is a huge oversight.

    Good article and great examples, but let’s be a little more educated and do some research when writing an article. Retro has been around for at least the past 7+ years, perhaps more. Starting with such examples as Sparky’s Garage (no longer up), Big Fat Institute, versions of Altoids site and Fossils original design.

  65. 65.

    Gustavs (October 9th, 2008, 3:15 am)

    Here is another one: Link [www.visualmedia.lv]

  66. 66.

    Alan Alda (October 9th, 2008, 7:26 am)

    Theres a site i just came across that would fit this style, Link [carrotcreative.com].

  67. 67.

    Mika Kiviranta (October 9th, 2008, 11:53 am)

    The vintage style has been around, but I think this year is finally tipping point of vintage and retro design. Vintage style is somewhat opposite for web 2.0 style, at least for me. People has seen so much “gradient corners” lately that it may be a time for something else. At least one project to do.

    However vintage site could include a combination of different trends where you can find elements used on 2.0 also. Link [www.mikan.fi] is a site where these two trends are lightly mixed up. Glad to hear your comment. - Mikan.fi

    P.S Be warned: There is no “color” on that web site.

  68. 68.

    Dima (October 9th, 2008, 12:48 pm)

    russian site old style
    Link [perevoschikov.chepetsk.ru]

  69. 69.

    john (October 9th, 2008, 8:24 pm)

    wow . i loved tangled decals design man …gr8 site …

    thanx to share this collection of retros …

  70. 70.

    Dan (October 10th, 2008, 5:39 am)

    Great stuff here. Thanks for sharing

  71. 71.

    Cosmi (October 10th, 2008, 6:44 am)

    retro and vintage are very nice!

  72. 72.

    Jackie (October 10th, 2008, 7:25 am)

    Wow! Beautiful stuff, and very inspirational. Thanks!

  73. 73.

    Davin (October 10th, 2008, 11:36 am)

    Shame tinderbox dropped the featured look in this article.

  74. 74.

    Dave (October 10th, 2008, 12:12 pm)

    This is a great retro website that you guys missed: Link [www.prosperitysocialclub.com]. Its also a great retro bar in Cleveland too!

  75. 75.

    Steve (October 11th, 2008, 12:08 am)

    Nice article, but disappointed that Bradley Schenck’s sites were not referenced - he’s been doing these sites since 1997 and IMO is the leader in “retro-active” web design. (I have no relation, just a fan of is work). dub dub dub dot webomator dot com…great tutorials links and inspiration.

  76. 76.

    web design company (October 11th, 2008, 10:13 pm)

    Nice cover of Retro and Vintage In Modern Web Design

  77. 77.

    ehcomunicacion.com (October 13th, 2008, 9:51 am)

    I love vintage.

  78. 78.

    culturesoak.com (October 14th, 2008, 4:49 am)

    Fantastic collection.

  79. 79.

    Alejo Romano (October 16th, 2008, 9:45 am)

    what you called old radio device, is actually an old tape-echo unit interface, The Roland Space Echo, awesome device if you are a musician

  80. 80.

    jorgos (October 28th, 2008, 3:23 am)

    Sehr schöne Auswahl, Gratulation. Und hier ist noch eine Retro-Site:
    Link [www.katsiak.com]

  81. 81.

    Herms (November 6th, 2008, 9:58 am)

    This post makes me happy in the same way as Sky Captain and the World of Tomorrow. Props for a nice collection indeed.

  82. 82.

    BeantownDesign.com (November 28th, 2008, 5:25 pm)

    Love a few of these.. not easy to pull off.. but most impressive if executed correctly.

Leave a Reply

Allowed Tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="">
Advertisement