Site Color and Emotional Response

Posted on Feb 26, 2007 by Damien to Web Design

Many times I’ve been handed designs to look over only to cringe or make a vain attempt to shield my eyes from the hideousness before me. Sometimes it’s just plain bad design but sometimes it’s more than that. Color choices have a profound effect on your emotional response that you probably weren’t even aware of. That is until now.

Certain colors evoke certain responses in the subconscious and depending on what your overall product, brand, logo, website, corporate colors are you may have chosen wrong and not even know it. Recently I had some issues with color suggestions for a particular project needed to do some research to find out why it wasn’t working other than my initial impression. In doing so I found a wealth of knowledge on the subject of color and the human emotional response. Here are a few interesting things to keep in mind next time you start a project and are in “color scheme” mode:

Red
Red is the color of fire and blood, so it is associated with energy, war, danger, strength, power, determination as well as passion, desire, and love.

Red is a very emotionally intense color. It enhances human metabolism, increases respiration rate, and raises blood pressure. It has very high visibility, which is why stop signs, stoplights, and fire equipment are usually painted red. In heraldry, red is used to indicate courage. It is a color found in many national flags.

Red brings text and images to the foreground. Use it as an accent color to stimulate people to make quick decisions; it is a perfect color for ‘Buy Now’ or ‘Click Here’ buttons on Internet banners and websites. In advertising, red is often used to evoke erotic feelings (red lips, red nails, red-light districts, ‘Lady in Red’, etc). Red is widely used to indicate danger (high voltage signs, traffic lights). This color is also commonly associated with energy, so you can use it when promoting energy drinks, games, cars, items related to sports and high physical activity.

Light red represents joy, sexuality, passion, sensitivity, and love.
Pink signifies romance, love, and friendship. It denotes feminine qualities and passiveness.
Dark red is associated with vigor, willpower, rage, anger, leadership, courage, longing, malice, and wrath.
Brown suggests stability and denotes masculine qualities.
Reddish-brown is associated with harvest and fall.

Orange
Orange combines the energy of red and the happiness of yellow. It is associated with joy, sunshine, and the tropics. Orange represents enthusiasm, fascination, happiness, creativity, determination, attraction, success, encouragement, and stimulation.

To the human eye, orange is a very hot color, so it gives the sensation of heat. Nevertheless, orange is not as aggressive as red. Orange increases oxygen supply to the brain, produces an invigorating effect, and stimulates mental activity. It is highly accepted among young people. As a citrus color, orange is associated with healthy food and stimulates appetite. Orange is the color of fall and harvest. In heraldry, orange is symbolic of strength and endurance.

Orange has very high visibility, so you can use it to catch attention and highlight the most important elements of your design. Orange is very effective for promoting food products and toys.

Dark orange can mean deceit and distrust.
Red-orange corresponds to desire, sexual passion, pleasure, domination, aggression, and thirst for action.
Gold evokes the feeling of prestige. The meaning of gold is illumination, wisdom, and wealth. Gold often symbolizes high quality.

Yellow
Yellow is the color of sunshine. It’s associated with joy, happiness, intellect, and energy.

Yellow produces a warming effect, arouses cheerfulness, stimulates mental activity, and generates muscle energy. Yellow is often associated with food. Bright, pure yellow is an attention getter, which is the reason taxicabs are painted this color. When overused, yellow may have a disturbing effect; it is known that babies cry more in yellow rooms. Yellow is seen before other colors when placed against black; this combination is often used to issue a warning. In heraldry, yellow indicates honor and loyalty. Later the meaning of yellow was connected with cowardice.

Use yellow to evoke pleasant, cheerful feelings. You can choose yellow to promote children’s products and items related to leisure. Yellow is very effective for attracting attention, so use it to highlight the most important elements of your design. Men usually perceive yellow as a very lighthearted, ‘childish’ color, so it is not recommended to use yellow when selling prestigious, expensive products to men – nobody will buy a yellow business suit or a yellow Mercedes. Yellow is an unstable and spontaneous color, so avoid using yellow if you want to suggest stability and safety. Light yellow tends to disappear into white, so it usually needs a dark color to highlight it. Shades of yellow are visually unappealing because they loose cheerfulness and become dingy.

Dull (dingy) yellow represents caution, decay, sickness, and jealousy.
Light yellow is associated with intellect, freshness, and joy.

Green
Green is the color of nature. It symbolizes growth, harmony, freshness, and fertility. Green has strong emotional correspondence with safety. Dark green is also commonly associated with money.

Green has great healing power. It is the most restful color for the human eye; it can improve vision. Green suggests stability and endurance. Sometimes green denotes lack of experience; for example, a ‘greenhorn’ is a novice. In heraldry, green indicates growth and hope. Green, as opposed to red, means safety; it is the color of free passage in road traffic.

Use green to indicate safety when advertising drugs and medical products. Green is directly related to nature, so you can use it to promote ‘green’ products. Dull, darker green is commonly associated with money, the financial world, banking, and Wall Street.

Dark green is associated with ambition, greed, and jealousy.
Yellow-green can indicate sickness, cowardice, discord, and jealousy.
Aqua is associated with emotional healing and protection.
Olive green is the traditional color of peace.

Blue
Blue is the color of the sky and sea. It is often associated with depth and stability. It symbolizes trust, loyalty, wisdom, confidence, intelligence, faith, truth, and heaven.

Blue is considered beneficial to the mind and body. It slows human metabolism and produces a calming effect. Blue is strongly associated with tranquility and calmness. In heraldry, blue is used to symbolize piety and sincerity.

You can use blue to promote products and services related to cleanliness (water purification filters, cleaning liquids, vodka), air and sky (airlines, airports, air conditioners), water and sea (sea voyages, mineral water). As opposed to emotionally warm colors like red, orange, and yellow; blue is linked to consciousness and intellect. Use blue to suggest precision when promoting high-tech products.

Blue is a masculine color; according to studies, it is highly accepted among males. Dark blue is associated with depth, expertise, and stability; it is a preferred color for corporate America.

Avoid using blue when promoting food and cooking, because blue suppresses appetite. When used together with warm colors like yellow or red, blue can create high-impact, vibrant designs; for example, blue-yellow-red is a perfect color scheme for a superhero.

Light blue is associated with health, healing, tranquility, understanding, and softness.
Dark blue represents knowledge, power, integrity, and seriousness.

Purple
Purple combines the stability of blue and the energy of red. Purple is associated with royalty. It symbolizes power, nobility, luxury, and ambition. It conveys wealth and extravagance. Purple is associated with wisdom, dignity, independence, creativity, mystery, and magic.

According to surveys, almost 75 percent of pre-adolescent children prefer purple to all other colors. Purple is a very rare color in nature; some people consider it to be artificial.

Light purple is a good choice for a feminine design. You can use bright purple when promoting children’s products.

Light purple evokes romantic and nostalgic feelings.
Dark purple evokes gloom and sad feelings. It can cause frustration.

White
White is associated with light, goodness, innocence, purity, and virginity. It is considered to be the color of perfection.

White means safety, purity, and cleanliness. As opposed to black, white usually has a positive connotation. White can represent a successful beginning. In heraldry, white depicts faith and purity.

In advertising, white is associated with coolness and cleanliness because it’s the color of snow. You can use white to suggest simplicity in high-tech products. White is an appropriate color for charitable organizations; angels are usually imagined wearing white clothes. White is associated with hospitals, doctors, and sterility, so you can use white to suggest safety when promoting medical products. White is often associated with low weight, low-fat food, and dairy products.

Black
Black is associated with power, elegance, formality, death, evil, and mystery.

Black is a mysterious color associated with fear and the unknown (black holes). It usually has a negative connotation (blacklist, black humor, ‘black death’). Black denotes strength and authority; it is considered to be a very formal, elegant, and prestigious color (black tie, black Mercedes). In heraldry, black is the symbol of grief.

Black gives the feeling of perspective and depth, but a black background diminishes readability. A black suit or dress can make you look thinner. When designing for a gallery of art or photography, you can use a black or gray background to make the other colors stand out. Black contrasts well with bright colors. Combined with red or orange – other very powerful colors – black gives a very aggressive color scheme.

Tags: colors, emotion

Yahoo! Launches new Search Marketing Ranking Model

Posted on Feb 23, 2007 by Michelle to Pay Per Click

As of Monday, February 5th, Yahoo! implemented a new Search Marketing Ranking Model to ensure that more qualified ads are being served to searches, and will now not necessarily show the ads that have the highest price tag assigned to them. Yahoo! hopes that this new ranking model will allow for a more relevant search experience to users, more valuable customer leads to advertisers and additional opportunities to its distribution partners.

Until now, Yahoo! ranked it ads solely on the bid price. Basically, the higher an advertiser bid, the higher the ad would appear within the search results. When the new ranking model took effect on February 5th, advertisers noticed that both bid price and ad quality combined would determine at what position an ad would appear within the search results. Yahoo! announced that quality of an ad will be determined by its historical performance in the new system and its expected performance relative to other ads displayed at the same time. Ads of better quality will more than likely receive higher placement within the search results.

By making this change, Yahoo! is hoping to provide advertisers with industry-leading marketplace visibility and features that will allow them to better understand their performance and make more informed marketing decisions.

What does this mean for existing Yahoo! advertisers?
Yahoo! has sent out, and will continue to send out, upgrade invitations to the advertisers in the U.S. throughout the first quarter, and anticipates that all U.S. advertisers will be upgraded by the end of the second quarter. Advertisers who have upgraded to the new system can gauge the quality of their ads by viewing the prominently displayed quality index within the application. Yahoo! also provides advertisers with an estimated average position and estimated forecast of clicks for their ad campaigns, based on budget allocation and ad quality.

What Is PHP and Why Should You Use It?

Posted on Feb 20, 2007 by Damien to Technology Trends

PHP was at one time known as “Personal Home Page” but evolved into something so much more powerful than just that. It’s officially now known as “PHP: Hypertext Preprocessor” and what that means is that unlike Javascript which executes within the browser, PHP executes before it even hit’s the users screen. A PHP script is not sent directly to the client by the server; instead it is parsed by the PHP binary or module, which is server-side installed.

No more worrying about whether or not your user has Javascript enabled – it matters not with PHP. The output from PHP looks and smells like pure html and to the untrained and trained eye, it is.

So, why should you be using PHP?
There are endless reasons why but I’ll narrow it down to just a few. As an open source product, PHP is well supported by a talented and vigilant production team. PHP can and will run on all major operating systems without flaw. Because PHP allows you to separate HTML code from scripted elements, you will notice a significant decrease in development time on many projects. In many instances, you will be able to separate the coding stage of a project from the design and build stages. Not only can this make life easier for you as a programmer, but it also can remove obstacles that stand in the way of effective and flexible design.

Tags: php

Streaming Video

Posted on Feb 16, 2007 by Jonathan to Technology Trends

Recently a large client of ours sent us a link to a website that featured some very well done streaming video. The video featured an interactive spokesperson that walked you through some of the features and benefits of their products. But what struck us as well done was the pace at which the video loaded. The footage began almost immediately and the playback was very smooth.

So how did they do it? They used a format called Flash video or Flv. There are several ways to stream video over the internet but flash is a good option because 95% of internet users already have the flash player installed. Another benefit to using the flv format is its ability to “scrub” or “buffer”. Scrubbing is a setting that allows the flash player to get a feel for the bandwidth speed so it can preload a certain amount of data. The “scrubbing” guarantees that once the video begins, the playback wont be interupted. Prior to export the developer can specify the amount of “scrub” in seconds. A good and safe amount of scrub is 10 seconds but I prefer to use 5 seconds. If the download speed is high enough, scrubbing is avoided all together and playback begins without delay.

In addition to scrubbing it is also key to use good compression. One good thing about video and compression is that the constant movement of video tends to hide the compression. In other words, heavy compression on a static jpeg image is much easier to detect than heavy compression on a video file. When it comes to video dont hold back on compression – otherwise the files will remain huge and playback will be comprimised. Integrated into the flash 8 video encoder is a very easy to use and effective compression utility.

Streaming video on the web is a great way to add life to your project and with quality development tools like flash and the Flash 8 video encoder it doesnt have to be a pain.

Tags: streaming video

Copywriting and You

Posted on Feb 16, 2007 by Melanie to Copywriting

Search Engine Optimization and Marketing without copywriting is pointless. There I said it.

Writing effective copy is a combination of information, details of your products or services and a little something special called emotion. When you evoke an excitement about your company and a call to your cause it results in traffic, buzz and sales.

The importance of copywriting for SEO is a very thin line that borders between writing for search engine spiders and human visitors. With advances in search engine indexes focusing more on content than Meta code, it is vital to keep the search algorithms in mind. At the same time your emphasis should be on writing for people, since search engine spiders have no money to spend (and they certainly won’t tell all their friends and colleagues about you). Incorporating search terms into your copy and applying strong tags will be sure to make everyone happy. After your copy is inserted clean it up with proper validation. This will make search spiders happy as well as your visitors.

Keeping your copy relevant and organized is another crucial step to maximizing your online potential. Stay on topic, retain a common vibe throughout the site and stay coherent. Its easy to get off topic when you are passionate about something, but save it for another paragraph or page. It makes your information easier to index and you avoid sounding like a crazy person.

Copy needs to have proper grammar, spelling and punctuation. Commas are no excuse to chop up what I can clearly see is a run on sentence. Capitalize where appropriate and keep in mind that not everyone knows abbreviations and industry specific terms. Feel free to use spell check (it’s in every piece of text editing software and even the firefox browser). Also take note of context; there, their, they’re all mean something different.

Oh and did I mention punctuation and spell-check? Good.

Tags: seo copywriting

SEO Killed the Splash Screen

Posted on Feb 14, 2007 by Damien to Web Design

One typical SEO mistake for clients and newbie designers is basing the users interaction upon an entry or “splash” screen or an animated intro. This is the kiss of death when it comes to SEO if not handled properly. Splash screens typically contain redirecting JavaScript which most search engines either don’t like or just plain won’t run them thus the search engine spiders never actually make it to the content of your site.

Flash content such as intros, animations and redirecting the user via Actionscript as well has it’s SEO drawbacks. Once again, no rich content for the search engine spiders and the Actionscript never executes for the spiders to find the rest of your site.

There are a few method of making sure your users and search engines do finally get to your site but in the end you’re setting yourself up for trouble. Splash pages were a good idea when Flash first came giving some kind of intro animation and something cool for the users to look at and in the end the users would tell others about the “cool site they just saw”. Now that Flash has been around for a while search engines and SEO methods are king in getting traffic and keeping it. If you can’t be found on a search engine chances are you can’t be found and no amount of cutting edge animation or fancy flash will help that.

A general rule of thumb for SEO and splash pages is simply to not use them. Keep the user entertained yes but also give the user some much needed content let them know that yes, this is the information they were looking for. Don’t make them guess why they’re there or make them wait through some annoying flash animation before getting to what they need. You’ll more than likely lose your visitor and in turn lose any chance of them coming back. Also by keeping rich content on your home page and not redirecting them from a splash page this allows the search engine spiders to glean your site for valuable and ranking content thus putting you within the search engines with no issues or javascript tricks and redirects.

Clean code, relevant content and steering away from tricks and hacks to get traffic or entertain your users is always a good standard. Search engines not only like sites that follow the rules but they are usually rewarded with interested visitors and higher rankings.

Tags: splash screens

The Importance of Wireframing

Posted on Feb 7, 2007 by Jonathan to General

A wireframe is just that, a framework for a website – made of wire. Basically, a wireframe is a visualization tool for presenting the content of a web page. Back in the 1800’s Webwranglers used wire to do this but since the invention of the computer that technique has dried up – somehow the name has not. The best tool to create a wireframe is adobe illustrator, Indesign or anything that allows you to draw boxes, set type, and move items easily.

Wireframes are effective because they:

- Require minimal time to plan content placement.
- Make changes to the sites content painless.
- Focus on how a site actually works without distractions caused by colors, photography, or design.

Wireframes make the production of a site more efficient but the most significant advantage by far is their ability to present a page devoid of all distractions. For whatever reason colors, imagery and even words tend to take over a persons emotional side, which then causes them to overlook the more analytical aspects of development. Imagine presenting a comp with an 800 x 300 pixel enlarged bikini model in the header, do you think anyones going to consider what items are most important to include in the footer? I dont think so.

So strip it down to black and white use greek text instead of real words, and get that wireframe signed off on so the designers can get to work.

Tags: wireframes

What is AJAX?

Posted on Feb 1, 2007 by Michelle to Web Development

Wikipedia’s Definition:

Ajax, shorthand for Asynchronous JavaScript and XML, is a web development technique for creating interactive web applications. The intent is to make web pages feel more responsive by exchanging small amounts of data with the server behind the scenes, so that the entire web page does not have to be reloaded each time the user requests a change. This is meant to increase the web page’s interactivity, speed, and usability.

The Ajax technique uses a combination of:

• XHTML (or HTML) and CSS, for marking up and styling information.
• The DOM accessed with a client-side scripting language, especially ECMAScript implementations such as JavaScript and JScript, to dynamically display and interact with the information presented.
• The XMLHttpRequest object is used to exchange data asynchronously with the web server. In some Ajax frameworks and in certain situations, an IFrame object is used instead of the XMLHttpRequest object to exchange data with the web server, and in other implementations, dynamically added “script” tags may be used.
• XML is sometimes used as the format for transferring data between the server and client, although any format will work, including preformatted HTML, plain text, JSON and even EBML. These files may be created dynamically by some form of server-side scripting.

Now, what does that mean in laymans terms?

Well, let me give you a brief history first. Most people believe that AJAX is a relatively new technology. However, remote scripting was developed over a decade earlier by Microsoft. While the term “AJAX” was arrived at in 2005, it ancestory has been around for quite some time now.

AJAX was developed mainly to improve the overall user experience. Nothing is worse that having a fast internet connection and still waiting for page after page after page on a site to load while it exchanges information with the server. With AJAX a user can land on a web page and in seconds, be off and running, while a majority of the data is still loading behind the scenes. Pages do not need to be reloaded each time information is submitted.

For example…

Have you ever tried to book a hotel room and before you could even pull data back for your travel dates, the browser window timed out because the page took so long to load. Well, if that booking engine was created using AJAX technology, while you insert your travel critieria the page is automatically loading all room type information in the background. So as soon as you hit that submit button, you will have your desired information almost instantaneously.

We did just that when THAT Agency utilized AJAX to build Sol Melia a custom booking engine that would communicate with an existing XML that all room data was loaded into. Check out the results…http://booking.paradisuspalmareal.com.