Wireframes de anatomía móvil en iOS y Android

Diseñar para mobile exige entender la anatomía de cada plataforma y pensar en componentes. Aquí se comparan iOS, Android y la web usando Twitter, y se propone un reto práctico con wireframes de baja fidelidad para entrenar enfoque, velocidad y claridad.

¿Qué cambia entre iOS, Android y web en diseño mobile?

Al diseñar para distintos sistemas (PlayStation, computadoras, Windows, iOS, Android), cada uno tiene particularidades. No verás los mismos componentes ni la misma distribución. Por eso, conviene observar el producto en paralelo y detectar diferencias en unidades de información y navegación.

• Los componentes varían por plataforma.
• En iOS faltan columnas laterales que sí están en desktop (como avatar con conteos y trends).
• iOS y Android se ven similares, pero cambia la navegación principal.
• La versión web en mobile (por ejemplo, en Safari) se parece más a Android.
• En computadora, la versión web debería acercarse a desktop por las diversas resoluciones.
• Diseñar pensando en que el producto se verá en pantallas y resoluciones distintas.

¿Dónde se ubica la navegación en iOS y Android?

• iOS: navegación abajo.
• Android: navegación arriba.
• Decisión clave para respetar expectativas y patrones del sistema.

¿Cómo alinear la versión web con desktop?

• En el navegador de computadora, la web debería parecerse a la versión desktop.
• Razón: habrá múltiples resoluciones y pantallas pequeñas donde verás la web.
• Mantener coherencia visual y funcional en contextos de navegador.

¿Qué componentes cambian entre plataformas?

• Desktop: columna izquierda con avatar y métricas, trends y paneles auxiliares.
• iOS: vista más acotada, sin esa columna.
• Web mobile en Safari: más cercana a Android que a iOS.

¿Cómo descomponer la interfaz de Twitter en componentes?

El primer reto consiste en tomar la app de Android de Twitter y descomponerla. Es decir, identificar todas las piezas y dibujarlas como wireframes de baja fidelidad: rápido, simple y sin detalles estéticos.

• Pensar en términos de componentes y jerarquías.
• Nombrar cada parte y aclarar qué contiene.
• Bocetar una sola pantalla para enfocarte en la anatomía.

¿Qué compone la navegación?

• Links principales.
• Acceso al menú.
• Título de la sección.
• Tabs cuando corresponda.
• Sistemas del dispositivo: back y acceso a apps abiertas.

¿Qué incluye la card de un tweet?

• Acciones: reply, retweet, fav, share.
• Contenido: avatar, nombre, usuario, texto, imagen.
• Control adicional: drop down o menú contextual.
• Ubicación típica: home con una entrada que agrupa contenido y acciones.

¿Cómo evitar redundancia en elementos repetitivos?

• La card se repite en el feed.
• Cuidar la distribución para que no sea intrusiva.
• Reducir tamaños de elementos que se repiten mucho.
• Buscar unificación visual sin perder claridad.

¿Qué habilidades practicar en el primer reto de wireframes?

Para avanzar, conviene ejercitar un pensamiento sistemático y ágil. El objetivo es comunicar estructura, no diseñar píxel perfecto.

• Identificar la anatomía multiplataforma y sus particularidades.
• Mapear navegación, acciones y contenido por componente.
• Trabajar wireframes de baja fidelidad y alta rapidez.
• Nombrar con precisión: navegación, tabs, card, drop down, links.
• Diseñar con foco en no redundancia y distribución clara.

¿Qué debes entregar y cómo?

• Descomposición de una aplicación que no sea Twitter.
• Hecha a mano, en papel.
• Subida al sistema de discusión de Platzi.
• Con dibujos claros y componentes etiquetados.
• Sin “trampas”: elige cualquier otra app.

¿Ya hiciste tu descomposición? Comparte tus wireframes y comenta qué decisiones tomaste para la navegación, la card y la distribución en tu plataforma objetivo.