Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

February 24 2014

04:22

February 14 2014

14:59

August 30 2013

06:30

Webydo: The Center of Your Web Design Business


  

You are a designer looking for ways to increase your customerbase? You want to design faster and less expensive? You want to create websites the way you are used to from creating print designs? You don’t want to mangle with code or – even worse – collaborate with programmers? If you answer yes to at least one of these questions, you should definitely read on. Because what you’ll find out might change your life… (Additionally, we have an exclusive offer for you at the end of the article.)

May 27 2013

15:14

Learning by Pulling Apart: An Interview with UI/UX Designer Matt Dempsey


  
Every once in awhile, we come across an amazing story of someone in the design world who seems somewhat hidden or insignificant. Matt Dempsey is such a someone. His career as a web and graphic designer begins at the very young age of 13 and includes such inspirational highlights as hiring a developer to build an app that was acquired by SitePoint when Matt was only 15 years old!

December 14 2011

21:00

Tablet Tidbits: How To Make Your Website Tablet-Friendly

While smart phone’s got the ball rolling for mobile browsing some years ago, the arrival of the iPad in April 2010 really began the revolution for people who wanted to cruise the net while out and about.

As with all new technologies, there were initially a lot of doubters who insisted the tablet concept wouldn’t get off the ground. Boy have they got egg on their faces now! The tablet market now has a very strong foothold with sales exceeding 20 million in 2010 (3 million iPads were sold within 80 days of its release), and it’s estimated that this figure could quadruple by 2012.

The tablet is an excellent example of the speed with which the technology industry evolves. Just a few years ago if you wanted to design/build a website, there were just a few browsers that you needed to consider. With the introduction of mobile/tablet browsing, creating a website that looks good and is easy to use on a full size screen as well as a smaller one poses a significant challenge to designers.

Considerations for Tablet Design


Scaling of sites

Since web designers no longer have the luxury of knowing users will be visiting their website from a standard size monitor, they now face the issue of figuring out where to put “the fold”. For those new to the game, the fold marks the point where a user must scroll down to see more content. Hence the most important information/content is generally placed above the fold to ensure it’s seen before the user navigates away from the site.

With the trend of more viewing been done from smaller screens, many designers are beginning to scale back their designs and raising the fold to ensure important content and navigation options are readily available on smaller screens.

Giving the mouse the flick

A very important consideration for tablet design is that users will be using their finger to navigate rather than a mouse. While human fingers are pretty nifty little tools, they’re not as precise as a mouse is when it comes to navigating a website. The simple fact is your finger is a lot larger than a mouse cursor, and is physically incapable of doing what the cursor can. Given this, it’s important to ensure that important areas of your site, such as the navigation bar, don’t need to be zoomed in for tablet users to access them.

Catering for this doesn’t require that you go out and develop a tablet version of your site. Ideally you’ll want to achieve a middle ground with the size of your buttons, where they’re large enough to access with fingers, but don’t look ridiculous on a full size screen.

Check the form (fields)

Particularly for business sites, forms are an important part of the user experience. Whether it’s a simple contact form, shopping cart or newsletter signup; poorly designed fields can create immense frustration for users, and lead to high abandonment rates.

The easiest way to ensure your form fields are functioning correctly is to test them yourself. Jump on an iPad or any other tablet device and check for things like: clear rendering, speed of processing, unnecessary fields, and in general anything that makes the experience difficult or unpleasant.

Don’t be flashy

If you want your site to display well on a wide variety of platforms, the best way to achieve this is by sticking to standards-compliant HTML and CSS, and avoiding technologies which require additional software or browser plugins. As you’re no doubt aware, Apple has ditched flash and the iOS no longer supports it – so if you’ve got a flash-based site it might be time to consider a rebuild.

Sticking to standards compliant platforms doesn’t mean your site has to be boring. HTML5 has a great range of features for creating media and interactive elements which will work equally well on tablets and desktop browsers.

Up, down and sideways

Extending our discussion regarding “the fold” – another important consideration is that the majority of tablet devices have a built-in accelerometer. This means that the user could be holding the device in either a portrait or landscape position, or even switching between. So in addition to having to cater for multiple screen sizes and resolutions, you must also keep in mind different orientations.

The important thing here is to test your site from both orientations, and ensure that important information is visible without having to swipe. Also check for any kind of distortions that may occur as the site is switched between views, and iron out any problems so that the design and content are displayed optimally from both.

Test, test, test

Before you freak out at all the complexities of designing for multiple platforms and quit your web design job – rest assured it’s not THAT hard. The key thing is testing. Get your hands on a tablet device, preferably a couple of different ones if you can i.e an iPad and an Android based tablet, and put your site to the test. Key things you’ll want to consider while testing are: does the design display well? Is navigation simple? Is key content displayed above the fold?

If you don’t have direct access to a tablet, you could head into your nearest Apple store or tech provider and use theirs. Alternatively, there are a number of desktop simulators available online – just be careful to use one that actually renders your site in tablet resolution.

Three ‘no good for tablet’ designs


It’s always helpful to see where other people have gone wrong, it’s what allows (smart) humans to keep moving forward. With that spirit in mind here are three designs which don’t present so well on tablets.

MarcEcko.com


A cool brand with a really cool website, unless you’re viewing on a tablet. Entirely flash-based, it doesn’t cater well at all for mobile devices.

TennesseeTheatre.com


I feel a bit bad throwing the unsuspecting Tennessee Theatre into my ‘bad designs’ section, as their site isn’t that bad. Unfortunately they’ve disobeyed one of the key rules for tablet design though, drop down menus.

Ingenfeld.de


Okay I admit, this one is kind of  a joke – when I searched ‘bad website designs’ this little number was pretty quick to present itself. You name it, this website disobeys it. It’s crowded, has little buttons everywhere and is downright ugly. Be careful, this one might actually make your tablet self destruct.

Tips for awesome tablet design


So we’ve given you plenty to consider when optimizing your site for tablets, along with some examples of what not to do. Now here are some tips to ensure your website looks awesome from the smaller screen.

Push some buttons

As discussed earlier, the human finger is pretty clunky compared to the mouse cursor. Therefore, 16×16 px icons are going to be pretty useless to someone viewing your site on a tablet. As a guide, the average finger can fairly easily click on an area of about 20px. Keep in mind not to go overboard with button size, as you don’t want to present desktop users a site that looks like it was designed for a 3-year-old.

Getting the Type right

Hitting the mark with typography isn’t a simple feat with tablets. On one hand, you don’t want your type too small as it will require users to zoom in, and potentially swipe across if your lines are too long. At the other end of the scale, you don’t want it too large as it will require excessive scrolling. So, achieving text that hits the mark is about more than getting the right font-size. You’ll need to play with the size, line-height/length, and font-face. Until someone comes up with a simple how-to on this, the key is to just play around with it until you achieve something that’s simple to read and doesn’t strain the eye.

Less complicated = better

The less the user has to zoom in and out and scroll around to view your site the better. Keep in mind that if your site design renders well on a desktop – it won’t necessarily render so well on a tablet. The easiest way to achieve a less complicated design effectively is to go through your site and strip out any elements which aren’t absolutely necessary. Doing this will deliver two benefits; firstly it will make your site more tablet friendly, secondly it will in many cases enhance the desktop browsing experience.

It doesn’t have to be a bitter pill

While many of you may be cringing at the number of considerations to be made for tablet design, keep in mind that it’s a good excuse to review and improve your overall site design, and may also make your job more simple in the future. Tablets force designers to utilize limited viewing space more effectively, which means that a lot of unnecessary content and elements are stripped away – leaving a simpler, better looking design with a strong focus on what you want users to see: your core content.

Is your site optimized for tablet viewing?

Additional tablet design resources:
Resource for mobile UI guidelines
Designing specifically for Android tablets
7 Web UI mistakes to avoid for smartphone and tablet

November 08 2011

10:00

An Introduction To Dark Website Design

Dark versus light design has been a long and controversial topic since almost… forever. You probably have read many articles about this matter and you probably have found contradictory facts among them. The truth is that there are no certainties whether you should use a light or dark design on your new layout. However, there are indeed strong indicators that may tell you which version you should be using to provide the majority of your visitors with a better experience.

Since I’m going to give you a personal opinion on how you should build your dark layout, it makes sense for me to first see if you should or should not indeed adopt a dark version for your website.

Dark vs Light background

There are three crucial indicators that should make your life easier when deciding if you should or should not design a dark layout. Most of them are pretty much common sense and should only take a few minutes to analyse.

1) Subject

Are you going to sell clothes? Is it a blog about weddings? Or a vacation planning site? As you may know, color and contrast are associated to feelings and that’s why a very dark gray background may not be suitable on a website that sells vacation plans to the best beaches during the summer.

2) User

Now you should ask yourself:

  • Who is going to visit your website more often
  • What type of person
  • Social level
  • Age

This question is not only useful for the type of contrast and colors you should use on your website or application, it also defines the majority of other question marks like style, minimalism and typography. You may realize that a person in his late 50′s may prefer a light background color, not due to readability (you’ll understand why in the next topic) but maybe because that person is used to visiting light background websites. It’s all about what they do, what they are used to and what they like.

3) Purpose

Will it be a store? Just a blog? Someone’s portfolio? A photo gallery? Always remember that every website has a purpose. If you’re going to sell a product to which you need to emphasize colors (this obviously depends on the type of product) a dark background would suit that purpose better than a light background, however if you’re going to have a news portal with plenty of content, a light background may suit your needs better.

Does the use of dark background really affect readability?

There are contradictory studies and scientific research so all I can give you is my personal opinion which is no, a dark background does not affect readability.

You may be wondering “What are all those sites and articles talking about when authors say dark backgrounds really affects readability? They even give examples!” To answer your question, readability is affected by the use of wrong text color, wrong line-height, kerning and font size, not by the use of a dark background. In the end it’s all about typography and the elements you use, not the background itself. It’s obvious that you just can’t compare a paragraph of text with a line-height set to 0.5 in a light and dark background – you always need to adjust the element you are using to the surrounding background.

I’ll give you tips on how to design a dark layout focusing on elements, I won’t tell you if you should use a #000 or #111 color for your background – that’s irrelevant. I’m going to tell you how you should use and design the elements on your dark background. Again, is all about how you use the elements.

So let’s get started.

White Space

If you have read some of my articles, you know I always touch on this key topic. White-space is there to help in almost every design related topic.

As I said above, you need to suit every element to the condition they are in. In the case of dark layouts, you can actually focus better on each element which gives you the feeling that elements are closer than they really are leading to a cluttering sensation.This is why you need to use white-space effectively. Readability is also favored with more white-space.

White-space

Avoid cluttering more than ever

Consequently related to the white-space topic above, cluttering is something to avoid when you’re using a dark background. Remember that a dark design is more sensitive to content spacing so what may sound enough on a light background may not be the case on a dark one. If you have low to medium content you always need to make efficient use of white-space, however, if you have too much content you should consider separating it through subpages/sections or changing to a light background.

Typography

Typography

Typography is the most sensitive element in any design but especially while using a dark background. It clearly needs to be carefully planned otherwise you will see more and more articles stating that dark backgrounds are bad for readability.

In order to improve readability,  the first thing you can do is increase font-size, line-height, kerning and write in small paragraphs. You may have noticed that all these text options are still related to white-space. Having this said, your second concern should be with the font itself. Should you use sans-serif or serif fonts? Serif fonts are not clean which makes it harder to read with small sizes. This means you should use serif fonts for bigger sizes like titles and sans-serif fonts for small text like paragraphs.

Contrast

I could have written about contrast on the Typography topic above, however, what applies to typography also applies to every other element on your page except for imagery.

So you wake up and you suddenly look up to the sky with a very bright sun-light… you know the feeling right? The same applies to the contrast use on your screen. Using pure white text on pure black background (or vice-versa) will somehow be unpleasant to your eyes. The first basic rule is to never use pure-white/black on the opposite color. Using #ddd for your text and #111 will be more preferable than  #fff text color on #000 background.

Content emphasis

One big advantage while using a dark background is the ability to easily apply emphasis on a desired element like text or image. That’s because in a darker background the focus will be completely transferred to the main elements. You also have more ways to do it than in a regular light background. You could achieve great emphasis using reflections and different blending modes for vivid colors or gradients which are possibilities that would be very difficult or almost impossible to get with a light background.

Background elements

If you’re going to use a dark background, one thing you can do is to make use of background images, textures or patterns. On most cases, images/textures and light backgrounds don’t make a perfect match. Nevertheless, be sure to avoid making your background distracting, focus needs to be on the content.

Conclusion

I believe that everything should be used according to the surrounding elements, so a dark background can have real benefits over light backgrounds when the elements are properly adjusted to it. Some people prefer reading and using light backgrounds and others not so much, as I said there are no certainties so all you can do is to check competition, make some research on your end-user and conclude which option is the best for your business.

Good luck!

September 20 2011

14:34

May 13 2011

10:30

What Color Is Your Money? Showcase of Bank Websites Worldwide

Advertisement in What Color Is Your Money? Showcase of Bank Websites Worldwide
 in What Color Is Your Money? Showcase of Bank Websites Worldwide  in What Color Is Your Money? Showcase of Bank Websites Worldwide  in 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

Produkte-und-Services-Ihrer-Sparkasse 1284468132848-e1284470984910 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Sainsbury’s Bank, United Kingdom Lovethedesign in What Color Is Your Money? Showcase of Bank Websites Worldwide

Personal-Loans-Credit-Cards-Travel-Home-Life-Pet-Insurance-Sainsburys-Finance 1287141192214-e1287141324449 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Citigroup, USA

Citi-Home 1287138832245-e1287139103594 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Absa Bank, South Africa

Absa-Bank-Home-Page-Commercial-Retail-Bank 1284474643858-e1284474732373 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Helm Bank, Panamá

Picture-3-e1287146077711 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Credit Suisse, Switzerland

Credit-Suisse-Wherever-you-are 1284490023964-e1284490204565 in What Color Is Your Money? Showcase of Bank Websites Worldwide

HSBC, United Kingdom / International

Bank-Accounts-Mortgages-Online-HSBC-Bank-UK 1284471072100-e1284471266154 in What Color Is Your Money? Showcase of Bank Websites Worldwide

NAB, Australia Lovethedesign in What Color Is Your Money? Showcase of Bank Websites Worldwide

NAB-National-Australia-Bank 1284448845736-e1284476219944 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Alfa Bank, Russia

Alfa-Bank 1285583156010-e1285583256493 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Citizens Equity First Credit Union, United States

CEFCU-Home-Page 1287141471877-e1287141623344 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Canadian Imperial Bank of Commerce, Canada

Personal-Banking 1287140538066-e1287140668377 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Westpac Bank, Australia

Westpac-Australias-First-Bank 1287140337037-e1287140506247 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Afriland First Bank, Cameroon

Le-partenaire-s R 1284472284459-e1284472406599 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Santander, Brazil

Banco-Santander-Brasil-S A 1284477859720-e1284478077973 in What Color Is Your Money? Showcase of Bank Websites Worldwide

CIM Banque Geneve, Switzerland Lovethedesign in What Color Is Your Money? Showcase of Bank Websites Worldwide

CIM-Banque-Gen C3 A8ve-Votre-Banque-Priv C3 A9e-Suisse-depuis-1990 1284487749826-e1284487985865 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Banca di Roma, Italy

Conti-Carte-Finanziamenti-UniCredit-Banca-di-Roma 1285585177285-e1285585334688 in What Color Is Your Money? Showcase of Bank Websites Worldwide

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
Latvia in What Color Is Your Money? Showcase of Bank Websites Worldwide

Banco de Chile, Chile

Personas-Banco-de-Chile 1287140083268-e1287140807679 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Bank of New Zealand Lovethedesign in What Color Is Your Money? Showcase of Bank Websites Worldwide

BNZ-Internet-banking-home-loans-credit-cards-personal-and-business-finance-Bank-of-New-Zealand-BNZ 1285589425940-e1285589516762 in What Color Is Your Money? Showcase of Bank Websites Worldwide

VTB Bank, Russia

VTB- -World-without-barriers 1284472643668-e1284472825564 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Qatar National Bank, Qatar

QNB-The-Leading-National-Bank-In-Qatar-Home-Page 1284490290731-e1284490427518 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Banca Etruria Group, Italy

Banca-Etruria-Home 1285585662405-e1285585894276 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Royal Bank Canada

Personal-Banking-Advice-you-can-bank-on-RBC-Royal-Bank 1287140368175-e1287140930798 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Siam Commercial Bank, Thailand

Scb Thai 1284475057832-e1284475370115 in What Color Is Your Money? Showcase of Bank Websites Worldwide

BancoSol, Bolivia

BancoSol-Bolivias-best-bank 1285609419524-e1285609629450 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Chase, USA

Personal-Banking-Personal-Lending-Retirement-amp-Investing-Business-Banking 1285431880030-e1285432698543 in What Color Is Your Money? Showcase of Bank Websites Worldwide

China Construction Bank, China

ChinaCB-e1285587945961 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Banque Populaire, France

Banque-Populaire-la-Banque-de-ceux-qui-entreprennent-leur-vie- 1284472033439-e1284472123669 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Deutsche Bank, Germany Lovethedesign in What Color Is Your Money? Showcase of Bank Websites Worldwide

Willkommen-bei-der-Deutschen-Bank-Leistung-aus-Leidenschaft 1284467876933-e1284476127131 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Natixis, France

Natixis-Top-class-banking-and-financial-solutions 1285591995827-e1285592078186 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Valiant, Switzerland

Valiant-Startseite 1284488088363-e1284488369806 in What Color Is Your Money? Showcase of Bank Websites Worldwide

CSOB, Slovakia Lovethedesign in What Color Is Your Money? Showcase of Bank Websites Worldwide

CSOB-Banka 1285591281576-e1285591577502 in What Color Is Your Money? Showcase of Bank Websites Worldwide

CapitalOne, USA

Capital-One-Credit-Cards-Banking-Auto-Loans-Checking-and-Savings-Accounts-and-Small-Business-Credit-Cards 1284470650784-e1284470735235 in What Color Is Your Money? Showcase of Bank Websites Worldwide

ANZ, Australia and New Zealand Lovethedesign in What Color Is Your Money? Showcase of Bank Websites Worldwide

ANZ-Personal-Online-Banking 1284471694119-e1284471797980 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Standard Bank, South Africa

Standard-Bank-Home 1284473448575-e1284473602555 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Bank of Hawaii, USA

Bank-of-Hawaii-Homepage 1285589159703-e1285589297158 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Barclays, England Lovethedesign in What Color Is Your Money? Showcase of Bank Websites Worldwide

Personal-Banking-from-Barclays-Barclays 1284476379198-e1284476580193 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Emirates NBD, United Arab Emirates

Emirates-NBD-Personal-Banking 1285590250119-e1285590362111 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Hungarian Development Bank, Hungary

Hungary MFB 1285590942384-e1285591021824 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Delta Community Credit Union, United States

Delta-Community-Credit-Union-Headquartered-in-Atlanta-Georgia 1287141678376-e1287141818967 in What Color Is Your Money? Showcase of Bank Websites Worldwide

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 Lovethedesign in What Color Is Your Money? Showcase of Bank Websites Worldwide

28-GMT 0200-CET 1286892460303-e1286892606351 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Kookmin Bank, Korea

Kbstar-e1285584847705 in What Color Is Your Money? Showcase of Bank Websites Worldwide

ING DiBa, Germany Lovethedesign in What Color Is Your Money? Showcase of Bank Websites Worldwide

Girokonto-Festgeld-Baufinanzierung-Kredite-Wertpapiere-ING-DiBa 1284467516117-e1284473263585 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Commonwealth Bank Australia Lovethedesign in What Color Is Your Money? Showcase of Bank Websites Worldwide

Home-Page-Commonwealth-Bank-Group 1284448960248-e1284473399816 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Bank of Ayudhya, Thailand

Krungsri Com 1284475514430-e1284475902746 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Attijariwafa Bank, Morocco

Attijariwafa-bank-Accueil- 1287141897721-e1287142106528 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Commerzbank, Germany

Commerzbank-Homepage 1285590074792-e1285590187100 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Bankinter, Spain

BankinterBanca-de-particularesInversiones-Financiaci NInicio 1284477086104-e1284477181665 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Falkenbergs Sparbank, Sweden

Falkenbergs-Sparbank 1285590435403-e1285590529834 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Banco do Brasil

Bb Com Br 1284477529628-e1284477652334 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Pireaus Bank, Egypt

Welcome-To-Piraeus-Bank-Egypt 1284490407262-e1284490648706 in What Color Is Your Money? Showcase of Bank Websites Worldwide

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 Lovethedesign in What Color Is Your Money? Showcase of Bank Websites Worldwide

Nedbank-Home 1284474492971-e1284474580268 in What Color Is Your Money? Showcase of Bank Websites Worldwide

SBERBANK, Russia

Sbrf-e1285583510667 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Magyar Nemzeti Bank, Hungary

Magyar-Nemzeti-Bank 1286889544975-e1286889666685 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Appenzeller Kantonalbank, Switzerland

APPKB-Appenzeller-Kantonalbank 1284488779339-e1284489013736 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Banco Azteca, Panamá

Banco-Azteca-Panam -Tu-sucursal-Personal 1287145121417-e1287145260542 in What Color Is Your Money? Showcase of Bank Websites Worldwide

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

BNL-BNP-Paribas-Welcome-Welcome 1285585386122-e1285585501690 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Islamic Bank of Thailand

ISLAMIC-BANK-OF-THAILAND 1284475494807-e1284475694722 in What Color Is Your Money? Showcase of Bank Websites Worldwide

First National Bank, South Africa

Home-First-National-Bank-FNB 1284473682215-e1284474011997 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Kenya Commercial Bank

KCB-Kenya-Home 1284478242469-e1284478370669 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Israel Discount Bank

Israel Hebrew-e1285591249902 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Crédit Agricole, France Lovethedesign in What Color Is Your Money? Showcase of Bank Websites Worldwide

Cr Dit-Agricole-CIB-Corporate-and-Investment-Banking- -Cr Dit-Agricole-CIB 1285587363715-e1285587672219 in What Color Is Your Money? Showcase of Bank Websites Worldwide

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 Lovethedesign in What Color Is Your Money? Showcase of Bank Websites Worldwide

Macquarie-Group-Australia 1285591645695-e1285591822156 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Bank of England, United Kingdom

Bank-of-England-Home 1286890738641-e1286890857456 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Rand Merchant Bank, South Africa

RMB-Traditional-values -Innovative-ideas 1285592518061-e1285592602383 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Central Bank of Libya

Central-Bank-Of-Libya-Home-Page 1286889965680-e1286890066546 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Banco de España, Spain

Spain in What Color Is Your Money? Showcase of Bank Websites Worldwide

SKB Banka, Slovenia

Osebne-finance-SKB 1285607433160-e1285607570286 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Central Bank of Bahrain

Central-Bank-of-Bahrain 1286888552526-e1286888707823 in What Color Is Your Money? Showcase of Bank Websites Worldwide

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)

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.

Don't be the product, buy the product!

Schweinderl