Alison Fay Binney May 13th, 2011

What Color Is Your Money? Showcase of Bank Websites Worldwide

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 Sainsbury's Bank, United Kingdom Screenshot Screenshot Citigroup, USA Screenshot Absa Bank, South Africa Screenshot Helm Bank, Panamá Screenshot Credit Suisse, Switzerland Screenshot HSBC, United Kingdom / International Screenshot NAB, Australia Screenshot Screenshot Alfa Bank, Russia Screenshot Citizens Equity First Credit Union, United States Screenshot Canadian Imperial Bank of Commerce, Canada Screenshot Westpac Bank, Australia Screenshot Afriland First Bank, Cameroon Screenshot Santander, Brazil Screenshot CIM Banque Geneve, Switzerland Screenshot Screenshot Banca di Roma, Italy Screenshot

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 Banco de Chile, Chile Screenshot Bank of New Zealand Screenshot Screenshot VTB Bank, Russia Screenshot Qatar National Bank, Qatar Screenshot Banca Etruria Group, Italy Screenshot Royal Bank Canada Screenshot Siam Commercial Bank, Thailand Screenshot BancoSol, Bolivia Screenshot Chase, USA Screenshot China Construction Bank, China Screenshot Banque Populaire, France Screenshot Deutsche Bank, Germany Screenshot Screenshot Natixis, France Screenshot Valiant, Switzerland Screenshot CSOB, Slovakia Screenshot Screenshot CapitalOne, USA Screenshot ANZ, Australia and New Zealand Screenshot Screenshot Standard Bank, South Africa Screenshot Bank of Hawaii, USA Screenshot Barclays, England Screenshot Screenshot Emirates NBD, United Arab Emirates Screenshot Hungarian Development Bank, Hungary Screenshot Delta Community Credit Union, United States Screenshot

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 Screenshot Screenshot Kookmin Bank, Korea Screenshot ING DiBa, Germany Screenshot Screenshot Commonwealth Bank Australia Screenshot Screenshot Bank of Ayudhya, Thailand Screenshot Attijariwafa Bank, Morocco Screenshot Commerzbank, Germany Screenshot Bankinter, Spain Screenshot Falkenbergs Sparbank, Sweden Screenshot Banco do Brasil Screenshot Pireaus Bank, Egypt Screenshot

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 Screenshot Screenshot SBERBANK, Russia Screenshot Magyar Nemzeti Bank, Hungary Screenshot Appenzeller Kantonalbank, Switzerland Screenshot Banco Azteca, Panamá Screenshot Banca Nazionale del Lavoro S.p.A., Italy Screenshot Islamic Bank of Thailand Screenshot First National Bank, South Africa Screenshot Kenya Commercial Bank Screenshot Israel Discount Bank Screenshot Crédit Agricole, France Screenshot Screenshot

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 Screenshot Screenshot Bank of England, United Kingdom Screenshot Rand Merchant Bank, South Africa Screenshot Central Bank of Libya Screenshot Banco de España, Spain SKB Banka, Slovenia Screenshot Central Bank of Bahrain Screenshot

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 RatesCentral Bank websitesA Look into Color Theory in Web Design (rb)

Alison Fay Binney

Alison is a journalist, print + web designer and avid communicator of everything that is science media.

15 comments

  1. Great list. I actually work as a front-end developer for a bank that could be a nice inclusion on your list.

    In my opinion, we have a great design and layout that makes things easy for visitors to navigate, access their accounts, etc.

    Check it out if you’d like: http://www.ally.com

    I may be a little biased, but I believe we have one of the better bank websites around.

  2. Wow! THe banks that stood out the most to me were the red color schemes. Its interesting to see the color choices around the world.

  3. Nice list and probably the last thing I would have though to make a list about! Who would have thought bank designs could be a source of inspiration?!

    Quite like Royal Bank of Scotland in the UK, too.

  4. Brilliant concept for an article! Red looks both striking and professional at the same time. My bank’s color is blue, but their internet services suck so this may be a bit out of date!

    S.K.

Leave a Reply

Your email address will not be published. Required fields are marked *