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.
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;
- old-style typography (e.g. Roman typefaces);
- script fonts and handwriting;
- old radio devices;
- old TV devices;
- old cars;
- old packaging;
- old photos;
- vibrant rainbow colors (high contrast, neon-style);
- torn, used paper with stains (often yellowish paper);
- dark, dirty colors (brown, dark red, dark blue) and textures (e.g. paper);
- scrapbooks;
- pop-art elements (see also Pop Art Is Alive: Classics and Modern Artworks);
- retro illustrations;
- old-style signs;
- 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)
~ The Statement ~ The Official Blog of The Old State
ISO50 – The Visual Work of Scott Hansen
The Ernest Hemingway Collection
The Dollar Dreadful Family Library
Renaissance-Designs
Andy Gongea
October 7th, 2008 9:09 amNice old stuff here. Good collection, very inspiring
Steve
October 7th, 2008 9:18 amway to go retro!
…though some of us have always been retro. at least that what my kids keep telling me. — steve
http://photoportunity.com
Antonio Ciccarone
October 7th, 2008 9:21 amIt seems like this style is coming back with a vengeance – there’s more thought put into it this time over though.
Andrej
October 7th, 2008 9:27 amJesus I love retro design. And love this post. Love, love love ….
Max | Design shard
October 7th, 2008 9:38 amretro and vintage definatly have a place in my heart, good stuff thanks
david
October 7th, 2008 9:48 amthe 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
Alex (Blogsessive)
October 7th, 2008 9:49 amAmazing effort put into compiling this. Thanks for that, very inspiring post!
F. Yang
October 7th, 2008 9:50 amThese are how sites looked before the age of internet :)
Eric
October 7th, 2008 9:54 amExcellent post!
Retro is sweet!
Manuel
October 7th, 2008 10:03 amwow… huge collection!
Sophia
October 7th, 2008 10:11 amI love this post. It’s a great source of inspiration. Thank you for posting.
Ivan
October 7th, 2008 10:12 amLove retro! :D thanks for the inspiring posts!
Matt
October 7th, 2008 10:15 amNice post guys, I have been a fan of some of these sites for a while. It was nice to see some new ones.
Thanks!
azam
October 7th, 2008 10:16 amGood Work
ViniMan
October 7th, 2008 10:16 amNice post.
And btw, Fallout 3 has also an ultimate retro and vintage web design.
Chrissie
October 7th, 2008 10:19 amvery 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…
Rita
October 7th, 2008 10:24 amYou left out one of my favorites. You can find vintage inspiration in the design and content of
The MangoFalls Project
Curvball
October 7th, 2008 10:25 amGreat collection of some amazing sites. Always a pleasure to see these posts here on Smashing Magazine.
hdoug
October 7th, 2008 10:35 amEXCELLENT!
So many GREAT sites and designs posted!
One of the best lists I’ve seen!
Andy
October 7th, 2008 10:47 amNice list. I believe Big Fat Institute deserved to be on it, though.
Andrew Cornett
October 7th, 2008 10:48 amThanks so much for the great list!
Siah
October 7th, 2008 10:53 amthis 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!
David
October 7th, 2008 11:11 amThat ‘old radio device’ is actually a Roland SE-201 Space Echo.
Robert
October 7th, 2008 11:57 amGreat collection:) (btw. thanks for adding our site in such a marvelous company;)
Luis
October 7th, 2008 12:26 pmLegal, muito legal esta lista.
Parabéns!
Tem um site muito bacana aqui no Brasil que se encaixa no estilo deste post: http://www.laticiniosaviacao.com.br
Benedikt
October 7th, 2008 1:03 pmWow!
Simply awesome these webdesigns!
Great collection! I think I’ll try this style by my own.
Quint
October 7th, 2008 1:26 pmGreat sites, but no retro designs without retro fonts.
, , .
Guillaume Joly
October 7th, 2008 2:09 pmHere’s another french, but very nice looking retro blog : http://hangar.revolver3.com/blog/
Sara
October 7th, 2008 2:34 pmNice 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!
Marked Event
October 7th, 2008 2:58 pmWe 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. http://www.markedevent.com
Sherman
October 7th, 2008 3:03 pmNice collection! Here is another one: islandphotobooth.com
Jim
October 7th, 2008 3:25 pmIm looking for a retro / modern design for a kitchen design website. Any ideas or inspiration – http://www.kitchen-designs.co.uk
mahsyar90
October 7th, 2008 3:43 pmalthough they look old,
but they are cool!
nice!
Okibi
October 7th, 2008 4:16 pmBig fan of the Big Rig’s design, nice work.
Ivan
October 7th, 2008 11:10 pmWhat about http://www.cakephp.org ?
Kilian
October 7th, 2008 11:52 pmWhat about Mint Maintenance ?
Mixitup
October 8th, 2008 12:16 amAnother link here with a medicine/sideshow feel
Matthew Riches
October 8th, 2008 12:19 amHi,
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 (http://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 http://www.richescreative.co.uk
Justin (www.DotNetMushroom.com)
October 8th, 2008 12:21 amLove 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 !
DotNetMushroom
Donovan
October 8th, 2008 12:35 amBrilliant stuff.
So many insiring creations.
I would like to some day design a site with a taste of “retro”
Good on Ya ;0)
aniec2
October 8th, 2008 12:43 amcool!
Samuele
October 8th, 2008 12:59 amSimply amazing! Go crazy for the vintage style!
Marco
October 8th, 2008 1:18 amhere is another great one …. Silverspoon Films a 50′s drive in movie theme!!!!
Bruno Byington
October 8th, 2008 1:20 amfucking sweet. Such a nice collection of Vintage STuff!!! So inspirational to put that wacom away for a second and design some websites. Thanks man
Dizet
October 8th, 2008 1:20 amIt all puts me in mind of the Fallout series of games and their type of ‘neuvo-retro’ design. Nice designs, tho’.
srinivas
October 8th, 2008 1:52 ami love it….. its an nice collection…..
chris Kelly
October 8th, 2008 3:16 amwhat about pluginmedia.net?
Ponto e Pronto
October 8th, 2008 3:42 amWonderfull collection….
=)
Danny
October 8th, 2008 3:48 amVery nice collection. I’m going to print out and hug some of these designs, if they let me near a printer again.
Christopher Ross (thisismyurl.com)
October 8th, 2008 4:00 amCSS Tinderbox was always one of my favorites, the new design is OK but the old one was classy.
pedro
October 8th, 2008 4:16 amSuper showcase here. Very inspiring indeed. Thanks.
abatar
October 8th, 2008 4:34 amTime to realize it.
hand made art desigs show tecture and contract.
Abatar
Chris
October 8th, 2008 5:02 amdamn fine collection. thanx
boxhagen
October 8th, 2008 6:04 amvery inspiring!
Thx
Jonathan Longnecker
October 8th, 2008 6:13 amThanks for including us; we’re honored to be mentioned with these amazing designs! – FortySeven Media.
Raymond
October 8th, 2008 6:26 amthanks 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!
Simon Day
October 8th, 2008 7:32 amPretty 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?
Benjamin Jancewicz
October 8th, 2008 10:26 amSo; retro means lots of happy people with no melanin in their skin…
Peter Green
October 8th, 2008 11:14 amhey 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:)
Espen
October 8th, 2008 12:10 pmgreat collection.
I have to agree with Simon above.
retro designs almost always compromise over usability.
a very interesting challenge indeed.
diegooriani
October 9th, 2008 12:13 amJust adding another very interesting one from Nokia.
http://www.legendstelegraph.com/
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.
Gustavs
October 9th, 2008 3:15 amHere is another one: http://www.visualmedia.lv
Alan Alda
October 9th, 2008 7:26 amTheres a site i just came across that would fit this style, Carrot Creative.
Mika Kiviranta
October 9th, 2008 11:53 amThe 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.
john
October 9th, 2008 8:24 pmwow . i loved tangled decals design man …gr8 site …
thanx to share this collection of retros …
Dan
October 10th, 2008 5:39 amGreat stuff here. Thanks for sharing
Cosmi
October 10th, 2008 6:44 amretro and vintage are very nice!
Jackie
October 10th, 2008 7:25 amWow! Beautiful stuff, and very inspirational. Thanks!
Davin
October 10th, 2008 11:36 amShame tinderbox dropped the featured look in this article.
Dave
October 10th, 2008 12:12 pmThis is a great retro website that you guys missed: Prosperity Social Club. Its also a great retro bar in Cleveland too!
Steve
October 11th, 2008 12:08 amNice 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.
web design company
October 11th, 2008 10:13 pmNice cover of Retro and Vintage In Modern Web Design
ehcomunicacion.com
October 13th, 2008 9:51 amI love vintage.
culturesoak.com
October 14th, 2008 4:49 amFantastic collection.
Alejo Romano
October 16th, 2008 9:45 amwhat you called old radio device, is actually an old tape-echo unit interface, The Roland Space Echo, awesome device if you are a musician
jorgos
October 28th, 2008 3:23 amSehr schöne Auswahl, Gratulation. Und hier ist noch eine Retro-Site:
Internetagentur Filos Frankfurt
Herms
November 6th, 2008 9:58 amThis post makes me happy in the same way as Sky Captain and the World of Tomorrow. Props for a nice collection indeed.
BeantownDesign.com
November 28th, 2008 5:25 pmLove a few of these.. not easy to pull off.. but most impressive if executed correctly.
Duane Nason
January 29th, 2009 10:19 pmwow! 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!
Didi
February 4th, 2009 11:15 amNice vintage! look at “Marco Tagliaferri – Made in Italy” website with a really vintage look!
http://www.marcotagliaferri.it
hoolio
February 9th, 2009 5:57 pmSOboWO hi! hooli?
Attitude Design | Graphic Design Portfolio
February 24th, 2009 6:35 amSome really cool examples of retro/vintage designs here – also check out http://www.attitudedesign.co.uk/time-machine-part-2-ww2-graphic-design/ for design styles during the WW2 years.
Miss Lizzy D. Vine
April 24th, 2009 9:10 pmi was very impressed. i would like to acquire someones help for a few .coms
Kelsey
June 17th, 2009 2:53 pmLOVE these. Thanks for the inspiration!
Teri Greene
October 14th, 2009 9:56 pmFYI: 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
Hillary
October 16th, 2009 11:01 amTwo great sites created by an incredible artist, Scott Rogers, may he RIP. First, his band The Penetrators – http://www.penetrators.com/ – brilliant, retro artwork. Just look through the gallery to see. He created the artwork for the Atlanta Starlight Six Drive-In as well – http://www.starlightdrivein.com/ and I wish yall.com was still up (the original, not the flakey current magazine site) because his work really shined. RIP RIP.
rebecca hyde
October 17th, 2009 3:37 amHi 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. http://www.ecocoboutique.co.uk/
Marie
October 23rd, 2009 6:24 pmYou TOTALLY forgot an award winner: Prospect Denim by Media Boom
http://www.mediaboom.com/prospectdenim
bango
January 5th, 2010 4:42 amVery nice list,
Check out this one with a girly retro style :
http://www.lesfillesalaviolette.com/
Pam
February 26th, 2010 12:51 pmHere is an incredible example of a retro music site:
http://www.newoldies.com/
john
April 14th, 2010 10:56 pmthese are the good design, i was planning to have one for seoppcservices.in
PC
May 11th, 2010 10:31 pmWOW…Thanx!!!
a very well described info…
gonna’ need more like this stuff around :)
James McKenzie
May 14th, 2010 7:33 amI’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.
Jennifer
September 9th, 2010 1:07 pmVery inspiring!
Nuruzzaman Sheikh
February 5th, 2012 5:18 amNow, I’m in love with retro. Thanx for this great collection.
Rajesh Wankhade
May 5th, 2012 12:27 pmWow! I love retro designs
Tim
May 13th, 2012 9:12 pmPerhaps 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.
Matija
July 1st, 2012 2:13 pmI 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.