Reasons of popularity

Retro designing transcends time, styles, tastes and ages. Web designing templates having retro style are well accepted by customers from different countries. Retro designing usually focuses on certain eras or pop cultures but enjoys a loyal group of followers across several countries. Color schemes and graphics are neither too dull nor too colorful. 

Interweaving of modern graphics with old designs helps in creating a vintage appeal. People have a tendency to associate “value” with old things. Retro designing aims to reap this normal tendency. While value element helps in drawing visitors, modern designing elements keep them hooked. As such, retro designing offers the site owners best of both worlds – vintage looks with modern designing.

Retro designing has brought a touch of romanticism in web designing. Most web surfers are guilty of romanticizing old things. Most of us have a feeling “how green was my valley”. They feel life was much simpler, less stressful and relaxed when they were in schools and colleges. This is probably where a retro design takes us. It takes us to those sweet and memorable days when life was more relaxed.

Elements of retro designing

Retro web designing has several approaches to theme and certain elements are often repeated. Handwritten scripts are very popular. Some designers use old cars, retro product models, old fashioned photographs, early electronic devices and other such old images for creating retro look.  Some web pages reflect the celebration of sixties to space travel while others prefer to highlight post-war optimism and ad campaigns of ‘50s. Some web designers use the military themes like old war planes and badges and some like to use images of pin-up girls of that era. There are several crucial elements that contribute in making a design retro. Let us explore some of them.

1. Using shapes and illustrations

Simple shapes works wonder in creating a retro look. Circles of different sizes are commonly used for this purpose. Going through designs of different famous eras revels how simple shapes were used by designers to create maximum impact. In addition to simple shapes, some of them also opted for a floral background. Bright colors were used in such cases for drawing attention. These techniques are widely adapted by many designers for creating separate space of different content within same area.

2. Color schemes

Limited use of colors is the prominent trait of retro designs. Full color printing was very expensive in the past. This prompted many designers to limit the use of colors in their designs. Two toned coloring was predominantly used by retro designers. Sometimes designers selected a focal color and blended it with few selected colors to create a unique theme. 

3. Typography

Typography has always played a vital role in designing a retro site. Designers of the retro eras used simple techniques like repositioning of fonts, duplicating and pixel strokes for adding unique flavor to a design.

4. Borders

Use of borders is a fascinating part of retro designing. Borders can be used for framing a picture, highlighting content or creating focus areas. They can have ornamental designs or matching solid colors.

5. Textures and noises

Subtle use of texture and noise in the background helps in creating a visually appealing retro design. While some offer a canvas type background having worn out look, others love to use poster artwork with subtle colors. From blending of brush works to stained structures vintage designs are a treat to watch. Drop shadows and pattern overlays are used for creating retro look of a web page. Retro textures are usually simple to create with help of Photoshop.

6. Badges and logos

Badges and logos play a crucial role in creating a retro feel. Badges are usually round shaped with a fluttering slim banner over them. Subtle and contrasting colors are used on retro logos and badges. Most of them can be created with Photoshop.

Finally…

Using retro elements in web designing is an attempt to bring back the memories of past. When a designer purposely develops an old design and blends it with new services and technology we get true retro effect. Retro designs are void of older designing techniques, making them technologically compatible with modern site designing. There are several retro elements that may not fit with our modern web designing approach. Extensive use of Flash, horizontal rule lines, large rainbow fonts, hit counters are avoided by modern designers. Background images and music along with scrolling tickers used in earlier days of web designing may create problems in modern web designing. These elements should be avoided while designing and developing a retro website.

Related posts:

1. Third Dimension/Depth in Web design
2. Trend Review: Coffee Stains in Web Design
3. Merry X’mas: Free Twitter Theme

Ben the bodyguard This is almost like watching a short film

Nike better world You’d be already familiar with this.

TEDx Portland A unique use of the parallax effect.

ResolutionIM Don’t take your eyes off the rocket as you scroll.

David Beckham

Manufacturedessai

APO

Tutorial to create a vertical parallax using CSS and jQuery

And finally, an awesome detailed tutorial explaining how to create a vertical parallax using jQuery and CSS.

Related posts:

1. Everything you need to know about Parallax
2. Parachutes/Hot Air Balloons – An Emerging Trend in Webdesign
3. Trend Review: Web2.0 Rockets and Gliders in Webdesign!

This was created digitally using Fireworks and Photoshop and is something along the lines of the design of IndoFolio. I hope it will enrich your desktop. Its available for 1024×768 (standard) and 1280×800 (wide) resolutions. An Iphone version has been included as well.

The wallpaper is licensed under a Creative Commons Attribution-Noncommercial-No Derivative Works 2.5 India License and mainly should not be used for print.

Preview

Wishing you all a prosperous and productive year ahead!

Related posts:

1. ProductiveDreams Desktop Wallpaper v1
2. Free Wallpaper Generator!
3. ProductiveDreams Wallpaper v2

I’ve compiled a list of websites that accept logo submissions, along with the link to their submission forms. The ranking and other details of each site has been included as well, for your ease.

PS: The ranking details are provided just to give you an idea on how popular each website is. The information may vary from day to day.

Only three in the list requires registration to submit your logos

Logo From Dreams
Alexa Rank: 147286
Page Rank: 5
Famous in Countries: China, India, USA and Spain

Graphic Design Blog
Alexa Rank: 36183
Page Rank: 5
Famous in Countries: Pakistan, USA, India and Germany

The Design Inspiration
Alexa Rank: 17800
Page Rank: 5
Famous in Countries: USA, China and India

Logo Moose
Alexa Rank: 61436
Page Rank: 4
Famous in Countries: Pakistan, India, Indonesia, USA and UK

Logo Faves
Alexa Rank: 58238
Page Rank: 4
Famous in Countries: USA, India and Germany

Logo Critiques If you are actively looking for critiques, submit your logo here.
Alexa Rank: 312761
Page Rank: 4
Famous in Countries: USA and India

Type Based Exclusively for typographic logos.
Alexa Rank: 1526872
Page Rank: 4

Logofi
Alexa Rank: 240770
Page Rank: 4
Famous in Countries: Pakistan, Germany, Turkey, USA and India

Logo Fury
Alexa Rank: 166771
Page Rank: 3
Famous in Countries: USA, India, UK, Italy and Australia

Logo Galleria
Alexa Rank: 403497
Page Rank: 3
Famous in Countries: India, Indonesia and USA

Logo Gallery
Alexa Rank: 594609
Page Rank: 3
Famous in Countries: India, Malaysia and Indonesia

Logo Gallery Design
Alexa Rank: 1929224
Page Rank: 3
Famous in Countries: India

Logo Gala
Alexa Rank: 222652
Page Rank: 3
Famous in Countries: India, USA, Israel, Pakistan and Croatia

Logo Talkz
Alexa Rank: 754413
Page Rank: 3
Famous in Countries: Romania, USA and India

Czech Logos
Alexa Rank: 4,669,960
Page Rank: 3

Logoed All you need to do is submit an email to the admin
Alexa Rank: 1049291
Page Rank: 2

The Logo Mix
Alexa Rank: 1325361
Page Rank: 1
Famous in Countries: Germany

Logo Nest
Alexa Rank: 840171
Page Rank: 0
Famous in Countries: Canada, India, USA and UK

Registration required for the following sites

Creaticca
Alexa Rank: 11958
Page Rank: 6
Famous in Countries: USA, India, Germany and Pakistan

Logospire
Alexa Rank: 125330
Page Rank: 5
Famous in Countries: Turkey, USA, Belgium, Germany and India

Logo Pond
Alexa Rank: 11244
Page Rank: 3
Famous in Countries: USA, China, Germany and India

Before submitting to these websites just make sure that your logo is perfect!

Related posts:

1. How to improve the page rank of your twitter profile page
2. Twibies.com – The ultimate twitter resource for designers

If you are looking for a definition of parallax, here it goes. As far as the web (especially design) industry is concerned, parallax is the arrangement/animation of images in a way that lets you feel the distance between them.

For example, imagine that you are looking through the window of a moving vehicle. You will see the objects closer to you moving faster compared to the distant ones. The sun stays still while the trees, buildings and other objects move.

In this post I would like to walk you through different posts, examples and tutorials that would help you achieve this effect.

This technique was initially used in 2d video games and now mostly seen in single page portfolio websites and website headers.

2. Parallax in use

I would like to show you a few hand-picked websites that uses parallax before I proceed.

Eric J – This is one of my favorite websites using Parallax in the way it should be. The motion of the wheel and the smoke that comes out of the silencer as the scooter moves adds up to the parallax feel.

Markus Neidel – This is an awesome 3d vertical parallax (flash).

Silverback – To see the effect in this site, you would have to resize your browser window and notice the header region.

Umaghet Zeggen – All you need to do is move your mouse (towards any direction).

Squaredeye – Resize your browser window and notice the movement of clouds in the header. A css based parallax.

Dezignus – Move your mouse over the header region (towards any direction).

3. Now, how do I create Parallax?

Let’s see how to create this effect using javascript, flash and other frameworks.

Using JQuery

You’d probably be aware, I am a JQuery fan and for that reason I would like to first list down the methods using JQuery to achieve the Parallax effect.

These tutorials use jparallax – a jQuery plugin to create parallax

Create a Parallax Website Header

Using Mootools

Not familiar with JQuery huh? Here goes a tutorial that uses mParallax a mootools adaptation similar to jParallax.

Another demo using Mootools

Using Scriptaculous

This one uses scriptaculous another popular javascript framework.

Using Javascript – A Vertical Parallax

A vertical parallax based on javascript.

Using pure CSS

Unlike the ones above, this would work only when the user re-sizes the browser window. This is achieved using css positioning.

A tutorial on how to create the Silverback Parallax (shown above) using CSS.

Examples of and How to Create the CSS Parallax Effect

This is a really interesting one! A parallax illusion with CSS

Parallax using Flash

A step by step tutorial by webdesignerwall.

Creating parallax with flash cs4

Are you an AfterEffects freak?

If so, this tutorial is for you. Create a Realistic Camera Move with Parallax.

So, that’s all about Parallax. I hope this post was informative

Related posts:

1. Min-width issue in IE6
2. ProductiveDreams Reloaded
3. Trend Review: Coffee Stains in Web Design

are normally used to represent speed or a medium to send message. Here goes a list of sites that use Paper Planes.

Paper Planes in websites

Please share your thoughts on this trend using the comment form below

Related posts:

1. Trend Review: Coffee Stains in Web Design
2. Trend Review: Clip ‘n’ Paper
3. Parachutes/Hot Air Balloons – An Emerging Trend in Webdesign

In one of my previous trend reviews, I had mentioned about the cofeecup trend. What if you drop the cofee on your table or paper? yes, it becomes another trend

Do you think adding some coffee stains to your design would make it look better? Here goes a list of hand-picked designs that proves it! I’ve included links to tutorials on how to create such stains in photoshop as well.

Stains in websites

Coffeenatic

iSpoil

teh C peng

The Greg Brady Project

The Piss Biscuit

Mike Desjardins

What would you need to create these cool hot stains?

Its simple…

Photoshop brushes

Now, how to create these brushes?

Its not that hard. Here goes a nice tutorial by web design library But make sure not to spill your entire coffee after reading this

Coffee stain social networking iconset

Wallpaper

A coffee stain

wallpaper

for to keep you inspired.

And finally, a twitter theme

I hope you enjoyed this post. Stay tuned!

Related posts:

1. Trend Review: Coffee Cups in webdesign
2. ProductiveDreams Desktop Wallpaper v1
3. Trend Review: Price Tags (Part 2)

This is the third time I’m redesigning PD (I would rather call this a facelift). I’ve used some jquery to make things lively

So what are the major changes?

1. The Global Search

Type something(meaningful) on the Search field on the top right and wait for a second or two.

2. My social network

This section lets you to connect with me. Be my friend!

3. The Twitter Bird

I don’t want to explain this. Just move your mouse over the twitter bird.

4. The JQuery(moving) tabs

A simple JQuery animation.

5. Digg and Retweet buttons

You can see this in the post detail pages.

6. Calendar – shows posts of the current month

7. The Page peel icons

These icons already existed in the previous design but still I think it’s worth a mention.

8. Top Commenters

I love my readers and especially those who take the pain to comment or thank me for my efforts.

Now it’s time to let me know your opinion. Do you think this design is better than the previous one? Feel free to comment here

Related posts:

1. It’s Twitter Time! Free vector icon set
2. ProductiveDreams won the Best Grunge Design Award!
3. Free Twitter Bird Icon Set

are visually appealing elements, normally used to indicate speed. Here goes a list of sites that follow this

trend

.

1. A Pilot

2. Div Voted

3. Drupal Con

4. Get Me Fast

5. iSlayer

6. Jeff Sarmiento

7. Little Kids Bedrooms

8. Rawkes

9. Sopa

10. Mix Online

Related posts:

1. Trend Review: Coffee Cups in webdesign
2. Trend Review: Price Tags (Part 2)
3. Trend Review: Clip ‘n’ Paper

1. Alexandru Cohaniuc

2. Burger King Studio

3. Change in Command

4. Cognigen Corp

5. From the Couch

6. Sarah Longnecker

7. The Society of Publication Designers

8. The Autumn Film

9. Tmynus

10. Blue Dots Design

Related posts:

1. Trend Review: Coffee Cups in webdesign
2. Merry X’mas: Free Twitter Theme
3. Min-width issue in IE6