Retro Style in Web Design

Hello guys!

Today I want to talk with you about one of the most popular styles in Web design - Retro style. It is very actual nowadays and I am sure it will be actual for a long time. First of all we need to know what is "Retro style". Retro is a concept that combines the legacy mode of the second half of XIX and first half of XX century. This term is very abstract...

To use retro you need some history knowledge. Why? You should know the items that you use to design websites. Note that all before 1850 is an antiques, and after 1950 - vintage. Sometimes people confuse Retro style with a Vintage style. I think, it isn't a problem. For example, you can find many titles like this :"Vintage Retro Style". But if you are a perfectionist, you must check all the items that you will use in your design and the year they occured, and, certainly, you must use only old-fashioned details which belong to that time. Using different “old school” elements such as textures, handwriting fonts, posters, old style typography can help your web site to stand out against a background of other unnoticeable sites!

Below you can find a list of materials, which you can use for Retro Style Web Design:

1. Illustrations from old posters, movie poster, etc.

Example:

Find a piece of inspiration in this retro style website! Cool jQuery slider with old posters makes it great!

2. A useful variety of ancient and cursive fonts

Typography is one of the most important elements in retro digital design. There are endless possibilities that can be reached with help of type design some of which can be found in the examples below.

Example:

This website design with interesting fonts and texture is a good example of Retro design

3. Old radio and television devices

Example:

4. Old cars, cameras and photography

Example:

5. High-contrast, neon colors and / or dark dirty color (brown, protective, dark red, etc.) and texture, such as battered old paper, possibly with spots of tears

Example:

This website combines Retro style with Paper style. It looks nice!

6. Old signs and symbols

Example:

Here's a great website with a retro resort look. Flash with some interactive elements make the website really interesting. The artwork, navigation and soundtracks are unbelievable.

7. Elements of pop art

Pop art is a direction in art in 1950-1960, which appeared as a reaction to abstract expressionism, using images of consumer products.

Example:

8. If you want to create a really nice web design, try to add some Texture and Noise to your site!

Texture and noise add visual interest to your work. In some cases, design just doesnâ??t look right without them. In other cases, the texture and noise can be too much.

9. Blending Styles

Blending Styles (typically known as the Blending Mode in Photoshop and Illustrator) is a great way to add dimension to your work without a lot of effort. It allows you to blend objects and colors together in several different ways. Blending modes are often used with different opacity levels; for example, when applying a photographic texture to an image.

10. Two-Toned and Limited Color Schemes

Two-toned color schemes are a big thing in vintage design because producing full-color prints wasn't as easy as it is now.

Below you can find a list of web sites in Retro style for your inspiration:

As always, I want to show you a list of templates in Retro style:

Type: Drupal 7 Theme
Author: Hugo
Sources Available: .PSD;.PHP
Software Required:
Adobe Photoshop CS+;
Adobe Dreamweaver 8+ (or any php-editor);
For uncompressing a template ZIP package:
WinZip 9+ (Windows);
Stuffit Expander 10+ (Mac);
Drupal 7.x
Width: 1920px

Type: Flash Site
Author: Raymond
Sources Available:.SWF; .HTML; .PSD;.FLA
Software Required:
Adobe Dreamweaver 8+ (or Microsoft Expression Web);
Adobe Photoshop CS+;
Flash ??2004 or higher;
For uncompressing a template ZIP package:
WinZip 9+ (Windows);
Stuffit Expander 10+ (Mac)

Type: Flash Site 8
Author: Maxwell
Sources Available:.SWF; .HTML; .PSD;.FLA
Software Required:
Adobe Dreamweaver 8+ (or Microsoft Expression Web);
Adobe Photoshop CS+;
Adobe Flash 8+;
For uncompressing a template ZIP package:
WinZip 9+ (Windows);
Stuffit Expander 10+ (Mac)
Width: 766px

Type: Dynamic Flash Photo Gallery 2.0
Author: Mercury
Sources Available:.SWF; .PSD;.FLA;.XML
Software Required:
For uncompressing a template ZIP package:
WinZip 9+ (Windows);
Stuffit Expander 10+ (Mac)
Product Description:
Flash Photo Galleries 2.0 from TemplateMonster and Moto CMS are a new ultimate tool to present an image content online in the most possible spectacular way . With a new vast set of features - such as WYSIWYG editor, customizable design and website structure and others - the process of website maintenance and setup will be easy and pleasant.
For developers to edit source files:
Adobe Photoshop CS or higher;
Adobe Flash CS3 or higher;
Hosting Requirements:
PHP v. 5.2.1 or higher;
Zend Optimizer v3.3 or higher.
Width: 1980px

Type: Flash CMS Template
Author: Cowboy
Sources Available:.SWF; .PSD;.FLA;.PHP;.XML
Software Required:
For uncompressing a template ZIP package:
WinZip 9+ (Windows);
Stuffit Expander 10+ (Mac)
Product Description:
Flash CMS Template is a full-fledged Flash website with Moto Flash content management system integrated for easy website editing and content updating. Each design element can be easily customized according to your project needs. The price mentioned here includes the Moto CMS license in addition to the price of a template and its source files. Note: Extra sources for developers (PSD & FLA) are included.
For developers to edit source files:
Adobe Photoshop CS or higher;
Adobe Flash CS3 or higher;
Hosting Requirements:
PHP v. 5.2.1 or higher;
Zend Optimizer v3.3 or higher.
Width:1400px

Type: Flash Site 8
Author: Maxwell
Sources Available:.SWF; .HTML; .PSD;.FLA
Software Required:
Adobe Dreamweaver 8+ (or Microsoft Expression Web);
Adobe Photoshop CS+;
Adobe Flash 8+;
For uncompressing a template ZIP package:
WinZip 9+ (Windows);
Stuffit Expander 10+ (Mac)

If you use retro design successfully, you'll have a great user-experience, it is guaranteed! And it always causes a strangely pleasant feeling when you see things from our everyday life such as Youtube, RSS, Twitter, or email dressed in this crumpled, slightly rusty coat of the past.