Tipografía mobile: 4 tamaños para jerarquía clara

Ofrece una experiencia móvil sólida poniendo al usuario primero y manteniendo una coherencia visual con el sistema de diseño. Las decisiones de jerarquía tipográfica, espaciado y reutilización de componentes permiten acelerar el proceso sin sacrificar calidad, rendimiento ni legibilidad.

¿Cómo priorizar la experiencia del usuario en mobile sin sesgos personales?

Separarse de las preferencias propias es clave: el objetivo es dar la mejor experiencia posible a quien usará el producto. Mantener presente a la persona usuaria durante todo el proceso guía decisiones como simplificar elementos, optimizar carga y reforzar la claridad visual.

• Diseñar con el dispositivo a mano para validar en contexto real.
• Probar brillo en celular y en computadora para asegurar legibilidad en distintas luces.
• Recordar el uso en la calle, bus o metro: condiciones cambiantes obligan a testear.

¿Por qué diseñar directamente en el dispositivo objetivo?

Trabajar con el tamaño real del equipo disponible (por ejemplo, iPhone X) ayuda a decidir anchos, tamaños y espacios con precisión. Si se usa otro iPhone u otro teléfono, ajustar el lienzo al ancho del dispositivo. En mobile son comunes anchos desde 320 a 375 píxeles, por lo que algunas piezas podrían necesitar ajustes mínimos.

¿Qué herramientas facilitan validar el diseño?

Usar Sketch y su app Mirror permite previsualizar en el celular lo que se diseña en la computadora. Ver y tocar la interfaz acelera iteraciones y reduce errores.

¿Qué decisiones de jerarquía, espaciado y color mejoran la claridad?

Un buen diseño usa pocos tamaños, pocos colores y espaciado consistente. Aquí se optó por una escala tipográfica clara: 24, 20, 16 y 14. Se jerarquiza así el orden de lectura: título o ubicación actual, nombres de viajes, tabs y textos, y finalmente datos menos importantes.

• Márgenes laterales sugeridos: 15 píxeles (ajustables a criterio).
• Escala tipográfica corta: 24, 20, 16, 14 para claridad inmediata.
• Botones con altura de 36 para consistencia táctil.
• Pocos colores: el sistema se percibe unificado y fácil de mantener.

¿Cuándo reducir elementos gráficos como avatares?

En home, se eliminan avatares para mejorar rendimiento y priorizar el contenido relevante. Cargar imágenes en mobile puede ralentizar, por lo que se evalúa su verdadero valor informativo frente al costo de carga.

¿Cómo marcar estados y acciones sin ruido visual?

Se refuerza el contraste entre tabs activo e inactivo y se añaden chevrones a la derecha de cada ítem para señalar que son elementos tapeables. Esto mejora la comprensión de navegación sin agregar complejidad.

¿Cómo escalar componentes entre desktop y mobile con el menor trabajo?

La clave es reutilizar patrones: estilos, tamaños, colores y estructuras. Pensar en escalabilidad y componentes asegura que pantallas diferentes se sientan del mismo “mundo”.

• Mantener el mismo estilo de títulos y datos secundarios entre vistas.
• Respetar márgenes y patrones de listas al cambiar de contexto.
• Evitar introducir variaciones innecesarias que compliquen desarrollo.

¿Qué pantallas y flujos se optimizaron?

• Home: enfoque en títulos y nombres de viajes. Menos imágenes para carga rápida.
• Viaje individual: nombre del viaje con mayor peso; avatares visibles aquí; tabs para destinos y planes, y orden por país al mismo nivel.
• Ciudad: énfasis visual en hospedaje con un tono violeta ya usado en encabezados; se mantienen componentes y tamaños.
• Plan: sin mapa en mobile; se respeta la naturaleza del side drawer con un panel desde el costado para coherencia de interacción y menor esfuerzo de desarrollo.

¿Cómo mantener coherencia al cambiar de contexto?

Se reutiliza el tamaño de títulos de “datos secundarios” en diferentes vistas para alinear la semántica visual. Los mismos estilos para autor, colores y espaciados se conservan, adaptando solo lo necesario al espacio reducido.

¿Qué prácticas aceleran el proceso sin perder calidad?

• Iterar rápido asumiendo muchas revisiones pequeñas.
• Validar constantemente en el dispositivo real.
• Diseñar desde lo que ya existe en desktop y adaptarlo a mobile.
• Coordinar con un dev para aclarar dudas técnicas y reducir retrabajo.

¿Te gustaría compartir cómo organizarías tu jerarquía tipográfica o qué patrones reutilizarías al pasar de desktop a mobile?