Chinese Design for Westerners

Chinese Design for Westerners @ AmpersandConf

Transcript

1. C H I N E S E D E S I G N for W E S T E R N E R S @ L U G O T Y P E LU Y U luyu.co A M P E R SA N D,B R I G H TO N, 2 0 1 5 @lugotype Chinese Design for Westerners
2. 1.4 billion Population in 2015 more than 20% of the world population C H I N E S E D E S I G N for W E S T E R N E R S @ L U G O T Y P E LU Y U luyu.co
3. $307 billion Online retail market sale in 2013 the world’s largest online retail market C H I N E S E D E S I G N for W E S T E R N E R S @ L U G O T Y P E LU Y U luyu.co
4. $9.3 billion 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 C H I N E S E D E S I G N for W E S T E R N E R S @ L U G O T Y P E LU Y U luyu.co
5. $14.3 billion 12 hours time taken to beat 2014 whole-day record of $9.3bn Alibaba Group Holdings Online retail sale on 11 Nov. 2015 C H I N E S E D E S I G N for W E S T E R N E R S @ L U G O T Y P E LU Y U luyu.co
6. $1,000,000,000,000 Online retail market sale in 2019: Forrester, Feb. 2015 C H I N E S E D E S I G N for W E S T E R N E R S @ L U G O T Y P E LU Y U luyu.co
7. Excited about designing for the Chinese market? Think twice. C H I N E S E D E S I G N for W E S T E R N E R S @ L U G O T Y P E LU Y U luyu.co
8. C H A L L E N G E S 1 : It’s more than a translation C H I N E S E D E S I G N for W E S T E R N E R S @ L U G O T Y P E LU Y U luyu.co
9. culture aesthetics technology psychology &more C H I N E S E D E S I G N for W E S T E R N E R S @ L U G O T Y P E LU Y U luyu.co
10. C H I N E S E D E S I G N for W E S T E R N E R S @ L U G O T Y P E LU Y U luyu.co
11. C H A L L E N G E S 2 : A ‘target audience’ you can’t predict C H I N E S E D E S I G N for W E S T E R N E R S @ L U G O T Y P E LU Y U luyu.co
12. Mandarin Jin Wu Hui Gan Xiang Min Hakka Yue Ping Harbin Shenyang Beijing Hohhot Taiyuan Nanjing Shanghai Hangzhou Wuhan Taipei Fuzhou Nanchang Changsha Guangzhou Hong Kong Nanning Kunming Chengdu Chongqing Xi'an Lanzhou Urumqi C H I N E S E D E S I G N for W E S T E R N E R S @ L U G O T Y P E LU Y U luyu.co C H I N E S E D E S I G N for W E S T E R N E R S @ L U G O T Y P E LU Y U luyu.co
13. 世界上大约有五分之一人口以汉语为母语， 主要集中在中国大陆。 同时在海外华人当中 使用。 不过， 不同汉语系之间不一定能互通， 不同汉语系的人之间一般人会使用汉语标 准语 （中华人民共和国称为普通话， 中华民 国称为国语、 东南亚称为华语） 来通话。 世界上大約有五分之一人口以漢語為母語 ， 主要集中在中國大陸 。 同時在海外華人當中 使用 。 不過 ， 不同漢語系之間不一定能互通 ， 不同漢語系的人之間一般人會使用漢語標 準語 （中華人民共和國稱為普通話 ， 中華民 國稱為國語 、 東南亞稱為華語） 來通話 。 Mainland China and Singapore Taiwan, 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 C H I N E S E D E S I G N for W E S T E R N E R S @ L U G O T Y P E LU Y U luyu.co C H I N E S E D E S I G N for W E S T E R N E R S @ L U G O T Y P E LU Y U luyu.co
14. More than 3000 years! Traditional Chinese Simplified Chinese C H I N E S E D E S I G N for W E S T E R N E R S @ L U G O T Y P E LU Y U luyu.co
15. C H A L L E N G E S 3 : The gigantic character sets C H I N E S E D E S I G N for W E S T E R N E R S @ L U G O T Y P E LU Y U luyu.co
16. 106,230 Yitizi Dictionary(2004) Biggest collection of Chinese Characters C H I N E S E D E S I G N for W E S T E R N E R S @ L U G O T Y P E LU Y U luyu.co
17. 10,000 Standard Chinese character set Unique characters C H I N E S E D E S I G N for W E S T E R N E R S @ L U G O T Y P E LU Y U luyu.co
18. 3,000 Standard Chinese character set Commonly used C H I N E S E D E S I G N for W E S T E R N E R S @ L U G O T Y P E LU Y U luyu.co
19. 20,000+ Simplified Chinese pro font C H I N E S E D E S I G N for W E S T E R N E R S @ L U G O T Y P E LU Y U luyu.co
20. 3-10mb Font file size per font weight Almost impossible for web embedding. C H I N E S E D E S I G N for W E S T E R N E R S @ L U G O T Y P E LU Y U luyu.co
21. 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 C H I N E S E D E S I G N for W E S T E R N E R S @ L U G O T Y P E LU Y U luyu.co C H I N E S E D E S I G N for W E S T E R N E R S @ L U G O T Y P E LU Y U luyu.co
22. “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 C H I N E S E D E S I G N for W E S T E R N E R S @ L U G O T Y P E LU Y U luyu.co
23. images source: ziwwwo.com C H I N E S E D E S I G N for W E S T E R N E R S @ L U G O T Y P E LU Y U luyu.co C H I N E S E D E S I G N for W E S T E R N E R S @ L U G O T Y P E LU Y U luyu.co
24. “ S O L U T I O N S ” flash or images(svg) 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 C H I N E S E D E S I G N for W E S T E R N E R S @ L U G O T Y P E LU Y U luyu.co
25. “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 Dynamic subsetting http:/ /blog.typekit.com/2015/06/15/announcing-east-asian-web-font-support/ C H I N E S E D E S I G N for W E S T E R N E R S @ L U G O T Y P E LU Y U luyu.co
26. S E R V I C E S Adobe Typekit Fonts.com JUSTFONT Youziku ifontcloud C H I N E S E D E S I G N for W E S T E R N E R S @ L U G O T Y P E LU Y U luyu.co
27. C H A L L E N G E 4 : Working with Chinese typography C H I N E S E D E S I G N for W E S T E R N E R S @ L U G O T Y P E LU Y U luyu.co
28. 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 C H I N E S E D E S I G N for W E S T E R N E R S @ L U G O T Y P E LU Y U luyu.co C H I N E S E D E S I G N for W E S T E R N E R S @ L U G O T Y P E LU Y U luyu.co
29. Source Sans Pro - Light Source Han Sans CN - Light G G 龘 龘 10% size 100% size C H I N E S E D E S I G N for W E S T E R N E R S @ L U G O T Y P E LU Y U luyu.co C H I N E S E D E S I G N for W E S T E R N E R S @ L U G O T Y P E LU Y U luyu.co
30. 英 语 no uppercase/lowercase no baseline; no ascenders nor descenders C H I N E S E D E S I G N for W E S T E R N E R S @ L U G O T Y P E LU Y U luyu.co C H I N E S E D E S I G N for W E S T E R N E R S @ L U G O T Y P E LU Y U luyu.co
31. 世界上大约有五分之一人口以汉语为母语， 主要集中在中国大陆。 同时在海外华人当中 使用。 不过， 不同汉语系之间不一定能互通， 不同汉语系的人之间一般人会使用汉语标 准语 （中华人民共和国称为普通话， 中华民 国称为国语、 东南亚称为华语） 来通话。 no space for word separation, no hyphenation PA R A G R A P H C H I N E S E D E S I G N for W E S T E R N E R S @ L U G O T Y P E LU Y U luyu.co C H I N E S E D E S I G N for W E S T E R N E R S @ L U G O T Y P E LU Y U luyu.co
32. 世界上大约有五分之一人口以汉语为母语， 主要集中在中国大陆。 同时在海外华人当中 使用。 不过， 不同汉语系之间不一定能互通， 不同汉语系的人之间一般人会使用汉语标 准语 （中华人民共和国称为普通话， 中华民 国称为国语、 东南亚称为华语） 来通话。 grid PA R A G R A P H C H I N E S E D E S I G N for W E S T E R N E R S @ L U G O T Y P E LU Y U luyu.co C H I N E S E D E S I G N for W E S T E R N E R S @ L U G O T Y P E LU Y U luyu.co
33. !),.:;?]}¢·–— ’ ” •‥„‧ †╴ 、 。〆 〈 《 「 『〕 〞 ︰︱︲︳︵︷︹︻︽︿﹁﹃﹏﹐ ﹑﹒﹔﹕﹖﹘﹚﹜！） ， ． ： ； ？］ ｜｝ ､ !%),.:;>?]}¢¨°·ˇˉ―‖’ ” „†‡›℃∶ 、 。 〃〆 〈 《 「 『〕 〗 〞 ︵︹︽︿﹃﹘﹚﹜！ ＂％ ＇） ， ． ： ； ？ ］ ｀｜｝ ～ ([{£¥ ‘ “‵々〇〉 》 」 〔 〝︴︶︸︺︼︾﹀﹂ ﹗﹙﹛ （ ｛ $(*,£¥· ‘ “ 〈 《 「 『 【 〔 〖 〝﹗﹙﹛＄ （． ［ ｛￡￥ 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 C H I N E S E D E S I G N for W E S T E R N E R S @ L U G O T Y P E LU Y U luyu.co C H I N E S E D E S I G N for W E S T E R N E R S @ L U G O T Y P E LU Y U luyu.co
34. R E A D I N G D I R E C T I O N 1 2 C H I N E S E D E S I G N for W E S T E R N E R S @ L U G O T Y P E LU Y U luyu.co C H I N E S E D E S I G N for W E S T E R N E R S @ L U G O T Y P E LU Y U luyu.co
35. R E A D I N G D I R E C T I O N 2 1 世界上大约有五分之一人口以汉语为母语， 主要集中在中国大陆。 同时在海外华人当中 使用。 不过， 不同汉语系之间不一定能互通， 不同汉语系的人之间一般人会使用汉语标 准语 （中华人民共和国称为普通话， 中华民 国称为国语、 东南亚称为华语） 来通话。 C H I N E S E D E S I G N for W E S T E R N E R S @ L U G O T Y P E LU Y U luyu.co C H I N E S E D E S I G N for W E S T E R N E R S @ L U G O T Y P E LU Y U luyu.co
36. C H I N E S E D E S I G N for W E S T E R N E R S @ L U G O T Y P E LU Y U luyu.co
37. C H I N E S E D E S I G N for W E S T E R N E R S @ L U G O T Y P E LU Y U luyu.co
38. C H A L L E N G E 5 : The design aesthetics C H I N E S E D E S I G N for W E S T E R N E R S @ L U G O T Y P E LU Y U luyu.co
39. C H I N E S E D E S I G N for W E S T E R N E R S @ L U G O T Y P E LU Y U luyu.co C H I N E S E D E S I G N for W E S T E R N E R S @ L U G O T Y P E LU Y U luyu.co
40. C H I N E S E D E S I G N for W E S T E R N E R S @ L U G O T Y P E LU Y U luyu.co C H I N E S E D E S I G N for W E S T E R N E R S @ L U G O T Y P E LU Y U luyu.co
41. C H I N E S E D E S I G N for W E S T E R N E R S @ L U G O T Y P E LU Y U luyu.co C H I N E S E D E S I G N for W E S T E R N E R S @ L U G O T Y P E LU Y U luyu.co
42. busy cluttered lots of links many flash banners images are small outdated C H I N E S E D E S I G N for W E S T E R N E R S @ L U G O T Y P E LU Y U luyu.co
43. C H I N E S E D E S I G N for W E S T E R N E R S @ L U G O T Y P E LU Y U luyu.co C H I N E S E D E S I G N for W E S T E R N E R S @ L U G O T Y P E LU Y U luyu.co
44. Why? Those websites are targeting most people who are still living with lower income. They like to see a lot of possibilities, choices & entertainment values to be explored. C H I N E S E D E S I G N for W E S T E R N E R S @ L U G O T Y P E LU Y U luyu.co
45. Why? Comparing with many Western countries, the ‘Internet’ was introduced later to China. For many Chinese people, it is still more of a place to find entertainment values rather than to perform tasks. C H I N E S E D E S I G N for W E S T E R N E R S @ L U G O T Y P E LU Y U luyu.co
46. It takes a lot of effort to type Chinese. “shi” C H I N E S E D E S I G N for W E S T E R N E R S @ L U G O T Y P E LU Y U luyu.co C H I N E S E D E S I G N for W E S T E R N E R S @ L U G O T Y P E LU Y U luyu.co
47. 3.4mb/s 3.8mb/s World average: 3.9mb/s World average: 3.8mb/s A K A M A I 2 0 1 3 A K A M A I 2 0 1 4 C H I N E S E D E S I G N for W E S T E R N E R S @ L U G O T Y P E LU Y U luyu.co C H I N E S E D E S I G N for W E S T E R N E R S @ L U G O T Y P E LU Y U luyu.co
48. Why? We are familiar with it, and have higher tolerance. But we don’t like it either! C H I N E S E D E S I G N for W E S T E R N E R S @ L U G O T Y P E LU Y U luyu.co
49. Thank you! Slide set in Freight Display Pro, Filson Pro, Source Han Sans CN, Source Han Sans TW C H I N E S E D E S I G N for W E S T E R N E R S @ L U G O T Y P E LU Y U luyu.co @lugotype