In this post I’ll feature some web designs that went viral on StumbleUpon/Digg/other social media sites and the lessons you can learn from them. As you browse the designs, I’m pretty sure you’ll find some common patterns I overlooked. If you see that, let me know in the comments :) For now, let’s get started.

One more thing before we start. The lessons I’ll share are just principles and observations that come from my 3+ experience in viral marketing and getting over a million people to my websites. Feel free to disagree with some of the principles and let me know why in the comments below. Now, let’s REALLY get started :)

1. Man in The Dark

What can we learn from this: People want control. That’s one of the reasons games are more engaging than videos. This animation makes use of that principle by giving people an incredible control over the flying man. Even if you move your mouse a little bit, you should get him flying immediately. The lesson here is: If you’re making a game or an animation people can control, ask yourself how can you make it so even a small move with the mouse (smallest effort people can possibly take while sitting on a computer) can produce a ‘wow’ results.

2. 10 Common Misonceptions Dispelled (Infographic)

What can we learn from this: Appeal to the general audience. Going niche doesn’t work if you want to go viral (except if the niche is fascinating for the general public, like astronomy). This infographic is a great example of appealing to the overall mass population. The name is ‘10 Common Misconceptions Dispelled’, not ‘10 Common Teeth Whitening’ or ‘10 Common Acne’ misconceptions. In viral, fun and entertainment are a priority over being informative.

3. Horses Singing

What can we learn from this: There are so many principles behind this viral flash ‘game’, but I think what’s most important here is unexpectedness; when horses open their mouth, you expect that awful and loud voice. But these horses can sing; and they can actually sing in chorus! Imagine real horses doing that; one of the most annoying things in the world? :)

4. Different Live Quotes

What can we learn from this: As a general rule of thumb, too much text doesn’t work in viral (see why in the next lesson). That doesn’t mean, however, that text doesn’t work at all. This example shows that. If you combine it with something insightful (like quotes), funny (once someone on Twitter made an account named “shit my dad says”), anything that brings emotions, you should have a good probability most people are going to like it.

5. TheOatMeal

What can we learn from this: I’ve actually known this OatMeal guy before he went viral on Digg. I expected his site to be great success, but never expected it would get viral to this extent! (his site is in the top 2500 most visited sites in the world according to Alexa). He taught me one very important thing with his designs. You see, there is a lot of text in some of his infographics. But it’s all illustrated, like a comics, and the text accompanies the graphic rather than the graphic accompanying the text. This is a very important distinction to make; if the text accompanies the graphic then you try to illustrate as many things as you can with the graphic, while the reverse is true with the graphic accompanying the text (like in this article, for example).

6. TypoOrganism ASCII (or, it’s Obama in ASCII!)

What can we learn from this: Ah, the power of associations. Combining technology + famous people = win. You could argue that we were making all these ‘associations’ in the previous examples as well (connecting pictures with emotions etc). But this is different. In this example, there is a politician, a celebrity. Some will like this and some will not. But they would both agree this is ‘fascinating’. A lesson/idea: You can take a present trend/famous person and make a creative design out of it. Like Bill Gates or Steve Jobs.

7. Drawing Example

What can we learn from this: Most people like drawings. If you’re a drawing master, why not try and submit your masterpiece on StumbleUpon? Or alternatively you can find a drawing group on Facebook and post it there and see what happens (just make sure the group/page has enough members!) Drawings go viral on StumbleUpon.

8. ShinyBinary – Oh, It’s So Beautiful!

What can we learn from this: People love beautiful stuff. Now, aren’t different things beautiful to different people? Not really. For example, if you show the 2 pictures above to different people. most will say they’re quite beautiful. Maybe 2 in 30 will say they don’t like the pictures. But the rest 28 will usually say positive stuff. And not surprisingly, beautiful things often go viral ! They appeal to most (remember the second principle, appeal with information? Well this is same just you’re appealing with beautiful stuff).

If you want to see whether something you designed is beautiful or not, try sending it to 5 people (but don’t tell them it’s your design) and hear what they think.

9. Fractal World Gallery

What can we learn from this: Making a showcase of beautiful pictures/designs used to work quite successfully on StumbleUpon. This isn’t the case anymore (they still work, but not so phenomenal like previously), not because of the pictures but other factors. If you show same things to people all the time, they’ll become accustomed to those things and they’ll lose they effectiveness. The things they see will become ordinary and ordinary is the enemy of viral and buzz. So why am I telling you this? Because you can make twists for these showcase posts and make them ‘not-so-ordinary’.

Most people just throw a bunch of pictures for a particular topic, name it ‘x beautiful [theme] pictures’ and that’s it. Boring. Imitation works for getting viral, but not for long. Here are some ideas on twists you can make:

‘10 Remarkably Similar, Yet Very Different [theme] Designs’

‘10 Designs and Their Ugly Counterparts’ (you can show similar designs here, first the ugly one, and then the beautiful one)

10. Iconscrabble

What can we learn from this: Simplicity helps a lot. Especially if you have a site where people are just trying to do 1 thing (like search for something). If you’ve noticed, all the previous examples are kinda simple, they don’t have any extra parts that take your attention. They make you focus on the ‘meat’ and don’t do much fluff.

11. Phong

What can we learn from this: When this animation started, something strange happened to me. I started associating the animation with the essence of life, the stars, the universe…and I bet most people also did that when they saw this. Can you do this with your design? Can you insert an element which will help visitors associate your design with the essence of life? Some objects that can help you accomplish this are: stars, galaxies, planets etc. But it’s not just about what you present, it’s about HOW you present it. Just take a look at this animation and its slow motion. Think on how you can present your static/animation design. Slow motion usually helps a lot in the ‘how to present it’ part.

12. LAB – Freestyle Creativity

What can we learn from this: At the end, it’s important to mention that there are not specific rules for going viral. There is a dose of randomness in the viral formula. The more viral designs you see, the more you can ’steal’ from them and then make your own ones. This is an example of what I call a ‘freestyle creativity’, the guy probably just said ‘I found this fascinating and other people will probably find it too’ and went with that design. There’s no rule that says you can’t do the same too.