As the second decade of the 21st century rolls on, web designers are busy trying to adjust to the new technologies that are changing the way the World Wide Web will look and behave from now on. With the advent of CSS3, HTML5, and new versions of browsers that take advantage of hardware acceleration (such as Chrome, Firefox, and IE9); web designers are poised to deliver the best visual and interactive experience for web surfers. In terms of style, a certain trend has begun to emerge among the early adopters of CSS3: websites that are inspired by retro and vintage design.
If you enjoyed this post on retro web design inspiration, check out these retro themed posts as well:
- 30 Fantastic Steampunk Artworks
- Retro and Vintage Themed Web Designs
- 25 Free Retro Fonts for Designers
A clear example of CSS3 retro-inspired design was recently delivered by search engine giant Google. To celebrate the 183rd birthday of the acclaimed science fiction novelist Jules Verne, Google transformed its ubiquitous logo into a retro-futuristic submarine inspired by Verne’s classic “20,000 Leagues Under the Sea”, the Nautilus. Visitors to Google’s web page were treated to a cluster of antique-looking shiny brass portholes and retro depth gauges. Users could also manipulate the Nautilus and navigate a beautifully drawn underwater landscape reminiscent of book cover illustrations predating World War II.
This isn’t the first time Google has gone vintage with its logo, back in May 2010 Google drew inspiration from a well-known staple of the Golden Age of video games: Pac-Man.
The retro and vintage trends in modern web design are cropping up in a variety of stylish web sites. Take a look at British ice cream maker: Taywell’s website. The retro elements are subtle but clearly defined: old-fashioned typography in its logo, a light pastel color scheme, and the use of vintage patterned frames around pictures of ice cream served on traditional plates.
Round logos and streamlined cursive typography are two retro elements that portray a stylish look when combined. The website of French Touch, a web designer that caters to the francophone community, takes advantage of the WordPress publishing system and CSS3 to deliver a minimalist retro-inspired look. The elongated and slightly shaded fonts used displayed against a geometrical pastel pattern complement the circular shaped logo.
There are multiple sources of inspiration behind the current retro trends in web design. Old newspapers with bold headlines are one source as seen in this web page showcasing cascading style sheets: CSS Tinderbox . The specialized font used is based on the Cyrillic written alphabet, and the overall feeling of old Soviet design adds to the vintage look. The text is organized in newspaper columns, and the addition of an old artifact (the newspaper vending machine) is a nice touch.
Just how far back must a web designer have to go in order to achieve a stylish retro-look? While there is a marked preference for design styles dating back to just before World War II to the 1960s, designers must not forget about other time periods. While visual styles that evoke Art Deco, Americana, the Bauhaus School of Design, and Pop Art are some of the favorite retro styles routinely used by web designers; other sources of inspiration such as the early Apple Macintosh Operating System are also adequate. By utilizing a sense of balance, a designer can also blend retro elements such as illustrations, fonts, and icons with modern design to achieve an eye-pleasing website such as They Make Apps.
A style must not only be old-fashioned to qualify as retro-inspiring. The web designer must still consider the basic elements of design such as color matching, elegance, simplicity, and aesthetics. The psychology behind going retro is to invoke iconic symbols of an era gone by, but only if the result of such invocation is visually appealing. Web designers must keep in mind that by blending exciting new technologies with old-school sensibilities, they are engaging the psyche of the web user.