It could be quite disheartening to learn that you have a reader reading your post and an message from Instant Messenger pops up and steals the show. Before you know it, your reader could be already checking out someone at FaceBook.

Image credit: The Geek

Eyetracking studies have shown that readers SCAN text, rather than READ. Another bad news is, readers read more slowly on the screen than in print. There is just an abundance of information online. For the reader, he/she has nothing to lose if he misses your article. Hence, you have to allow your readers to gain something so significantly that he cannot afford to lose it.

Let’s jump straight into what we have in store for you before I am become guilty of committing the mistakes that I would be pointing out.

There are definitely more specific tips for writing for different audience, but there are some pointers to get you a kickstart.

About Author – Kelly Swee is a new media consultant from Singapore. She specialize in video media platform and has a keen interest in digital media design artworks.

There are millions of websites out there. Many of them are unique, either in small ways or in large ones. But the individual impact of any particular site on the overall Internet is generally negligible, if there’s any impact at all.

Not so with the fifteen sites here. These sites changed the Internet, mostly for good, in substantial ways. Included here is everything from Geocities (which could probably be blamed entirely, either directly or indirectly, for every ugly web design “trend” that’s ever been) to Wikipedia (which has made information almost universally accessible) to Google (which has changed or influenced virtually everything online).

1. Wikipedia

Changed the way we find information. Before Wikipedia, most online encyclopedias were either sorely lacking in information, or required you to have a paid subscription to access their content. Wikipedia changed all that by not only allowing anyone to view the content for free, but also by allowing individual users to review and update content, making it more complete and accurate overall. Wikipedia also brought crowdsourcing and user-generated content to the mainstream online, making both much more viable and valuable.

2. Amazon.com

Changed the way we shop. Prior to Amazon.com, online shopping wasn’t much different than shopping out of a mail-order catalog, except it wasn’t nearly as popular. While Amazon started out selling just books and related items, it has expanded to sell virtually anything you can think of, either directly or through partner sites large and small. Amazon also made free shipping a standard on orders over a certain dollar value, which has impacted the shipping rates and policies of many other online retailers.

3. Hotmail

Changed the way we use email. Before Hotmail came along, email was basically tethered to a single computer. When you checked your email, it was pulled and deleted from the remote server, meaning the only place you could view it was at your computer. Need an email at home that you received at work? Too bad. There was no way to access it unless you went back to the office. Hotmail changed all that by providing webmail that could be accessed from any computer with an Internet connection. Now, web-based email is widely used and provided by a huge variety of providers. Even though Hotmail is no longer the primary provider of webmail (and is now owned by Microsoft), they were still pioneers in the technology.

4. Facebook

Changed the way friends connected. While Facebook wasn’t the first social network, it has definitely become the most popular and has really changed the way friends interact with one another. Sure, people use FB to talk online, but they’re also increasingly using it as a way to plan get-togethers offline. They’re using it to follow and interact with their favorite bands, actors, and other personalities. People use it to keep in touch with business contacts, friends, family, and acquaintances. Facebook has made social networking mainstream, across a variety of demographics and virtually worldwide.

5. Project Gutenberg

Changed the way we read. Project Gutenberg has a much longer history than most people realize. They created the first ebooks, and gave them away for free. You can now read virtually every major book in the public domain, sometimes in multiple languages on their site. Without the pioneering steps the founders of Project Gutenberg took, ebooks would not be where they are today.

6. Twitter

Changed the way we communicate. Twitter has made one of the biggest impacts on the Internet in recent memory. The idea that 140-character messages, broadcast publicly (for the most part), would change the way people communicate with one another would have been hard to believe ten years ago. But Twitter has become not just a powerhouse in the way individual communicate with one another, but also in the way businesses communicate with their customers. Complaining about poor customer service on Twitter can often result in almost instant messages from the company in question, and often results in a satisfactory resolution. Twitter has also made celebrities more accessible, with hundreds of celebs now using the service to interact with their fans.

7. Pandora

Changed the way we find new music. Before Pandora, if you wanted to listen to music online, you usually turned to a streaming radio station with pre-programmed content. Sure, you might get lucky and find a station that had mostly music you liked, but maybe it wasn’t diverse enough, or it still kept playing that one song you HATED. Pandora changed all that. Now, you can program your own radio station by just entering the name or a song or artist and then giving the thumbs up or down to music played. With a minimal amount of user input, Pandora has gotten surprisingly good at creating playlists that reflect one’s musical taste. The bonus is that songs or artists you might not have heard of are often thrown into the mix, based on what you already like.

8. Apple

Made minimalist web design cool. Apple had one of the first corporate websites designed with a minimalist aesthetic. As far back as the late 90s, Apple was starting to show a more minimalist take on web design than many other corporate sites, and by early 2000, they’d adopted the white and gray color scheme and top navigation they still employ today.

9. YouTube

Changed entertainment. Before YouTube, there weren’t many options if you wanted to watch a video online. You could sometimes find a video here or there, but with bandwidth costs, they were few and far between. Website owners just didn’t want to pay the extra costs associated with video content. Then YouTube came along and made it free to post any video you wanted (as long as it wasn’t copyrighted or over ten minutes long). Web users now had a centralized place to go to watch video online. And because of YouTube’s pioneering effort, online video is now enjoyed by millions every day.

10. Craigslist

Changed classifieds. Online classified sites used to be nearly unusable. Between the huge number of spam postings and the fact there were few if any local listings in most areas, there wasn’t much point in using them. But then Craigslist caught on and suddenly there was an online classifieds site that rivaled most local newspaper classifieds. Now you can use Craigslist to find almost anything, no matter where you live.

11. The Drudge Report

Changed the stature of online news. When the Monica Lewinsky/President Clinton story broke in 1998, it wasn’t a mainstream news source that first reported it. Instead, The Drudge Report held those honors, forever changing the standing of online news sources. Now, online news sources break stories on a regular basis, and are considered by most to be just as reliable as television or print news sources.

12. GeoCities

Made the web more accessible. In the early days of the Internet, the only people online (for the most part) were scientists, academics, and those involved in technology. It wasn’t a very exciting place. Then came GeoCities, and suddenly anyone could set up their own webpage for free. Sure, GeoCities spawned a legion of horrifically ugly websites, but it also got a lot of regular people involved in the Internet for the first time and was likely the first design experience of many early web designers.

13. Digg

Changed the way we find and share news. Digg was originally set up as an experiment, but it has completely changed the way many people find news online. The idea of users determining which news was important, relevant, and interesting rather than editors or executives at big news organizations was revolutionary. Now, user-generated news sites are all over the place, both for mainstream news and for individual industries and niches.

14. LiveJournal

Hooked millions on blogging. Blogging wasn’t invented by LiveJournal, but they were the first site to offer free blogs to their members. Millions now use LiveJournal, and tens of millions more blog elsewhere, either through other blog hosts or on their own websites. If it weren’t for LiveJournal and similar free blogs hosts that came later, blogging might not have caught on as the global phenomenon it has become.

15. Google

Changed everything. This one might seem a bit dramatic, but it really is true. Google has invaded virtually every aspect of the Internet. No matter what you do online, you probably interact with one Google service or another multiple times every day. And most people use at least one Google product or service one a regular basis personally. Whether it’s a Blogger blog, a Picasa photo album, a Google search, or even a YouTube video (or any of the dozens of other services Google owns), Google-controlled sites are everywhere.

About Author – Cameron Chapman is a professional Web and graphic designer with over 7 years of experience. She writes for a number of blogs, including her own, Cameron Chapman On Writing. She’s also the author of Internet Famous: A Practical Guide to Becoming an Online Celebrity.

Call to action buttons on websites are often neglected. Designers sometimes don’t understand exactly what makes a good call to action button beyond being attractive and fitting into the overall design. But call to action buttons are too important to be designed without some kind of understanding of what makes them effective. After all, the main point of a call to action button is to get visitors to do something.

It’s important to gain at least a basic understanding of how color, scale, language, and other factors influence the conversion rate of a call to action button. The concepts here aren’t complicated, but they do take a bit of forethought and planning to create the most effective call to action buttons possible within a given design. Read on for more information on each of these points and more.

The Purpose of "Call to Action" Buttons

Call to action buttons can serve a variety of functions. After all, “call to action” is really a bit vague. All it means is that it’s main purpose is to get a visitor to your site to do something. That something could be adding a product to their shopping cart, downloading something, requesting information, or just about anything else.

Because call to action buttons have such varied purposes, a lot of consideration has to go into what the button aims to achieve. The type of site, the target market, and the desired action can all play a role in how to best design a call to action button.

Types of "Call to Action" Buttons

There are a few different types of call to action buttons. While each type aims to get visitors to perform a certain action, that action can vary considerably. Below are the most common types of call to action buttons, based on the action they want you to take.

1. Add to Cart Buttons

E-commerce sites generally use a number of call to action buttons, but the most widely-used one is the “add to cart” button. These buttons generally appear on individual product pages. Their purpose is to entice customers to purchase an item. Common design elements in add to cart buttons include simple wording (such as “Add to Cart” or “Add to Bag” or “Buy Now“) and the use of icons (usually a bag or cart).

2. Download Buttons

Download buttons are similar to add to cart buttons in that they’re trying to entice a visitor to take possession of an item. In the case of download buttons, many designers opt to include more information than other types of buttons (such as version information or download size).

3. Trial Buttons

Some sites try to entice their visitors to try their offerings, generally in the form of a free trial. This could be a free download or a free account, depending on the particular site. Some sites use the “less-is-more” philosophy and keep the language on their buttons to a minimum, while others like to offer more information on what the trial contains.

4. Learn More Buttons

Learn more buttons are generally used at the end of a block of teaser information (often on the home page). These buttons are usually simple, but often oversized to attract visitor attention.

5. Sign Up Buttons

Sign up buttons appear most commonly in two different versions. The first type is usually directly associated with a sign up form. The second type is usually used in a similar fashion to “add to cart” buttons, as a way for users to purchase or sign up for a service or account, before they actually reach a sign-up form.

There are other types of call to action buttons, but these are the most common. Guidelines that apply to those above will likely also apply to any other type of call to action button you might be designing.

Using Negative Space Effectively

You want your call to action buttons to stand out from the surrounding content and really command attention from your site visitors. To that end, you need to make use of negative space around those buttons. Incorporate blank space between your content and your call to action button. While this is less important (and less common) on some buttons, such as add to cart buttons, with others, like those to learn more, work better with more space.

It’s important to balance the amount of negative space you have around the buttons with the size of the buttons themselves. It’s about proportion. You want your button, the space around it, and the surrounding content to all look like they go together, even with disparities in size. You may have to fiddle around with things a bit in order to get them looking just right.

Some guidelines:

• Make sure there’s enough space around your button so that it doesn’t feel cluttered
• Consider principles like the rule of thirds or the Golden Ratio when determining how much space to include
• Negative space gives your call to action button room to stand out among your other content and sets it apart

Size and Color

How large your call to action buttons are is very important. A button that’s too large will overpower everything around it. A button that’s too small will get lost in the shuffle of all the other content on a page. You want your button to be large enough to stand out without overwhelming the design.

Color can be used to great effect to help balance the size of your buttons. For larger buttons, choose a color that’s less prominent within your design (but still stands out again the background). For a smaller button, you may want to choose a brighter, contrasting color to really make the button pop. In either case, make sure the color you use sets the button apart without clashing with the site’s overall design.

Some guidelines:

• Your call to action buttons should ideally be the largest buttons on a given page
• Use contrasting colors to make smaller buttons stand out more
• Use less distinct colors to make oversized buttons fit in better
• You call to action buttons need to command attention without overwhelming your design

Language

The exact wording you choose to use on your call to action buttons can have a huge effect on conversion. Compare “Buy Now” with “Add to Cart“. One is much more urgent than the other one. Or how about “Try it for Free” with “Free Trial“? One is much punchier than the other and stands out more.

The language you use on your call to action buttons should be as straight-forward and simple as possible. You want visitors to know with just a glance exactly what they’ll get when the click on a button. If they question it, that means they’ve paused, which can lead to lower conversion rates.

Don’t forget your font sizes, too. The text on your call to action button should be large and bold, properly suited to the size and color of the button itself. Make sure there’s sufficient contrast and that the text is easy to read.

Some guidelines:

• Use simple, direct language
• Use a large, bold font on the button for the main text
• Make sure the language clearly calls for a specific action

Create Urgency

You want visitors on your site to carry out the desired actions with as little thought as possible. While you don’t want to deceive your visitors, the more opportunities you give them to stop and consider what they’re doing, the more opportunities you’re giving them to say “no”.

You want your buttons to give them the impression that they need to act right away. You want to encourage them to make their decision immediately, on the spur of the moment. While this won’t work for every call to action button (especially those to purchase high-ticket items), for low-cost or free actions, having visitors click with little forethought is desirable.

Some guidelines:

• Encourage your visitors to act immediately
• Don’t give your visitors any reason to pause
• While urgency is important, don’t mislead your visitors in any way

Provide Extra Information

Where appropriate, use your call to action buttons to give visitors extra information about what they’re going to get if they click on the button. This is most commonly seen with trial buttons or download buttons. Common examples of extra information include the length of time a free trial will last or the size of a file download. Version information is also commonly seen.

When including extra information, remember that you need to keep the focus on the actual call to action. Make sure that the text for the language enticing visitors to act is most prominent, with other information much less visible.

Some guidelines:

• Only include extra information when it adds to the user experience
• Extra information is only appropriate on some types of call to action buttons, most notably download or trial buttons
• Make sure the main call to action is still the most prominent text on your button

Prioritize

It’s important to prioritize the call to action buttons on your page if there’s more than one. This can be done in a number of ways, but the most common are through the use of color and size.

Use color to highlight the most important button on a page, or to make the less important ones seem less prominent. Or use size to make the most important button stand out (by making it larger) and de-emphasizing the less-important ones.

Icons and Images

Including visual cues in your call to action buttons can also help to increase conversion rates. An icon of a shopping cart on an “add to cart” button, for instance, or an arrow on a download button are both good examples. Think of unique icons to use, too, but make sure that the icon adds to the user experience by clarifying what the button is for, and doesn’t add any confusion.

Some guidelines:

• Make sure the icons you use help clarify your button’s meaning, rather than confuse it
• Easily-recognized icons can immediately indicate meaning to your visitors
• Don’t be afraid to use less-commonly used icons, as long as their meaning is still clear

Examples

Here are a few examples of great call to action buttons. While they don’t all perfectly conform to the guidelines above, they meet enough of the criteria to be considered great.

Livestream
Differentiating the "buy now" (for paid options) and "sign up" (for free options) buttons is a good strategy.

Windows 7
The big, green "Get Windows7" button is easy for visitors to spot.

Fileshare HQ
The bright green button here really stands out against the white background.

Logbook
Using different colors for the "Download" and "Buy" buttons sets them apart and gives priority to the "Buy" button.

TasteBook
This button makes great use of an icon and uses larger, bold text to stand out.

GoodBarry
Another bright green call to action button.

Lifetree Creative
Continuing the same typeface from the body copy to the call to action button creates a sense of cohesion.

The Resumator
A bright red call to action button with bold type stands out against the blue background.

Notepod
A good example of including extra information in a call to action button.

Inkd
A great example of prioritizing buttons with size.

Elegant Themes
Another excellent example of using color to stand out without clashing with surrounding design elements.

ZenDesk
Another great example of making a button stand out using color.

Storenvy
A round button is unexpected and stands out, especially when surrounded by a white border.

Bara’Mail
Sometimes a button that blends in works better in your overall site design, especially when the action is less urgent.

More Resources

About Author – Cameron Chapman is a professional Web and graphic designer with over 7 years of experience. She writes for a number of blogs, including her own, Cameron Chapman On Writing. She’s also the author of Internet Famous: A Practical Guide to Becoming an Online Celebrity.

By: Christian Arno

The ‘look and feel‘ of a website is the cornerstone of any successful online venture. But the very nature of the internet means that the instant you upload your carefully constructed pages onto the World Wide Web, you’re global.

Image: via YukoTVXQ

Indeed, regardless of whether you intend to make buckets of cash from your website or simply build a strong international following online, there are numerous aspects of your site’s design you should consider from the start, to ensure it’s flexible and adaptable to international requirements. If you want to build a number of foreign-language equivalents of your main site, they need to be properly localized before you launch and the process can be made much less painful if you plan from the start.

1. Text

Image: via subgrafik

For those more inclined towards the front-end design aspect of websites than the ‘behind the scenes’ system-related aspects, consider this technical truism: computers deal with numbers, not letters.

Indeed, letters and other characters are displayed by having a number designated to each one through a system of encoding. Traditionally, there were lots of encoding systems covering different languages, but Unicode changed all that.

Unicode provides a unique number for every character, regardless of platform, program or language. It has been adopted by industry leaders such as Apple, HP, IBM, Microsoft, Oracle, Sun and many others. Importantly, it is supported in most of the common operating systems and browsers. The development of Unicode is one of the most significant global software technology trends in recent years.

Most of the popular web design applications such as Dreamweaver and, for real beginners, Microsoft Front Page, facilitate the development of Unicode web pages.

Unicode can currently be used for over 90 scripts, and has a repertoire of over 100,000 characters. UTF-8 is a variable-length character encoding for Unicode that is familiar to most programmers. It is the best option when creating websites for international markets, as it allows you to use characters from many different languages. For example, German uses the ‘Eszett’ symbol (ß) in place of ’ss’, whilst three German vowels use the Umlaut (ä, ö and ü).

In short, you’re best using Unicode if you’re planning on adapting your website for other languages.

2. Color symbolism

Image: via djFargo

Color is an important facet of any website. Your choice of colors will depend on whatever product or service you’re selling. If you’re an environmental company from the west, you may have a lot of green on your site…if you run a water sports business, there may be a lot of blue.

However, your choice of colors should also reflect your target audience. For example, red can denote ‘danger’, ‘love’ or ‘passion’ in Western cultures; whilst it signifies ‘purity’ in India and ‘good luck‘ or ‘celebration’ in China.

Orange has religious connotations for Protestants in Northern Ireland, whilst it also represents ‘autumn’ (‘fall’), ‘Halloween’ or ‘creativity’ in many Westerns cultures too.

Green represents ’spring’, ‘nature’ and the environment in many cultures, but if you’re ever thinking of depicting a green hat on your site, it’s worth knowing that this signifies that a man’s wife is cheating on him in China. It can also represent an exorcism.

Other examples are Purple: ‘royalty’ (Western) or ‘mourning’ (Thailand). Interestingly, black denotes ‘funerals’ or ‘death’ in Western cultures, but in many Eastern cultures white is used to denote this.

To avoid having to overhaul your website when targeting a new market, carefully consider your color scheme from the start.

3. Content

Image: via leekrya

Nobody will visit your website for the design alone. The online marketing mantra ‘content is king‘ certainly rings true for most websites – you have to offer genuinely useful content for your domestic and international visitors.

Adapting your content for international markets requires a two-step process: localization and optimization.

Localization

The localization aspect simply requires a professionally qualified native-speaking translator for each of your target markets. If you’re serious about making money from your international websites, then you have to consider dialects too.

For example, many words mean different things in French (France), Canadian French and Swiss/Belgian French. ‘Lunch’ is déjeuner in France, but dîner in Switzerland and Belgium. And in France, dîner is the word for ‘evening meal’. Coche in Spain is the word for a ‘car’, whilst in many South American countries, it means a baby-stroller. Indeed, a baby-stroller will be unfamiliar to UK readers, who’ll be more likely to use a ‘pushchair’ or ‘buggy’.

So you get the point. If you’re serious about your global endeavors, you have to treat each of your target markets as separate entities.

The translation of your website is made a lot easier if you use minimal Flash content on your site, as it’s difficult to edit, copy and carry out word counts, processes that are crucial to the translation process. Moreover, words are the food of search engines, and given that the likes of Google can’t detect words embedded in Flash files, these kinds of sites aren’t very SEO friendly.

Optimization

In terms of optimizing your website for international markets, you shouldn’t translate your keywords and phrases directly from your English language website. People may use abbreviations, acronyms or synonyms to search for a product locally, so you have to research what terms consumers actually use to search for items in each of your markets.

These phrases should then be incorporated into your professionally translated website, preferably on a dedicated ‘in-country’ domain (see below).

4. Domains

Image: via Heberger Site

It may be cheaper and more convenient to have a single domain for all your target countries, but from a Search Engine Optimization (SEO) perspective, there’s an argument that says it’s best to have a dedicated top-level domain (TLD) for each of your target countries, (e.g. ‘co.uk’ for the UK or ‘.ch’ for Switzerland etc). Search engines use the top-level domain to help establish the ‘location‘ of the website (‘geo-targeting’), which will affect your position on country-specific search engines (Google.co.uk, Google.fr, etc)

Similarly, it’s best to check that each of your domains is hosted on a server in your target country too, as search engines use this information to determine your website’s location.

The website address of the domain you purchase is important too as Google reads the words in the URL. So if your company produces software, for example, you may want to have the word ’software’ in the URL, though this should be translated into the language of your target country.

Developing websites to support multiple languages is a challenging endeavor; if you choose to have one domain to host several multi-language versions of your site, ensure you create a different sub-domain for each language. So if, for example, your TLD is: http://www.mycompany.com, then the sub-domain for its German language version would be http://de.mycompany.com. Conversely, the in-country domain would be: http://www.mycompany.de.

5. Navigation

Image: via Little Miss. Sunshine

Navigation is a crucial aspect of the web design process. Consistency and ‘landmarking’ help web users find their way around your site and. Navigation should be intuitive.

If you have a vertical menu bar on the left of your English-language website, it’s worth considering switching this to the right for languages that read ‘right to left’ (RTL), such as Arabic. This isn’t essential, as you can have menus on the opposite side of the page, but it all depends how you want your website to appear to your visitors. Alternatively, use a horizontal menu bar to eliminate the need to make any amendments at all.

You might also want to consider creating an ‘entrance page‘ to your site, where users choose the navigation language of the site. Or, you can use English as the default language, and have clearly labeled options for switching to other languages.

Some businesses use IP2Country services that automatically detect the country of the visitor based on their IP address. Some simple, dynamic code on your web pages will enable this – however, this method isn’t always 100% reliable, so it’s perhaps best leaving the language selection process to the user.

And there you have it. These are just some of the basic issues to consider when building a multilingual friendly website. Good luck conquering the world!

About author: Christian Arno is the founder of Lingo24, a multi-million dollar international translation and localization company with more than a hundred employees in over 60 countries. Learn more about multilingual web design.

Flash has been around for ages; from the days of Macromedia Flash to Adobe’s acquisition. It is a platform that opens up a whole new room of opportunities and possibilities how website can be presented.

Despite the fact that Flash has limitations like SEO-unfriendly, plug-in required, slow loading (sometimes), etc, it is still one of the best approaches to create interactive websites that will impress your visitors. In today’s post we’ve collected 60 really creative Flash websites created by expert Flash developers all over the world. Take a look, your inspiration could start from here.

More flash related articles we’ve previously published:

• Flash Photo Galleries and Tutorials
• 10 Killer Flash Tips For Beginners

Enjoy!

Brought to you by:

The 3rd Generation Prius

Tag Galaxy

Tag Galaxy is a very good flash application that uses Papervision3D with beautiful transition effects to explore Flickr photos via virtual planetary systems. You enter a tag and related tags appear with beautiful planetary systems.

Mercedes-Benz | B-Class

The CLUE Virtual Mansion

Flash 3D game. Beautifully made.

If Your Milk Carton MoOOos, You Win!

Case-Mate: I Make My Case

You can design your custom iPhone case in this cool Flash application.

Plate Interactive

Creative idea with fantastic effects.

SposiAmo

Wedding planner site from Italy. Elegant design with romantic background music.

DG Estilistas

Cheese & Burger Society

GT3 Creative

Skoda Yeti – Catch and Win!

Lois Jeans | SPRING SUMMER ‘09

Harajuku

Christmas Tweets

IKEA Soft Toys AID

Infrared5

Pearl Jam Ten Game

Stefan Kovac – Portfolio

Flash presentation of Stefan Kovac’s selected web & interactive work.

The Scruffs game – unofficial site

Herbal Essences Spice

Beautiful graphic design, and nice animations. The website also has game.

TheOleg | Freelance designer

This is the site of Ukrainian freelance designer Oleg Kostyuk.

Daniel Kusaka

Interactive Design Portfolio of Daniel Kusaka from Brazil. Interesting design.

Wonderful Moment Project

Volkswagen Efficiency : Volkswagen UK

PIAGGIO MP3

Kasulo.ws

Portfolio of Ricardo Dias featuring web and print contents. Gorgeous design, and inspiring idea.

Lech.pl

LECH beer in 3D

Pritt – Knutselwereld

GOOD | How do we achieve harmony?

Verbatim Championship

Cool robots with cute animation.

McCafé / Make Your Own Cappuccino Art

You can make your own cappuccino art and save to gallery. McCafe from McDonalds.

HBO Imagine

TESTEMALE-PHOTOS.COM

Bernard Testemale’s professional photography portfolio site.

Levi’s® 501® 2007

THE PROFILER™

Use The Profiler to visualize what’s behind your profile picture, and discover what goes on in your friends’ heads. You can connect with your facebook.

Red Bull Soapbox Racer

Red Bull Soapbox Racer is a 3D racing game in Flash.

Toyota: Every 5 seconds

Featuring Toyota cars: Yaris, Auris, Corolla, Avensis, Camry, RAV4, Prado.

hiroshi seo / photographs TIME:LINE

hiroshi seo is a photographer from Japan.

Samsung Jet | Smarter than Smartphone

Bloody Rage 2

Bloody Rage 2 is a 3D Fighting game created in flash using Away3D engine.

Volvo FH16 700

Polo

2Advanced v5 – Attractor

2Advanced Studios

The Economist: Thinking Space

Virtual Sean | The Official Sean Kingston Site

Sean Kingston Sing Along with Lil Sean Karaoke

TWIGITAL

Twigital is an interactive 3D twitter visualisation in Flash.

thetoke™ interactive / broadcast

interactive, broadcast, art, motion, sound design, and flash development.

EnergyLab

Maria Filó – Verão 2010

FIFA Street 3

Coke Live Music Festival

The RailAway Express

The RailAway Express is an Away3D experiment looks like a roller coaster.

Aerial Virtual tour of New York City, USA

Amazing view of New York City 2009 virtual tour.

Relapse

Eminem’s new album website.

the951 – The legend is back.

DJ Hero

DJ Hero website for DJ lovers.

Morgan Stanley Matrix. Ideas into action

Honda Accord 2008

SAIZEN MEDIA STUDIOS

NIGHTWISH – Saizen Media Studios portfolio of selected works. Extremely beautiful graphic design and stunning animations.

By Dainis

Being a freelancer can be extremely advantageous and it is probably a dream for many designers and developers. Not only you get to choose the job you are really interested in, you also have total flexibility in terms of time, whom you want to work with and where you want to work at.

However, there is always a flip side of a coin. What happens when if you are out of jobs suddenly? This following article is dedicated to designers and developers who wanted to achieve financial freedom in freelancing. We showcase a list of 50 Best Freelance Job Sites and you might want to go through to see if you’ve missed some of them. If you a company or individual looking to outsourcing or hire, these following sites might come in handy too. Full list after jump.

Digitalpoint Forum

Aside from being a very useful forum for webmaster, Digitalpoint is also an extremely strategic place where you can outsource work and seek relevant freelance professionals.

Smashing Jobs

A great thing about posting your job at this site is that the jobs listed here are soon featured among one of the top 20 blogs of the world. This is again a nice job portal to find programming and designing jobs, besides all others.

Elance

A famous online portal for freelancers, this is an ultimate place to meet professionals with business, technical and marketing expertise to get work done at an affordable price.

Odesk

Since its inception in 2004, this online marketplace truly embarked a revolution in the way world works. It’s win-win approach for both service providers and employers with meaningful work as well as top-flight talent, makes it an asset for both parties. Average size of a job here is $5,000.

GetAFreelancer

Bag a project or post a project on this platform to get the best bids from gamut of skilled web designers, copywriters or freelance programmers. Provide work or get work at the best prices. Sign up today as a work provider or a work seeker. A word of caution – Stay alert before trusting anyone as there are a lot many fraudsters as well, on both sides.

Sitepoint Marketplace

Sitepoint is a well-known paid webmaster forum. Looking to hire category providers a marketplace where you can find freelancers or clients from different industries and different countries.

Simply Hired

This online job portal allows you to find all kinds of jobs, whether freelance or full-time, based on your location, skills and experience in the field.

RentACoder

Rent a coder is a website where a software developer can get plenty of jobs there and in return can earn plenty of money. This is perfectly a legit site and the fact that it is only a medium for giving work to interested hunters makes it tempting.

Metafilter Jobs

Search and share jobs with other members of the site and mark the distance of your job from you, based on the latitude/latitude entered in your profile.

Problogger Jobs

If you are also one of the blogging enthusiasts, who has or who wishes to explore the income potential of this fun-filled hobby of ‘blogging,’ problogger.net is your right choice. Collaborate with other bloggers, share experiences and take your blogs to great heights. The jobs section of this blog can land you with several blogging jobs that pays you well along with enjoying what you love to do.

Dice

Dice is a job search engine dedicated to only finding technology jobs. It offers a targeted niche space for finding exactly the technology position you might be looking for. Dice also offers advice on writing resumes and obtaining IT certification, as well as a variety of discussion forums.

Scriptlance

Get access to thousands of designers and programmers with immense in-depth knowledge about an array of programming languages, ranging from Joomla, C++ to SEO requirements.

Guru

Like other freelance websites, this is another of the sources to find the indutry’s most ultimate professionals from world over. However, safer way to pay through Escrow gives this site an edge over other freelance sites. From business, creative arts to technology, select your favorite category and get started.

99designs

If you like to draw and your drawings are good and you want to earn from it, you can try your hand at 99Designs. 99Designs, basically is a site where various companies fulfill their need of designing their logos, banners, websites etc. They just give you the information about the background of their company, its ideas and goals. The designers use these facts and design logos or whatever is required by the company. If the contest holding company likes the job, it awards the designer with the pre specified prize money.

Behance Job

Find productivity and creativity go hand in hand at the job list section of this site that claims to ‘make ideas happen.’ This exclusive site is known to convert creativity into lucrative services or products to promote unique ideas.

Mistersoft Freelancing

Your needs may encompass a flash designer, a copywriter, a SEO manager, a coder, a data entry expert or any other professional, find the best of the lot at this amazing site for freelancers.

37signals Jobs

37signals job board provides a wide array of content from many geographies. If you’re looking to hire programmers and designers from around the U.S., 37signals looks like a site worth dipping your feet into.

Bixee

This hybrid job portal also form a part of Ibibo, which is a famous Indian social networking platform. Hence, you can find suitable jobs and research innovative content at the same time.

Jobs on Webdesignerwall

Design Jobs on the Wall — a job board managed by Web Designer Wall, where creative professionals come to find job opportunities. When you post your job here, it will be instantly featured on Web Designer Wall and others network sites where designers will see it. Due to website strong following, Web Designer Wall appears on loads of online portals and design publications.

Coroflot

Coroflot is an employment site for creative professionals – design firms post job openings and designers post portfolios – Coroflot makes the connection. Career and hiring advice, portfolio tips, how to find a design job and design salary surveys make Coroflot a valuable resource for the design community.

Freelanceswitch Jobs

Catering to the demands of all freelance professionals, this site is not just another place to find projects or seek the best of the manpower. Instead, it also serves as an information bank for freelancers and clients, providing them tips for easy and beneficial dealing as well as a healthy and interactive work environment.

Designm.ag

Array of designers and developers can now find full-time or freelance jobs all over the world in just a few clicks. Thank to Designm, talented professionals of the industry are now paid for what they are worth of and no longer have to toil to bag a handful of small and not-so-lucrative projects.

Lime Exchange

Making the ends meet between freelance talent and small or big scale businesses all over the world, Limeexchange allows professionals to not only find lucrative opportunities or get work done but also interact with one another at QnA platform and share recommendations and tips globally, about their respective industries.

GetACoder

The growth of a business is decided by the resources that it is able to explore and access, to get the competitive advantage. Save costs and enhance efficiencies by outsourcing your programming, writing and web designing jobs to the right people at this famous online freelance portal.

Crowd Spring

What makes Crowdspring different is that it doesn’t feel like a marketplace. You’re not trying to outbid each other with a better price. You’re not competing against others who have a better portfolio. How you approach a project, and how creative you really are is what can get you that project. You still get to compete with others, but it’s a healthy kind of competition. You put up your design to win the project, and not your price.

iFreelance

Your need may be of an experienced professional or an affordable novice, this is the place to find the top-notch photographers, web designers, proofreaders, data entry, bookkeeping and other such skilled freelancers. Freelancers are also free to choose projects that cater to their interest. What more? You need not bother to pay commissions to any mediator.

People per hour

Based on the simple bidding system, hire efficient freelancers here and enjoy the on-demand flexibility while saving money at the same time. Marketing, legal, accounting, writing, programming are some of the most common industry types covered by this site.

Krop

Krop is a Job Board and career resource website for creative professionals. Whether you’re looking for job, or hunting top-notch talent, Krop’s simple and powerful tools are geared towards connecting the worlds brightest minds with the best companies.

Sologig

Bridging the gap between experienced employees and qualified employers, this site is known to have the best talent in varied industries. You can seek both part-time and full-time contracts as well as consulting opportunities that nurture your talent further while filling your pockets.

Joomlancers

All Joomla professionals an now jump with joy as here is the site that caters to different work aspects of Joomla. Come and find work that adds more to your credibility as a Joomla professional and also reward you with a great sum.

Journalism Jobs

This is your best pick if your industry type is journalism and you wish to associate with a magazine, news group, radio, TV or any other type of media. Besides, you may also stay updated with the latest happenings of the industry with the news feeds and articles that are uploaded on the site.

Authentic Jobs

Creative and web professionals can seek reputed full-time and freelance opportunities here and get associated with well-known names of the industry like Sony BMG, HBO, HP, Facebook and many more.

EU Freelance

Eufreelance will help you find new customers around the globe. Submit a project and get the best possible price from skilled developers in India, Ukraine, Russia, Romania and other countries. Eufreelance is targetting the biggest market in the world with buyers from Europe and sellers from the whole world.

GoFreelance

Now it’s easy to market your freelance services and find all the business you need to succeed. Gofreelance have thousands of jobs in database, with fresh contracts and projects being added daily. So kickstart your work-at-home career by signing up for the free edition of The Freelance Job Report to get: Hot jobs and cool projects emailed to you daily and a free 10-day course: ‘The Secrets of Freelance Success’.

Freelance Designers

Industrial designer, advertising design, video production, architects, SEO, web designers and programmers are the primary categories at this job site for freelancers. Divided to precision into several sub categories, you can find your relevant category under the above listed major categories, to seek or provide suitable work.

LogoMyWay

Get an ideal logo designed for your company or website here. Let thousands of eminent professionals compete to get rewarded with your offered sum and in turn provide you gamut of logo choices to choose from. The minimum amount for which you can host a contest here is $200.

Project4hire

This freelance marketplace offers an array of opportunities to contractors and thereby require them to pay a small amount as a commission to tech site, on being awarded a project. Apart from this, it is easy to use and a great platform to post projects and find freelance professionals like coders, consultants, graphic designers, software developers.

Freelancer.co.uk

Empowered by Escrow, this is another reliable site for freelancers. Get started from the marketplace or open or participate in contests, this exclusive site also contains several unusual categories like sourcing & manufacturing, multimedia & media, child care and system administration along with the famous freelance categories such as writing, translation, photography and others.

AllFreelanceWork

This is a true freelancers den with relevant portfolio creation and job site, all available at one place. In short, you learn as you earn.

Pro-Freelance

Pro-Freelance is a platform where freelancers can find all freelance projects from most important sites and the projects owners can find best experts at the best price. you can also freely propose your services on our classified page.

FreelanceWebmarket

Thousands of freelance programmers web designers web developers and many other proffesionals from the United States, United Kingdom, Canada, India and many other countries, expose your ad to 1000s of professionals. You can outsource worldwide or require professional from your country on FreelanceWebmarket and cut your expenses just paying a small fee.

Wordpress Freelance

Wordpress is indeed the best blog hosting site. Come and get your wordpress blog designed and programmed by eminent professionals of the field.

FreelanceWriting

As the name suggests, this site is a hub for those earning a living by writing. From reading tips on different writing styles, participation in writing contests to finding the high end freelance writing projects and career options available to writers, you can find it all here. This is what we call freelancing with a difference.

Php-freelancers

Php-Freelancers is a “One stop ” full service site where a Service buyer can post a project for free and have one of Php-Freelancers highly skilled freelancer’s competitively bid on your projects. Php-Freelancers offers you the confidence that our freelancer’s can meet your project needs no matter how small or large the project is.

Webdirections Jobs

Another online job portal dedicated to web professionals, here you can find jobs at full-time, freelance, part-time or even contractual basis.

Jsninja Jobs

A great site to apply for jobs in US, UK, Canada and other such developed countries. You may also find freelance work here in the fields for developers, designers and writers.

Bidhire

With no freelancer or buyer costs, bidhire gains an upper hand as compared to several other websites like Scriptlance, Elance and many others that charge a sign up fee from buyers and freelancers to post projects or start bidding respectively.

DesignCrowd

DesignCrowd is a graphic design marketplace that gives creative people opportunities. Businesses can post Open Brief Design Contests or Request Quotes for logo design, business card design, advertising artwork and website design.

Feelance-Projects

Freelance-Projects can be a great resource to help you mine for the experts you need to complete your next project. You can do this by simply using their search engine to find posted projects that are similar to what you are wanting to do or those that require the same technologies or programming language expertise that are required for your project.

Programmer Meet Designer

This is quite a unique online job portal, made exclusively for programmers and designers. Here, professionals from the two industries can collaborate with one another and share ideas to create websites that outperform all others, in design and functionality.

FreelancingJob

Webmasters need to have several jobs put together to frame a compelling website. This includes copy-writing, website designing, coding, web developer and several others. Find them all at this emerging online platform.

FreshWebJobs

FreshWebJobs is an online listing of web jobs. It is a site with a simple purpose and simple web site. It is well-designed, letting you know upfront how many jobs exist in different categories. It is still very young website, but very perspective. Currently are available 24 jobs.

AllDevJobs

This site caters to all kinds of professionals who belong to the development and designing jobs in some way or the other. Again, both freelance and full-time jobs are up for grab.

About author: Dainis is blogger from Latvia. He is webmaster of Psdeluxe.com (Photoshop deluxe) – Design community where you find photoshop tutorials and useful resources for web and graphic designers. Follow Dainis on Twitter

There are tons of website on the Internet, and hundreds or probably thousands are created by day. Here’s a very interesting thing to ponder – What are the elements of a good website?

Image Credit: tveskov

Building a website can be daunting but the real challenge lies in making it usable. The problem is most web designers forget that the website wasn’t created for themselves but to solve the users’ needs. They give creativity priority over practicality and usability.

In this article, we would like to highlight 11 web design blunders that web developers and designers make and some suggestions how these mistakes can be easily avoided.

1. Where’s the Search box?

The web is like an archive of information. Whether it’s a corporate website or merely a blog, a search box is essential. The visitor might be looking for something that is hidden within the website, with the search box, chances are, visitors will get what they want.

Suggestions:
Google Custom Search is a neat, simple and effective way to get started. It enables visitors to search your site in an efficient manner. Just copy the HTML code from the control panel and paste it on your website and voilà, you’ve got a search function right on your website.

Here’s a simple form code to display Google’s search engine on your site too. All you have to do is change the site name to your website’s name. Plus, you can modify the submit value to anything you like.

 <form action="http://www.google.com/search" method="get">  <fieldset>  <input type="hidden" name="sitesearch" value="http://www.hongkiat.com/blog/" />  <input type="text" name="q" size="25" maxlength="255" value="" />  <input type="submit" value="Search Hongkiat" />  </fieldset>  </form> 

More: Designing The Holy Search Box: Examples And Best Practice- This article details guidelines for designing the search box.

2. Poor Readability & Legibility.

This is a crucial element of web design. Of course, a good interface design will grab the users’ attention but users have to read text to be able grasp the information they desire. Some websites use the most bizarre font styles and sizes that make reading a pain.

Suggestions:
Fortunately, there are simple ways that you can do to improve the users’ reading experience on your website.

1. Compare color schemes of most major sites and notice how the colors improve readability. A good place to try out different color schemes is Adobe Kuler.
2. Use a Sans serif typeface as it allows for easy reading on the web.

More: Here is a good article that will gives you more tips on improving readability – Readability – Making Web Pages Easy To Read.

3. Unorganized Content Layout.

A website’s content is what drives traffic to it. How the content is structured is what will make it a success or a failure. Users do not read unless absolutely necessary but scan through information and pick out points of interest on a web page. Some designers just put a block of text on the web page and totally neglect headings, sub-headings, bullets, keywords, paragraphs, etc.

Use an appropriate page title for each web page so users know exactly where they are. Some designers even forget to name the web page.

Overall, the worst in this category will be putting inaccurate, inaccessible, insignificant or out-of-date content on your website. The content must coincide with the overall theme of the website and be useful. If a page is under construction, why bother putting it up? If a designer really must, then it is only temporary and 3 weeks will no longer be deemed temporary.

Suggestions:
Organize content on your website using HTML and CSS should be used when creating the design of your pages.

1. Create enough whitespace between your text and images by using margins.
2. Update and be consistent. The purpose of updating is not just to add new content but to spot and correct past mistakes. Jakob Nielsen suggests you hire a web “gardener”.

Budget to hire a web gardener as part of your team. You need somebody to root out the weeds and replant the flowers as the website changes but most people would rather spend their time creating new content than on maintenance. In practice, maintenance is a cheap way of enhancing the content on your website since many old pages keep their relevance and should be linked into the new pages. Of course, some pages are better off being removed completely from the server after their expiration date - Jakob Nielsen

4. Bad Navigation.

Navigation within a website should be seamless. Users should be able to find their way around easily. While there is no standard for navigation within a website, especially now as more new web development technologies emerge, it is imperative to understand that navigation must be intuitive and consistent.

If text is used as navigation, it should be concise. Visual metaphors should not be re-invented. If hyperlinks are used, then they should stand out from the body of the text. Dead links should have no place on any web page whatsoever. This increases user confusion and wastes time. And one that is even just as worse is having a link on the homepage that links to the homepage.

Suggestions:

1. Make navigation smooth by using textual descriptions for all links. Provide alt text for images. Use alternative text description techniques for Flash or Javascript links.
2. Organize and structure your navigation in tandem with the theme of the website. Personal websites can afford to be more creative yet accessible but a business website requires more efficiency and clarity.

Remember, if users can’t find what they want in less than 3 clicks, most will leave immediately.

More: Implementing Effective Website Navigation – This article gives more insight on implementing an effective navigation for your website.

5. Inconsistent Interface Design.

Excessive creativity can be just that. Excessive! Some designers take it to another level when creating websites by creating different designs for every web page within a website. This is by no means confusing to the user. And utterly annoying. No matter how outstanding and attractive a website is, if the overall look and feel is not consistent, users cannot relate to it and feel less in control. Thus, leaving as soon as they arrived.

Suggestions:

1. Use a standard consistent template for every page with links to the main sections of the site.
2. The keyword is simple. Create aesthetically simple designs and users will never get confused on your website.

6. Unfriendly Screen Resolution.

I’m sure we’ve visited websites where you have to scroll horizontally. This is an absolute no-no in modern web design. A good designer will develop websites that fit on most screen sizes. The current optimized layout for websites currently is 1024 x 768 pixels.

Suggestions:
It’s hard and almost impossible to cater the design to fit every resolution especially when visitors are now surfing from mobile phones and netbooks, but we can get a rough idea what are the generally used screen resolutions with these following ways:

• Check your stats – Analyic services like Google Analytics provides you information about what monitor resolution they are using. These are useful information you should know before initiating your next revamp.
• W3 Schools Browser Stats – W3 Schools gives clear lists of the most popular browser used by netizens and sort them according to popularity. There are other interesting and important statistics too.

7. Complicated Registration Forms.

Registration forms are tricky. How much information do you require from the user? Gone are the days where a user had to enter a zillion details to register to your website. Some websites make most registration fields mandatory and validate the fields to the extent where the user is frustrated after a few tries. Remember, users visit a website to acquire information. Not the other way round.

Someecard’s simple form makes registration painless.

Suggestions:
Compare registration forms across communities on the web and understand what basic information is required of the user during the registration process.

More: 9 Common Usability Mistakes In Web Design – This post on Smashing Magazine takes an in-depth look at registration forms amongst other usability mistakes.

8. Unscrupulous Use of Images/Animations.

Too much images on a web page is a huge turn off. Images can be used to capture users’ attention but it can also be a distraction or just plain aggravating. Images should be used to illustrate and guide the user where appropriate.

Animations are awesome and a powerful medium. Especially when used appropriately. When it’s a cycle or just too much on a web page, it gets on the users’ nerves. Users don’t have the patience, time or resources so designers must offer alternatives or better yet, the skip button, if it’s a full page animation.

More: Flash: 99% Bad – Use Flash appropriately. It’s been almost 10 years since Jakob Nielsen published this article but it’s still relevant in terms of Flash usability especially the Breaks Web Fundamentals piece.

9. Cluttered Pages, More Whitespace.

Too many designers forget about whitespace and its importance. They are so engulfed in their own design creativity that they forget that it’s not about them. Thus, they try to cram as much as they can onto a single page. End result? A busy, cluttered and unreadable page.

kylestanding make good use of whitespace in their design.

Here are few articles to give you a good idea on the importance of whitespace in web design:

• A Comparison of Four White Space Layouts
• The Value Of White Space
• Whitespace

10. No Background Music, Please!

Users don’t want cool, they seek efficiency. And yes, 99 percent don’t care about the music on your website. Some designers make it worse by putting different background music on every web page.

Suggestions:
Don’t use background music, but if you must, create a frame for the code and user controls. That way, the music loops continuously, instead of changing each time a new page is loaded within the website. And the user can stop or pause whenever.

11. Test, Test and Test.

This cannot be overemphasized. How many times have we been to web pages that can only be viewed on a certain browser? Web developers have to have a checklist of sorts when testing websites.

• Can the website be viewed in different environments?
• Is the design layout consistent in all browsers?
• Can the website be viewed in different settings such as Images turned off, JavaScript turned off, etc?

Suggestions:
W3C offers tools to test for quality assurance. Check out W3C Quality Assurance Toolbox and Web Page Validation.

Conclusion:

Keep it simple, stupid (K.I.S.S).That’s bottom line. If it’s simple, it’s usable. All in all, great websites keep it simple and usable. Do your homework and it comes easy and naturally.

What are your experiences in web design projects?
What other tips and thoughts would you like to share on web design mistakes?

About Author: Brujo Owoh is a Multimedia Systems undergrad specialized in Web Design and 2D Animation. He enjoys reading fiction, hang out with his mates, and keeping up with design trends on Twitter. Visit Brujo’s blog or follow him on Twitter

By Poonam

There are many elements that go into the creation of a website. A website is the best medium to communicate with users from all over the world. It is therefore essential, it should be designed in such a way that users should be attracted and be engaged on the site. This is when a website can reach its users effectively.

Designers have often wondered about the secret ingredient to make a website appealing. The combination of design and functionality is something every designer wishes to implement in a site. Many successful websites have one main secret ingredient, not every designer is aware about. That element is website interactivity.

What is Web Interactivity?

A simple example can illustrate this point. Picture this: 2 shopping stores are right next to each other. However, one attracts more customers than the other although both have the same goods. This is only because of one reason. The one shop that attracts more customers uses the concept of interaction with people. This is in terms of consumer suggestions, attractive offers, contests and displays. The whole scenario draws people as the overall environment makes a customer feel more comfortable.

In terms of web design, the concept can work in the same manner. The trick lies in a subtle use of web interactions to attract users and cause them to engage on a page.

Here, we can take another example. A radio button or hyperlinks are elements of a web interface. Contrast these with a 3Dimensional Cube or a 3Dimensional Flip Book, both being examples of interactivity. They are complete experiences of doing stuff that engages users with web pages whilst the user is going through the information displayed on the website. This is what makes these examples stand out. The use of interactivities woven very creatively with website content makes them successful in capturing user-attention.

How does one achieve website interactivity?

There are many elements that can be focused upon to achieve web interactivity that attracts users. The main subject of the website should be taken into consideration. This can give a clue as to the kind of interaction to be used. For example, a product website will have various categories on display. The range should be presented in an interactive manner rather than plain rows of products. A 3Dimensional Flip Book can be used to its advantage to showcase a range of products with the relevant information. A user gets engaged whilst flipping through the book.

The creation of these website interactivities requires time to be spent on technical details. However, in the recent times, designers can create these interactivities within minutes without any programming with rapid interactivity software that is available in the market.

Examples of great interactivity websites

Infinit Colours
This example shows the creative use of design and content. The design of the website is such that it engages users from the first moment itself. A user can change the background of the website. Besides, the menu is simple and hangs freely at the bottom area. It can even be dropped down if required. The color and layout used is clutter free. The text is neat without seeming too overpowering yet giving the message to be conveyed. The company is an advertising based company that conveys to users about the abundance of creativity.

Starbucks Coffee at Home
This brand sure does know how to impress its users with loads of creativity that is used generously on its site! A user can simply know the kind of coffee taste he/she is more suited to by taking a simple Find my Perfect Coffee quiz. It makes browsing the site fun and interactive. A user can view the different types of coffee available by moving the cursor over the coffee packets as shown in the image.

Square Circle
This creative agency does know how to connect with its users. Prospective clients are bound to be impressed with the way the site engages the users; one needs to pan through the page and zoom in to view details.

Roth Aniko
This artist manages to display the portfolio in an interactive manner. In this website, users can find a good balance of color, layout along with the interesting presentation of information that engages users.

Harry Potter
Harry Potter lovers will surely love this interactive site which has used interesting elements for display. The picture gallery is used in an interesting way with the pictures revolving around the main figure as shown in the image.

Cathy Beck Communication
The home page of this website involves little interaction. But as a user clicks on the tabs, the layout unfolds into an interesting layout with a zoom panel in the corner; a user can zoom in and out and is engaged on the site!

Magnivate Interactive Boutique Agency
This creative agency has used a unique approach on their site. The site has a cartoon character which takes a user through the various segments in a very interactive way.

Data Fisher
The company information is presented through an interactive 3Dimensional book. This book has a very creative mix of visuals and company information, the combination of which makes the content very readable!

Mercedes A-to-S
This site is one of the perfect examples of a creative and intelligent use of interactivities. The various features of the Mercedes car are explained through a very intelligent use of Flash. The quality of leather can actually be ‘felt’ once the cursor is clicked and dragged over the surface as shown in the image.

Nokia 3110 Evolve
This Nokia website has a very interesting and engaging interaction, where in a user can move the cursor over the mobile phones and the entire angle of the phone changes.

In the same website, a click on the phone enlarges it, as shown in the image. The phone can be viewed in a 3Dimensional way which definitely appears more interesting as compared to a display of images.

Aparte Graphique
The website has a great combination of interactivity. There is a cartoon character along with an engaging way of presentation of information.

Monoface
This creative agency knows how to display its creativity rather than talk about it! The main image can be played around with, by changing the facial features to try many funny combinations!

Unfortunate Events movie
This popular movie needs no introduction as it is full of creative effects. The website is created on the same lines; users can move the cursor over the elements to know details. These are shown in a very creative fashion keeping in mind the concept of the movie.

Website interactivity thus forms to be a very important ingredient for web design. Has this idea made you have a second glance at your website? I would love to hear your response about website interactivity.

Let us share our experiences right here, keep the comments rolling in!

About Author: Poonam works as Product Manager at Harbinger Group and looks after Raptivity Web Expert. She holds a Bachelor’s degree in Computer Engineering and is an active blogger.

Even the most unique blog designs usually follow, at least in part, some sort of predefined or established style. And there are plenty of design styles to choose from if you’re looking for inspiration. Whatever your personal style, there are design patterns out there that can be adapted to suit your own aesthetic ideal and the needs of your site. And often working within a predefined pattern can enhance your creativity by helping you focus.

Below we’ve rounded up eleven common design patterns seen throughout blog designs on the web. But just because they’re commonly seen doesn’t mean they aren’t unique and filled with plenty of individuality and creativity. Figuring out how to make your own unique mark on a widely-recognized style can prove to be a creative challenge for nearly any designer. Read on for inspiration and ideas for your next design projects.

1. Hand Drawn: A Relaxed Yet Artistic Style

Hand drawn blogs are all over the place. Some of these designs are very doodle-esque, while others are more like fine art. They can lend a more relaxed feeling to a blog’s design, as well as a healthy dose of creativity. One of the best parts of this style is that it’s so customizable. The illustrations used can really reflect the style of the owners or writers.

More on hand drawn design:

• 40 Free High Quality Hand-drawn Fonts
• 50 Beautiful Hand-Drawn Web Design

Low Impact Girl

Mark Forrester

SketchBlog

U.S.E. 19 Clothing

Blog Me Tender

Douglas Menezes

Hugs for Monsters

A Crayon’s Life

Biggest Apple

Demain J’arrete

Cog’nition

Kris Colvin

2. Grunge: Not Just Dirty

Grunge style has been around on the web for a few years now, and it’s still going strong. A couple of big trends in grunge design include minimalist grunge, where the theme is very minimal with the exception of the grunge elements, and more refined grunge that isn’t as messy as early incarnations. Again, this is a style that has tons of room for creativity and individual expression.

More: 100 Greatest Abstract and Grunge Fonts (Free)

CSS Religion

Brooklyn Slate Company

Triplux

Ritchie Linao

The Blizzards

Impresario One

Kevin Lucius

Gone Fishing

Manuel Romero

BienBienBien

3. Minimalist: Where Less is Definitely More

Minimalist designs can be some of the hardest to pull off well, despite their simplicity. When less is more, every single element becomes vitally important. Some of the hallmarks of miminalist design are lots of white space (or negative space), simple typography and few images.

More: 100+ Clean, Simple and Minimalist Website Designs

Moon Themes

Lounge4

Dolce Touch

Surfstation

Huwshimi

Guillermo Esteves

Design Intellection

ShareSomeCandy

Devlounge

Verbalized

4. Grid and Magazine-Style: Bringing Order to Chaos

Grid and magazine-type themes have also been around for a few years now. They’re excellent when you have a very information-heavy site (like many blogs) and add a sense of order and structure to a design. But they also leave plenty of room for creativity, as is illustrated in some of the designs below.

Champagne Warehouse

Edition – We The People

Juice

The Golden Pineapple Blog

CreativeDepart

Cynosura

Kineda

Reform & Revolution

Jason Santa Maria

Sushi & Robots

DFCKR

Post

5. Collage: Unique, Personalized Mashups

Collage styles are as varied as the blogs they style. Basically, these are designs that take a number of elements (often photographs or realistic illustrations) and combine them to form a background that might resemble a bulletin board or messy desk. It’s a unique style that allows for a lot of individual expression through what’s included in the collage.

Web Designer Wall

Baia dos Golfinhos

Blup!

Tarek Shalaby

Hatch

By Land, Sea or Air

The Klog – Koodoz Design

WorkAwesome

Fran Fernandez

Mesonprojekt

Designlab

Narfstuff

6. Gallery: For the More Visually-Inclined

Gallery blogs aren’t limited to just displaying images. Many blogs that focus mostly on text are using gallery layouts for their home pages, as a way to fit more information in a smaller space and leave things looking uniform and organized. Of course, there are plenty of sites out there using gallery layouts for what they were originally intended: photos, illustrations, and design work.

Foliotastic

Phototastic

Shocas.com

CHRISMDAY

Fernando Leite

Hugh Peachey Photography

IINSIGHT

Nocturn

Hell Biscuit

Wide Angled

7. Beautiful Typography: More Than Just Pretty Lettering

Excellent typography can really set a blog apart from its competitors. Not only is it more aesthetically pleasing, good typography also makes your blog easier to read.

Ocon Design

Rustin Jessen

EightHourDay

Elysium Burns

Iokon Media

Questionable Characters

The Personal Disquiet of Mark Boulton

The Art of Non-Conformity

Posh CSS

Der Gentleman

8. Awesome Textures and Patterns: Bringing Life to Otherwise Simple Designs

Unique combinations of textures and patterns can lead to a very creative and exceptionally beautiful theme. There are thousands of textures available out there, many free for personal or commercial use, so this style is largely accessible to all sorts of designers.

Barton Place Austin

Comfort Brothers

Mark Jardine

Think Design

Guns and Donuts

Brown Blog Films

TehCpeng.net

Henry Jones

Missy

David Hellmann

SimpleBits

9. Bold Artwork: More Formal Artistic Appeal

Bold illustrations and graphics can make a big impact on blog visitors. Bright colors, original illustrations, and vector artwork are hallmarks of these blogs.

Pirata London

Kallianos Diving Centre

Sushimonstr

The World of Silas Toball – Duirwaigh Studios

Tendencias do Design

WebScienceMan

Langgatan 3A

Blog What? Design

Badass Ideas

Brian Jeremy

10. Transparency: Adding Polish Without Weighing Things Down

Transparency can add an extra bit of polish to any blog design. When combined with a unique background, transparency creates a whole new level of elegance many blog designs lack. Some blogs use transparency throughout their designs, while others use it only in select locations to add a little extra flair.

Go Media Inc

Push The Brand

Darren Hoyt Dot Com

Mateus Neves

Level Opacity

LeBloe

Dezine Zync

Agenturblog

11. 3-D Designs: Simplified Trompe l’Oeil

The designs featured here use 3-D elements: folded paper, letterpress effects, and similar design elements. This is a newer trend in blog design (especially the letterpress effect) that has only started emerging in the past couple of years. It’s a beautiful style, and can be combined with a lot of other unique design elements (it’s often seen in collage and grunge designs, for example).

Matthew Achariam

Bitter-Coffee Studio

DAunion

Design Commission

Mike Matas Blog

Sanimani.com

Markup & Style Society

Cocoia Blog

31Three

Marcel Muller

Adii Rockstar

Is there any other interesting blog design trend you’ve spotted recently?

More related articles

• Retro and Vintage Web Design
• Beautiful and Colorful Blog Designs
• Minimalist Website Designs
• Hand-Drawn Web Design
• 100 Nice and Beautiful Blog Designs
• Beautiful and Enticing Blog Designs

About Author – Cameron Chapman is a professional Web and graphic designer with over 7 years of experience. She writes for a number of blogs, including her own, Cameron Chapman On Writing. She’s also the author of Internet Famous: A Practical Guide to Becoming an Online Celebrity.

Getting a little bored how your photos are presented online? How about injecting some fun and humor into it. You don’t really need to be Photoshop literate to edit and add effects into your photos. There’re some really great sites out there that allows you to add effects to your photo by using their existing effect-templates.

The best part is – most of them are free and output is shown immediately on the fly. Here’s a collection of 25 Sites To Have Fun With Your Photoswe’ve come to know. You know they don’t really have to be your photos :-)

We’ll start with 10 of our favorites, followed by the rest. Full list after jump.

Our Top 10 Picks

PhotoFunia

One of the hottest site with tons of creative backgrounds to play around with. Now comes in 9 different languages.

Fun Photo Box

If you don’t get what you want from PhotoFunia, you reallly need to check out this site.

Picartia

Create a photo mosaic of your choice for free online.

Hairmixer

Choose a photo for the left and right side and start mixing their hairs up.

Photo505

We’d say, with Photo505, Photofunia and Fun Photo Box, you’ll be buzy for days.

Yearbook Yourself

Turn your face photo into yearbook alike black & white old school photo. The service is paused and will be back this Summer.

Loonapic

Make funny photos by embedding your face from the photo to the various templates.

Magmypic

Create different fake magazine covers from your photos.

Your own Wired Cover

Powered by Xerox, this service allows you to create your own Wired magazine cover. Customized everything from titles, colors to photos.

Hollywood Hair Makeover

Love those celebrities’ hair? Wear them instantly and see how you look.

More Ways To Have Fun

Write On It

Easily create your fake pictures, captions and fake magazines and other funny jokes for you and your friends.

Dumpr

Create multiple interesting effects from your normal photos.

Anymaking

Allows you to upload any photo and create "old photo", "wanted" and "puzzle" effects out of it.

Montagraph

PiZap

My Heritage

Making use of their face recognition technology, this site offers several fun effects you can play with your photos. Included are Celebrity Morph, Look-alike Meter, Celebrity Collage and Tag Photos.

Letter James

Letter James has nothing to do with photo effects, but instead you allows you to blend texts and words of your choice into their existing templates.

Imagechef

Lots of ways for you to customize your photos and express them wherever you want.

Funny Photos

Similar to Fun Photo Box and Photofunia, just different effects.

Frontpage

Make yourself frontpage in 136 different magazine covers.

Fake Magazine Cover

Personalized money

Get your head into that dollar bill.

Faceinhole

Create HDR

One of the simplest way to create HDR photos online.

Blingee

Add Glitter, Graphics, and Comments to personalize your images, then share with your friends!

Moron Face

Moronize yourself and upload your photo.

One common obstacle on any attempt to create a IM group chat is the incompatibility of chat client used among our peers/friends; majority might be using MSN, but some have only Yahoo IM or Gtalk installed. Although there are workaround for this, but inconsistency and connectivity has always been a problem.

Here’s a web chatroom service that solves the problem – TinyChat. The typical IM chatroom requires you and your friends to share the same IM client, but with Tinychat you just need a browser – IE, Safari, Firefox or even Opera. We played with TinyChat for a while and we thought creating a group chat couldn’t get any simpler.

How TinyChat Works

To start a chatroom, just hit the "Click to Create your Chatroom" button and you are given an URL immediately. The URL serves as an invitation. With the correct URL, people can then join the chatroom you created. Isn’t it simple?

Here are some cool features we also see in TinyChat:

• Twitter tweets supported
• Chat log saving
• Able chat to website
• Supports basic emoticons

Visit TinyChat.

On any typical website, smaller images = faster loading time and lesser bandwidth consumed. It is really important to find an optimal balance between image quality and image size. Anything "un-optimized" image will parasitically suck your bandwidths and cost you a bomb if you are paying for these bandwidths (like me). If you really liked to reduce images file size and doing it the quick and easy way, I thought you should know Smush.it

Smush.it is a really useful webs service I recently came to know. It optimizes your images online, and they do it for free. Smush.it does it in 3 different ways, you can either:

• Upload a bunch of pictures in your browser, or
• Provide an URL link, or
• Do optimization on the fly on any website with Smush.it Firefox Extension or bookmarklet.

There’s also a optimization summary report comparing the before and after compression, in terms of bytes and %.

Smush your images now?

You’ve probably heard of this already, but in case you have not, here’s a really interesting site to check out. PhotoFunia takes your photo (face) and blend them nicely onto some creative templates. Here’s few samples to give you an idea how PhotoFunia transform images.

Credit: myokyawhtun

Credit: tothepc

There are tons of effects on PhotoFunia and getting your face on any of them is pretty straight forward. Select your effect, upload an image and the system will handle the rest.

Visit PhotoFunia.

Mygazines is a community website that allows its users to upload and share magazines online so you can read for free without paying. The site has a wide range of free online magazines to offers, ranging from computer magazines like MacWorld, Electronic Gaming to news and business magazines like Forbes, Discover, Wired and a lot more!

These online magazines are opened up in a flash flip-book style; you can control the flipping via mouse clicks or keyboards keys. Search within magazines are also supported, just in case you are looking for something in particular.

Check out Mygazines now.

If you are kicking back this weekend in front of your computer and got nothing interesting sites to surf, check out this site – Wordle.net. Wordle is a site that generates word clouds (similar to the tag clouds used in blogs) off any text, RSS feed, del.icio.us tag or URL you provide. The image above is an example of what I’ve got after keying the URL http://www.hongkiat.com

Wordle allows you to further customize the font, layout and color. You can even save it to a public gallery.

Turn it into a wallpaper

Generating just a text cloud sound boring, so I’ve decided to turn it into a wallpaper. Here’s how you do it, assuming you had your text cloud created.

1. Hit the Print button, save it as PDF.

   

2. Open up the PDF in Photoshop or any other similar application (make sure the resolution is 300)
3. Crop it to the the match your desktop screen size.

And there you go, a text cloud wallpaper made from the text of your site.

Thanks Efendi

Think of TinyPaste as shortURL service that turn long lengthy contents short (in format of URL) instead of URLs. This free service is simple, just paste in your text, click submit and share the URL. If you happen to paste large amount of content over IM, Twitter, etc, TinyPaste might just come in handy.

Get more efficient with TinyPaste Firefox plugin

Instead of going back to the website whenever you intend to make long contents short, try this Firefox plugin. All you need to do is just right click -> convert. It’s really that simple.

Do you have figures that you instantly want to make a comparison chart out of it? Try ChartGizmo. ChartGizmo is an online service that generates chart on the fly by talking your input into count. It’s free to use, generating charts are just a sign-up process away.

Generating charts are pretty straight forward. ChartGizmo supports 3 type of charts; bar, pie and line chart. For every chart created, you can also save them as HTML and share with your peers.

Create chart online with chartgizmo.

Fine Tuna’s service model is simple. It allows you to share an image over the Internet with your peers and friends, and on top of that, you can add your comments on the image. If you think you could use some comments while sharing images, try Fine Tuna.

This free web service allows you ways to share an image, you either upload or provide an URL to the image, add in comment and share it. If you like doing this and gonna use it often, try the bookmarklet.

I’ve came across free SMS services from time to time, but most of them either don’t work for me or the free service is only applicable to specific region only. Chawt, on the other end here, works just fine! And I have to tell you, it’s really hard to find a free online SMS sending services nowadays.

This free SMS sending services requires you to sign up, and activate the account with your cell phone. Just paste the code sent to your phone on the form, activate it and you are good to go. I’ve tested and my friends received them. The only drawbacks is the fact that every messages come attached with a line of advertisement. Well, for something free I wouldn’t complain too much.

Send SMS free with Chawt.

Thanks riotE for the heads up!

Whenever you found something interesting online and wish to share with your peers, the most direct way would be telling them the URL and which area or section to look at. With Kwout, you can share stuff more efficiently by quoting specific part of the website as image and share it. It’s all easily done with within few clicks.

Kwout is an online free service that allows you to crop, quote specific part of the website, turns it into image so you can share with anyone. Here’s all you need to do:

1. Go to kwout.com, type in the url in the textbox.
2. Scroll the area you want to share, click ‘Cut Out‘.
   

   

3. You’re done!

Do your final adjustment in terms of image width/height, borders, shadows, etc if necessary. Kwout provides 3 ways to share your quoted screenshots – post on web, post to Flickr and email to friends.

Bookmarklet to quote

There’s bookmarklet that you can place on your browser, so you don’t have to visit Kwout whenever you want to do some quoting. Check out the bookmarklets at the lower fold of the main page.