Menu Search
Jump to the content X X
Smashing Conf San Francisco

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

Retro and Vintage In Modern Web Design

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. [Content Care Nov/10/2016]

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.

You might be interested in the following related posts:

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 Link

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 Artworks4);

Retro and Vintage

retro illustrations;

Retro and Vintage

Vintage and retro are often combined with a hand-drawing style5 and grunge style6.

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.

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 Link

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 and 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 Media7

Retro and Vintage Designs

Jeffrey Sarmiento8

Retro and Vintage Designs - Portfolio and blog of Jeffrey Sarmiento a web designer/developer from Toronto, Canada currfigure working for FreshBooksLevel2D.com9
Retro and Vintage Designs -

Rob Across America10

Retro and Vintage Designs - Rob Across America

Sensi Soft11

Retro and Vintage Designs - Sensi SoftThe New York Moon12
Retro and Vintage Designs - The New York Moon - Neighborhood

~ The Statement ~ The Official Blog of The Old State13

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

MacTarnahan’s Brewing Company14

Retro and Vintage Designs - MacTarnahan's Brewing Company

Tricycle Terror15

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 Cartel16

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

The Ernest Hemingway Collection17

Retro and Vintage Designs - The Ernest Hemingway Collection

Five Cent Stand – Bitter Kiss

Retro and Vintage Designs - Five Cent Stand - Bitter Kiss
Prahba18

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

Thigpen Designs19

Retro and Vintage Designs - Thigpen Designs - 770.527.3958

Team Mongolmania

Retro and Vintage Designs - Team Mongolmania

The Superest20

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

Red&Blu Winter ’08-’0921

Retro and Vintage Designs - // / RedBlu Winter '08-'09 // /
Booreiland
Retro and Vintage Designs - Booreiland - platform for creative productions

Fuelhaus

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

intensify.org22

Retro and Vintage Designs - intensify.org

Mister-Aero23

Retro and Vintage Designs

The Dollar Dreadful Family Library24

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 Shy25

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 Twenty26

Retro and Vintage Designs

The Blizzards

Retro and Vintage Designs

Thuiven

Retro and Vintage Designs

Internet Zillionaire27

Retro and Vintage Designs

Renaissance-Designs Link

Theocacao28

Retro and Vintage Designs

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2008/04/celebration-of-vintage-and-retro-design/
  2. 2 https://www.smashingmagazine.com/2008/10/30-beautiful-vintageretro-photoshop-tutorials/
  3. 3 https://www.smashingmagazine.com/2009/02/smashing-retro-icon-set/
  4. 4 /2008/07/21/pop-art-is-alive-classics-and-modern-artworks/
  5. 5 /2008/06/18/hand-drawing-style-in-modern-web-design-volume-2/
  6. 6 /2008/03/11/the-secrets-of-grunge-design/
  7. 7 http://fortysevenmedia.com/
  8. 8 http://www.jeffsarmiento.com/
  9. 9 http://www.level2d.com/
  10. 10 http://acrossamerica.robweychert.com/
  11. 11 http://www.sensisoft.com/
  12. 12 http://www.nymoon.com/
  13. 13 http://www.theoldstate.com/blog/
  14. 14 http://www.macsbeer.com/
  15. 15 http://tricycleterror.com/
  16. 16 http://bigcartel.com/
  17. 17 http://www.ernesthemingwaycollection.com/
  18. 18 http://www.prahba.com/
  19. 19 http://www.thigpendesigns.com/
  20. 20 http://www.thesuperest.com/
  21. 21 http://www.redblu.com/
  22. 22 http://www.intensify.org/
  23. 23 http://mister-aero.com/
  24. 24 http://dollardreadful.com/
  25. 25 http://www.onehorseshy.com/
  26. 26 http://thefirsttwenty.com/
  27. 27 http://internetzillionaire.com
  28. 28 http://theocacao.com/

↑ Back to top Tweet itShare on Facebook

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine. He runs responsive Web design workshops, webinars and loves solving complex UX, front-end and performance problems in large companies. Get in touch.

  1. 1

    Nice list. I believe Big Fat Institute deserved to be on it, though.

    0
  2. 2

    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!

    1
  3. 3

    Nice old stuff here. Good collection, very inspiring

    0
  4. 4

    Antonio Ciccarone

    October 7, 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.

    0
  5. 5

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

    0
  6. 6

    Max | Design shard

    October 7, 2008 9:38 am

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

    1
  7. 7

    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

    0
  8. 8

    Alex (Blogsessive)

    October 7, 2008 9:49 am

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

    0
  9. 9

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

    1
  10. 10

    Excellent post!
    Retro is sweet!

    0
  11. 11

    wow… huge collection!

    0
  12. 12

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

    0
  13. 13

    Love retro! :D thanks for the inspiring posts!

    0
  14. 14

    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!

    0
  15. 15

    Good Work

    0
  16. 16

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

    0
  17. 17

    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…

    1
  18. 18

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

    0
  19. 19

    EXCELLENT!

    So many GREAT sites and designs posted!

    One of the best lists I’ve seen!

    0
  20. 20

    Andrew Cornett

    October 7, 2008 10:48 am

    Thanks so much for the great list!

    0
  21. 21

    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!

    0
  22. 22

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

    0
  23. 23

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

    0
  24. 24

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

    0
  25. 25

    Great sites, but no retro designs without retro fonts.
    , , .

    0
  26. 26

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

    0
  27. 27

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

    0
  28. 28

    here is another great one …. Silverspoon Films a 50’s drive in movie theme!!!!

    0
  29. 29

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

    Good on Ya ;0)

    0
  30. 30

    cool!

    0
  31. 31

    Simply amazing! Go crazy for the vintage style!

    0
  32. 32

    Bruno Byington

    October 8, 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

    0
  33. 33

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

    0
  34. 34

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

    0
  35. 35

    Ponto e Pronto

    October 8, 2008 3:42 am

    Wonderfull collection….

    =)

    0
  36. 36

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

    0
  37. 37

    Super showcase here. Very inspiring indeed. Thanks.

    0
  38. 38

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

    0
  39. 39

    damn fine collection. thanx

    0
  40. 40

    very inspiring!

    Thx

    0
  41. 41

    Jonathan Longnecker

    October 8, 2008 6:13 am

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

    0
  42. 42

    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!

    0
  43. 43

    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?

    0
  44. 44

    Benjamin Jancewicz

    October 8, 2008 10:26 am

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

    -1
  45. 45

    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 :)
    Thanks:)

    0
  46. 46

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

    0
  47. 47

    Just adding another very interesting one from Nokia.

    -1
  48. 48

    “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.

    0
  49. 49

    Mika Kiviranta

    October 9, 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. 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.

    0
  50. 50

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

    thanx to share this collection of retros …

    0
  51. 51

    Great stuff here. Thanks for sharing

    0
  52. 52

    retro and vintage are very nice!

    0
  53. 53

    Wow! Beautiful stuff, and very inspirational. Thanks!

    0
  54. 54

    Shame tinderbox dropped the featured look in this article.

    0
  55. 55

    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.

    0
  56. 56

    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

    0
  57. 57

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

    0
  58. 58

    wow! I’ll book mark this page as a “go to” list for web design firms. thanks for scouring the web and putting this list together!

    0
  59. 59

    Miss Lizzy D. Vine

    April 24, 2009 9:10 pm

    i was very impressed. i would like to acquire someones help for a few .coms

    0
  60. 60

    LOVE these. Thanks for the inspiration!

    0
  61. 61

    FYI: The example of “old radio devices” is not related to radio at all. It’s the well-known Roland Space Echo, a combination reverb/echo unit that became famous in the music biz in the ’70s. They’re still sought after and used today. Not at all an obscure item.
    Might need an actual old radio device to go under that heading. Or a new heading of “old electronic devices.”
    Peace
    tg

    0
  62. 62

    Hi this is a little mini site I am working on for a local vintage secondhand boutique. Ecoco Boutique. I hope you guys like it and it is a bit inspiring.

    0
  63. 63

    Here is an incredible example of a retro music site:

    0
  64. 64

    these are the good design, i was planning to have one for seoppcservices.in

    0
  65. 65

    WOW…Thanx!!!
    a very well described info…
    gonna’ need more like this stuff around :)

    0
  66. 66

    James McKenzie

    May 14, 2010 7:33 am

    I’m always amazed at the breadth of your collections. How do you guys find this stuff? People must be submitting their sites to you all the time. Anyway, thanks for the post – great work.

    0
  67. 67

    Very inspiring!

    0
  68. 68

    Nuruzzaman Sheikh

    February 5, 2012 5:18 am

    Now, I’m in love with retro. Thanx for this great collection.

    0
  69. 69

    Rajesh Wankhade

    May 5, 2012 12:27 pm

    Wow! I love retro designs

    0
  70. 70

    Perhaps they missed it because your site does not look retro at all. And even if it was a couple years ago, why would you think that they should notice it? You are a designer from Switzerland with an unpopular website.

    0
  71. 71

    I believe he knows that, he only wanted people to click on it to increase his page rank. I guess he doesn’t know that having people voluntarily visit his site is far more valuable than tricking them into it.

    0

↑ Back to top