A.01
El color transmite un significado
El rojo evoca la suerte y la energía. El dorado, la gama alta. El blanco, por sí solo, arrastra una pesadez fúnebre: lo combinamos siempre con acentos marcados.
UX / UI · 设计
Diseñar para
cómo navega el público chino
cada día.
Experiencias WordPress que le suenan nativas al lector chino. Ancladas en la cultura, pensadas primero para el móvil y construidas alrededor de 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
se viene abajo en China.
Una empresa hace funcionar su sitio WordPress en casa, lo despliega en China y la tasa de rebote se dispara. En lo técnico, el sitio sigue impecable, pero algo suena falso a quien lo consulta desde Shanghái o Chengdú.
El internauta chino no creció en la misma web. Su forma de navegar y el volumen de información que espera abarcar de un vistazo llevan la huella de WeChat, de Taobao y de 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
Conocimiento de campo
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 internauta chino. Los diseños muy aireados se leen a menudo como inacabados, a veces incluso como evasivos.
A.03
ICP 沪B2-2024
0123456号
0123456号
营业
执照
执照
La confianza se aloja en los márgenes
Número ICP, licencia de empresa, sellos oficiales. El pie de página sigue siendo el lugar habitual. Los códigos QR colocados en la parte alta de la pantalla refuerzan mucho la credibilidad que se percibe.
A.04
微信
WeChat funciona como infraestructura
Códigos QR, enlaces a Mini Programs, puntos de compartición, identificadores de atención al cliente. Conviene tratarlo como una 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 pilas del sistema. El interletrado y el interlineado obedecen a reglas distintas de las de las lenguas latinas.
A.06
La barra inferior hace de botón de inicio
La barra de navegación pegada abajo cumple, en la web móvil china, el papel de un botón de inicio universal. Cinco objetivos táctiles, siempre visibles, siempre al alcance del pulgar.
Nuestro servicio
Cuatro disciplinas.
Un resultado único.
/ Investigación
Investigación de usuarios
Trazamos cómo navega de verdad su público en China, medimos a los competidores locales e internacionales y diseñamos recorridos que arrancan justo donde el internauta chino empieza su día: Douyin, WeChat o Baidu.
/ Arquitectura
Arquitectura de la información
El lector chino prefiere las páginas densas. Más enlaces a la vista, más texto, más opciones desde la primera pantalla. Estructuramos el contenido con la profundidad que se espera, sin volverlo ilegible para la sede.
/ UI
Diseño visual
Maquetas pensadas primero para el móvil, sobre los aparatos que se usan de verdad en China. Color simbólico, tipografía que respeta los caracteres, señales de confianza (QR de WeChat, número ICP, licencia de empresa) que el consumidor chino comprueba antes de actuar.
/ Sistema
Sistema de diseño Gutenberg
Diseñamos directamente en Gutenberg. Bloques a medida que sus equipos de contenido manejan sin recurrir a un desarrollador, componentes que mantienen la coherencia visual y plantillas editables sin la menor competencia técnica.
Dentro del sistema
Tokens documentados
hasta el último detalle.
Cada diseño que entregamos viene con su sistema. Los tokens de color, de tipografía y de espaciado pasan de Figma a Gutenberg sin la menor deformación.
/ Color
5 / tokens- Rojo propicio #E11D2ESuerte, energía, acción
- Naranja de marca #F25F29Vitalidad, acento
- Verde de validación #52C41AValidació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 aprovechan al instante
Nuestra forma de trabajar
Un recorrido claro
del encuadre a la entrega.
P.01 a P.06 / Desarrollo del proyecto
P.01
Encuadre inicial
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
Mapa de la competencia, patrones de uso locales y principios de diseño propios del mercado. Es la fase de cimientos, y le dedicamos el tiempo que pide.
P.03
Wireframes
Estructura de las páginas y recorridos contrastados con lo que espera el internauta chino. Rehacer un wireframe cuesta muchísimo menos que rehacer una maqueta acabada.
P.04
Diseño visual e iteraciones
Maquetas de alta fidelidad y 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
Componentes, reglas de estilo y especificaciones de interacción reunidos en un único entregable, para que sus desarrolladores avancen sin tener que adivinar nada.
P.06
Pruebas y validación
Pruebas en los navegadores y dispositivos chinos. Un sitio espléndido en Londres puede caer a plomo en UC Browser o QQ Browser, aún muy extendidos en el continente.
Who Is This For?
A quién se dirige esta página
Empezar desde cero
Está construyendo un sitio WordPress para China y quiere asentar el diseño correcto 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
Cuenta con un sistema de diseño internacional sólido y busca al interlocutor capaz de trasladarlo al mercado chino.
Hablemos de su proyecto
Diseñar para China se mide
por el uso real que el visitante hace del sitio.
La estética viene después, como apoyo de ese uso. Si este planteamiento encaja con su proyecto, dediquemos un rato a comentarlo.