Chinese design for westerners - Lu Yu - Codemotion Amsterdam 2016

CHINESEDESIGNforWESTERNERS
@LUGOTYPELUYUluyu.co
CO D E M OT I O N, A M S , 2 0 1 6
@lugotype
Chinese Design
forWesterners

1.38billion
Population in 2016
nearly 20% of the world population

$307billion
Online retail market sale in 2013
the world’s largest online retail market

$630billion
Online retail market sale in 2015
the world’s largest online retail market

$9.3billion
Alibaba Group Holdings Online retail sale on 11 Nov. 2014
assume you spend $1 every second, you’ll
need 295.24 years to spend that money

$14.3billion
12 hours time taken to beat 2014 whole-day
record of $9.3bn
Alibaba Group Holdings Online retail sale on 11 Nov. 2015

$1,000,000,000,000
Online retail market sale in 2019:
Forrester, Feb. 2015

Excitedaboutdesigning
fortheChinesemarket?
Thinktwice.

C H A L L E N G E S 1 :
It’smorethan
atranslation

culture
aesthetics
technology
psychology
&more

Chrome: 38.43%
IE 8.0: 20.49%
IE 9.0: 5.81%
IE 7.0: 5.01%
Sogou: 4.12%
QQ: 3.38%
2345: 3.31%
IE 6.0: 3.07% ← That’s 43m people
Desktop Browser Market Share
1 O C T. 2 0 1 5 - 3 1 M A R 2 0 1 6
Source: tongji.baidu.com

Desktop OS Platform Market Share
1 O C T. 2 0 1 5 - 3 1 M A R 2 0 1 6
Win 7: 51.81%
Win XP: 32.65%
Win 8: 5.46%
Win 10: 4.26%
Mac Os: 0.8%
Other: 5.02%
Source: tongji.baidu.com

All websites with their own domain name that operate
inside China are required to obtain an Internet Content
Provider (ICP) number. Without ICP, your website can
be shut down by the hosting provider with no notice.
Telecommunications Regulations of the
People’s Republic of China
So, can I have a website in China?

http://www.miibeian.gov.cn/

A‘targetaudience’
youcan’tpredict

Mandarin
Jin
Wu
Hui
Gan
Xiang
Min
Hakka
Yue
Ping
Harbin
Shenyang
Beijing
Hohhot
Taiyuan
Nanjing
Shanghai
HangzhouWuhan
Taipei
Fuzhou
Nanchang
Changsha
Guangzhou
Hong Kong
Nanning
Kunming
Chengdu
Chongqing
Xi'an
Lanzhou
Urumqi

世界上大约有五分之一人口以汉语为母语，
主要集中在中国大陆。同时在海外华人当中
使用。不过，不同汉语系之间不一定能互通，
不同汉语系的人之间一般人会使用汉语标
准语（中华人民共和国称为普通话，中华民
国称为国语、东南亚称为华语）来通话。
世界上大約有五分之一人口以漢語為母語，
主要集中在中國大陸。同時在海外華人當中
使用。不過，不同漢語系之間不一定能互通，
不同漢語系的人之間一般人會使用漢語標
準語（中華人民共和國稱為普通話，中華民
國稱為國語、東南亞稱為華語）來通話。
Mainland China and SingaporeTaiwan, Hong Kong, and much of the
Chinese oversea community
T R A D I T I O N A L S I M P L I F I E D

More than
3000 years!
Traditional
Chinese
Simplified
Chinese

Thegigantic
charactersets

106,230
Yitizi Dictionary(2004)
Biggest collection of Chinese Characters

10,000
Standard Chinese character set
Unique characters

3,000
Standard Chinese character set
Commonly used

20,000+
Simplified Chinese pro font

3-10mb
Font file size per font weight
Almost impossible for web embedding.

Hiragino Sans GB (Snow Leopard)
STHeiti Light/STXhei
STHeiTi
STKaiti
STSong
STFangsong
PingFang (El Capitan)
SimHei
SimSun
NSinSun
FangSong
KaiTi
FangSongGB2312
KaiTiBG2312
Microsoft YaHei (Windows 7)
W I N D O W S O S X

“The generally preferred practice is to not
specify any Chinese font styles in the body
paragraph CSS... Doing this allows the
browsers to choose the best font available to
display for optimised legibility.”
Zenan Liu, 5 High Quality Chinese Webfont
services for your next Chinese web project

在这个段落里，吘的字体和其他字不一样

images source: ziwwwo.com

“ S O L U T I O N S ”
flash, images, icon fonts
D I S A D V A N TA G E S
Takes more time to produce;
not dynamic, harder to maintain;
doesn’t support selecting, copying, searching or translating;
requires more data downloading and bandwidth
accessibility issues

“When you add an East Asian font family to your kit, it will
automatically become what we call a dynamic kit. In a dynamic
kit, you’ll have a new Character Set option in the kit editor called
Dynamic Subsetting. When your dynamic kit JavaScript loads in the
browser, it will detect your page’s character usage and request a
dynamic subset for the glyphs needed for each member of the family.
This makes for very small fonts, with incredibly fast load times.”
-Adobe typekit blog
Dynamicsubsetting
http://blog.typekit.com/2015/06/15/announcing-east-asian-web-font-support/

S E R V I C E S
Adobe Typekit
Fonts.com
JustFont
Youziku
ifontCloud
TypeSquare

C H A L L E N G E 4 :
Workingwith
Chinesetypography

L AT I N A L P H A B E T S C H I N E S E C H A R A C T E R S

Source Sans Pro - Light Source Han Sans CN - Light
G
G
龘
龘10% size
100% size

英语
no uppercase/lowercase
no baseline;
no ascenders nor descenders

no space for word separation,
no hyphenation
PA R A G R A P H

世界上大约有五分之一人口以汉语为母
语，主要集中在中国大陆。同时在海外华
人当中使用。不过，不同汉语系之间不一
定能互通，不同汉语系的人之间一般人会
使用汉语标准语（中华人民共和国称为普
通话，中华民国称为国语、东南亚称为华
语）来通话。
PA R A G R A P H

!),.:;?]}¢·–— ’”•‥„‧ †╴ 、。〆〈《
「『〕〞︰︱︲︳︵︷︹︻︽︿﹁﹃﹏﹐
﹑﹒﹔﹕﹖﹘﹚﹜！），．：；？］｜｝､
!%),.:;>?]}¢¨°·ˇˉ―‖’”„†‡›℃∶
、。〃〆〈《「『〕〗〞︵︹︽︿﹃﹘﹚﹜！＂％
＇），．：；？］｀｜｝～
([{£¥‘“‵々〇〉》」〔〝︴︶︸︺︼︾﹀﹂
﹗﹙﹛（｛
$(*,£¥·‘“〈《「『【〔〖〝﹗﹙﹛＄（．［｛￡￥
Characters that are not allowed at the start of a line : Characters that are not allowed at the start of a line :
Characters that are not allowed at the end of a line : Characters that are not allowed at the end of a line :
T R A D I T I O N A L S I M P L I F I E D

R E A D I N G D I R E C T I O N
1
2

R E A D I N G D I R E C T I O N
2
1

C H A L L E N G E 5 :
Thedesign
aesthetics

busy
cluttered
lots of links
many flash banners
images are small
outdated

Why?
Comparing with many western countries, the
‘Internet’ was introduced later to China.
Web design is not as mature.

3.4mb/s 3.8mb/s
World average: 3.9mb/sWorld average: 3.8mb/s
A K A M A I 2 0 1 3 A K A M A I 2 0 1 4

It takes a lot of effort to
type Chinese.
“shi”

Wait - is cluttered design
a Chinese thing?

Those busy designs make you feel that there are
a lot of possibilities, choices & entertainment values
to be explored.
They do a great job solving users’ problems.

We are familiar with busy designs, and have
higher tolerance. But we don’t like it either!

http://liulanqi.baidu.com/

http://www.tbclub.net/case18.html

http://se.360.cn/

http://www.smartisan.com/

Thankyou!
Slide set in Freight Display Pro, Filson Pro, Source Sans Pro, Source Han Sans CN, Source Han Sans TW
T H A N K YO U F O R YO U R S U P P O R T <3
@lugotype

Chinese design for westerners - Lu Yu - Codemotion Amsterdam 2016

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (18)

More from Codemotion

More from Codemotion (20)

Recently uploaded

Recently uploaded (20)

Chinese design for westerners - Lu Yu - Codemotion Amsterdam 2016