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.
You might be interested in the following related posts:
- Celebration Of Vintage and Retro Design
- 35 Beautiful Vintage and Retro Photoshop Tutorials
- Smashing Retro Icon Set
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;
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.
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](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/aa24e5d0-f9bd-4a86-a00d-582c6b173685/11.jpg)
Custom Design
![Retro and Vintage Designs - Custom Design | graphic, product and web design](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7baa6fa8-6b73-47fb-8f08-91c2cf2c4aec/44.jpg)
Big Rig Design
![Retro and Vintage Designs - Big Rig Design - Design and Marketing](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c7bb4f95-9190-49de-b0e3-6a02312042c0/28.jpg)
AdaptD.com
![Retro and Vintage Designs - AdaptD.com - Web Design and Development](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/fe691daa-0578-4948-866d-2bd8c80fd2f3/8.jpg)
![Retro and Vintage Designs](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5757dc47-ccb1-45b1-9a68-6cae6ac01d9d/47.jpg)
![Retro and Vintage Designs - Portfolio and blog of Jeffrey Sarmiento a web designer/developer from Toronto, Canada currfigure working for FreshBooks](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/fb0c2097-e820-457a-8b61-4d2fb93a4c6d/1.jpg)
![Retro and Vintage Designs -](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/734a99e2-29bb-42fb-a428-d50a2e1630be/43.jpg)
![Retro and Vintage Designs - Rob Across America](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0fab7c85-1945-4f82-9d03-e7043e7f4f73/45.jpg)
![Retro and Vintage Designs - Sensi Soft](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/66bb845e-3d89-4485-92c9-779c1539a470/40.jpg)
![Retro and Vintage Designs - The New York Moon - Neighborhood](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/fa2b9397-41b4-46b2-8480-583208f92423/3.jpg)
![Retro and Vintage Designs - ~ The Statement ~ The Official Blog of The Old State](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/073002f8-7342-421b-90d1-c9a2abdd4df1/4.jpg)
![Retro and Vintage Designs - MacTarnahan's Brewing Company](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/846fce08-b147-47c9-9f7d-073b694ac2fe/2.jpg)
![Retro and Vintage Designs - Tricycle Terror](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/627edb84-5b1b-4c28-9b6c-04d965357535/6.jpg)
![Retro and Vintage Designs - Charlies Loan Payday Loans Short term cash loans fast](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/788df2ba-a021-4825-90c1-515ac92cde69/7.jpg)
![Retro and Vintage Designs - Small Stone Recordings](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/121a3b28-10a6-40ff-96e4-537ac32910a7/10.jpg)
![Retro and Vintage Designs - Big Cartel » Bringing the Art to the Cart](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6b173775-dc7a-4189-aaa6-a4b2d3a79bb5/12.jpg)
![Retro and Vintage Designs - The Ernest Hemingway Collection](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a1b11515-f678-4d60-8d12-3d8d0dfc65eb/15.jpg)
![Retro and Vintage Designs - Five Cent Stand - Bitter Kiss](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/dd0b880c-1e32-42f2-a885-d3436c9da49a/18.jpg)
![Retro and Vintage Designs - Prahba | Creative Minds: Graphic and Web Design](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/bb6526fa-7bff-44c0-bb28-10fe4ae14dd4/25.jpg)
![Retro and Vintage Designs - Thigpen Designs - 770.527.3958](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1a37a2f1-fbfe-4d2d-8e62-4e730a3118ba/30.jpg)
![Retro and Vintage Designs - Team Mongolmania](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/45a75ea6-27ab-4be5-b351-96ac675957b4/32.jpg)
![Retro and Vintage Designs - The Superest: Who is the superest hero of them all?](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f8c688af-9864-4095-bb6f-589384ffd0ce/34.jpg)
![Retro and Vintage Designs - // / RedBlu Winter '08-'09 // /](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/fcc80cd8-60c4-48b8-9b78-f7e121bfab05/35.jpg)
![Retro and Vintage Designs - Booreiland - platform for creative productions](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3694cae9-ae82-4360-a693-eb7e3240802e/41.jpg)
![Retro and Vintage Designs - Fuelhaus Brand Strategy, Marketing, Design Agency](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a27112fa-7db2-4c35-91ec-c67519c66060/42.jpg)
![Retro and Vintage Designs - intensify.org](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/29e9b7ba-bd5a-480f-98bd-e6d85f990845/46.jpg)
![Retro and Vintage Designs](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9fbd18f0-a0ab-495f-b423-741f35d737d3/49.jpg)
![Retro and Vintage Designs](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/119357de-5012-48ca-9d12-f150326063f1/50.jpg)
![Retro and Vintage Designs](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a6f2d991-b500-4095-98c7-0d53a914ee2e/54.jpg)
![Retro and Vintage Designs](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e1b1f852-4183-45f7-b8a7-cf74f27ecaa2/55.jpg)
![Retro and Vintage Designs](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/986af6b5-2ab8-4842-a5ed-d59accea9c61/56.jpg)
![Retro and Vintage Designs](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b6432250-9a1d-44d9-aabe-5d4bc4b7c3c8/58.jpg)
![Retro and Vintage Designs](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/bc21445b-2caf-4491-8de7-8b787d349be5/59.jpg)
![Retro and Vintage Designs](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/59240c24-974c-4b0d-b562-5eb29fb809b3/61.jpg)
![Retro and Vintage Designs](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/701748ab-cf78-4f93-ba9d-815bc70e65be/62.jpg)
![Retro and Vintage Designs](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b8a0b35f-77cb-477f-9328-89ef83f7348e/63.jpg)
![Retro and Vintage Designs](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/13aa28f2-3bba-4e90-969a-d0d6148767ca/64.jpg)
![Retro and Vintage Designs](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f10e3953-3bad-4953-ad30-f5052a2728a8/66.jpg)
![Retro and Vintage Designs](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/39cc1dde-040f-4e84-8aea-ed7e76ae1e29/53.jpg)
Renaissance-Designs
![Retro and Vintage Designs](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/472279e2-a011-4371-b019-8507ee7e2f91/51.jpg)