UX / UI · 设计

Concevoir pour
la façon dont la Chine navigue chaque jour.

Des sites WordPress que le public chinois reconnaît comme les siens. Pensés mobile d’abord, ancrés dans la culture locale, bâtis autour des plateformes qui font tourner le Web chinois.

Lancer un projet de design Voir le système →
home-mobile.fig
375 × 812
Maquette d’accueil mobile d’un site WordPress chinois : accents rouges, QR code WeChat et numéro ICP en pied de page
70%+
Part du trafic mobile en Chine
6
Navigateurs passés au crible
WeChat
Intégration native
ICP
Conformité dès la conception

Le problème

Pourquoi le design occidental
déraille en Chine.

Une entreprise fait tourner son site WordPress sur son marché d’origine, l’ouvre en Chine, et voit le taux de rebond grimper en flèche. Le site reste techniquement irréprochable, mais aux yeux d’un visiteur de Shanghai ou de Chengdu, quelque chose cloche.

Les internautes chinois n’ont pas grandi sur le même Web. Leur façon de naviguer, la masse d’informations qu’ils s’attendent à saisir d’un seul regard, tout cela leur vient de WeChat, de Taobao et de Douyin.

Un langage visuel qui convertit à Chicago doit être repensé de fond en comble pour toucher Chongqing.

Comparaison sur deux mobiles : à gauche, un site occidental épuré ; à droite, un site chinois dense, avec QR WeChat et repères de confiance
Style occidental
Épuré, peu engageant
Style chinois
Dense, taillé pour convertir

Leçons de terrain

Six choses que la Chine
nous a apprises sur le design.

A.01 à A.06 / Règles UX chinoises

A.01

La couleur parle

Le rouge dit la chance et l’élan. L’or dit le prestige. Le blanc seul évoque le deuil, alors nous le posons toujours en regard d’accents francs.

A.02

La densité rassure

Une page bien remplie au-dessus de la ligne de flottaison met l’internaute chinois en confiance. Trop d’air, et le site paraît inachevé, parfois même fuyant.

A.03
ICP 沪B2-2024
0123456号
营业
执照

La confiance se joue dans les détails

Numéro ICP, licence d’entreprise, badges officiels : le pied de page reste leur place attendue. Un QR code remonté au-dessus de la ligne de flottaison fait, lui, beaucoup pour la crédibilité.

A.04
微信

WeChat fait partie des fondations

QR codes, liens vers les Mini Programs, points de partage, identifiants du service client : autant d’éléments à traiter comme les fondations du site, au même titre que la navigation principale.

A.05
中
Aa

La typographie pèse autant que les mots

PingFang SC, Noto Sans SC ou Source Han se marient à Inter ou aux polices système. L’interlettrage et l’interligne y suivent des règles bien différentes de celles des langues latines.

A.06

La barre du bas fait office de bouton d’accueil

Sur le Web mobile chinois, la barre de navigation fixée en bas d’écran tient lieu de bouton d’accueil universel. Cinq cibles tactiles, toujours visibles, toujours à portée de pouce.

Notre prestation

Quatre disciplines,
un même résultat.

/ Recherche

Recherche utilisateur

Nous observons comment votre public navigue vraiment en Chine, nous jaugeons les concurrents locaux comme étrangers, et nous traçons des parcours qui démarrent là où l’internaute chinois commence sa journée : sur Douyin, WeChat ou Baidu.

/ Architecture

Architecture de l’information

Le lecteur chinois préfère les pages denses : plus de liens apparents, plus de texte, plus d’options dès le premier écran. Nous donnons cette profondeur au contenu, sans pour autant le rendre illisible pour le siège.

/ UI

Design visuel

Des maquettes pensées d’abord pour le mobile, sur les appareils que l’on utilise vraiment en Chine. Une couleur chargée de sens, une typographie qui respecte les caractères, et les signaux de confiance (QR WeChat, numéro ICP, licence d’entreprise) que le consommateur chinois vérifie avant d’agir.

/ Système

Système de design Gutenberg

Nous concevons directement dans Gutenberg : blocs sur mesure que vos équipes éditoriales manient sans développeur, composants qui garantissent la cohérence visuelle, gabarits modifiables sans la moindre compétence technique.

Le cœur du système

Des tokens documentés
jusqu’au moindre détail.

Chaque design que nous livrons vient avec son système. Les tokens de couleur, de typographie et d’espacement passent de Figma à Gutenberg sans rien perdre en route.

/ Couleur

5 / tokens
  • Rouge porte-bonheur #E11D2E
    Chance, énergie, passage à l’action
  • Orange de marque #F25F29
    Vitalité, accent
  • Vert de confirmation #52C41A
    Confirmation, WeChat
  • Encre #1F1F1F
    Titres, points d’ancrage
  • Nuage #FAFAFA
    Fond, jamais seul

/ Typographie

PingFang · Inter
  • H1
    32px
    中文标题 Titre principal
  • H2
    24px
    副标题 Sous-titre de section
  • Body
    16px
    正文段落 Corps de texte
  • Caption
    12px
    辅助说明 Légende, métadonnée

/ Espacement

Échelle base 4
  • 4 · XS
  • 8 · S
  • 16 · M
  • 24 · L
  • 32 · XL
  • 48 · 2XL
Tout l’espacement part d’une base de 4 px.
Le rythme vertical se cale sur 8 px.

Système de design · passation

Dessiné dans Figma,
livré prêt à coder.

  • Une bibliothèque de composants calée sur la typographie chinoise
  • Un système de tokens : couleur, espacement, échelle typographique
  • Des maquettes filaires mobile et bureau pour chaque page clé
  • Des spécifications d’interaction que vos développeurs reprennent telles quelles
WordPress CN / Bibliothèque de composants
Plan de travail Figma : la bibliothèque de composants WordPress conçue pour le public chinois

Notre façon de travailler

Un parcours clair,
du cadrage à la passation.

P.01 à P.06 / Déroulé de mission

P.01

Cadrage

Nous partons de votre charte de marque, de vos objectifs et du public que vous visez en Chine.

P.02

Recherche et veille

Cartographie de la concurrence, usages locaux, codes de design propres au marché. C’est la phase des fondations, et nous lui accordons tout le temps qu’elle mérite.

P.03

Maquettes filaires

Nous confrontons la structure des pages et les parcours aux attentes des internautes chinois. Reprendre un filaire coûte infiniment moins cher qu’une maquette finalisée.

P.04

Design visuel et itérations

Maquettes haute fidélité et allers-retours jusqu’à ce que le design tienne la route, pour la marque mondiale comme pour le marché chinois.

P.05

Système et passation

Composants, règles de style et spécifications d’interaction réunis dans un seul livrable, pour que vos développeurs avancent sans rien avoir à deviner.

P.06

Recette et validation

Tests sur les navigateurs et appareils chinois. Un site superbe à Londres peut voler en éclats sur UC Browser ou QQ Browser, encore très présents sur le continent.

Who Is This For?

À qui s’adresse cette page

Partir de zéro

Vous lancez un site WordPress pour la Chine et voulez asseoir le bon design dès le départ.

Un site en ligne qui convertit mal

Votre site chinois tourne, mais les conversions ne suivent pas, et vous soupçonnez le design d’y être pour quelque chose.

Pages de campagne

Vos équipes marketing ont besoin de pages taillées pour les consommateurs chinois, sans cet air de « page traduite » qui se repère au premier coup d’œil.

Adapter un design international

Vous avez un solide système de design international et cherchez le bon partenaire pour le porter sur le marché chinois.

Parlons de votre projet

Concevoir pour la Chine,
cela se mesure à l’usage réel du site.

L’esthétique vient après, au service de cet usage. Si cette approche parle à votre projet, prenons le temps d’en discuter.

Lancer un projet de design Services contenu chinois