Cómo adaptar diseño desktop a mobile

Convertir un diseño de desktop a mobile puede ser simple y efectivo si priorizas tipografía, espaciado y una navegación clara. Aquí verás cómo pasar del boceto en papel a una UI funcional en Sketch, optimizando la lectura, el rendimiento y la coherencia visual entre plataformas.

¿Cómo adaptar un diseño desktop a mobile con UI consistente?

La transición comienza repensando la home: logo con mayor peso, botón de call to action para crear viaje y listado de viajes en una sola columna. Se cuestiona el menú hamburguesa y se evalúa resolver la navegación en la misma vista con tabs para simplificar.

• Crear un nuevo artboard de iPhone X en Sketch y usar Mirror para vista en tiempo real.
• Respetar el lienzo más pequeño: una sola columna y márgenes laterales de 15 px.
• Marcar el área segura del notch: 30 px arriba para que nada quede cortado.
• Ajustar jerarquías: el logo más fuerte (≈24) que el título del viaje (≈20), y texto base en 16 para legibilidad.
• Colocar el avatar a la derecha para ganar espacio y claridad.

¿Por qué la tipografía guía la interfaz?

La tipografía es la “columna vertebral” de la UI. Elegir tamaños y pesos define la lectura y la jerarquía visual.

• Texto base en 16: se lee bien en pantalla chica.
• Título a 20 para no desproporcionar con el contenido.
• Evitar múltiples familias: se descarta una tercera tipografía y se prioriza usar solo Source Sans Pro en mobile para mejorar tiempos de carga.

¿Qué márgenes y guías usar en mobile web?

El orden visual nace de guías simples y consistentes.

• 15 px como regla de espaciado lateral y vertical principal.
• Líneas divisorias de 1 px con gris al 50% para separar sin ruido.
• Ajustes “a ojo” cuando lo métrico no se ve balanceado: el diseño también es criterio visual.

¿Cómo definir navegación sin menú hamburguesa?

Si el objetivo es acceso rápido, los tabs pueden reemplazar el menú hamburguesa.

• Dos tabs: “viajes” y “explorar”, cada uno con 50% de ancho y texto centrado.
• Estado activo con semi bold y color negro, más un indicador adicional (subrayado o línea oscura).
• Evitar que el tamaño de los tabs compita con el contenido: 16 funciona bien.

¿Qué decisiones de color, tipografía y performance mejoran mobile?

Definir el sistema visual temprano acelera el trabajo y mantiene coherencia con desktop sin perder rendimiento.

• Paleta con tres grises agregados a los document colors para uso consistente.
• Fondo: se prefiere blanco para limpieza y contraste con la navegación.
• Mantener coherencia con desktop: que se perciba el mismo mundo en ambas pantallas.
• Menos familias tipográficas (por ejemplo, usar solo Source Sans Pro frente a Noto Serif en mobile) para cargas más rápidas.

¿Cómo señalar estados y mantener orden en Sketch?

Pequeños detalles elevan la claridad y facilitan el trabajo en equipo.

• Indicadores de estado activos visibles: peso, color y línea extra en tabs.
• Consistencia de espaciado: mantener múltiplos de los 15 px definidos.
• Orden de capas y grupos claro: el orden se aprecia y acelera cambios.
• Verificaciones rápidas: duplicar módulos para comprobar ritmos y proporciones.
• Revisión final sin apuro: márgenes, tonos, interlineado y tamaños deben “sentirse bien” para mobile.

Pon a prueba lo aprendido: decide si usas tabs o menú hamburguesa, ajusta tamaños y colores, y verifica que la versión mobile web respire la misma identidad que desktop. ¿Qué decisiones tomarías tú y por qué? Comparte tus elecciones y feedback en los comentarios.