Diseño de apps iOS y Android: HIG y Material Design sin perder tu marca

Cuando enseñamos un prototipo de app a un cliente, suelo pedirle que lo pruebe en su propio teléfono y sin explicarle nada. Casi siempre ocurre lo mismo en algún momento: la persona con Android intenta volver atrás con el gesto del sistema y la app no responde como esperaba, o la persona con iPhone busca la flecha de volver arriba a la izquierda y no la encuentra. Son detalles mínimos que rompen la sensación de que la app «funciona bien», aunque la persona no sepa decir por qué.

Ahí está la clave del diseño de apps móviles. Quien usa un iPhone o un Android lleva años aprendiendo cómo se comporta su teléfono: dónde está volver, cómo se ve un interruptor, qué pasa al deslizar desde el borde. Apple lo recoge en sus Human Interface Guidelines (HIG) y Google en Material Design. Una app que respeta esas costumbres se aprende sola. Una que las ignora obliga a pensar.

Y, al mismo tiempo, nadie quiere una app que parezca la de ajustes del sistema. La marca tiene que estar ahí, reconocible. Esta guía va de ese equilibrio: qué conviene respetar de cada plataforma, dónde tienes libertad total y cómo organizar el diseño para mantener una sola marca en dos sistemas.

01Dos sistemas, dos filosofías

Apple y Google comparten muchos principios, pero los expresan de forma distinta, y conocer su carácter ayuda a entender sus reglas.

Las Human Interface Guidelines de Apple giran en torno a la claridad, la deferencia al contenido y la profundidad. La interfaz se aparta para que el contenido sea protagonista: barras translúcidas, mucho espacio, tipografía como principal herramienta de jerarquía. Con iOS 26, Apple presentó Liquid Glass, un material translúcido que refuerza esa idea de capas que flotan sobre el contenido. Las HIG son guías amplias, con mucho criterio y relativamente pocas especificaciones cerradas.

Material Design nació en 2014 como un lenguaje basado en la metáfora del papel y la tinta, y en su tercera versión, Material 3 (conocida también como Material You), se volvió mucho más personalizable: color dinámico extraído del fondo de pantalla de la persona, formas más redondeadas, componentes con más variantes. En 2025 Google amplió el sistema con Material 3 Expressive, con más movimiento basado en muelles y más libertad en formas y tamaños. Material es un sistema muy especificado: tokens, medidas y estados documentados al detalle, con librerías listas para usar.

Dicho de forma práctica: las HIG te dan un carácter a respetar; Material te da un sistema que puedes tematizar.

02Lo que conviene respetar: las convenciones que el usuario ya domina

No todas las convenciones pesan igual. Estas son las que, en nuestra experiencia, más se notan cuando se rompen.

Navegación y volver atrás

En iOS, volver es la flecha arriba a la izquierda con el nombre de la pantalla anterior y el gesto de deslizar desde el borde izquierdo. En Android, volver es un gesto o botón del sistema, y desde Android 13 existe el predictive back, que muestra una vista previa de a dónde vas a volver mientras deslizas. Tu app tiene que responder a ambos de forma natural.

La navegación principal suele ir en una barra inferior en las dos plataformas, con entre tres y cinco destinos: la tab bar en iOS y la navigation bar en Android. Lo que cambia es el aspecto y algunos comportamientos, como que en iOS tocar de nuevo la pestaña activa suele devolverte al principio de esa sección. Lo desarrollamos a fondo en la guía de navegación en apps.

Controles del sistema

Interruptores, selectores de fecha, hojas de acciones, diálogos de confirmación, menús contextuales y el teclado. Son los elementos que la persona usa en todas sus apps, y personalizarlos en exceso solo consigue que parezcan raros. Lo que funciona es usar los nativos o versiones muy fieles y aplicarles el color de marca.

Áreas táctiles y márgenes seguros

Apple recomienda áreas táctiles de al menos 44 × 44 puntos y Material, de 48 × 48 dp. Puntos (pt) y píxeles independientes de densidad (dp) son unidades lógicas: equivalen a píxeles en una pantalla de referencia y el sistema las multiplica según la densidad real del dispositivo. Diseñar en estas unidades, y no en píxeles físicos, es lo que permite que la app se vea igual en un teléfono económico y en uno de gama alta.

Respeta también las zonas seguras: la isla dinámica o la muesca arriba, el indicador de inicio abajo en iPhone, la barra de gestos en Android. Ningún botón importante debería quedar debajo de ellas.

Texto dinámico y accesibilidad

Las dos plataformas permiten que la persona aumente el tamaño de letra del sistema, y mucha gente lo hace. iOS lo llama Dynamic Type; Android permite escalar la fuente y, desde Android 14, hasta un 200 % con escalado no lineal para que los titulares no crezcan tanto como el texto pequeño. Una app que respeta ese ajuste es más usable para todos; una que lo ignora deja fuera a buena parte de sus usuarios mayores. Diseña al menos una pantalla clave con el tamaño de texto al máximo y comprueba que nada se corta.

03Dónde vive la marca: todo lo que sí puedes personalizar

Respetar las convenciones no significa renunciar a la identidad. La marca tiene muchísimo espacio, y en estos territorios es donde una app se vuelve memorable.

• →Color. El color de acento en botones, enlaces, estados activos e iconos seleccionados. En Android puedes decidir si adoptas el color dinámico del sistema o mantienes el tuyo; para la mayoría de marcas recomendamos mantener el propio en los elementos clave.
• →Tipografía en titulares. La de marca en encabezados, cifras destacadas y pantallas de bienvenida, combinada con la del sistema en texto corrido y controles.
• →Iconografía. Un juego de iconos propio, coherente en grosor y estilo, dentro de las convenciones de forma (una casa sigue siendo una casa).
• →Ilustración y fotografía. Estados vacíos, onboarding, celebraciones. Es donde más carácter cabe.
• →Movimiento. La forma en que se abren las tarjetas, cómo se confirma una acción, la animación de carga.
• →Componentes de contenido. Tarjetas, listas, fichas de producto, cabeceras. No son controles del sistema y pueden ser completamente tuyos.
• →Tono de los textos. El microcopy dice tanto de la marca como el color.

Una forma útil de pensarlo: el sistema pone el marco (navegación, controles, gestos) y tu marca pinta el cuadro (contenido, color, imagen, voz). Cuando el marco es familiar, el cuadro luce más.

Clave: la app ideal se siente nativa en cada teléfono durante el primer minuto y reconociblemente tuya a partir del segundo.

04Cómo organizar un diseño multiplataforma

La mayoría de apps de pymes y startups se construyen hoy con un solo código para las dos plataformas, con Flutter o React Native, o como aplicación web progresiva si el caso lo permite. Si aún estás decidiendo ese punto, la guía sobre web app, app nativa o híbrida te ayuda a elegir. Sea cual sea la tecnología, el diseño se organiza mejor en tres capas.

1. 01Capa común. Marca, tokens de color, tipografía, espaciado, iconos, ilustración, componentes de contenido y arquitectura de pantallas. Es la mayor parte del trabajo.
2. 02Capa adaptada. Componentes que existen en las dos plataformas pero con apariencia o comportamiento distinto: barra superior, navegación inferior, interruptores, diálogos, selectores, hojas inferiores.
3. 03Capa específica. Lo que solo existe en una: el FAB en Android, los widgets de pantalla de inicio, las Live Activities en iOS, los atajos de cada sistema.

En Figma lo resolvemos con un componente por elemento y una propiedad de variante «plataforma», de forma que cada pantalla se puede ver en versión iOS o Android con un clic. Así el equipo de desarrollo sabe exactamente qué ramificar y qué es idéntico.

Diseñar las dos versiones de las pantallas críticas

No hace falta duplicar todas las pantallas, pero sí las que concentran convenciones: la navegación principal, un formulario completo, un flujo con confirmación y cualquier pantalla con selector de fecha o menú de acciones. Con esas cinco o seis bien resueltas, el resto se deduce.

05El icono de la app y la ficha en la tienda

El icono es la cara de tu app entre otras cuarenta en la pantalla de inicio, y cada plataforma lo trata de forma diferente.

• →iOS. Se diseña un cuadrado de 1024 × 1024 px sin transparencia y el sistema aplica la máscara de esquinas redondeadas. Desde iOS 18 conviene preparar también variantes oscura y tintada, y con iOS 26 Apple incorporó Icon Composer para construir iconos por capas compatibles con Liquid Glass.
• →Android. Los iconos adaptativos se componen de dos capas (primer plano y fondo) de 108 × 108 dp, de las que solo se ve la zona central y el fabricante decide la forma de la máscara: círculo, cuadrado redondeado, gota. Lo importante tiene que caber en el área segura central. Además, desde Android 13 existe el icono temático monocromo.

El símbolo de la marca suele ser el punto de partida, simplificado para leerse a tamaño pequeño, igual que pasa con el favicon de una web. Las capturas de la tienda son otra pieza de diseño en sí: cuentan en pocas imágenes qué hace la app y por qué merece la pena, y conviene diseñarlas con la misma intención que una landing.

06Checklist antes de pasar a desarrollo

1. 01La navegación principal tiene entre tres y cinco destinos y funciona con los gestos de volver de cada sistema.
2. 02Todos los elementos táctiles alcanzan 44 pt o 48 dp de área.
3. 03Los textos de lectura escalan con el tamaño de letra del sistema y las pantallas clave se han probado al máximo.
4. 04Los colores de texto sobre fondo cumplen al menos 4,5:1 de contraste, y los iconos y bordes necesarios, 3:1.
5. 05Hay versión clara y oscura de los colores, revisadas por separado.
6. 06Las zonas seguras están respetadas en todas las pantallas.
7. 07Cada componente indica si es común, adaptado o específico de plataforma.
8. 08Los estados vacíos, de carga, de error y sin conexión están diseñados.
9. 09El icono existe en todas las variantes que piden las tiendas.
10. 10Las interacciones por gesto tienen siempre una alternativa visible con un botón.

Con esta lista cumplida, la mayor parte de las dudas del equipo técnico ya están resueltas antes de empezar, y la transición a código fluye mucho mejor, como contamos en la guía de handoff de diseño a desarrollo.

07Una sola marca, dos casas

Diseñar para iOS y Android es un poco como adaptar una marca a dos idiomas: el mensaje es el mismo, la gramática cambia. Cuando se entiende así, las guías de Apple y Google dejan de ser una limitación y se convierten en un aliado, porque hacen que la persona se sienta cómoda desde el primer toque y deje toda su atención para lo que tu producto le ofrece.

En SIMA diseñamos y desarrollamos apps con esa mirada doble, desde la identidad hasta el código, en nuestro servicio de desarrollo web y apps con IA. Si tienes una app en mente o una que quieres que se sienta más tuya, escríbenos y lo hablamos.