Babies are colour-dominant: they are more attracted by colour than form. And even though we generally become more form-dominant as we mature, colour still plays an important role on how we perceive the message. For instance, why does red always call to attention? Whether you want to tweak the colours of your site, or design an ad or a poster to attract people to your products or services, or even paint the walls in your house, these colour essentials should help you in becoming more colour-wise.

DO take time to learn the colour wheel. All colours are
made up of three primaries: red, blue and yellow. When you combine the primaries, you get the three secondary colours: orange, purple and green. When you combine each secondary colour with its neighboring primary, you get six tertiary colours: yellow-orange, yellow-green, blue-green, blue-purple, red-purple, red-orange. That’s how you get the familiar 12-colour wheel.

Every colour has a temperature: from the red/yellow side of the spectrum it’s warm, and from the blue/purple side it’s cool. It has an intensity that’s described as saturation or chroma. Saturation is determined by how much or how little grey a colour contains. High intensity colours are pure, bright and vivid. Less saturated colours are muted, soft and subdued. Every colour has a value, determined by its lightness or darkness. When planning a colour combination, value and saturation are as important as the hue (synonymous with colour).

DON’T miss on understanding the basic colour wheel rules:

• Most colours look great when combined with the shades in various values or intensities. These colour schemes are called Monochromatic, which consist of colours drawn from the same hue.
• Colours also love to hang out with their next door neighbors. Any three neighboing colours on a 12 part colour wheel make up an Analogous colour scheme. They are always harmonious as they share the same undertones: yellow-green, yellow and yellow-orange. To add a bit more impact to the analogous group, you can expand it with another neighboring color, e.g. orange.
• Opposites attracts, even with colours, and that’s how you get Complementary colours: they are the opposite hues on the colour wheel, that “complete” each other when used as a pair. Warm colours have cool complements and vice versa.

I found this handy Flash application that visually explains the colour wheel in an easy to follow style. There’s also a helpful HP colour wheel that showcases different colour schemes.

DO analyze the colour undertones.
If you like blue but want a subtle effect, choose a white or grey with a blue undertone. A red-orange terracotta pot has a yellow tone to it, hence those colours will blend harmoniously with each other. On the other hand, don’t emphasize an undesired undertone by pairing it with its complement: if the shade of brown has a pink undertone to it, combining it with green (the complement of red) will only intensify the problem.

Learn to identify colour tone, its warmth or coolness. A warm blue contains some red that makes it to look more purple, while a cool blue contains some green, which makes it more aqua or teal.
Do keep in mind that neutrals also have undertones. Often people will mistake grey for blue if there’s a blue undertone, or plum if the undertone is violet.

DON’T neglect the fact that colours ‘change’ according to their surrounding:
A large rectangle and a narrow line (or type) of the same colour will seem to have different values when placed against a white background: the colour in the line will look darker than it does in the rectangle, because it’s surrounded by much brighter white space.

When two shades of the same colour, one dark and one light, are paired with each other, the darker shade will look darker and the lighter shade will appear to be lighter: a pink rose will seem to be paler against a purple background.

Larger colour spaces will affect the smaller ones: if a small square of medium yellow is surrounded by a larger area of black, the yellow square will seem to be brighter than when surrounded by white. Any colour will appear lighter against a darker colour and vice versa.

Outlining a colour in a darker shade will enhance the enclosed colour, helping to keep a colour from “spreading” into surrounding areas. On the other hand, a lighter outline will cause a colour to spread to adjacent colours, and reduce the strength of the enclosed colour.

This valuable tip comes from David Airey: There’s also the illusion how dark colours surrounding light ones will make the lighter area appear smaller than it is if it were the opposite (dark surrounded by light). It’s why you should always bump up the text size if you insist on using white text against a black background.

DO explore the colour psychology
While perceptions of color are rather subjective, and have different meanings in various cultures, some colours affect us in a similar way. The human eye sees warm colours before cool hues. Cool colours appear to recede, while warm colours appear to advance, however the degree of saturation can make a difference.

• RED: With its aggressive, stimulating and sexy nature, assertive attention and provoking action, the red is impossible to ignore.
• PINK: Depending on its saturation or value, pink evokes varied mood swings. Magenta and fuchsia are perceived as sensual and theatrical. But water-down the red in lighter pinks and the raw sensuality of red is replaced with gentle romanticism.
• ORANGE: Inheriting some of the drama of red, orange is tempered by the friendly humour of yellow. It’s the colour that stimulates the appetite and radiates with warmth and vitality.
• YELLOW: Yellow and black is the most unignorable colour combination in nature – tigers, stinging bees – it’s the colour that says: you’d better pay attention to me.
• BROWN: Rustic, durable, wholesome and deliciously rich are just some of the traits of the colour that’s often associated with earth and home, substance and stability.
• BLUE: Ever noticed how many corporations and financial institutions use blue in their brands? That’s because blue is seen as dependable and committed. It is also the colour we often associate with calm and serenity. Darken the blue and you’ll add an instant authority, credibility and power to it.
• GREEN: Because of its association with nature and foliage, green in design can be used almost like a neutral colour: greens never clash with red or pink roses, yellow sunflowers, lilacs or bluebells.
• PURPLE: It’s perhaps the most enigmatic and complex colour, with the range of meanings – from royal to elegant to spiritual to mysterious. Purple is often favoured by very creative and eccentric people who are not afraid of appearing daring.
• WHITE: Not surprisingly white communicates purity, sense of clarity and simplicity. White is also perceived by the human eye as a bright colour, that’s why it works so well in contrast with all other colours.
• BLACK: People see black as the most dramatic, heavy, powerful, classic colour with an up-scale look. Because of its extreme contrast to white, black and white is the quintessential combination of depth and clarity, power and innocence.

DON’T be afraid to experiment with colour combinations. Sometimes even the forbidden combinations work. Check out various online colour tools and applications that will help you to chose the right colour combination for your projects. Mac users can install numerous handy colour widget for the Dashboard: Adobe Kuler, Color Theory, ColorSchemer, ColorBurn.
UPDATE: I just found a great list of colour resources: Complete Color Matching Guide – it’s definitely worth to be bookmarked.

DO examine other sites and designs to determine which colour schemes are more appealing than others. In one of the upcoming weeks, I’ll be featuring sites that were designed with the excellent knowledge and sense of colour. Meanwhile, browse numerous CSS galleries, bookmark the sites with attractive colour schemes, thumb through the pages of various design magazines, books, not just the ones for graphic designers, but also architectural and interiour design publications, where you will be inspired by the innovative and fabulous colour combinations.

DON’T forget about the readability when combining
colour with type. It’s true that we mainly deal with the black type on white paper/page background, and that a black text on a light background is the easiest to read. However, it doesn’t mean that colour and type don’t mix. When used well, colour can add an emphasis to your message. Pay attention to the relative values and saturation of colours when a background colour interacts with coloured type. The contrast between type and background diminishes when their values move closer to each other, and the type becomes less legible. The contrast between the type colour and the background colour must be considerable to ensure that the type remains visible.

John from iLT also gives this valuable advice: “when using reversed out text (e.g. light on dark), it’s often advisable to make the text a little heavier, as the dark background tends to optically reduce the weight of the text.”

It’s pretty obvious what is symbolized by ch’i on a website: if a reader gets a nice user experience from visiting and exploring the site, if the site colours don’t hurt the eyes, the navigation doesn’t cause a confusion and the carefully constructed typography doesn’t cause a headache, then we can safely say that this web site has a very good Feng Shui. In other words, in the world of Web:

Feng Shui = Usability + Design

Now, that we’ve managed to decipher and see how important it is to have a good feng shui on a web site, and since blogs are fast becoming the most popular types of web sites, let’s go through some DOs and DON’Ts in blog Feng Shui.

DO pay an extra attention to the homepage – even for a blog it is still the most important page of the site. Despite the fact that people usually land on one of the blog’s articles from search engines or following links from other sites, most of us always check out the homepage afterwards. Be sure to check Jacob Nielsen’s Top Ten Guidelines for Homepage Usability, though some of those guidelines apply to the blog’s overall layout, not just the homepage.

DON’T interrupt the positive ch’i with links that don’t say where they lead to, or open new windows, or present readers with a PDF document without a warning. We’ve all seen articles with links that say “read here and here“, or several linked words in a row – all to different sites. Every time I see such links, I mouse over and look at the status bar, trying to determine from the URL where that hypertext is linking me to. But what if the permalink is not user-friendly, or people are less tech-savvy than I am and don’t have all the time in the world to follow all the outbound links from that article. If you have to use a short and not very descriptive links, be sure to include them with the title attribute that creates tooltips that display the original title of the article when mousing over that link.

DO keep in mind how people read on the Web – they are not just scanners, they are “savvy selective scanners“. Write not just eye-catching but meaningful titles, break long paragraphs into several shorter ones, intersperse your main text with highlighted words (links, typeface variations, in a different colour), make it more attractive with appropriate images, write a gripping content.

DON’T overlook the power of colour. Colour is one of the most effective and easiest ways to affect someone’s mood or energy flow. In Feng Shui each colour expresses one of its five essential elements: Earth (stability), Fire (high energy), Water (abundance and purity), Metal (clarity) and Wood (growth). Since Feng Shui colours are comprised from all colours of the spectrum — “yang ch’i – from red to yellow and orange, yin shui – from green to violet-black”, the important part is to learn how to design your site with a harmonious colour combination.

DO put more effort into understanding the principles of a good typography on Web. Be careful when combining typefaces on your blog. Cater your text size to users with different preferences, don’t limit them with having to read a tiny (or overly large) text on your site, avoid specifying font size in pixels or points (absolute size), use one of the relative font size options (em or percent) instead, so that its size can be increased by users if needed. A List Apart has posted a great tutorial on How to Size Text in CSS last November, so it’s still very much relevant today with people using different browsers to read our sites.

DON’T neglect your old treasures, use different ways in promoting your old articles, be it with adding Recent and Popular articles sections, or creating a separate Archives page, or displaying Related articles at the end of the post, or make a list of your personally recommended articles from the past, deep link to them from your recent articles, or you can do all of the above, and perhaps come up with something extra, to give a better guidance to your readers in exploring your site.

DO prepare printer-friendly versions of your site with CSS. There is nothing worse than having to print an article and ending up with dozens of pages with numerous page ads and broken pages due to the large graphics. Ronald has put together a quick how-to guide for Creating a Printer Friendly StyleSheet in WordPress, and A List Apart has a great article on how to get our websites ready for Going to Print.

DON’T break the consistency – one of the essential principles of usability. People are already used to seeing clickable blog titles, don’t substitute those linked titles with some additional buttons or links and expect readers to guess how to get to the full version of that page. Never underline your text if it is not a hypertext. One of the reasons why it’s not recommended to open links in a new window is because the default link behaviour is to replace the current page with the linked one – people love Back buttons, they make us feel more secure – we can always retreat down the same path that brought us to where we are now. Be consistent with your navigation, colour scheme and essential elements throughout all pages of the site. Don’t move around content blocks, layout structure and design of your blog too often: if I’m used to seeing your search textfield at the top of your blog I expect it to stay there during my consequent visits, without having to wonder where did you move to your Search bar this time. Make your new found readers wanting to come back and your old readers feel “at home” with a good Feng Shui.

Blog Branding

We’re surrounded by brand names since the day we’re born: brand diapers, brand cereals, brand clothing, brand strollers, and the list goes on. In fact we get branded ourselves with the names that parents give us, but only a few of us turn those names into powerful brands (Martha Stewart, Seth Godin).

The mastermind and marketing genius for Nike and Starbucks, Scott Bedbury, once confessed that “A great brand raises the bar — it adds a greater sense of purpose to the experience, whether it’s the challenge to do your best in sports and fitness or the affirmation that the cup of coffee you’re drinking really matters”. If you read my look at some of the Most Brilliant Advertising Campaigns you will notice the similarities between them – they were all selling not the product but the image, the brand essence, the lifestyle.

How can branding be applied to blogging? The answer to that lies in response to another question: What are the driving forces of a flourishing Brand? Competitiveness, uniqueness, inventiveness, personality, emotions, packaging, ideology, design consistency. Carefully study all those shaping blocks of a great brand to get on the successful path of turning your blog into the one that’s recognized and remembered among the millions of other sites in the blogiverse.

Here are some DOS and DONT’S to jot down while wrapping the branding concepts around our heads.

DO create a brand personality by perfecting your About page. Talk as much or as little about yourself as you want but keep in mind that readers like to know who they deal with, it helps to establish one of the crucial elements of a successful brand — trust. If it’s a collaborative blog, then talk about its authors, if it’s a business site, do talk about the nature of the business and who’s behind it, if it’s a mysterious aura you’re after, don’t reveal some details – let the readers build myths whether you’re a male or a female, engaged or available.

DON’T forget to chose a unique image that will visually enhance your brand personality in the readers’ minds. Ralph Lauren never sold any horses, but what image comes to your mind when you think about this fashion mogul and his trendy empire? Take a look at the Instigator Blog’s new design – from now on, I’ll be always associating Ben Yoskovitz with those orange boxing gloves.

DO chose a consistent theme for your blog, define a focal point in all your blog’s topics. With Coco Channel it’s all about elegance and class, with iLT on the other hand it’s all about SEXy type, spread the LOVE of type & Rock’n'Roll your type knowledge. Everything and everyone on this site are soaked with type: the weekly features (Sunday Type, Type Faces), creative terminology (TypeNuts, Typestatique, Typelicious), site elements (exquisite typography, monthly fonts).

DON’T neglect the visual side of brand packaging: a unique logo, distinctive colour combination, noteworthy choice of type, meticulous attention to details. These are the essential tools in any packaging, why your website should be any different?

DO promote your brand’s awareness, expand that brand beyond your blog. Have you given some thought to how you present yourself and your site when commenting on other blogs, what to use as your avatar? Be aware of your own brand, recognize what is relevant and what does not to your image, become that brand before making others to take notice of it. Strengthen and build on your brand by taking it to the next step, other ventures. FreelanceSwitch stopped being only a blog for freelancers – there’s a JobBoard for freelancers, a forum, radio podcasts, there’s even a book for all the Rockstar freelancers out there.

DON’T fail to recognize the power of an identifiable name for your blog, get it right from the very beginning. Decide on your blogging goals: if it’s a personal brand you’re after, use your own name as the site’s domain; if you’re planning on running several blogs, or selling that blog sometime in future, or simply starting a new brand, then be creative and choose a name that is as memorable as it is unique. No matter how many other blogs Darren Rowse is authoring he will be forever associated with ProBlogger. His image hasn’t changed much since his minister days – he’s still making a living by preaching, but this time he’s preaching blogging to all us, mortals.

DO learn more about branding in general before building your own, learn from the pros, research the case studies of companies who managed to build a successful brand. There are many online resources for branding and Google can take you to most of them. But there is one book that I simply must recommend to everyone – it’s Naomi Klein‘s book NO LOGO. “There’s a bad mood rising against the corporate brands. No Logo is the warning on the label.” To wet your appetite here’s an excerpt from the book that you can read online.

DON’T destroy your brand by slowing down, or retreating to shade after a favourable outcome of all your hard work. Not only expect, be prepared for success, but don’t let it fool you either. It lasts as long as the taste of a magnificent wine and then all that’s left is a distant memory of how sweet it was. Ever wondered why such powerhouses as Coca Cola or Mercedes are still spending millions of dollars in promoting their brands? The answer is simple: competition and children. Every year hundreds of new companies, new products enter the war of Brands trying to brainwash us into choosing them over their competitors. People forget, and people rarely stay loyal to one brand forever. What’s more, millions of babies are getting born every year – they are the gold mine, the future buyers of that brand. Thousands of new readers flock to Web, you don’t want to miss a chance of having them to discover and subscribe to your blog, do you? Thousands of new blogs are created every day, stop turning your brand wheels and your readers will switch to another site that managed to take on where you have left.

Your Feedback

It is your turn now to share with all of us your notes on DOS and DON’TS of Blog Branding. What are your thoughts on Branding? I’ll summarize all your feedback and add to this post, for a more complete reference on aide-mémoire to Brand.