Gone Retro: 10 Gorgeous Websites With A Touch Of Yesteryear

Retro styles are popular in just about every aspect of design. I love looking at them to see how the designer puts together a look and feel that conveys a long gone era. Take a look at fashion, advertising, print and even cars. Designers revisit the past to plunder the good, the bad and the sometimes downright ugly elements to use in new design. Web designers are no different of course and there are many fabulous web sites out there using retro styles.

So what makes a site retro?
Sites falling into the retro category aren’t necessarily representing any one particular period. One dictionary definition of retro is “a fashion reminiscent of the past” so that leaves it wide open to interpretation. On the web retro web sites can be distinguished by the type of illustration or photographic images used, the typefaces and the colour palettes.

Photography and illustration

For many retro sites, the illustration used has a major influence on the overall look and feel. Take a look at the CSS Tinderbox website (image farther down the page) which uses distinct Soviet era style drawings to achieve its look. The site is also dirtied up to make it look aged. Likewise the photography on the Ernest Hemmingway site is mostly of the younger Hemmingway. The photographs look yellowed and give a feeling of another age.

Typography
As is the case in both web and print design, the choice of typography is a huge factor in conveying a look and feel. For some sites the retro typography in the logo and headings There are a number of specialist font foundries who specialise in retro typography. I love Letterhead (see their website below), Font Diner and Fontoville for their cool typefaces.

Color

Many of the retro style sites have muted colours with a bit of dirt or grunge thrown in to evoke age. The colours tend to be earthy hinting that the colours may have been more vibrant in the past, but now are old. In the most successful retro designs, the appropriate color palette works in conjunction with the other elements to give the feel of earlier times.

 

So without further ado, here are ten websites displaying a unique retro look. I’ve chosen these because I think they represent retro design from top to bottom. There are no sites here which just have a retro logo but nothing else linking them to another era. They are fairly consistent throughout.

World Domination Design Group employ clever use of old style video, voice-overs and 1940’s upbeat tunes.

WDDG

The CSS Tinderbox does a nice job with Soviet style graphics and typefaces.

CSSTinderbox

Ernest Hemmingway Collection uses old photographs, paper objects and muted worn paper colours to convey the feeling of a certain era.

Hemmingway

Detectiv Nali shows an old leather case with aged illustrations, photographs and typographic ornaments depicting the time of Arthur Conan Doyle. Sherlock Holmes appears to have been a major influence in this design.

Detectiv

 

Letterhead Fonts have recently redesigned their site to showcase some of their beautiful typefaces. The new design has an art deco feel.

Letterhead

RobotMania has been on the web for years and won a lot of awards when it came out. It has a very cool retro vibe about it.

RobotMania

Selling a dream. The Edgewater Cottage Community has a 1950’s feel for selling a modern residential area.

Edgewater

Rejected Robot is the portfolio site of William Tamplin and has an endearing feel about its toy robot box design.

RejectedRobot

Prospect Denim by Media Boom (itself a retro site) is also an award winner and has fabulous illustration and flash work.

ProspectDenim

 

And finally, the Big Fat Institute have updated their site recently, but this is a link to their old site which was a great example of brilliant retro design using video and typography to create an authentic looking 50’s site.

BigFatInstitute

So there you have it. Not a style that’s appropriate for every site, but done well it can be very effective.

What do you think of these sites? What other good retro web sites have you come across?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Pam

    Great post and great examples! Thanks!

    One thing I love about some retro sites is they give off an undeniable sense of class and distinction. Something that can be associated with a bygone era and not seen as often these days. Also that sense of familiarity and comfort level which can be excellent for “welcoming” in visitors.

    Pam
    Ryvon Designs

  • http://www.gospelrhys.co.uk/ rhysboy84

    Love those designs. Big fan of Retro, my personal favourite is the design for Team Fortress 2. Yes the game was designed before the website, but the design suits it perfectly!

  • http://www.historycommons.org/ Black Max

    Great article!

  • http://www.atulthanvi.com atsa

    I really liked 1st and 7th website in this list. Great Post…really a good example of retros. I’ll be redesigning my portfolio in retro style very soon.

    Thanks,
    Atul Thanvi
    Web Designer

  • Dan

    That background on the Prospect Denim site sure took a lot of time to create, i bet. I often wonder, if the time spent creating something like this is actually worth it. Or if your customer will pay you enough for that hard work, i guess…

  • kapowphotography

    some stunning examples there! love the robot one.