Web Design from Around the World: News
As we know website design changes constantly with emerging new trends every year as technology evolves. Lately I have been curious how web design differs around the world. Are they the same? Maybe for some countries are the designs completely different to cater to their language? In this blog post, I will investigate different news websites to see how they display multiple news articles and the articles themselves.
English
Homepage
The BBC news website is one of the major new outlets in the United Kingdom. They have opted for a traditional Western website design with a clean design and colour scheme with sufficient white spacing between articles in a grid view layout. Each section has a distinct heading to separate each section on the news homepage. With a lot of content for the user to digest, the homepage is image-heavy making it easier for the user to find an article of their interest. The site uses a lot of iconography throughout the site such as the timestamp, video play icon to indicate a video and local news search.
News Article
The news article itself uses a column layout with the main content on the left and related content such as featured news, most read and top news on the right. Each article is tagged with a relevant category for filtering purposes. Social network icons are placed at the top to encourage users to share the news article on social media platforms. The content is carefully laid out with sufficient use of heading in between sections.
Summary
The web design application of the BBC News website shows typical design principles used across western websites with clean and clear colour schemes with everything needing a click to proceed with no use of animations to add that level of interactivity.
Chinese
Chinese: http://www.xinhuanet.com/
English: http://www.xinhuanet.com/english
Homepage
The homepage of this Chinese news website first strikes you with the amount of text when compared to the English version of the site. Majority of the articles are in a list with headings and sub-text. The homepage does feature a content slider on the right, which displays the latest news with the heading below the image. The site also features a few text scroller, which I have not seen since during the dot.com boom era. There is a hover zoom function for the image in the ‘In-depth’ section of the homepage. As you scroll further down the page, you start to notice features such as the image and text grid layout, which we see in western web design. However, they have added interactivity so when you hover over an icon it shows more options. There are uses of gifs as video thumbnails, which solidifies the popular use of animations or flash.
News Article
The content is displayed in a blog-like layout with no images, but with a Header, date and time of post at the top. There is a social media share button and QR code on the left which goes against the western convention of placing social media icons on the right or below the heading. Related articles are listed below the content with a load more button as well.
English Version
When you look at the English version of the site, you can see the layout caters for the western views with the layout taking a drastic change. The layout of the homepage is imagery driven with a typical grid layout. Each card has an image and heading with each category sectioned and plenty of white space around each feature. The news article itself has an image in the news article which is completely different from the Chinese version of the website. The share buttons are also located below the heading and at the bottom of the article.
Summary
When viewing the Chinese version of this Chinese news website, the content is more text-heavy than western websites with a few images on display. There is a lot of use of animations such as a text scroller and GIFs. The use of animation is heavy which causes the user to explore the website more to see if buttons have a level of interactivity. When viewing the English version, the website changes drastically to accommodate a western audience so the navigation and location of items are familiar to other western sites so they don’t have the need to learn another culture.
Japanese
Japanese: https://mainichi.jp/
English: https://mainichi.jp/english/
Homepage
The Japanese website shows a more organised structure with clear line breaks separating each content item unlike the Chinese website, which doesn’t use a line break in between each content item. The homepage is text-heavy with a few images used on the homepage however, this website has no use of flash or animations apart from the use of a slider.
News Article
The news article page consists of a header, date and time of the post with a header video or image. The main copy follows underneath with the social icons on the right of the copy which follows the users’ scroll in between the header and the suggested articles at the bottom of the page. The use of social media icons is unusual as the share function is only fixed to the length of the copy. While in western web design they tend to be fixed to the whole length of the page. The right-hand side features the top news and related news articles similar to the BBC website.
English Version
When visiting the English version the layout changes to suit western users with a grid layout used. At the bottom, the website uses a list item feature which is similar to the Japanese version. The news article layout has not changed from the Japanese version with the social media icons fixed to the length of the copy.
Summary
The Japanese website has a more structured layout for each piece of content with the use of line breaks. This makes it easier on the eyes to determine a single content among the many links on the page. The website is still text hyperlink heavy although the pages do feature images, consequently the homepage is crowded with links and information enough to overload the user. The news articles themselves are much simpler with a clean layout. The only strange application is the use of the share icons, which is fixed to the length of the news copy and not the whole page which is a little different from how western design applies fixed share links.
Arabic
Arabic: https://www.alarabiya.net
English: https://english.alarabiya.net/
Homepage
The layout used on the Arabic website is something similar to western news websites with the use of an image grid layout. The page features a lot of sections which are clearly defined by either a shade of grey or white background with a title on the right-hand side which caters to the Arabic language as they read from the right, the text is also right-aligned to cater for this as well. As the Arabic user reads from the right so that affects the location of logos, search, menu and social media icon placement. Typically, in western web design the logo is located on the left with the menu, search and social icons located on the right, however this is inverted for Arabic sites. The logo is located on the right with the search and the hamburger menu located on the left.
News Article
The news article matches the look and feel of western design with clear white spacing around items giving enough breathing room. The font size is larger than usual font sizes used on western or Asian websites, the reason could be that the curves and dashes in the Arabic language are important as they could dictate the meaning of a word from a similar character. The related/suggested news articles are located on the left to cater to the reading direction of the Arabic language. The data and time of the post are also inverted from the right to left.
English Version
The English version of the website follows the western convention of text direction and web design practices such as text is left-aligned as well as the location of the logo and search are placed in their typical location. The English website has an auto-rotate content slider, which the Arabic version does not have and the English site features subtle animation such as the animated latest news ticker banner. The style has also changed slightly by incorporating a ribbon look for their headings but each section is defined by drop shadows and off the white colour background.
The new articles have changed to follow western design practices with the suggested topics on the right and the font size following the usual font size of English websites. The date and time have changed to follow the reading convention of the English language.
Summary
Arabic websites follow the design principles of western websites, however they adapt to cater for their language needs and audience such as reading from right to left, which affects the placement of key features such as logo, search, share icons and suggested news articles. Another aspect of the Arabic website is the font size is much larger than the typical English website due to the importance of the Arabic words being clear of what word is being used due to the complexity of the Arabic language.
Conclusion
As you can see web design trends and practices differ between countries depending on their language and how their audience prefer their content to be displayed. From the findings, East Asian websites consist of more text and less imagery. This could be due to the fact that both Chinese and Japanese complex characters use more characters to explain something, this means their headings and subheadings may result in more characters than the English translation. Another reason is that the Chinese or Japanese audience may just want access to the information straight away without any distractions from images. Their homepages seem to be an overload of hyperlinks and information which overwhelms when you first load up the page. However, the Japanese website seems to have some kind of structure/order that helps the audience to define sections. The Chinese site uses a lot more animation and flash features such as scrolling tickets and gifs to make the page more interactive and encourage the user to explore the site.
The Arabic site takes more of a Western approach of using similar design philosophies such as card and grid layout with images along with sufficient white spacing in between features. Thereby allowing the site to be more clean and simple to display content and images. They have adapted the design philosophies to cater to their unique language. Considering their culture reads from right to left, their websites have inverted traditional web practices such as placement of logos, search and social media icons. The font size has increased to allow the audience to see the characters and determine the individual characters when compared to other websites from different countries.
A surprising aspect I have found is that the English versions of the site are completely different from the native websites. This shows web designs do not just create a straight like for like but with translated content, they completely change the design and layout to suit the western audience allowing users to navigate with ease. If they did not, users would need to learn a new way to navigate a site which might create a lot of pain points throughout their experience. When creating websites for countries we need to consider the audience, culture and language in order to create a website that suits their needs and not just create a like for like translated website to create seamless web experience.