What Color Is Your Money? Showcase of Bank Websites Worldwide


[IMG]************************************************************ **********************[/IMG]
[IMG]************************************************************ ***********************8[/IMG] [IMG]************************************************************ ***********************9[/IMG] [IMG]************************************************************ ***********************10[/IMG]
Having lived and worked in various countries during the past 15 years, I have accumulated quite a few different bank accounts. On any given day, some of us may actually need to log on to at least three bank websites. And while one wouldn’t normally turn to a bank website for inspiration, it is actually surprising how the world of money is quite useful for considering the different ways large amounts of critical information can be packaged.

Developers and designers of bank websites have the ultimate of job tasks to fulfill in planning a bank’s website information architecture. Of utmost importance is security and functionality. Then comes the entire suite of corporate marketing communication must-haves such as strategy, usability, portability, accessibility and highly likely multilingual services are a major consideration among the deliverables.

Banking is a highly competitive industry where the website needs to make existing clients feel safe with their financial transactions (client retention) as well as entice new customers (client acquisition). The client base is normally extremely diverse. At any given time a bank needs to please large international multi-million dollar stakeholders at the same time as individuals who live from month to month on minimum wages. Client demand on bank websites is therefore assuming a broad range of wealth and responsibility.

Author’s Note:

“These days, it is barely imaginable how one would manage finances without the convenience of online banking services. To put this appreciation of online banking in perspective, and to give away a little idea of my age, I can actually remember physically visiting my small country town bank in Australia, little passport-sized bank book in one hand and an envelope with cash in the other. I happily walked out with the money safely deposited, a new hand-written savings total in my bank book, all stamped, dated and hand-signed by the banker. In between visits I kept my savings in a plastic kangaroo!”

What Color Is Your Money?

With the high-end security, seamless functionality specifications and corporate branding then being absolute priority, designers and developers around the world are producing some really pleasing-to-the-eye bank websites. For simplicity, we have collated the showcase by color:

• Red (includes hues of pink for this article)
• Blue (includes hues of purple for this article)
• Yellow (includes hues of orange for this article)
• Green
• Gray (includes hues of brown for this article)

Specific Design Elements to Notice:

Besides the color breakdown, when perusing through the bank websites there are some interesting design elements worth noticing. Remember that bank websites are generally based on very complex sitemaps that must address thousands of customers (individuals and businesses), security and legal issues, service offerings, marketing and international relations. What we noticed in researching this article was:

• The multiple, often replicated, navigation systems. A lot of the bank websites here include both horizontal and left and right vertical navigation, as well as key ‘call to action’ navigation ‘buttons’ via larger modular units in the center of the home page.
• The navigation systems actually steer away from being drop-down lists activated on hover and are more likely to be completely displayed as a list.
• The column grid structure for most of the bank websites is based on at least 4 columns.
• The upper right hand corner is where most banks include the area for logging on to online accounts.
• Steadily, banks are integrating social media into their online presence (please take a note of how many actually have Twitter and Facebook links on their home pages).
• Search boxes are absolutely critical to bank websites.
• Banks showcased here generally try to integrate humor or the ‘fun factor’ into the user experience. That is to say, online banking is shaking off some of the associations of the financial world being stuffy, old and boring.

We have actually marked the websites with a big ‘love the design’ where we feel a lot of extra love and attention has gone into the design, beyond the corporate information architecture.

Shades of Red

On putting this article together and sifting through hundreds of bank websites, red (and blue, see below) is a dominant color choice for banks. Red is one of the three primary colors (red, blue and yellow) and because it is the color of blood and raging fire, it is commonly associated with the following traits: courage, strength, power, energy, determination, passion, action and it has strong visibility (ie stop signs and danger signs are red). Strong shades of red often suggest vigor and leadership while lighter hues tending to pinks suggest a more passive and fresh approach.

Sparkasse, Germany

http://www.noupe.com/wp-content/uplo.../sparkasse.jpg

Sainsbury’s Bank, United Kingdom http://www.smashingmagazine.com/wp-c...ethedesign.png

http://www.smashingmagazine.com/wp-c...7141324449.png

Citigroup, USA

http://www.smashingmagazine.com/wp-c...7139103594.png

Absa Bank, South Africa

http://www.smashingmagazine.com/wp-c...4474732373.png

Helm Bank, Panamá

http://www.smashingmagazine.com/wp-c...7146077711.png

Credit Suisse, Switzerland

http://www.smashingmagazine.com/wp-c...4490204565.png

HSBC, United Kingdom / International

http://www.smashingmagazine.com/wp-c...4471266154.png

NAB, Australia http://www.smashingmagazine.com/wp-c...ethedesign.png

http://www.smashingmagazine.com/wp-c...4476219944.png

Alfa Bank, Russia

http://www.smashingmagazine.com/wp-c...5583256493.png

Citizens Equity First Credit Union, United States

http://www.smashingmagazine.com/wp-c...7141623344.png

Canadian Imperial Bank of Commerce, Canada

http://www.smashingmagazine.com/wp-c...7140668377.png

Westpac Bank, Australia

http://www.smashingmagazine.com/wp-c...7140506247.png

Afriland First Bank, Cameroon

http://www.smashingmagazine.com/wp-c...4472406599.png

Santander, Brazil

http://www.smashingmagazine.com/wp-c...4478077973.png

CIM Banque Geneve, Switzerland http://www.smashingmagazine.com/wp-c...ethedesign.png

http://www.smashingmagazine.com/wp-c...4487985865.png

Banca di Roma, Italy

http://www.smashingmagazine.com/wp-c...5585334688.png

Shades of Blue

Blue is the classic corporate color of choice. Blue is associated with depth and stability, trust, loyalty, wisdom, confidence, intelligence, knowledge, power, integrity and seriousness.

However, customers have over the years developed a love or hate relationship with their financial service firms. It is perhaps needless to mention here the financial crisis of 2008 where large financial institutions collapsed, banks were bailed out of seriously deep trouble by national governments and  stock markets crashed all around the world. Building trust and loyalty takes somewhat more than the perfect shade of blue.

Here are a selection of bank websites from around the world whose main online color is set around blue. We have included purple websites here as it expresses the stability of blue and the energy of red. Purple is associated with royalty and luxury. Dark blue tends more toward representing knowledge, power, integrity, and seriousness while a lighter blue hedges toward offering understanding and gentleness.

Rietumu Banka, Latvia
http://www.noupe.com/wp-content/uplo.../05/latvia.jpg

Banco de Chile, Chile

http://www.smashingmagazine.com/wp-c...7140807679.png

Bank of New Zealand http://www.smashingmagazine.com/wp-c...ethedesign.png

http://www.smashingmagazine.com/wp-c...5589516762.png

VTB Bank, Russia

http://www.smashingmagazine.com/wp-c...4472825564.png

Qatar National Bank, Qatar

http://www.smashingmagazine.com/wp-c...4490427518.png

Banca Etruria Group, Italy

http://www.smashingmagazine.com/wp-c...5585894276.png

Royal Bank Canada

http://www.smashingmagazine.com/wp-c...7140930798.png

Siam Commercial Bank, Thailand

http://www.smashingmagazine.com/wp-c...4475370115.png

BancoSol, Bolivia

http://www.smashingmagazine.com/wp-c...5609629450.png

Chase, USA

http://www.smashingmagazine.com/wp-c...5432698543.png

China Construction Bank, China

http://www.smashingmagazine.com/wp-c...5587945961.png

Banque Populaire, France

http://www.smashingmagazine.com/wp-c...4472123669.png

Deutsche Bank, Germany http://www.smashingmagazine.com/wp-c...ethedesign.png

http://www.smashingmagazine.com/wp-c...4476127131.png

Natixis, France

http://www.smashingmagazine.com/wp-c...5592078186.png

Valiant, Switzerland

http://www.smashingmagazine.com/wp-c...4488369806.png

CSOB, Slovakia http://www.smashingmagazine.com/wp-c...ethedesign.png

http://www.smashingmagazine.com/wp-c...5591577502.png

CapitalOne, USA

http://www.smashingmagazine.com/wp-c...4470735235.png

ANZ, Australia and New Zealand http://www.smashingmagazine.com/wp-c...ethedesign.png

http://www.smashingmagazine.com/wp-c...4471797980.png

Standard Bank, South Africa

http://www.smashingmagazine.com/wp-c...4473602555.png

Bank of Hawaii, USA

http://www.smashingmagazine.com/wp-c...5589297158.png

Barclays, England http://www.smashingmagazine.com/wp-c...ethedesign.png

http://www.smashingmagazine.com/wp-c...4476580193.png

Emirates NBD, United Arab Emirates

http://www.smashingmagazine.com/wp-c...5590362111.png

Hungarian Development Bank, Hungary

http://www.smashingmagazine.com/wp-c...5591021824.png

Delta Community Credit Union, United States

http://www.smashingmagazine.com/wp-c...7141818967.png

Shades of Yellow

Like red, yellow has an energetic influence and an alarm effect. It is also associated with joy, happiness, honor, loyalty and intellect. It is warming (directly associated to the sun) and stimulates a cheerful ease while at the same time is considered fresh and zingy. Used too liberally though, yellow can be disturbing and get in the way of content on a website. Used sparingly, it can be inviting and assuring. Orange has also been included in this group as it combines the energy of red and happiness of yellow. Orange is the color of enthusiasm, fascination, happiness, creativity, determination, attraction, success, encouragement and stimulation. Some also associate orange with endurance.

Guaranty Trust Bank, Nigeria http://www.smashingmagazine.com/wp-c...ethedesign.png

http://www.smashingmagazine.com/wp-c...6892606351.png

Kookmin Bank, Korea

http://www.smashingmagazine.com/wp-c...5584847705.png

ING DiBa, Germany http://www.smashingmagazine.com/wp-c...ethedesign.png

http://www.smashingmagazine.com/wp-c...4473263585.png

Commonwealth Bank Australia http://www.smashingmagazine.com/wp-c...ethedesign.png

http://www.smashingmagazine.com/wp-c...4473399816.png

Bank of Ayudhya, Thailand

http://www.smashingmagazine.com/wp-c...4475902746.png

Attijariwafa Bank, Morocco

http://www.smashingmagazine.com/wp-c...7142106528.png

Commerzbank, Germany

http://www.smashingmagazine.com/wp-c...5590187100.png

Bankinter, Spain

http://www.smashingmagazine.com/wp-c...4477181665.png

Falkenbergs Sparbank, Sweden

http://www.smashingmagazine.com/wp-c...5590529834.png

Banco do Brasil

http://www.smashingmagazine.com/wp-c...4477652334.png

Pireaus Bank, Egypt

http://www.smashingmagazine.com/wp-c...4490648706.png

Shades of Green

As we move down our color comparison list of financial websites, there becomes fewer examples to find for greens and grays. We actually discovered, however, that quite a few banks in African countries and other developing lands use green shades for bank websites. Green is the color for growth, nature and healing. It is also directly symbolic of money (and greed and jealousy).

Nedbank, South Africa http://www.smashingmagazine.com/wp-c...ethedesign.png

http://www.smashingmagazine.com/wp-c...4474580268.png

SBERBANK, Russia

http://www.smashingmagazine.com/wp-c...5583510667.png

Magyar Nemzeti Bank, Hungary

http://www.smashingmagazine.com/wp-c...6889666685.png

Appenzeller Kantonalbank, Switzerland

http://www.smashingmagazine.com/wp-c...4489013736.png

Banco Azteca, Panamá

http://www.smashingmagazine.com/wp-c...7145260542.png

Banca Nazionale del Lavoro S.p.A., Italy

http://www.smashingmagazine.com/wp-c...5585501690.png

Islamic Bank of Thailand

http://www.smashingmagazine.com/wp-c...4475694722.png

First National Bank, South Africa

http://www.smashingmagazine.com/wp-c...4474011997.png

Kenya Commercial Bank

http://www.smashingmagazine.com/wp-c...4478370669.png

Israel Discount Bank

http://www.smashingmagazine.com/wp-c...5591249902.png

Crédit Agricole, France http://www.smashingmagazine.com/wp-c...ethedesign.png

http://www.smashingmagazine.com/wp-c...5587672219.png

Shades of Gray & Brown

Black and white are not colors on the ‘Color Wheel‘. They are defined as ‘neutral’ colors. Shades of gray (and brown for this article) are generally neutral colors which tend not to assume a strong or specific emotional association – except for general neutrality. While black on its own can symbolize morbidity, death or mystery, it is also a clear expression of power and clarity. White is also a statement of purity and clean cut lines. Shades of brown communicate earthiness and wholesomeness. We discovered a few financial websites that use predominantly shades of grays and browns, but not many.

Macquarie Group, Australia http://www.smashingmagazine.com/wp-c...ethedesign.png

http://www.smashingmagazine.com/wp-c...5591822156.png

Bank of England, United Kingdom

http://www.smashingmagazine.com/wp-c...6890857456.png

Rand Merchant Bank, South Africa

http://www.smashingmagazine.com/wp-c...5592602383.png

Central Bank of Libya

http://www.smashingmagazine.com/wp-c...6890066546.png

Banco de España, Spain

http://www.noupe.com/wp-content/uplo...1/05/spain.jpg

SKB Banka, Slovenia

http://www.smashingmagazine.com/wp-c...5607570286.png

Central Bank of Bahrain

http://www.smashingmagazine.com/wp-c...6888707823.png

What Color Is Your Money?

This article is in no way an exhaustive collection of bank websites of the world. These are some of the better designed and constructed works. If you can suggest any more that should be added to this showcase, please add them in the comments below. And next time you are visiting your own bank’s website, instead of just going to your online account to see how rich or poor you are, have a further look around the site and see how well it has been put together. Check out the sitemap and consider the structure that has been employed to make the site cohesive. Make a note to see if the ‘business customer’ pages are designed differently to the ‘individual customer’ pages.

Partial Bibliography

— USA Banks, All banks and Finance, Banking and Rates
— Central Bank websites
— A Look into Color Theory in Web Design

(rb)

http://feeds.feedburner.com/~ff/Noup...nw:V_sGLiPBpWU http://feeds.feedburner.com/~ff/Noup...nw:F7zBnMyn0Lo http://feeds.feedburner.com/~ff/Noup...nw:gIN9vFwOqvQ http://feeds.feedburner.com/~ff/Noupe?d=7Q72WNTAKBA