30 grandes ejemplos de diseño de aplicaciones móviles

Publicado: 2015-01-28

El diseño de aplicaciones móviles no es como el diseño web.

Claro que hay teoría del color, tipo de configuración y mantenimiento de cuadrículas, pero hay mucho más que considerar cuando cambia el dispositivo.

Para arrojar algo de luz sobre lo que se debe y no se debe hacer en el diseño de aplicaciones móviles, Tomas Laurinavicius presenta sus prácticas recomendadas al diseñar para dispositivos móviles.

Tomas Laurinavicius es un diseñador independiente y coautor de Mobile Design Book.

Cómo diseñar una aplicación

(con buenos ejemplos de diseño)

Entra Tomás:

En este artículo, me gustaría compartir algunos ejemplos de excelentes diseños de aplicaciones móviles. Específicamente, los elementos que se unen para hacer una gran aplicación.

Ejemplos de aplicaciones: la pantalla de inicio

Todos los usuarios de la aplicación verán la pantalla de inicio y durará un par de segundos, sin embargo, es crucial dar una buena primera impresión y establecer algunas expectativas.

Use una imagen de fondo que diga algo sobre la aplicación, hágala limpia y con una buena marca. Mantenga el tamaño de su pantalla de inicio al mínimo para reducir el tiempo de carga.

Pantallas de lanzamiento

Hiperlapso de Instagram y Yummly

Estados vacíos

Cuando un usuario descargue su aplicación por primera vez, no tendrá ningún dato para ver. Esto se llama una pantalla vacía.

En este punto, debe explicar el propósito de su aplicación y guiarlos para que usen su aplicación por primera vez. De lo contrario, se irán confundidos y es posible que nunca regresen.

Estados vacíos

Airbnb y Flipboard

Ejemplos de aplicaciones: pantallas de inicio de sesión

Olvídese de los nombres de usuario. Utilice una dirección de correo electrónico en su lugar.

Facilite el proceso de inicio de sesión dándoles la opción de iniciar sesión con las plataformas existentes. Dependiendo de tu audiencia, puede ser Google, Facebook o incluso LinkedIn.

Pantallas de inicio de sesión

SoundCloud y Foursquare

Ejemplos de aplicaciones: fuentes de actividades

Al diseñar un feed de actividad atractivo e inmersivo, tenga en cuenta el contexto y utilice los principios de ludificación.

Proporcione datos esenciales como fecha, hora y ubicación, si corresponde. Para hacerlo más parecido a un juego, use números, botones de llamada a la acción y pequeños íconos para hacer que la interfaz sea más atractiva.

Alimentaciones de actividad

Enjambre de Foursquare & Behance

Ejemplos de aplicaciones: pantallas de registro

Si su proceso de registro es complejo, los usuarios se irán.

Simplificarlo tanto como sea posible. Incluye solo la información necesaria e incluso sugiere usar otras redes que almacenan información de los usuarios como Facebook o Twitter.

Pantallas de registro

Spotify y Cirqle

Verificar

El proceso de pago es una característica difícil de diseñar en aplicaciones móviles.

Tiene que presentar mucha información de un vistazo y permitir cierta orientación hacia el siguiente paso. Priorice los datos y divídalos en partes que se puedan presentar en grupos.

Por ejemplo, la dirección de envío y la información de pago pueden formar dos grupos, precios y descuentos en otro grupo y así sucesivamente. Organice su proceso para no abrumar a sus clientes.

Verificar

Apunta y sigue comprando

Comentarios

Los comentarios son buenos para construir una comunidad o simplemente para mostrar a otros usuarios que vale la pena unirse a su aplicación.

Cuando se diseñan comentarios, la legibilidad y el contexto (es decir, imágenes de perfil, nombres y fechas) son los factores más importantes para proporcionar un ecosistema de comunidad de aplicaciones que parezca "en vivo".

Comentarios

Camino y Tripstr

Búsqueda

La búsqueda es una función esencial para el contenido generado por el usuario y otras aplicaciones con muchos datos.

Proporcione contexto y sugerencias inteligentes para mejorar la experiencia del usuario y deleitar al usuario. Agregar opciones de filtrado relevantes puede mejorar significativamente el proceso de búsqueda y conducir a la satisfacción del cliente.

Búsqueda

Bandeja de entrada de Gmail y Lovely

Intercambio

Compartir es una característica importante para cualquier aplicación, ya que permite a los usuarios correr la voz sobre su producto.

Facilite compartir su aplicación o su contenido agregando íconos obvios para compartir y permitiendo compartir rápidamente en diferentes redes.

Intercambio

Primavera y Jukely

Legibilidad

La legibilidad es complicada en dispositivos pequeños. Es fácil hacer una letra demasiado grande o demasiado pequeña.

Concéntrese en el contraste, el tamaño de letra y la altura de línea. Asegúrese de que su tipo tenga el tamaño óptimo y sea fácilmente legible. El texto negro sobre un fondo blanco es bueno.

Legibilidad

Legibilidad y Feedly

Navegación

La navegación es extremadamente importante para cualquier tipo de aplicación.

Haz que sea fácil y comprensible para los diferentes segmentos de tu audiencia. Use una copia simple para que los usuarios se familiaricen con la jerga de navegación de otras aplicaciones. Utilice íconos y espacios negativos para dar un poco de contexto a su navegación e incluya solo los enlaces necesarios.

Navegación

Facebook y LinkedIn conectados

Ajustes

Las pantallas de configuración a menudo se pasan por alto porque no son emocionantes, pero será una de las pantallas más utilizadas.

Use íconos, separe diferentes grupos de configuración con divisores o espacios negativos, y ayude a los usuarios a navegar rápidamente para decidir qué hacer a continuación. Además, proporcione opciones rápidas mediante el uso de botones de alternancia nativos para que los usuarios puedan guardar toques.

Ajustes

Marca de verificación 2 y YPlan

Notificaciones

Las notificaciones son la razón por la que los usuarios siguen volviendo a su aplicación.

Haga que estas notificaciones sean obvias pero no demasiado molestas. La gente necesita saber lo que está pasando, pero no quiere sentirse abrumada. Proporcione sutiles indicadores de color y números para representar las cosas que son nuevas.

Notificaciones

Gogobot y destacado

Mensajes

Las funciones de mensajería o chat también son una característica común. Al diseñar un sistema de mensajería, se trata de comunicación y contexto.

Optimice el tamaño de la letra para que los usuarios puedan leer mensajes más largos e incluya la fecha, la hora de publicación, la ubicación y otra información relevante.

La mensajería tiene que ver con multimedia hoy en día. Proporcione a los usuarios una opción para comunicarse agregando fotos, videos, sonidos, emoticonos y texto de la vieja escuela.

Mensajes

Facebook Messenger y Path Talk

Perfil

Muchas aplicaciones permiten a los usuarios crear una cuenta y almacenar historias o actividades en torno a ese perfil.

Ya se trate de redes sociales, compras o cualquier otra aplicación, es fundamental que las páginas de perfil sean claras y atractivas para los usuarios.

Enfatice la foto de perfil del usuario y su nombre. También proporcione información y estadísticas relevantes para que las personas puedan ver qué tan activo o respetable es el usuario.

Perfil

Anverso y Quora

Conclusión

Como puede ver en todas las aplicaciones que he enumerado, hay mucho que considerar y dominar al diseñar una aplicación ganadora.

Si bien cualquiera puede diseñar una aplicación, es importante contratar a un diseñador que tenga experiencia en el campo y pueda aplicar todo el conocimiento y las mejores prácticas.

Las pequeñas cosas pueden hacer o deshacer su aplicación. No arriesgue su tiempo y dinero contratando a alguien que no comprende las complejidades del diseño de una aplicación increíble.