Designing Cross-Cultural Websites

Creative Brand Design, a leading web design agency, has curated a few tools and resources that you can use to help you understand what localisation is and how it’s used in the context of your web design.

As the world continues to become more interconnected, so too grows the need for designers to consider how their designs impact the digital experience of those who engage with it. Take buying a phone for example. Buying an iPhone 13 will always result in the same end product; an iPhone 13. However, the digital journey that a user in England experiences in comparison with a user in China may very well differ substantially. The content will be translated into the appropriate language, colours and copy justification will need to be considered for cultural nuance, and the site itself will need to rank on SERPs (Search Engine Results Pages) across different countries.

When researching options to ensure your business can receive the most inclusive website possible, looking into how cross-cultures are also implemented can feel like an intimidating feat. Creative Brand Design, a leading web design agency, has curated a few tools and resources that you can use to help you understand what localisation is and how it’s used in the context of your web design.

“Localization is more than just writing your content in multiple languages. You need a strategy to determine what localization to send, and code to do it.” – Sam Richard

Creating a culturally inclusive site goes far beyond changing the language used.

What is localisation?

Localisation is the practice of adapting a website to meet the needs and expectations of multiple target cultures such as English and Chinese. When undertaking the localisation of any given website, some key things need to be considered before you put your fingers to the keyboard:

  • Cultural nuance and client segments
  • Colour psychology in relation to the cultures you’re targeting
  • Linguistic differences
  • Imagery
  • Typography 

Cultural Nuance and Client Segments

Photography by Haseeb Jamil

Considering cultural nuance when designing a localised website is key. Understanding the markets that you are looking to target is the first step to understanding how they behave and what they’re looking for.

If you already have an established product, marketing strategy and design in an existing country, use your current marketing and design strategies as a base to build from.

In the UK and United States, they don’t typically put an enormous amount of pressure on getting married, settling down, having children, or living with/away from parents. However, they do encourage establishing a good education, exploring the world, travelling, socialising and nights out with friends.

Other cultures will value settling down, getting married, having a stable and secure career and looking after parents as soon as possible. You can use this research to inform the type of imagery and marketing you will use throughout your website design to encourage action from your users. A picture of marital, familial bliss may not be so attractive to a young, university-leaving customer in the UK or the US, but it might be the cultural and societal ideal for a university leaver in other cultures. 

Cultural Colour Psychology 

red boat near mosque painting
Photography by Mg Cthu

This is a bigger player than you might think. In Europe for example they see yellow to be a happy, exciting and joyful colour. It evokes feelings of happiness and pictures of sunshiny days and flowering daffodils. However, if your website and branding is heavily yellow leaning and you are looking to break through into the Latin market, you may want to reconsider or adapt how you use that yellow throughout your branding. Latin cultures may associate yellow with mourning, loss and times of grieving. In Eastern and Asian cultures, yellow is often worn by, and reserved for, members of the ruling class; it is believed to be sacred.

Offending your prospective clients before you’ve even had the chance to say ‘hello, there!’ does not make for a successful design strategy.

Language & Linguistics

Image by Eugenia Shustikova

The translation is one aspect of localisation and probably one of the most fundamental – without being fully understood by the audience, you stand no chance of succeeding in any international market.

Believe it or not, Google translate is not your friend. We all had it hammered into us in language classes in school, and I’m here to tell you that your teacher was right – sorry! Google translate is not a reliable source of translation and can often result in causing accidental offences!

Hiring a reputable translator, preferably with your target language as their mother tongue, is an excellent place to start when it comes to translation. Why is this third on the list if it’s so important? Well, because very simply, hiring a good translator isn’t always very cheap. Understanding your client base and how they want to be spoken to and how they want to engage with your content will help to keep revisions of your content – and therefore translations – to a minimum.

More commonly, English speaking companies are opting for using “they/them” pronouns in their marketing and advertising materials to avoid offending or excluding anyone who might be reading their content. Your product may be specifically female/male targeted and this may not be appropriate in your target market’s culture. You will need to consider the genders of certain words (for example German, French, Italian and Spanish languages all use gendered pronouns for objects and people alike) and make sure that they’re appropriately used throughout your content.

Ensuring that your language is appropriate for your audience, correctly written, and well structured will also help to boost your SEO rankings in your new market’s SERPs. 

Visual Elements

MacBook Pro showing vegetable dish
Image by Igor Miske

They say a picture is worth a thousand words, and as it tends to be one of the first things people look at when a page loads it’s essential to make sure that it sets the right tone and thoughts for the site.

For example, a single slice of bacon could be mouthwatering for some, but highly offensive and derogatory to those where eating pork is prohibited.

Also, it’s worth considering how a person is represented in the image when designing a product for a specific culture. Although it may seem obvious to some – make sure that the image you include accurately represents the people of that specific culture.

The last thing you would want to end up doing is accidentally offending someone due to poor research or consideration! 

Different Fonts

Image by Mika Baumeister

‘It’s not what you say it’s how you say it’ – especially when it comes to font styles. Languages such as Chinese, Japanese, and Hebrew or just some of the more visually detailed languages with varying ligatures often use more pixels than the Latin alphabet we are used to.

When translating from one language to another you could encounter a variety of different issues such as text expansion or decrease! By this, we refer to the amount of space different languages take up.

Take Creative Brand Design’s name for example. In English it is a three-word name, however when translated into languages such as Polish, Chinese, or German you can see there are varying amounts of space required or even different ligatures. –

Polish: Kreatywne projektowanie marki
Chinese: 創意品牌設計
German: Kreatives markendesign
Italian: Design creativo del marchio

“Without the right font for the right language, the design of an app can quickly be destroyed.” – Google on Noto fonts

If you’re looking for a font that would harmonise across any written language Google has answered your question! Noto was released in over 1000 different languages to help.

Localising your text elements

Photography by Marco Zuppone

One thing that is worth bearing in mind is how each text appears on the page. For the majority of western languages such as Spanish, English and French, we read from left to right. However, there are many languages that are written from right to left and even further still some languages such as Japanese read vertically from top-down.

As you can imagine – changing the layout to account for this can have extreme implications! So if you are looking at localising your design, it’s worth keeping in mind how the design itself will be affected by the change of language!

Conclusion

No matter how you look at it – culture is complex. It differs from one part of the world to the next and even sometimes within the same country, and just like language it’s ever-evolving and changing.

At its core, it boils down to scalability. Designing and building features with scalability in mind can help navigate some of the hurdles when looking at localising your website and products.

Stay in the loop: Get your dose of frontend twice a week

👾 Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, website inspo, cool code demos, videos and UI animations right to your inbox.

Zero fluff, all quality, to make your Mondays and Thursdays more creative!