Diseñando apps para móviles
Índice de contenidos

Ejemplos a seguir

Como vale la pena aprender de aquellos que ya recorrieron el camino, hemos seleccionado tres apps de cada sistema operativo que para nosotros, por diferentes motivos, han hecho las cosas bien.

Aprende a diseñar design systems
Un curso online en Doméstika para que sigas creciendo como diseñador/a.
Más información

Android

500PX1

La app de la comunidad de fotógrafos hizo bien los deberes. Además de ofrecer múltiples medios de registro y de manera clara, ha sabido trasladar la cualidad de «exploración» de esta plataforma. Visualmente es una aplicación muy cuidada, donde el uso de colores oscuros para los controles ayuda a realzar las fotografías.

FIGURA 13.1 Pantallas de acceso, de detalle de una foto y de comentarios.
FIGURA 13.2 Pantalla de categorías.

Google Drive

Este servicio de almacenamiento y colaboración de documentos «en la nube» se centra en sus funciones principales, pero también ofrece características de edición de documentos, ideales para usuarios que cambian frecuentemente entre el ordenador de escritorio y el móvil, que no quieren perder esta capacidad.

FIGURA 13.3Menú tipo cajón, vista previa de archivos y edición de un documento.
FIGURA 13.4 Pantalla de lista de documentos.

The Guardian

El diario inglés hace uso extensivo de elementos nativos y, a la vez, aplica al pie de la letra su identidad corporativa, utilizando las cabeceras como el elemento más fuerte para comunicarla. Por otro lado, establece claras jerarquías en textos de lectura y no se olvida de añadir características de accesibilidad como el aumento del tamaño de las fuentes.

FIGURA 13.5Pantalla principal de noticias, detalle de una foto y configuración de tamaño de texto.
FIGURA 13.6 Detalle de una noticia.

iOS

National Parks

Tanto en iPhone como en iPad, la atención a los detalles de esta app de National Geographic es asombrosa. A lo largo de las pantallas, puede apreciarse un uso de texturas justificado, con transiciones que aportan valor al concepto. Por otro lado, las jerarquías en la composición son muy claras, lo que favorece la interpretación de los contenidos.

FIGURA 13.7Parques vistos como fotografías, como ubicaciones en un mapa, opciones de filtrado.
FIGURA 13.8 Detalle de un parque.

Google Maps

La aplicación que todos los usuarios de iPhone esperaron durante meses no defraudó. Desde el lanzamiento de esta app, Google ha demostrado su intención de establecer sus propias normas allí donde va. Nos gustó porque hace un uso consciente del espacio, en cada pantalla dispone los elementos en relación directa a las necesidades temporales, ocultando y destacando lo justo y necesario. Simple y robusta a la vez.

FIGURA 13.9 Pantalla principal de búsqueda, resultado con recorrido y pantalla de navegación
FIGURA 13.10Detalle de resultado con opciones.

Instapaper

Una de las pioneras alrededor de la idea de «leer después», la app de lectura de textos de Marco Arment está más que pulida y en ella todo gira en torno a su tarea principal: facilitar la lectura. Flexible en todo momento, es capaz de ocultar controles en situaciones que no los requieren o cambiar a «modo nocturno» para adaptarse a las condiciones de luz.

FIGURA 13.11 Menú principal, pantalla con opciones de lectura y en modo de lectura nocturna.
FIGURA 13.12 Lista de ítems marcados como favoritos.

Windows Phone

Spotify

El servicio de música por Internet ha sabido adaptarse a la propuesta de Windows Phone. Aplica su identidad sobre patrones como Panorama y Pivot Control como pocas. Un excelente equilibro entre funciones, identidad y consistencia con el sistema operativo.

FIGURA 13.13 Pantalla principal con Panorama, lista de canciones y opciones de reproducción de canción.
FIGURA 13.14 Pantalla de álbumes de un artista.

Twitter

De un vistazo podemos saber que se trata de la app de Twitter y eso no es poco. Han sabido dominar los puntos de contacto entre elementos nativos e identidad visual, sin perder de vista las guías propuestas por Microsoft. Un claro ejemplo de una aplicación centrada en el contenido.

FIGURA 13.15 Pantalla principal, detalle de un tweet con foto y de composición.
FIGURA 13.16 Detalle de un tweet

Tumblr

La plataforma de microblogging ha comprendido el entorno móvil y ha respondido con una app simple y eficaz. Manteniendo funciones conocidas por sus usuarios web, la aplicación hace foco en la exploración de material visual y la publicación de contenidos rápidamente.

FIGURA 13.17 Pantalla de inicial, selección de tipo de entrada nueva y nota de una entrada.
FIGURA 13.18 Exploración de contenidos.
Aprende a diseñar design systems
Un curso online en Doméstika para que sigas creciendo como diseñador/a.
Más información