A.01
El color comunica significado
El rojo evoca suerte y energía; el dorado, gama alta. El blanco, por sí solo, resulta fúnebre, así que siempre lo combinamos con acentos marcados.
UX / UI · 设计
Diseñar para el público chino
tal como navega
cada día.
Experiencias WordPress que el usuario chino siente como propias. Ancladas en su cultura, pensadas primero para el móvil y diseñadas en torno a las plataformas que mueven internet en China.
home-mobile.fig
375 × 812
Primero el móvil
WeChat + ICP
70 %+
Tráfico móvil en China
6
Navegadores probados
WeChat
Integración nativa
ICP
Conforme desde el diseño
El problema
Por qué el diseño occidental
fracasa en China.
Una empresa tiene su sitio WordPress funcionando en su mercado de origen, lo lanza en China y la tasa de rebote se dispara. En lo técnico sigue impecable, pero algo suena falso a quien lo abre desde Shanghái o Chengdú.
El usuario chino no aprendió a navegar en la misma red. Su forma de moverse por una página y la cantidad de información que espera ver de un vistazo llevan la huella de WeChat, Taobao y Douyin.
Un lenguaje visual que convierte en Chicago necesita repensarse para hablarle a Chongqing.
Estilo occidental
Aireado, poca interacción
Estilo chino
Denso, eficaz en conversión
Experiencia sobre el terreno
Seis lecciones que China
nos enseñó sobre diseño.
A.01 a A.06 / Heurísticas UX China
A.02
La densidad transmite confianza
Las páginas densas en la parte alta de la pantalla tranquilizan al usuario chino. Un diseño muy despejado suele leerse como inacabado, a veces incluso como evasivo.
A.03
ICP 沪B2-2024
0123456号
0123456号
营业
执照
执照
La confianza está en los márgenes
El número ICP, la licencia de empresa y los sellos oficiales van en el pie de página, su lugar de siempre. Un código QR en la parte alta de la pantalla refuerza mucho la credibilidad percibida.
A.04
微信
WeChat funciona como infraestructura
Reúne códigos QR, enlaces a Mini Programs, botones para compartir y cuentas de atención al cliente. Conviene tratarlo como parte de la base del sitio, al mismo nivel que la navegación principal.
A.05
中 Aa
La tipografía cuenta tanto como las palabras
PingFang SC, Noto Sans SC o Source Han se combinan con Inter o con las fuentes del sistema. El interletrado y el interlineado siguen reglas distintas a las del alfabeto latino.
A.06
La barra inferior hace de botón de inicio
En la web móvil china, la barra de navegación fija abajo funciona como un botón de inicio universal. Ofrece cinco zonas táctiles, siempre visibles y siempre al alcance del pulgar.
Nuestro servicio
Cuatro disciplinas.
Un resultado único.
/ Investigación
Investigación de usuarios
Estudiamos cómo navega su público en China, analizamos a la competencia local e internacional y diseñamos recorridos que parten de donde el usuario chino empieza el día: en Douyin, WeChat o Baidu.
/ Arquitectura
Arquitectura de la información
El usuario chino prefiere las páginas densas: más enlaces a la vista, más texto y más opciones ya en la primera pantalla. Estructuramos el contenido con la profundidad que espera, sin que resulte ilegible para la sede central.
/ UI
Diseño visual
Maquetas pensadas primero para el móvil y para los dispositivos más extendidos en China. Combinamos color simbólico, una tipografía que respeta los caracteres y señales de confianza (QR de WeChat, número ICP, licencia de empresa) que el consumidor chino comprueba antes de decidirse.
/ Sistema
Sistema de diseño Gutenberg
Diseñamos directamente en Gutenberg. Creamos bloques a medida que sus equipos de contenido manejan sin recurrir a un desarrollador, componentes que mantienen la coherencia visual y plantillas que cualquiera puede editar sin conocimientos técnicos.
Dentro del sistema
Tokens documentados
hasta el último detalle.
Cada diseño que entregamos viene con su sistema. Los tokens de color, tipografía y espaciado pasan de Figma a Gutenberg sin deformarse.
/ Color
5 / tokens- Rojo propicio #E11D2ESuerte, energía, acción
- Naranja de marca #F25F29Vitalidad, acento
- Verde de confirmación #52C41AAprobación, WeChat
- Tinta #1F1F1FTitulares, anclaje
- Nube #FAFAFAFondo, nunca aislado
/ Tipografía
PingFang · Inter- H132px中文标题 Titular principal
- H224px副标题 Subtítulo de sección
- Body16px正文段落 Párrafo corriente
- Caption12px辅助说明 Pie o metadato
/ Espaciado
Escala base 4- 4 · XS
- 8 · S
- 16 · M
- 24 · L
- 32 · XL
- 48 · 2XL
Todo el espaciado parte de 4 px.
Ritmo vertical fijado en 8 px.
Ritmo vertical fijado en 8 px.
Sistema de diseño · entrega
Diseñado en Figma.
Entregado listo para programar.
- Biblioteca de componentes calibrada para la tipografía china
- Sistema de tokens: color, espaciado y escala tipográfica
- Wireframes de móvil y escritorio para cada página clave
- Especificaciones de interacción que sus desarrolladores pueden usar de inmediato
Nuestra forma de trabajar
Un recorrido claro
del planteamiento a la entrega.
P.01 a P.06 / Desarrollo del proyecto
P.01
Punto de partida
Partimos de su manual de marca, de los objetivos que persigue y del público que quiere alcanzar en China.
P.02
Investigación y análisis competitivo
Trazamos un mapa de la competencia, los patrones de uso locales y los principios de diseño propios del mercado. Es la fase que sienta los cimientos, y le dedicamos el tiempo que pide.
P.03
Wireframes
Definimos la estructura de las páginas y contrastamos los recorridos con lo que espera el usuario chino. Rehacer un wireframe cuesta muchísimo menos que rehacer una maqueta acabada.
P.04
Diseño visual e iteraciones
Producimos maquetas de alta fidelidad y abrimos ciclos de revisión hasta que el diseño funciona a la vez para la marca global y para el mercado chino.
P.05
Sistema y entrega
Reunimos componentes, reglas de estilo y especificaciones de interacción en un único entregable, para que sus desarrolladores avancen sin tener que adivinar nada.
P.06
Pruebas y validación
Probamos el sitio en los navegadores y dispositivos chinos. Una web impecable en Londres puede romperse en UC Browser o QQ Browser, todavía muy extendidos en China continental.
Who Is This For?
A quién se dirige esta página
Empezar desde cero
Está creando un sitio WordPress para China y quiere acertar con el diseño desde el primer día.
Un sitio en línea que apenas convierte
Su sitio chino funciona, pero las conversiones no acompañan. Sospecha que la causa está en el diseño.
Páginas de campaña
Sus equipos de marketing necesitan páginas calibradas para el consumidor chino, sin ese aire de «página traducida» que se nota al instante.
Adaptar un diseño internacional
Tiene un sistema de diseño internacional sólido y busca a quien sepa trasladarlo al mercado chino.
Hablemos de su proyecto
Diseñar para China se mide
por el uso que el visitante hace del sitio.
La estética viene después, al servicio de ese uso. Si este enfoque encaja con su proyecto, hablémoslo.